Module Recap

Module 08 established the foundation for the Bulletin frontend: the client-server mental model, axios for HTTP requests, a centralized API client, state management patterns for async data, and React Router for navigation.

What you learned

The client-server model is fundamentally async. Every data access requires a network request with loading, success, and error states. This is different from localStorage or component state — the UI must always account for all three outcomes.

axios is the HTTP client of choice. It parses JSON automatically, throws on errors, supports interceptors for global auth headers, and provides TypeScript generics for typed responses.

The API client centralizes server communication. An axios instance with the base URL and auth interceptor handles the boilerplate. Typed function modules (postsApi, authApi) provide clean, reusable abstractions that components use directly.

The useApi hook reduces fetch boilerplate. One hook handles loading/error/success states for any read operation. Write operations use local useState per component.

React Router v6 handles multi-page navigation. Nested routes share layouts via <Outlet />. useNavigate navigates programmatically. useParams reads dynamic segments like :id.

The Bulletin frontend structure

src/
├── api/
│   ├── client.ts     ← axios instance + interceptors
│   ├── auth.ts       ← authApi.login, authApi.register
│   ├── posts.ts      ← postsApi.list, .get, .create, .delete, .toggleUpvote
│   ├── comments.ts   ← commentsApi.list, .create
│   └── users.ts      ← usersApi.get
├── context/
│   └── AuthContext.tsx ← AuthProvider + useAuth (Module 09)
├── hooks/
│   └── useApi.ts     ← generic data-fetching hook
├── pages/
│   ├── PostFeed.tsx
│   ├── PostDetail.tsx
│   ├── UserProfile.tsx
│   ├── LoginPage.tsx
│   ├── RegisterPage.tsx
│   └── CreatePost.tsx
├── components/
│   ├── Layout.tsx
│   ├── Navbar.tsx
│   └── ProtectedRoute.tsx
├── types/
│   └── api.ts        ← Post, Comment, User, AuthResponse interfaces
├── config.ts         ← API_BASE_URL from VITE_API_URL
└── App.tsx           ← BrowserRouter + Routes

Key terms

Term	What it means
Three-state pattern	Loading / Error / Success — every async operation has these states
axios instance	Pre-configured HTTP client with base URL and defaults
Request interceptor	Runs before every request — used to add auth headers
Response interceptor	Runs after every response — used to handle 401 globally
useApi hook	Generic hook for data fetching with loading/error/data state
BrowserRouter	React Router wrapper that enables client-side routing
<Outlet />	Renders the matched child route within a layout
useNavigate()	Hook for programmatic navigation
useParams()	Hook for reading dynamic route segments

What is next

Module 09 — Auth in the Frontend →

Module 09 adds authentication to the frontend. You’ll store the JWT, build an Auth Context and useAuth hook, create Register and Login forms, add protected routes, and handle logout and token expiry. After this module, users can sign in and the app knows who they are.