Chapter 10: React Full Project

Build a complete Task Manager app — putting together everything you've learned about React components, state, context, routing, and API calls.

Project Structure

Components

Context (Global State)

Pages

Connecting Everything

Quiz

Project Structure

Think of your project like a well-organized office building. You don't throw all employees into one room — you have departments (folders). The reception (pages) greets visitors, the workers (components) do specific tasks, the manager (context) keeps track of the big picture, and the mail room (api) handles communication with the outside world.

Here's the folder structure for our Task Manager app:

Project — Folder Structure

task-manager/
├── public/
│   └── index.html
├── src/
│   ├── api/
│   │   └── axios.js          # Axios instance (base URL config)
│   ├── components/
│   │   ├── TaskCard.jsx       # Single task display
│   │   ├── TaskForm.jsx       # Form to add/edit tasks
│   │   ├── TaskList.jsx       # List of tasks
│   │   ├── Header.jsx         # Navigation header
│   │   └── ProtectedRoute.jsx # Auth guard
│   ├── context/
│   │   ├── AuthContext.jsx    # Login/user state
│   │   └── TaskContext.jsx    # Task CRUD state
│   ├── pages/
│   │   ├── HomePage.jsx       # Landing page
│   │   ├── LoginPage.jsx      # Login form
│   │   ├── RegisterPage.jsx   # Register form
│   │   ├── TasksPage.jsx      # Main task dashboard
│   │   └── NotFoundPage.jsx   # 404 page
│   ├── App.jsx                # Routes + providers
│   └── index.js               # Entry point
└── package.json

Why organize like this? When your app grows to 50+ files, having folders like components/, pages/, and context/ means you always know where to find things. Components are reusable pieces, pages are full screens, and context is shared state.

Components

Components are the building blocks of our app. Each one does ONE thing well. Let's build them one by one.

TaskCard — Displaying a Single Task

src/components/TaskCard.jsx

function TaskCard({ task, onToggle, onDelete, onEdit }) {
  return (
    <div className={`task-card ${task.completed ? 'completed' : ''}`}>
      <div className="task-header">
        <input
          type="checkbox"
          checked={task.completed}
          onChange={() => onToggle(task.id)}
        />
        <h3 className={task.completed ? 'line-through' : ''}>
          {task.title}
        </h3>
      </div>

      {task.description && (
        <p className="task-description">{task.description}</p>
      )}

      <div className="task-meta">
        <span className={`priority priority-${task.priority}`}>
          {task.priority}
        </span>
        <span className="task-date">
          {new Date(task.createdAt).toLocaleDateString()}
        </span>
      </div>

      <div className="task-actions">
        <button onClick={() => onEdit(task)}>Edit</button>
        <button onClick={() => onDelete(task.id)}>Delete</button>
      </div>
    </div>
  );
}

export default TaskCard;

TaskForm — Creating and Editing Tasks

src/components/TaskForm.jsx

import { useState, useEffect } from 'react';

function TaskForm({ onSubmit, editingTask, onCancel }) {
  const [formData, setFormData] = useState({
    title: '',
    description: '',
    priority: 'medium',
  });

  // If editing, fill the form with existing task data
  useEffect(() => {
    if (editingTask) {
      setFormData({
        title: editingTask.title,
        description: editingTask.description || '',
        priority: editingTask.priority || 'medium',
      });
    }
  }, [editingTask]);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!formData.title.trim()) return;  // Don't submit empty titles

    onSubmit(formData);
    setFormData({ title: '', description: '', priority: 'medium' });
  };

  return (
    <form onSubmit={handleSubmit} className="task-form">
      <input
        type="text"
        name="title"
        value={formData.title}
        onChange={handleChange}
        placeholder="What needs to be done?"
        required
      />
      <textarea
        name="description"
        value={formData.description}
        onChange={handleChange}
        placeholder="Add details (optional)"
      />
      <select name="priority" value={formData.priority} onChange={handleChange}>
        <option value="low">Low Priority</option>
        <option value="medium">Medium Priority</option>
        <option value="high">High Priority</option>
      </select>
      <div className="form-buttons">
        <button type="submit">{editingTask ? 'Update' : 'Add Task'}</button>
        {editingTask && <button type="button" onClick={onCancel}>Cancel</button>}
      </div>
    </form>
  );
}

export default TaskForm;

TaskList — Rendering Multiple Tasks

src/components/TaskList.jsx

import TaskCard from './TaskCard';

function TaskList({ tasks, onToggle, onDelete, onEdit }) {
  if (tasks.length === 0) {
    return <p className="empty-message">No tasks yet! Add one above.</p>;
  }

  return (
    <div className="task-list">
      {tasks.map(task => (
        <TaskCard
          key={task.id}
          task={task}
          onToggle={onToggle}
          onDelete={onDelete}
          onEdit={onEdit}
        />
      ))}
    </div>
  );
}

export default TaskList;

Context (Global State)

Context is like a company-wide memo board. Instead of passing messages from person to person through a chain (prop drilling), you pin the message to the board where anyone in the company can read it. In React, Context lets any component access shared data without passing props through every level.

TaskContext — Managing Tasks Globally

src/context/TaskContext.jsx

import { createContext, useContext, useState, useEffect } from 'react';
import api from '../api/axios';

// 1. Create the context
const TaskContext = createContext();

// 2. Create a provider component
export function TaskProvider({ children }) {
  const [tasks, setTasks] = useState([]);
  const [loading, setLoading] = useState(true);

  // Fetch tasks on mount
  useEffect(() => {
    fetchTasks();
  }, []);

  const fetchTasks = async () => {
    try {
      const response = await api.get('/tasks');
      setTasks(response.data);
    } catch (err) {
      console.error('Failed to fetch tasks:', err);
    } finally {
      setLoading(false);
    }
  };

  const addTask = async (taskData) => {
    const response = await api.post('/tasks', taskData);
    setTasks(prev => [response.data, ...prev]);  // Add to top of list
  };

  const updateTask = async (id, taskData) => {
    const response = await api.put(`/tasks/${id}`, taskData);
    setTasks(prev =>
      prev.map(task => (task.id === id ? response.data : task))
    );
  };

  const deleteTask = async (id) => {
    await api.delete(`/tasks/${id}`);
    setTasks(prev => prev.filter(task => task.id !== id));
  };

  const toggleTask = async (id) => {
    const task = tasks.find(t => t.id === id);
    await updateTask(id, { completed: !task.completed });
  };

  // 3. Provide value to all children
  return (
    <TaskContext.Provider value={{
      tasks, loading, addTask, updateTask, deleteTask, toggleTask, fetchTasks
    }}>
      {children}
    </TaskContext.Provider>
  );
}

// 4. Custom hook for easy access
export function useTasks() {
  const context = useContext(TaskContext);
  if (!context) throw new Error('useTasks must be used within TaskProvider');
  return context;
}

The 4-step Context pattern: (1) Create context, (2) Build a Provider component with state + functions, (3) Wrap your app with the Provider, (4) Create a custom hook (useTasks) for clean access. This pattern works for ANY shared state — tasks, auth, themes, etc.

Pages

Pages are full-screen components that map to routes. They use our components and context to create complete views.

TasksPage — The Main Dashboard

src/pages/TasksPage.jsx

import { useState } from 'react';
import { useTasks } from '../context/TaskContext';
import TaskForm from '../components/TaskForm';
import TaskList from '../components/TaskList';

function TasksPage() {
  const { tasks, loading, addTask, updateTask, deleteTask, toggleTask } = useTasks();
  const [editingTask, setEditingTask] = useState(null);
  const [filter, setFilter] = useState('all'); // all, active, completed

  // Filter tasks based on selected filter
  const filteredTasks = tasks.filter(task => {
    if (filter === 'active') return !task.completed;
    if (filter === 'completed') return task.completed;
    return true;
  });

  const handleSubmit = async (formData) => {
    if (editingTask) {
      await updateTask(editingTask.id, formData);
      setEditingTask(null);
    } else {
      await addTask(formData);
    }
  };

  if (loading) return <p>Loading tasks...</p>;

  return (
    <div className="tasks-page">
      <h1>My Tasks ({tasks.length})</h1>

      <TaskForm
        onSubmit={handleSubmit}
        editingTask={editingTask}
        onCancel={() => setEditingTask(null)}
      />

      <div className="filters">
        <button onClick={() => setFilter('all')}>All</button>
        <button onClick={() => setFilter('active')}>Active</button>
        <button onClick={() => setFilter('completed')}>Completed</button>
      </div>

      <TaskList
        tasks={filteredTasks}
        onToggle={toggleTask}
        onDelete={deleteTask}
        onEdit={setEditingTask}
      />
    </div>
  );
}

export default TasksPage;

Connecting Everything

Now we wire it all together in App.jsx — wrapping with providers and setting up routes:

src/App.jsx — Connecting Everything

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { TaskProvider } from './context/TaskContext';
import { AuthProvider } from './context/AuthContext';
import Header from './components/Header';
import ProtectedRoute from './components/ProtectedRoute';
import HomePage from './pages/HomePage';
import LoginPage from './pages/LoginPage';
import RegisterPage from './pages/RegisterPage';
import TasksPage from './pages/TasksPage';
import NotFoundPage from './pages/NotFoundPage';

function App() {
  return (
    <BrowserRouter>
      <AuthProvider>
        <TaskProvider>
          <Header />
          <Routes>
            <Route path="/" element={<HomePage />} />
            <Route path="/login" element={<LoginPage />} />
            <Route path="/register" element={<RegisterPage />} />
            <Route
              path="/tasks"
              element={
                <ProtectedRoute>
                  <TasksPage />
                </ProtectedRoute>
              }
            />
            <Route path="*" element={<NotFoundPage />} />
          </Routes>
        </TaskProvider>
      </AuthProvider>
    </BrowserRouter>
  );
}

export default App;

How It All Fits Together:

App.jsx (routes + providers)
↓
TaskProvider (global task state + API calls)
↓
TasksPage (uses context, renders components)
↓
TaskForm + TaskList + TaskCard (UI pieces)

Provider order matters! Providers must wrap the components that need them. AuthProvider wraps TaskProvider because tasks might need auth info (like the user's token). Always put the most fundamental provider (Auth) at the outermost level.

📝 Chapter 10 Quiz

1. What problem does React Context solve?

Making API calls faster

Styling components

Sharing state without passing props through every level

Creating routes for pages

2. What's the difference between components and pages?

Pages use hooks, components don't

Components are reusable pieces, pages are full screens for routes

There is no difference

Components handle API calls, pages handle UI

3. What does a ProtectedRoute component do?

Redirects to login if the user is not authenticated

Makes the page load faster

Encrypts the page content

Prevents API errors

4. Why create a custom hook like useTasks()?

It's required by React

To make API calls faster

To replace useState

For clean, easy access to context from any component

5. Why does AuthProvider wrap TaskProvider in App.jsx?

Alphabetical order

Tasks may need auth info, so Auth must be available first

It doesn't matter, the order is random

React requires it in this order

← Chapter 9: React API & Forms Chapter 11: Node.js Fundamentals →