React

1. Full-Stack React Project Architecture

Congratulations on reaching Chapter 15! In this capstone module, we bring together every single concept learned across the React curriculum into a cohesive, production-ready Task & Engineering Milestone Management Application.

2. Complete Production Capstone Implementation

import React, { useState, useEffect, useContext, createContext } from "react";

// 1. CONTEXT: Application Global State
const TaskContext = createContext(null);

export function TaskProvider({ children }) {
    const [tasks, setTasks] = useState(() => {
        const saved = localStorage.getItem("app_tasks");
        return saved ? JSON.parse(saved) : [];
    });

    useEffect(() => {
        localStorage.setItem("app_tasks", JSON.stringify(tasks));
    }, [tasks]);

    const addTask = (title, priority) => {
        const newTask = { id: Date.now().toString(), title, priority, isCompleted: false };
        setTasks(prev => [newTask, ...prev]);
    };

    const toggleTask = (id) => {
        setTasks(prev => prev.map(t => t.id === id ? { ...t, isCompleted: !t.isCompleted } : t));
    };

    const deleteTask = (id) => {
        setTasks(prev => prev.filter(t => t.id !== id));
    };

    return (
        <TaskContext.Provider value={{ tasks, addTask, toggleTask, deleteTask }}>
            {children}
        </TaskContext.Provider>
    );
}

// 2. FORM COMPONENT: Controlled Multi-Input
export function CreateTaskForm() {
    const { addTask } = useContext(TaskContext);
    const [form, setForm] = useState({ title: "", priority: "Medium" });
    const [error, setError] = useState("");

    const handleSubmit = (e) => {
        e.preventDefault();
        if (!form.title.trim()) {
            setError("Task title cannot be empty!");
            return;
        }
        addTask(form.title, form.priority);
        setForm({ title: "", priority: "Medium" });
        setError("");
    };

    return (
        <form onSubmit={handleSubmit} className="task-form">
            <input 
                value={form.title} 
                onChange={(e) => setForm({ ...form, title: e.target.value })} 
                placeholder="Enter new engineering task..." 
            />
            <select value={form.priority} onChange={(e) => setForm({ ...form, priority: e.target.value })}>
                <option value="High">High Priority</option>
                <option value="Medium">Medium Priority</option>
                <option value="Low">Low Priority</option>
            </select>
            <button type="submit">+ Add Task</button>
            {error && <p className="err-msg">{error}</p>}
        </form>
    );
}

3. Production Build & Deployment Pipeline

4. Capstone Practice Challenges