✨🎵 Audiophile ✨🎶

Introduction on YouTube

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


View Github