📝 Project
LESSON 23 OF 32
Project 4 — Course Platform
Project: Multi-Page React App
Combine components, hooks, and routing into a real React app: browse courses, search, filter, and save favourites — the same shape as the site you're learning on.
📝 Project 4 Checklist — Course Platform
Uses Lessons 20–22: components, useState/useEffect, and React Router.
- A home page listing courses as cards (title, description, category)
- A search bar that filters courses by title as you type
- A category filter (dropdown or buttons) that narrows the list
- Clicking a card routes to a course detail page via
/courses/:id - The detail page reads the id with
useParamsand shows full info - A "Favourite" button on each card that toggles saved state
- Favourites shared across pages using React Context (not prop drilling)
- A dedicated "My Favourites" page/route showing only saved courses
- A 404 page for any unmatched route
Stretch goal: Persist favourites to localStorage so they survive a page refresh.
Key Pattern: Context for Shared State
Context avoids "prop drilling" — passing a prop through five layers of components that don't use it, just to reach the one that does.
Sharing Favourites via Context
JSXconst FavouritesContext = createContext();
function FavouritesProvider({ children }) {
const [favourites, setFavourites] = useState([]);
return (
<FavouritesContext.Provider value={{ favourites, setFavourites }}>
{children}
</FavouritesContext.Provider>
);
}
// Any nested component:
const { favourites, setFavourites } = useContext(FavouritesContext);