Project Snapshot
Key takeaway
This project marked a shift from building static UIs to developing a fullstack application with real data flow. I focused on managing state, handling dynamic product data, and creating a complete checkout experience. One of the biggest takeaways was understanding how to structure scalable frontend architecture while integrating a backend (Supabase) for real-world functionality.
This project focuses on fullstack architecture, dynamic data handling, and building a realistic e-commerce experience with persistent state and a complete checkout flow.
Key Features
• Dynamic product data powered by Supabase
• Fully responsive product catalog with category filtering
• Global cart state using React Context + useReducer
• Persistent cart state using localStorage hydration
• Add, remove, increment, and decrement cart items
• Complete checkout flow (shipping → summary → confirmation)
• Real-time total calculation
• Clean UI using Material UI components
Overview
Atlas Grooming is a fullstack e-commerce application designed to simulate a real-world online store experience.
Users can browse products, manage a cart, and go through a multi-step checkout flow while interacting with dynamic data from a backend.
The goal was to move beyond static frontend projects and build something that reflects how production applications handle state, data, and user interactions.
Problem
Most frontend projects rely on static data or simple UI interactions, which doesn’t reflect how real applications manage dynamic data and user state.
Handling shared state (like a shopping cart) across multiple pages, while also keeping it persistent and predictable, can quickly become complex.
Solution
I built a fullstack solution using Supabase as a backend to serve product data, combined with React Context + useReducer to manage global state in a predictable way.
Cart state is persisted using localStorage hydration, ensuring a seamless user experience across sessions.
The checkout flow was designed to simulate a real purchasing process, including form handling and order summary logic.
What I built
• Dynamic product listing and detail pages
• Category filtering and responsive grid layout
• Global cart system with reducer-based state management
• Persistent cart using localStorage
• Quantity controls and item removal
• Multi-step checkout flow
• Order summary with calculated totals
• Fully responsive UI across devices
Technical Highlights
• Next.js 16 (App Router) with TypeScript
• Supabase for backend data and API layer
• React Context + useReducer for global state
• Material UI for scalable component design
• Local + remote data handling strategy
• Clean, modular component architecture
Lessons learned
This project helped me transition from building UI-focused applications to thinking more like a fullstack developer.
I gained a deeper understanding of:
- Managing global state in scalable ways
- Handling dynamic data from a backend
- Structuring multi-step user flows (checkout)
- Building applications that feel closer to production
It also reinforced how important predictable state management and clean architecture are when building interactive, data-driven applications.