A mock e-commerce site built to further improve my front-end development skills.
WIP note: this project will soon be updated to use MongoDB database and the latest version of Next.js.
- React + React Router
- TypeScript
- Context API
- Styled Components
- ViteJS
- localStorage
- The site includes a homepage, shop (item list) page, item detail pages, favorite items page, and a shopping cart
- Items can be added to and removed from the cart
- Total price is displayed based on the prices of added items and their quantities
- Items can be marked as favorite via the heart icon on the top left corner of each item card
- The shop page has filters to display either all, pet-friendly, or beginner-friendly plants
- Items in the cart are saved in localStorage
- Responsive design
I had a lot of fun building this project from scratch, while also learning various new things, such as how to implement a carousel item slider and an overlay when opening and closing the shopping cart. This was also a good opportunity for me to practice React routing as well as use less popular React hooks that I did not have the chance to try out before.
