Live๐ป
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 ๐
ToolstypeReactJS libraryNext.jsReact frameworkStrapiHeadless CMSReact-hook-formLibrary for form validationYupSchema validation libraryTailwindFramework CSSGSAPLibrary for animationJestFramework for testing JsReact-Testing-LibraryHelper 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
