🛠️ Weekend Project: Advanced React & State Management

What You're Building

Your deliverable is an e-commerce admin dashboard: the back-office screen a shop owner uses to manage their store. It has four areas — a products catalog, an orders list, a lightweight users view, and a sales analytics page with charts. It talks to a fake REST API so you can focus entirely on the frontend.

The point of the project is not to ship a startup. It's to exercise, in one connected app, every advanced pattern from this module: Redux Toolkit slices, normalized entity state, async thunks, memoized selectors, lazy-loaded routes, and render optimization. Small app, deep patterns.

Understand & Plan the Build

Before writing code, spend fifteen minutes planning. A classic, dependable frame is George Pólya's four steps — understand, plan, execute, reflect. It maps cleanly onto the four milestones ahead:

Decide the state shape first

The single most important design decision in a Redux app is the shape of the store. Sketch it on paper before you type. A good shape for this project is one slice per feature, each holding a normalized table of entities plus a little UI state (status, filters):

// The target store shape (conceptually)
{
  products: {
    ids: [1, 2, 3],                 // order preserved by the adapter
    entities: { 1: {...}, 2: {...} }, // O(1) lookup by id
    status: 'idle',                 // 'idle' | 'loading' | 'succeeded' | 'failed'
    error: null,
    filters: { category: null, inStock: null, maxPrice: null }
  },
  orders:    { ids: [], entities: {}, status: 'idle', error: null },
  users:     { ids: [], entities: {}, status: 'idle', error: null },
  analytics: { data: null, status: 'idle', error: null }
}

The four milestones

Work them in order. Each milestone leaves you with something that runs — never spend hours in a broken state.

Milestone 1 — Scaffold & Store

Start with a modern toolchain. Vite is the current standard for React apps (Create React App is deprecated), so we'll use it.

# Scaffold a React app with Vite
npm create vite@latest ecommerce-dashboard -- --template react
cd ecommerce-dashboard

# State, routing, data-fetching, charts, virtualization
npm install @reduxjs/toolkit react-redux react-router-dom
npm install chart.js react-chartjs-2 @tanstack/react-virtual date-fns

# A zero-code mock REST API
npm install --save-dev json-server web-vitals

Create a db.json at the project root with a little seed data, then serve it:

{
  "products": [
    { "id": 1, "name": "Aurora Desk Lamp", "price": 39.99, "category": "Lighting", "inStock": true, "inventory": 120 },
    { "id": 2, "name": "Nomad Backpack",   "price": 89.0,  "category": "Bags",     "inStock": true, "inventory": 44 },
    { "id": 3, "name": "Ceramic Pour-Over", "price": 24.5, "category": "Kitchen",  "inStock": false, "inventory": 0 }
  ],
  "orders": [],
  "users": []
}

# Serves a REST API at http://localhost:4000
npx json-server --watch db.json --port 4000

Now wire Redux Toolkit. The configureStore helper sets up the store with good defaults (Redux DevTools, thunk middleware, an immutability check) — no boilerplate:

// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import productsReducer from '../features/products/productsSlice';
// import ordersReducer from '../features/orders/ordersSlice';   // added in later features
// import usersReducer from '../features/users/usersSlice';
// import analyticsReducer from '../features/analytics/analyticsSlice';

export const store = configureStore({
  reducer: {
    products: productsReducer,
    // orders: ordersReducer,
    // users: usersReducer,
    // analytics: analyticsReducer,
  },
});

Provide the store to React at the root. With React 18/19 you mount through createRoot:

// src/main.jsx
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';

createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

Milestone 2 — A Feature Slice

This is the heart of the module. Build the products slice completely; the other three slices are copies of this pattern.

The API service

Keep network code out of your components. A tiny fetch wrapper is plenty:

// src/services/api.js
const BASE = 'http://localhost:4000';

async function request(path, options) {
  const res = await fetch(`${BASE}${path}`, options);
  if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
  return res.json();
}

export const getProducts = () => request('/products');
export const getOrders   = () => request('/orders');

The slice: adapter + thunk + selectors

Note the modern API: createEntityAdapter for the normalized table, createAsyncThunk for the load, and createSelector for cheap filtering. This replaces the hundreds of lines of hand-written action types and reducers that legacy Redux required.

// src/features/products/productsSlice.js
import {
  createSlice,
  createAsyncThunk,
  createEntityAdapter,
  createSelector,
} from '@reduxjs/toolkit';
import { getProducts } from '../../services/api';

// 1) Normalized table, sorted by name
const productsAdapter = createEntityAdapter({
  sortComparer: (a, b) => a.name.localeCompare(b.name),
});

// 2) Async load
export const fetchProducts = createAsyncThunk(
  'products/fetch',
  async () => await getProducts()   // return value becomes action.payload
);

// 3) Initial state = adapter's { ids, entities } + our UI state
const initialState = productsAdapter.getInitialState({
  status: 'idle',
  error: null,
  filters: { category: null, inStock: null, maxPrice: null },
});

const productsSlice = createSlice({
  name: 'products',
  initialState,
  reducers: {
    // Immer lets us "mutate" safely — RTK produces the immutable update
    setFilter(state, action) {
      const { key, value } = action.payload;
      state.filters[key] = value;
    },
    clearFilters(state) {
      state.filters = initialState.filters;
    },
    productAdded: productsAdapter.addOne,
    productUpdated: productsAdapter.updateOne,
    productRemoved: productsAdapter.removeOne,
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchProducts.pending, (state) => { state.status = 'loading'; })
      .addCase(fetchProducts.fulfilled, (state, action) => {
        state.status = 'succeeded';
        productsAdapter.setAll(state, action.payload);
      })
      .addCase(fetchProducts.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  },
});

export const { setFilter, clearFilters, productAdded, productUpdated, productRemoved } =
  productsSlice.actions;
export default productsSlice.reducer;

// 4) Adapter selectors (memoized, id-based)
export const {
  selectAll: selectAllProducts,
  selectById: selectProductById,
} = productsAdapter.getSelectors((state) => state.products);

const selectFilters = (state) => state.products.filters;

// 5) Derived, memoized filtered list — only recomputes when inputs change
export const selectFilteredProducts = createSelector(
  [selectAllProducts, selectFilters],
  (products, filters) =>
    products.filter((p) => {
      if (filters.category && p.category !== filters.category) return false;
      if (filters.inStock !== null && p.inStock !== filters.inStock) return false;
      if (filters.maxPrice != null && p.price > filters.maxPrice) return false;
      return true;
    })
);

Milestone 3 — Lazy Routes & UI

Now render it. Split each page into its own bundle with React.lazy so the browser only downloads the code for the route the user actually visits. Wrap the tree in Suspense to show a fallback while a chunk loads.

// src/App.jsx
import { Suspense, lazy } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import MainLayout from './components/layout/MainLayout';

const Dashboard     = lazy(() => import('./pages/Dashboard'));
const ProductsPage  = lazy(() => import('./pages/ProductsPage'));
const OrdersPage    = lazy(() => import('./pages/OrdersPage'));
const AnalyticsPage = lazy(() => import('./pages/AnalyticsPage'));

export default function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<p>Loading…</p>}>
        <Routes>
          <Route path="/" element={<MainLayout />}>
            <Route index element={<Dashboard />} />
            <Route path="products" element={<ProductsPage />} />
            <Route path="orders" element={<OrdersPage />} />
            <Route path="analytics" element={<AnalyticsPage />} />
          </Route>
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

The products page reads from the store with the typed react-redux hooks. Notice how little the component knows: it dispatches the thunk once, then subscribes to the memoized selector.

// src/pages/ProductsPage.jsx
import { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchProducts, selectFilteredProducts } from '../features/products/productsSlice';
import ProductFilters from '../components/products/ProductFilters';
import ProductList from '../components/products/ProductList';

export default function ProductsPage() {
  const dispatch = useDispatch();
  const status = useSelector((s) => s.products.status);
  const products = useSelector(selectFilteredProducts);

  useEffect(() => {
    if (status === 'idle') dispatch(fetchProducts());
  }, [status, dispatch]);

  if (status === 'loading') return <p>Loading products…</p>;
  if (status === 'failed')  return <p role="alert">Could not load products.</p>;

  return (
    <section>
      <h1>Products ({products.length})</h1>
      <ProductFilters />
      <ProductList products={products} />
    </section>
  );
}

The filters component dispatches setFilter. Wrap its handlers in useCallback so their identities stay stable across renders (this matters once children are memoized):

// src/components/products/ProductFilters.jsx
import { memo, useCallback } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { setFilter, clearFilters } from '../../features/products/productsSlice';

function ProductFilters() {
  const dispatch = useDispatch();
  const filters = useSelector((s) => s.products.filters);

  const onCategory = useCallback(
    (e) => dispatch(setFilter({ key: 'category', value: e.target.value || null })),
    [dispatch]
  );
  const onInStock = useCallback(
    (e) => dispatch(setFilter({ key: 'inStock', value: e.target.checked ? true : null })),
    [dispatch]
  );

  return (
    <div className="filters">
      <input placeholder="Category" onChange={onCategory} defaultValue={filters.category ?? ''} />
      <label>
        <input type="checkbox" onChange={onInStock} checked={filters.inStock === true} /> In stock only
      </label>
      <button onClick={() => dispatch(clearFilters())}>Clear</button>
    </div>
  );
}

export default memo(ProductFilters);

Milestone 4 — Performance Pass

Measure first, then optimize. Open the React DevTools → Profiler, record an interaction (e.g. typing a filter), and note which components re-render and how long commits take. Optimize only what the profiler flags — guessing wastes time.

Virtualize the long list

Rendering thousands of DOM rows is the classic dashboard killer. Windowing renders only the rows currently on screen. Here it is with the modern @tanstack/react-virtual hook:

// src/components/products/ProductList.jsx
import { memo, useRef } from 'react';
import { useVirtualizer } from '@tanstack/react-virtual';
import ProductRow from './ProductRow';

function ProductList({ products }) {
  const parentRef = useRef(null);

  const rowVirtualizer = useVirtualizer({
    count: products.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 72,       // px per row
    overscan: 8,                  // render a few extra above/below
  });

  return (
    <div ref={parentRef} style={{ height: 600, overflow: 'auto' }}>
      <div style={{ height: rowVirtualizer.getTotalSize(), position: 'relative' }}>
        {rowVirtualizer.getVirtualItems().map((virtualRow) => (
          <div
            key={products[virtualRow.index].id}
            style={{
              position: 'absolute', top: 0, left: 0, width: '100%',
              height: virtualRow.size,
              transform: `translateY(${virtualRow.start}px)`,
            }}
          >
            <ProductRow product={products[virtualRow.index]} />
          </div>
        ))}
      </div>
    </div>
  );
}

export default memo(ProductList);

Memoize the leaf rows

Wrap ProductRow in React.memo so an unrelated store change doesn't re-render every visible row. This only pays off because the parent passes stable props (the product object identity is preserved by the entity adapter, and callbacks are wrapped in useCallback):

// src/components/products/ProductRow.jsx
import { memo } from 'react';

function ProductRow({ product }) {
  return (
    <div className="product-row">
      <span>{product.name}</span>
      <span>${product.price.toFixed(2)}</span>
      <span>{product.inStock ? 'In stock' : 'Out'}</span>
    </div>
  );
}

// Re-render only when this product's data actually changes
export default memo(ProductRow);

Record real numbers

Capture web-vitals so your "before/after" is data, not a feeling:

// src/reportVitals.js
import { onLCP, onCLS, onINP } from 'web-vitals';

export function reportVitals() {
  onLCP(console.log);  // Largest Contentful Paint — loading
  onINP(console.log);  // Interaction to Next Paint — responsiveness
  onCLS(console.log);  // Cumulative Layout Shift — visual stability
}

Completion Checklist

Tick these off as you go. If a box won't tick, that's your next task.

What Good Looks Like

"Done" and "good" are different bars. Use this rubric to judge your build honestly — and to know where to push if you have extra time.

Stretch goals (if the weekend's going well)

• Add optimistic updates when editing a product, rolling back on a rejected thunk.
• Swap hand-rolled thunks for RTK Query on one feature and compare the code.
• Add a route-level error boundary so a failed lazy chunk degrades gracefully.
• Persist the active filters to the URL query string so views are shareable.

Quiz

Summary & Next Steps

📚 Further Reading

• Redux Toolkit — RTK Query tutorial
• React docs — memo, useMemo, useCallback
• TanStack Virtual — list virtualization
• web.dev — Core Web Vitals

🚀 What's Next?

You've now built a full advanced-React app end to end. In the next module we widen the lens: we'll step outside React and tour a second major framework so you can compare approaches. Up first — an overview of the Vue.js framework.