Week 9 Day 4 Challenges Challenge 1: Creature Pokedex & Team Builder… — Full Stack Camp — TG.ME

🧩 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 ✌️