Feature: 'Customers can see their order history'
Backend (you):  GET /api/orders?page=1 → JSON list with pagination
Frontend (you): OrdersPage → useOrders(page) hook → OrderTable component
Tests:          API test for the endpoint + component test for empty/error states
Result:         one developer can ship the whole feature

# React with Vite
npm create vite@latest shop-ui -- --template react
cd shop-ui && npm install
npm install react-router-dom
npm run dev

# Point the dev server to your API (vite.config.js)
# server: { proxy: { "/api": "http://localhost:8000" } }

src/
├── api/
│   └── client.js          # fetch wrapper with base URL and auth
├── hooks/
│   └── useOrders.js       # data fetching for orders
├── components/
│   ├── ui/                # Button, Modal, Spinner
│   └── orders/            # OrderTable, StatusBadge
├── pages/
│   └── OrdersPage.jsx
├── App.jsx                # routes
└── main.jsx

export default function OrderTable({ orders }) {
  if (orders.length === 0) return <p>No orders yet.</p>;
  return (
    <table>
      <thead><tr><th>ID</th><th>Status</th><th>Total</th></tr></thead>
      <tbody>
        {orders.map(o => (
          <tr key={o.id}>
            <td>{o.id}</td>
            <td>{o.status}</td>
            <td>₹{o.total.toLocaleString("en-IN")}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

import { useEffect, useState } from "react";

export function useOrders(page) {
  const [state, setState] = useState({ data: [], loading: true, error: null });

  useEffect(() => {
    let cancelled = false;
    setState(s => ({ ...s, loading: true }));
    fetch(`/api/orders?page=${page}`, { credentials: "include" })
      .then(r => {
        if (!r.ok) throw new Error(`HTTP ${r.status}`);
        return r.json();
      })
      .then(data => !cancelled && setState({ data, loading: false, error: null }))
      .catch(err => !cancelled && setState({ data: [], loading: false, error: err.message }));
    return () => { cancelled = true; };
  }, [page]);

  return state;
}

import { useState } from "react";
import { useOrders } from "../hooks/useOrders";
import OrderTable from "../components/orders/OrderTable";

export default function OrdersPage() {
  const [page, setPage] = useState(1);
  const { data, loading, error } = useOrders(page);

  if (loading) return <p>Loading orders...</p>;
  if (error) return <p>Could not load orders: {error}</p>;
  return (
    <>
      <OrderTable orders={data} />
      <button onClick={() => setPage(p => p + 1)}>Next page</button>
    </>
  );
}

Full Stack Feature Template
Feature: ______________
API contract:
  Endpoint: ______  Method: ______
  Request: ______________
  Response: ______________
  Errors: { error: string } with proper status codes
React:
  Page: ______  Hook: ______  Components: ______
States handled: loading ☐ empty ☐ error ☐ success ☐
Tests: API ☐ component ☐

React Code Review Checklist
☐ Components small and named clearly
☐ No data fetching inside presentational components
☐ Lists have stable keys
☐ Loading, empty and error states handled
☐ No secrets in frontend code
☐ Effects have correct dependency arrays
☐ Forms validate input and show messages
☐ Accessible labels on inputs and buttons

React path for full stack developers
1. JavaScript fundamentals refresh
2. Components, props, state, events
3. Effects and custom hooks for API data
4. Routing and protected routes
5. Forms and validation
6. Testing components
7. Performance basics (memo, code splitting)
8. A framework such as Next.js (optional)