================================================================
LAB 4 — React: Course Catalog SPA
================================================================
Course:    Web Technologies
Topic:     Lecture 6 (React)
Time:      3 hours lab + 3 hours self-study

----------------------------------------------------------------
LEARNING GOALS
----------------------------------------------------------------
- Bootstrap a React app with Vite
- Build reusable components with props
- Manage state with useState; side effects with useEffect
- Lift state up; pass values down, events up
- Add client-side routing with React Router

----------------------------------------------------------------
TASKS
----------------------------------------------------------------

TASK 1 — Setup
  npm create vite@latest catalog -- --template react
  npm install react-router-dom

TASK 2 — Components
  - <CourseCard course={...} onSelect={fn} />
  - <CourseList courses={...} onSelect={fn} />
  - <SearchBar value={...} onChange={fn} />
  - <CourseDetail course={...} />

TASK 3 — Pages with routing
  - /              -> Home (search + course grid)
  - /courses/:id   -> CourseDetail
  - /favourites    -> list of favourited courses (from localStorage)

TASK 4 — Data
  - Hard-code an array of 10 courses in a courses.js file
  - Each: { id, title, code, semester, year, lecturer, description, tags }

TASK 5 — Features
  - Search filters the visible list (case-insensitive, on title or code)
  - Click a card -> navigate to /courses/:id
  - Detail page has a "Add to favourites" button (toggles localStorage)
  - Show favourites count in nav

----------------------------------------------------------------
DELIVERABLES
----------------------------------------------------------------
- GitHub repo
- Deployed on Vercel, Netlify, or GitHub Pages
- README with setup + screenshots

----------------------------------------------------------------
GRADING (10 marks)
----------------------------------------------------------------
Components + props correctly used . 3
useState + useEffect correct ...... 2
Routing works (3 routes) .......... 2
Search + favourites work .......... 2
Code quality + structure .......... 1