One café, React then Next.js
This combined project brings React and Next.js together. You'll build the café's ordering front end in React — components, shared cart state, data loading — then move it into a Next.js app with real routes, server-rendered pages and client islands.
- Day 1: components, props and state (React)
- Day 2: a cart with useReducer and context (React)
- Day 3: loading data with effects (React)
- Day 4: dish pages with dynamic routes (Next.js)
- Day 5: the server-rendered menu with client islands (Next.js)
Small components, data flowing down
import { useState } from "react";
const DISHES = [
{ slug: "momo", name: "Momo", price: 180, veg: false },
{ slug: "veg-momo", name: "Veg momo", price: 160, veg: true },
{ slug: "thukpa", name: "Thukpa", price: 220, veg: false },
{ slug: "sel-roti", name: "Sel roti", price: 60, veg: true },
];
function DishCard({ dish }) {
return (
<li className="dish">
<h3>{dish.name}</h3>
<p className="price">Rs {dish.price}</p>
{dish.veg && <span className="veg">Veg</span>}
</li>
);
}
export default function App() {
const [vegOnly, setVegOnly] = useState(false);
const shown = vegOnly ? DISHES.filter((d) => d.veg) : DISHES;
return (
<>
<h1>Menu</h1>
<label>
<input type="checkbox" id="veg-only" checked={vegOnly} onChange={(e) => setVegOnly(e.target.checked)} /> Veg only
</label>
<p id="count">{shown.length} dishes</p>
<ul>
{shown.map((dish) => (
<DishCard key={dish.slug} dish={dish} />
))}
</ul>
</>
);
}