Building a simple e-commerce web app using React JS (with Create React App), Tailwind CSS, JSON-Server, React Router, and user login support:
| Episode | Title | Description |
|---|---|---|
| 1 | Project Setup | Initialize with create-react-app, setup TailwindCSS, folder structure |
| 2 | Home Page UI | Design product card layout using dummy JSON, create reusable components |
| 3 | Add React Router | Setup React Router for Home, Cart, Login; create Navbar with links |
| 4 | JSON-Server Setup | Install & configure JSON-Server with /products, /users, /cart |
| 5 | Cart Page | Build Cart page, “Add to Cart” button, save cart to JSON-Server |
| 6 | Login Functionality | Create Login page, use JSON-Server /users, manage login with localStorage |
| 7 | Protected Routes | Restrict access to /cart if not logged in, redirect to /login |
| 8 | Cart Quantity Logic | Add item quantity controls, update total price calculation |
| 9 | Styling & Responsive Design | Polish UI using TailwindCSS, make layout responsive |
| 10 | Final Touches & Deployment | Add loading/error states, empty cart state, optional deploy (Vercel/etc.) |