Learning Outcome

This project brought together everything from setting up the tech stack to building a fully working e-commerce app with a separate admin panel. Here's what it helped reinforce:

• Set up a React project using Vite, styled with Tailwind CSS, and icons via Lucide React
• Built reusable functional components using props, like ProductCard and StarRating
• Managed state using useState, useReducer, and derived values with useMemo
• Shared data across the app using Context API, avoiding prop drilling
• Pulled out repeated logic into custom hooks, like the toast notification system
• Built controlled forms with validation for checkout and admin product management
• Implemented state-based routing, including a separate /admin route for the admin panel
• Built the complete customer flow (browse, filter, cart, checkout, confirmation) and admin flow (manage products, update orders)
• Structured the entire codebase modularly, splitting components and pages into admin, store, and common folders