Skip to content

Conversation

@JoyBrown252
Copy link
Contributor

What & Why

Implements Lesson 24 “Using an API”:

  • Replace fake data with live data from the API.
  • Add a page to create new Programs via POST.
  • Wire up routing and small header style fix.

Changes

  • Data fetching/mutations (React Query)
    • src/lib/api.ts: GET /programs, POST /programs (handles 201 with no JSON body)
  • UI
    • src/components/ProgramList.tsx: lists programs from the API
    • src/pages/AddProgram.tsx: form to create a program; invalidates list and navigates home on success
    • src/main.tsx: Router + React Query providers; routes for / and /add
    • src/App.tsx: layout with <Header /> and <Outlet />
    • src/components/Header.tsx + Header.scss: small logo sizing + link to Add Program
  • Config
    • .env: VITE_API_URL=http://localhost:4000

How to Run

  1. API (port 4000)
    cd lesson_24/api
    npm install
    npm run dev
    # Server at http://localhost:4000
    # JSON list at http://localhost:4000/programs (root "/" will show "Cannot GET /" — that's expected)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant