Learning Objectives

• Build React components with Bootstrap
• Manage application state
• Implement navigation with React Router
• Milestone 3 auth working
• React and Bootstrap installed

Step 1: Set Up React Router

jsx
// frontend/src/App.js
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import Navbar from './components/Navbar';
import Dashboard from './components/Dashboard';
import Login from './components/Login';
import Register from './components/Register';
function PrivateRoute({ children }) {
  return localStorage.getItem('token') ? children : <Navigate to="/login" />;
}
function App() {
  return (
    <BrowserRouter>
      <Navbar />
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/register" element={<Register />} />
        <Route path="/dashboard" element={
          <PrivateRoute><Dashboard /></PrivateRoute>
        } />
      </Routes>
    </BrowserRouter>
  );
}

Step 2: Add Axios Interceptor for Auth

jsx
// frontend/src/api.js
import axios from 'axios';
const api = axios.create({ baseURL: 'http://localhost:5000' });
api.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});
export default api;

• Navigation between pages works
• Unauthenticated users redirected
• Auth token sent with API requests
• CRUD operations work from UI
• React Router configured
• Axios interceptors added
• State management implemented
• UI components responsive
• Error handling with toast messages Join Discord PreviousMilestone 3: User Authentication & Session ManagementNextMilestone 5: Advanced Features & Deployment