🧩 Week 9 Day 4 Challenges
Challenge 1: Creature Pokedex & Team Builder
Build a Pokémon-style creature collector where users search, filter, and build a battle team.
Requirements:
➜ Use useEffect + fetch to pull creatures from an API (e.g., PokéAPI or similar). Use a custom useFetch hook.
➜ Use dynamic routing: /creature/:id to show detailed stats using useParams.
➜ Manage your "Battle Team" (max 6) using useReducer (actions: ADD, REMOVE, REORDER). Share this state globally via Context.
➜ Use useMemo to calculate average stats (HP, Attack) of your team efficiently.
➜ Use React.memo on the creature card list to prevent re-renders while typing in the search filter.
➜ Lazy-load the "Battle Simulator" page using React.lazy + Suspense.
➜ Render a stats comparison modal using createPortal (outside the root div).
➜ Use useNavigate for a "Go Back" button on detail pages.
---
Challenge 2: Recipe Box & Meal Planner
A cooking app where users browse recipes, filter by cuisine, and plan meals for the week.
Requirements:
➜ Use useState for controlled search/filter inputs, and useRef to focus the search bar on mount.
➜ Use dynamic routes: /recipe/:slug for detailed instructions using useParams.
➜ Manage the "Weekly Meal Plan" (Monday–Sunday) using useReducer (actions: ADD_MEAL, REMOVE_MEAL, CLEAR_DAY). Share via Context.
➜ Use useMemo to calculate total prep time and calorie count for the week's plan.
➜ Use useTransition to keep the cuisine-filter dropdown smooth when filtering a large recipe list.
➜ Create a custom useLocalStorage hook to persist the meal plan automatically.
➜ Lazy-load the "Grocery List" page (generates shopping items from the plan).
➜ Use forwardRef to allow the parent to clear the search input from outside.
---
Challenge 3: Productivity Dashboard (Goal & Habit Tracker)
Track daily habits and long-term goals with live analytics — far beyond a simple checklist.
Requirements:
➜ Use useReducer to manage habits (actions: LOG_HABIT, DELETE_HABIT, EDIT_GOAL). Use Context to share across stats and list components.
➜ Use useMemo to compute streaks, completion rates, and progress percentages without recalculating on every keystroke.
➜ Use useCallback to memoize the logHabit and deleteHabit functions passed to memoized child components.
➜ Use useRef to store the previous week's completion rate for comparison (without re-rendering).
➜ Wrap your habit list items with React.memo.
➜ Implement an Error Boundary to catch failures in the chart/stats component and show a fallback.
➜ Use createPortal to render a quick-add modal that floats above the dashboard.
➜ Use dynamic routing: /goals/:id to view a specific goal's detailed history via useParams.
When you are done,
💥 Share your solutions,
💥 invite a friend,
and as always —
💥 stay well, stay curious, and stay coding ✌️
July 5, 2026 143
