Shop Website Project

Preview

Try the Website live here

About this project / Objectives

We needed to create a basic SPA Shop website. The requirements:

• at least two pages: home and shop
• header with cart items
• same navigation bar on all pages
• individual product cards
• fetch items for shop from a store API like FakeStore API or similar
• cart items, amount have to adjust when user adds items
• user should be able to input or adjust amount to add to cart
• test using the React Testing Library
• deploy correctly so the site routing is handled correctly for a SPA

Challenges I encountered during this project

I have left some notes in the repo and I will write some more here soon: about

TDD

Hierarchy for lifting state with Router

Testing with fetch / MSW

To-Do's

• mobile responsiveness
• make it more clear item goes into cart
• add delete button in cart
• possibly add edit option for amount in cart
• add tests after looking through similar projects for test ideas and practice
• accessibility
  • semantic elements
  • alt text
• consider local storage for returning visitors
• refactor elements and functions as needed
• add an actual error page
• add a loading page

image credits

• "woman holding brown leather bag in bokeh photography" by Alexandru Zdrobău via Unsplash
• "women's four assorted apparel hanged on clothes rack" by Alexandra Gorn via Unsplash
• "woman holding scarf with cross legs in between of gray concrete wall"freestocks via Unsplash
• "clothing rack with brown coat" Chris Reyem via Unsplash