Founders and Coders (apprenticeship)

Our Tech for Better project 👼

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

Deployed version here!

The final project of our 12 week full-stack coding bootcamp. We designed an built an e-commerce style site to streamline buying seeds by signposting and comparing seed providers.

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.

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

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: 📷