Skip to content

fac-23/lusan-tfb

Repository files navigation

The final project of our 12 week coding bootcamp.

Deployed version here!

Lusan-circle

Co-authored by Juliette, Milly, Orian and Miah.

What is Lusan?

An e-commerce style site to streamline buying seeds by signposting and comparing seed providers.

What did we build?

We focused on building the front-end of the site as the data is being prepared. We used next.js so the next development team will be able to incorporate a back-end.

Tech stack 💻

  • Next.js
  • React
  • Styled-components
  • Chance (to generate dummy data)
  • React-responsive-carousel
  • Cypress
  • Vercel deployment

Team members 🧑‍🤝‍🧑

  • Miah- Scrum Facilitator.
  • Milly - DevOps.
  • Orian - Quality Assurance.
  • Juliette - User Experience.

How to install 🛠️

  • Git clone https://github.com/fac-23/lusan-tfb
  • Run command npm install in terminal.
  • Start sever run command npm run dev.
  • Run cypress testing run command npm run test.

User Stories 👥

  • As a user I want to filter search results.
  • As a user I want to search seeds.
  • As a user I want to view my wishlist.
  • As a user I want to add products to my wishlist.
  • As a user I want to compare the same products from different providers.

Features 🌟

  • Filtering: filter by catgergory, condition, price.
  • Search bar.
  • Grid gallery.
  • Image carousel.
  • Provider comparison table.
  • Responsive mobile first design.
  • Add and delete from wishlist.
  • About us and contact us pages.
  • Burger menu.

Challenges 🏋️‍♀️

  • Building a front end only application with next.js to allow for a database to be implemented later.
  • Managing a merger conflict with a conflicting package lock.
  • Using react components with next.js, using the document to manage server side rendering.
  • Generating dummy data in a timely manner.
  • Managing shared state amongst several react compnents/pages, this was fixed by using context.
  • Creating dynamic routes with appropriate content.

Learning 🌱

  • Understanding of state management, using context to share state between next.js pages.
  • Communication with product owner.
  • Project scoping.
  • Use of local storage.
  • Next.js useRouter and understanding of dynamic routes.
  • Chance library to generate dummy data.
  • Incorporating npm libraries into project.

Future ideas 🔮

These were out of the scope of this project but with more time we would have implemented the following.

  • Move filters to a left sidebar on desktop view.
  • Attach database.
  • Transform wishlist into a shopping cart.
  • User authentication.

Screenshots: 📷

Screenshot 2022-04-01 at 10 53 19

Screenshot 2022-04-01 at 10 53 56

Screenshot 2022-04-01 at 10 54 21

Screenshot 2022-04-01 at 10 54 33

Screenshot 2022-04-01 at 10 54 47

Screenshot 2022-04-01 at 10 55 20

Screenshot 2022-04-01 at 10 55 54