Audiophile
A comprehensive e-commerce website featuring user authentication, advanced cart management for both registered and anonymous users, optimized cart updates, detailed checkout with form validation, and seamless server communication, showcasing my expertise in frontend and backend integration.
- nextjs
- typescript
- tailwind css
- authjs
- drizzle
- shadcn
- react hook form
- zod
- zustand
Project Goal
Audiophile was developed to showcase my skills in creating a sophisticated e-commerce platform for audio equipment. The primary goal was to provide a seamless and user-friendly shopping experience for both registered and anonymous users. This includes secure authentication, advanced cart management with real-time synchronization, and a detailed checkout process with comprehensive form validation.
Additionally, the project aims to ensure data consistency and smooth user interactions through optimized updates and efficient server communication. The website is fully responsive, catering to various screen sizes to enhance accessibility and user experience.
Overall, Audiophile highlights my expertise in both frontend and backend development, demonstrating my ability to build polished, high-quality web applications using modern web technologies.
Project Features
User Authentication. Secure sign-up/sign-in using Auth.js.
Cart Management. Advanced cart management for registered and anonymous users with real-time synchronization and optimistic updates.
Database Integration. Utilizes PostgreSQL with Drizzle ORM for data management.
Anonymous User Handling. Creates and tracks anonymous users, their carts and orders, storing anonymous user IDs in cookies for session persistence and merging data upon sign-in.
Checkout Process. Detailed checkout form with personal, billing, and payment information, validated using Zod on both client and server sides.
Optimized User Experience. Immediate (optimistic) cart updates using React's useOptimistic and useContext hooks, and a responsive design catering to various screen sizes.
Server Communication. Efficient server communication using server actions.
