React E-Commerce
Coaching Session

Today's Plan

What we're doing today

Before We Code

Working with the repo

Live Demo

React + Tailwind from zero

Run these commands in order.

# 1. Create a new Vite React project
npm create vite@latest my-shop -- --template react

# 2. Enter the project folder
cd my-shop

# 3. Install dependencies
npm install

# 4. Install Tailwind CSS v4 for Vite
npm install tailwindcss @tailwindcss/vite

# 5. Add the Tailwind Vite plugin in vite.config.js
#    Then add this to src/index.css:
#    @import "tailwindcss";

# 6. Start the dev server
npm run dev

💡 vite.config.js is still needed for the Tailwind Vite plugin. tailwind.config.js is usually not needed in Tailwind v4.

Design First

Before writing a single line of code —

Sketch or draft an outline of the website.

HTML Structure → React Components

What goes where?

Milestone 2 Status

Components for your e-commerce app

💡 Personalise: add your own colours, product data, or a WishlistButton. Make it yours!

Good Question!

Why does state still live in App.jsx?

Future Milestone — Context

The solution to prop drilling: Context

// src/context/CartContext.jsx  ← new file
import { createContext, useContext, useState } from "react";

const CartContext = createContext();

// Provider wraps the whole app — holds state here
export function CartProvider({ children }) {
  const [cart, setCart] = useState([]);
  const addToCart = (product) =>
    setCart((prev) => [...prev, product]);

  return (
    <CartContext.Provider value={{ cart, addToCart }}>
      {children}
    </CartContext.Provider>
  );
}

// Custom hook — any component can call this
export const useCart = () => useContext(CartContext);

Then in main.jsx: wrap <App /> with <CartProvider>. Now every component can call useCart() directly — no props needed.

Now — make it yours

You all have the same base project. Now diverge. Add your own touches — that's where learning becomes real.

We'll share work in breakout rooms — show your peers what you built 👀