Project: Blog Reader With API

Introduction

Build a blog reader SPA that loads posts from a REST API—paginated list, detail by slug, loading/error/empty states, and React Router navigation. Connect to FastAPI REST CRUD, Django blog REST, or JSONPlaceholder.

Prerequisites

Sister project: Vue Blog Reader—same API contract.

Architecture

text
PostListPage  →  GET /api/v1/posts?page=1
PostDetailPage → GET /api/v1/posts/:slug
       ↑
  usePosts / usePost hooks
       ↑
  api/client.ts

Types

src/types/post.ts:

Hooks

src/hooks/usePosts.ts:

src/hooks/usePost.ts:

Routes

tsx
{
  path: "posts",
  element: <PostListPage />,
},
{
  path: "posts/:slug",
  element: <PostDetailPage />,
},

PostListPage

PostDetailPage

CORS Checklist

DevConfig
Vite proxyserver.proxy in vite.config.ts
Direct APIBackend CORS middleware
ProductionNginx same-origin proxy

Deliverables

  • List with loading/error/empty
  • Navigate to /posts/:slug
  • Detail shows title and body
  • Pagination works
  • Refresh on detail URL in production build

FAQ

No slug on backend?

Use /posts/:id and adjust hooks.

JSONPlaceholder mock?

Map id to slug in adapter.

404 on refresh?

Nginx try_files — Build and Deploy.

Next project?

Admin Dashboard With Auth.