CodeBlanks Logo Icon CodeBlanks
Login Register

Project: Dashboard

Review the goal and steps of the dashboard project.

Project: Dashboard

In this project you build a dashboard. Three main pieces: layout and routing, stats widget and add via modal. Each lesson adds one piece.

The layout gives a frame that stays as the page changes. Routing shows content based on the URL. You build both with React Router.

Widgets show data as cards; a modal gives a popup window to add new data. At the end you have a working, modular dashboard.

Tech and structure

The dashboard uses React Router; each route is a page, <Outlet> is where content renders. The StatCard component takes label and value props.

The modal opens and closes via the isOpen state. When the form is submitted, onAdd fires and the modal closes.

Each lesson takes the previous lesson's solution as its starting code; the code grows piece by piece.

Practice Dashboard layout skeleton

Write a DashboardLayout component: a <nav> with two <NavLink>s ("Stats" and "Settings"), then a <main> containing <Outlet />. Place DashboardLayout at path="/" inside <BrowserRouter> and <Routes>. Write a DashboardApp function and export it as default.

Starter code

App.jsx
import { BrowserRouter, Routes, Route, NavLink, Outlet } from "react-router-dom";

// DashboardLayout ve DashboardApp bileşenlerini buraya yaz

Sample solution

App.jsx
import { BrowserRouter, Routes, Route, NavLink, Outlet } from "react-router-dom";

function DashboardLayout() {
  return (
    <>
      <nav>
        <NavLink to="/stats">Stats</NavLink>
        <NavLink to="/settings">Settings</NavLink>
      </nav>
      <main>
        <Outlet />
      </main>
    </>
  );
}

function DashboardApp() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<DashboardLayout />}>
          <Route path="stats" element={<p>Stats</p>} />
          <Route path="settings" element={<p>Settings</p>} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default DashboardApp;

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 What do we build in the first step?

  • Cart and checkout
  • Layout and routing Correct answer
  • Authentication
  • Notifications

Explanation: First we set up the layout and routing skeleton.

2 Router import

Question 
import { BrowserRouter, Routes, Route, ____ } from "react-router-dom";
Answer 
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";

Explanation: Outlet renders nested route content.

3 Project: Dashboard: match the terms

Term Meaning
layout Page frame
route URL mapping
widget Data card
modal Popup window

All lessons in Intermediate

1 Custom hook basics

  1. What is a custom hook?
  2. useToggle
  3. usePrevious
  4. Summary - Custom hook basics

2 Advanced custom hooks

  1. useLocalStorage
  2. useFetch
  3. useDebounce
  4. Summary - Advanced custom hooks

3 Context deep dive

  1. Context separation
  2. Context + useReducer
  3. Default value and error
  4. Summary - Context deep dive

4 useReducer pattern

  1. The reducer pattern
  2. Action types
  3. Composition
  4. Summary - useReducer pattern

5 Cart management

  1. Project: Cart management
  2. Cart reducer
  3. Cart context
  4. Add product UI

6 useMemo

  1. What is useMemo?
  2. Dependency control
  3. Pitfalls
  4. Summary - useMemo

7 useCallback

  1. What is useCallback?
  2. Sibling re-render
  3. useMemo vs useCallback
  4. Summary - useCallback

8 React.memo

  1. What is React.memo?
  2. Prop comparison
  3. Custom comparator
  4. Summary - React.memo

9 Performance project

  1. Project: Performance
  2. Expensive computation
  3. Stable handler
  4. Memoized list

10 Router basics

  1. What is React Router?
  2. Defining routes
  3. Link and NavLink
  4. Summary - Router basics

11 Advanced router

  1. URL parameters
  2. Nested routes
  3. Programmatic navigation
  4. Summary - Advanced router

12 Multi-page app

  1. Project: Multi-page app
  2. Layout and router
  3. List and detail
  4. Navigation and 404

13 Layout components

  1. The layout pattern
  2. Sidebar and header
  3. Layout with Outlet
  4. Summary - Layout components

14 Error boundary

  1. What is an error boundary?
  2. Class component structure
  3. Fallback UI
  4. Summary - Error boundary

15 Suspense and lazy

  1. What is React.lazy?
  2. Suspense boundary
  3. Multiple boundaries
  4. Summary - Suspense and lazy

16 Portals

  1. What is a portal?
  2. Modal example
  3. Event bubbling
  4. Summary - Portal

17 Advanced useRef

  1. useRef and computation
  2. Measuring
  3. forwardRef
  4. Summary - Advanced useRef

18 RTL tests

  1. React Testing Library
  2. render and screen
  3. Firing events
  4. Summary - RTL tests

19 Dashboard project

  1. Project: Dashboard
  2. Layout and route
  3. Stats widget
  4. Add via modal

20 Intermediate final

  1. Challenge: useFetch hook
  2. Challenge: Theme provider
  3. Challenge: Memoized list
  4. Challenge: Routed cart