A Muisc stuff store Website using React
Live💻
compressed.video.mp4
Users should be able to:
- View the optimal layout for the app depending on their device’s screen size
- See hover states for all interactive elements on the page
- Add/Remove products from the cart
- Edit product quantities in the cart
- Fill in all fields in the checkout
- Receive form validations if fields are missed or incorrect during checkout
- See correct checkout totals depending on the products in the cart
- Shipping always adds $50 to the order
- VAT is calculated as 20% of the product total, excluding shipping
- See an order confirmation modal after checking out with an order summary
- Create an account
- View the history of purchases and details of each order
- Change profile picture
- How long has account
- All spent money
- Possibility of logging in also through Github and Google
Built with 🛠
| Tools | type |
|---|---|
| React | JS library |
| Next.js | React framework |
| Strapi | Headless CMS |
| React-hook-form | Library for form validation |
| Yup | Schema validation library |
| Tailwind | Framework CSS |
| GSAP | Library for animation |
| Jest | Framework for testing Js |
| React-Testing-Library | Helper for testing react components |
Here is Audiophile-backend
- husky, validator.js, cookie.js, react-spinners, react-toastify, eslint, and so on…
What could I do better
- Use clsx + twMerge for creating more reusable components
- Use Zod for better typescript types incoming data from API, problably I would change zod instead yup
- Should write simpler and less complex function for easier unit testing
- Use Redux or at least reducer in CartProvider. I did not expect it to grow so much
What I’ve learned?
- Strapi Headless CMS and how to upload backend to the cloud
- I’ve practice a lot of REST queries
- how to write basic unit tests using RTL and Jest
- Deepened my knowladge in the field of SSR and SSG
- how to use .husky
What next?
- In meantime I’ll write more unit tests for this app
Part of design is from Frontend mentor