BitWithBite
React Worksheet
🎓 Project 1: Course Platform
SCORE___ / 20
NameClassDate
After this worksheet you can
Combine hooks in one appFilter/search rendered listsShare favourites via ContextPersist state with a custom hook📚 Quick Recap
🎯 What you'll practice: Planning a course platform combining Lessons 6–10.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1The course list should be fetched using:
2Favourites shared across components should use:
3Persisted favourites across reloads use:
4An empty search result should show:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5The search filter should use array .() to narrow the list.
6Favourites Provider should wrap the app so any component can call use.
7Write the useEffect that fetches courses once on mount.
8Write the filter logic for a search input bound to a "query" state variable.
9Why use a custom hook (useLocalStorage) instead of calling localStorage directly in each component?
🚀 Section C · Challenge ● CHALLENGE 5
10Design the FavouritesContext: what state does it hold, and how does a CourseCard component toggle a favourite?
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-B 2-B 3-B 4-B | 5 = filter 6 = Favourites 7 = useEffect(()=>{fetch("/api/courses").then(r=>r.json()).then(setCourses);},[]); 8 = courses.filter(c=>c.title.toLowerCase().includes(query.toLowerCase())) 9 = Because a custom hook centralises the read/parse/stringify logic in one place, so every component just calls useLocalStorage(key,init) instead of repeating JSON.parse/stringify boilerplate everywhere | 10 = It holds a favourites array and setFavourites function exposed via a Provider; CourseCard calls useContext(FavouritesContext) and toggles by adding/removing the course id from the favourites array via setFavourites.