FitByte

As a frontend developer, implement the LandingHero section for the Landing page. Build the hero section using React with useEffect and useRef. Render four SVG plant silhouette components — PlantFern, PlantBroadLeaf, PlantSprout, and PlantVine — each accepting a color prop and rendering botanical shapes using SVG path, ellipse, and circle elements. Integrate gsap for entrance animations and framer-motion's motion components for hero headline and CTA button animations. The hero features decorative plant illustrations as background/foreground elements alongside the main headline and call-to-action content.

As a frontend developer, implement the NutritionalGardenShowcase section for the Landing page. Build the interactive nutritional garden using React with useState and useCallback. Render five plant cards from the PLANTS constant (calories, protein, carbs, fats, water), each with id, name, icon, current, goal, unit, status (ontrack/low/exceeded), color, tip, and stats array. Implement PlantSVG component that renders unique botanical SVG silhouettes per plantId, with fill color driven by status (green for ontrack, orange for low, red for exceeded). Use getProgressPct helper to compute fill percentage (capped at 100). Integrate framer-motion's motion and AnimatePresence for card reveal/exit transitions, and GSAP for plant growth animations. Support interactive plant selection to display tip text and stats breakdown per selected macro.

As a frontend developer, implement the LandingFeatures section for the Landing page. Build the features grid using React with useState and useCallback. Render six feature cards from the FEATURES constant (Daily Calorie Tracking, Macro Progress Bars, Water Intake Monitoring, Meal Logging, Food Search Database, Progress Charts). Each card includes a title, desc, and icon type string. Implement the FeatureIcon component with a switch statement rendering inline SVGs for each icon type: flame (fire path), chart (three rect bars + baseline line), droplet (teardrop path), utensils (fork/knife paths), search (circle + cross lines), and trending. Integrate framer-motion's motion for staggered card entrance animations on scroll into view.

As a frontend developer, implement the MacroTrackingHighlight section for the Landing page. Build the animated macro ring section using React with useState (counters array initialized to zeros), useRef (sectionRef, circleRefs array, counterRefs array, hasAnimated flag), and useCallback for the animateIn handler. Render three SVG circular progress rings from the MACROS constant (Protein 78%, Carbs 62%, Fats 85%) using RADIUS=44 and CIRCUMFERENCE=2*PI*44. Each ring uses GSAP fromTo on strokeDasharray from '0 CIRCUMFERENCE' to 'achievedLength remainder' over 1.4s with staggered 0.2s delays per macro. Simultaneously animate counters using a GSAP counterObj tween updating setCounters via onUpdate. Trigger animation on IntersectionObserver at 0.25 threshold. Render a parallax decorative layer with mth-deco-blob elements and a BENEFITS list (4 bullet points about protein synthesis, energy balance, hormone health, data-driven goals).

As a frontend developer, implement the WaterTrackingSection for the Landing page. Build the interactive water tracker using React with useState for cups (initial 3), streak (12), ripples array, and isMilestone. Manage refs: fillRef, waveRef, bottleWrapRef, streakCardRef, sectionRef, hasAnimatedRef. Animate SVG water bottle fill using GSAP on cups change — update fillRef height attribute to (cups/GOAL_CUPS)*100% and waveRef y attribute to matching offset, both with 0.7s power2.out easing. On scroll into view (IntersectionObserver threshold 0.2), trigger entrance animation from 0% fill to current cups fill (1.2s, power3.out, delay 0.3). Implement addCup callback with haptic simulation via GSAP scale pulse on bottleWrapRef. Spawn ripple effects on cup add via setRipples. Render HYDRATION_TIPS array (5 tips) and streak card. Display 8 cup indicators and milestone celebration via isMilestone state. Use framer-motion's motion and AnimatePresence for tip transitions.

As a frontend developer, implement the FoodDatabaseShowcase section for the Landing page. Build the searchable food grid using React with useState for searchQuery and activeCategory. Compute filteredFoods via useMemo — filter the 16-item FOODS array (Grilled Chicken, Brown Rice, Avocado, Salmon, Greek Yogurt, Sweet Potato, Banana, Almonds, Whole Wheat Bread, Broccoli, Eggs, Oatmeal, Blueberries, Cottage Cheese, Quinoa, Spinach) by name/category text match and activeCategory filter. Each food card shows emoji, name, category, cal, protein, carbs, fat macros. Render CATEGORIES filter tabs ('All', 'Protein', 'Grains', 'Fruits', 'Vegetables', 'Dairy', 'Nuts & Seeds'). Import Search icon from lucide-react for the search input. Apply framer-motion cardVariants with custom stagger delay (i*0.06, 0.5s duration, cubic-bezier ease). Show matchCount of visible results. Render parallax decorative background.

As a frontend developer, implement the ProgressChartsPreview section for the Landing page. Build the dual-chart preview using React with useState for activeRange ('7 Days' default) and tooltip state (visible, x, y, text, chartId). Manage refs: rootRef, barsRef array, lineRef, lineAreaRef, dotsRef array, hasAnimated flag. Implement getDataForRange via useCallback — switches between WEIGHT_DATA/CALORIE_DATA (7-day), WEIGHT_DATA_14/CALORIE_DATA_14 (14-day), and WEIGHT_DATA_30/CALORIE_DATA_30 (30-day, procedurally generated). Render a bar chart for calorie data (CALORIE_DATA bars) and an SVG line chart for weight trend (WEIGHT_DATA points with lineRef path and lineAreaRef gradient fill, dotsRef circles). Animate charts on IntersectionObserver via animateCharts using GSAP. Support mouse hover tooltip on chart bars and line dots. Render RANGES toggle buttons ('7 Days', '14 Days', '30 Days') with activeRange state switching.

As a frontend developer, implement the MobileResponsiveShowcase section for the Landing page. Build the responsive showcase using React with useRef (sectionRef, phoneScreenRef), useState for screenOffset (parallax offset 0–280px), and useInView from framer-motion (once: false, margin: '-10%'). Implement a rAF-based parallax loop in useEffect that reads sectionRef getBoundingClientRect, computes scroll progress (0 when section enters bottom, 1 when it leaves top), and sets screenOffset to progress*280. Render a phone mockup with translateY(screenOffset) applied to inner phoneScreenRef content. Display four benefit cards from the benefits array (Touch-Friendly Controls, Adaptive Layout, Readable Typography, Simplified Navigation), each with inline SVG icons and iconAlt variants. Apply containerVariants with staggerChildren 0.12, delayChildren transition using framer-motion's motion driven by isInView state.

As a frontend developer, implement the LandingCTA section for the Landing page. Build the call-to-action section using React with useRef (rootRef, primaryBtnRef, particleContainerRef, gradientTweenRef) and useState for magnetOffset ({x, y}). Use framer-motion's useInView (once: true, margin: '-80px') for entrance animation. Animate background gradient position via GSAP tween on rootRef (backgroundPosition: '100% 100%', 8s duration, repeat: -1, sine.inOut yoyo). Implement handlePrimaryMouseMove with useCallback — calculates distance from button center, applies GSAP magnetic offset (dx*0.2, dy*0.15 strength) within 60px radius, resets with elastic.out on exit. Implement handlePrimaryMouseLeave to reset button position (0.6s, elastic.out). Implement spawnParticles — creates 14 DOM particle divs at button center with random angles, sizes (4–9px), and colors from ['#FF5722','#4CAF50','#FF9800','#FFC107','#81C784'], appended to particleContainerRef and GSAP-animated outward.

As a frontend developer, implement the Footer section for the Landing page. Build the animated footer using React with useRef (rootRef, colRefs array, socialRefs array, hasAnimated flag). On IntersectionObserver trigger (threshold 0.15), run GSAP staggered column fade-in: animate colRefs from {opacity:0, y:16} to {opacity:1, y:0} over 0.6s with 0.1s stagger (power2.out). Run SVG stroke-draw animation on socialRefs — for each social icon SVG, query all path/circle/rect/polyline/line elements, set strokeDasharray/strokeDashoffset to getTotalLength(), then tween strokeDashoffset to 0 (0.8s, delay 0.4+i*0.1, power2.inOut). Render four footerColumns (Product, Company, Legal, Support) each with a title and 4 href links. Include a parallax ftr-deco-layer with CSS transform driven by --scroll CSS variable. Note: Footer component may already exist from other pages — reuse if available.

As a Frontend Developer, implement the shared localStorage data persistence layer for FitByte. Create a dataService module with typed read/write helpers for all data entities: userProfile (age, height, weight, gender, activityLevel, goal), dailyLog (date, meals, waterIntake, calories), foodDatabase (50+ common foods with nutrition info), progressHistory (weight entries, calorie history), and hydrationChallenge (goal, streak, XP, badges, completedReminders). Implement date-keyed daily log management so each day's data is stored and retrieved independently. Export hooks (useUserProfile, useDailyLog, useProgressHistory, useHydrationChallenge) that abstract localStorage read/write with JSON serialization. Seed the food database with 50+ common foods on first load if not already present.

As a Frontend Developer, configure React Router v6 for FitByte with routes for all pages: Landing (/), Dashboard (/Dashboard), MealLog (/MealLog), FoodSearch (/FoodSearch), Profile (/Profile), Progress (/Progress), and HydrationChallenge (/HydrationChallenge). Implement a persistent layout wrapper that renders the Navbar on inner pages (all except Landing). Set up route guards to redirect unauthenticated users to the Profile setup page if no profile data exists in localStorage. Configure scroll restoration between routes. The Navbar NAV_LINKS from the existing Navbar task should point to these routes.

As a frontend developer, implement the LandingHero section for the Landing page. The component imports gsap and framer-motion, using useRef and useEffect for entrance animations. It renders four custom SVG plant silhouette components — PlantFern, PlantBroadLeaf, PlantSprout, and PlantVine — each accepting a color prop and rendering unique path-based botanical shapes with opacity fills. GSAP drives staggered entrance animations on mount. Framer-motion (motion) is used for hero text and CTA button reveal transitions. Imports LandingHero.css.

As a frontend developer, implement the NutritionalGardenShowcase section for the Landing page. Renders an interactive garden of 5 PLANTS (calories, protein, carbs, fats, water) each with id, name, icon, current/goal values, unit, status (ontrack/low/exceeded), color, tip, and stats array. Uses useState, useEffect, useRef, useCallback, and getProgressPct helper (Math.min percentage). Features a PlantSVG component that renders unique SVG silhouettes per status color. Uses framer-motion AnimatePresence for card transitions and gsap for scroll-triggered entrance animations. Active plant selection drives a detail panel showing tip and stats grid. Imports NutritionalGardenShowcase.css.

As a frontend developer, implement the LandingFeatures section for the Landing page. Renders a FEATURES array of 6 items (Daily Calorie Tracking, Macro Progress Bars, Water Intake Monitoring, Meal Logging, Food Search Database, Progress Charts), each with title, desc, and icon string. The FeatureIcon component uses a switch statement rendering unique inline SVGs for flame, chart, droplet, utensils, search, and trending icons. Uses useState and useCallback for hover/active state management. Framer-motion (motion) drives staggered card reveal animations. Imports LandingFeatures.css.

As a frontend developer, implement the MacroTrackingHighlight section for the Landing page. Displays 3 MACROS (Protein 78%, Carbs 62%, Fats 85%) each with name, detail, percentage, grams string, and color. Uses SVG circular progress rings with RADIUS=44 and CIRCUMFERENCE=2*PI*44. circleRefs and counterRefs arrays drive per-macro animations. GSAP animates strokeDasharray from '0 CIRCUMFERENCE' to achieved length on IntersectionObserver threshold 0.25 with staggered delays (i*0.2). GSAP also animates a counterObj.val to drive setCounters state updates for live percentage display. A BENEFITS array of 4 bullet strings is rendered below. Decorative mth-deco-blob layers use CSS --scroll variable for parallax. hasAnimated ref prevents re-triggering. Imports MacroTrackingHighlight.css.

As a frontend developer, implement the WaterTrackingSection for the Landing page. GOAL_CUPS=8. useState manages cups (default 3), streak (12), ripples array, and isMilestone boolean. Refs include fillRef, waveRef, bottleWrapRef, streakCardRef, sectionRef, hasAnimatedRef. GSAP animates fillRef height and waveRef y attribute whenever cups changes (0.7s power2.out). On IntersectionObserver (threshold 0.2) entrance: GSAP fromTo animates fill from 0% to current level (1.2s power3.out delay 0.3). Cup increment triggers ripple effect via setRipples with unique id/position. CHALLENGE_REWARDS array (XP Points, Badges, Leaderboard) rendered as reward cards. HYDRATION_TIPS array of 5 tips displayed. framer-motion AnimatePresence handles ripple animations. Imports WaterTrackingSection.css.

As a frontend developer, implement the FoodDatabaseShowcase section for the Landing page. Renders a searchable, filterable grid of 16 FOODS with emoji, category, cal, protein, carbs, and fat fields. useState manages searchQuery and activeCategory. useMemo computes filteredFoods by matching lowercased query against food name and category, combined with activeCategory filter (CATEGORIES: All, Protein, Grains, Fruits, Vegetables, Dairy, Nuts & Seeds). cardVariants framer-motion object defines hidden/visible states with staggered delay (i*0.06) and custom easing. AnimatePresence wraps food card grid for enter/exit transitions. SearchIcon is a custom inline SVG component. Imports FoodDatabaseShowcase.css.

As a frontend developer, implement the ProgressChartsPreview section for the Landing page. Displays dual charts (weight line chart + calorie bar chart) with RANGES toggle ['7 Days', '14 Days', '30 Days']. WEIGHT_DATA/CALORIE_DATA provide 7-day arrays; _14 and _30 variants provide extended datasets (30-day uses Array.from with sine/cosine generation). useState manages activeRange and tooltip ({visible, x, y, text, chartId}). Refs: rootRef, barsRef array, lineRef, lineAreaRef, dotsRef array, hasAnimated. useCallback getDataForRange switches datasets by activeRange. GSAP scroll-triggered animation via IntersectionObserver animates bar heights, SVG line path stroke-dashoffset, area fill, and dot scale on first intersection. Tooltip state updates on SVG mousemove events. Imports ProgressChartsPreview.css.

As a frontend developer, implement the MobileResponsiveShowcase section for the Landing page. Renders a benefits array of 4 items (Touch-Friendly Controls, Adaptive Layout, Readable Typography, Simplified Navigation), each with title, desc, and inline SVG icon (and optional iconAlt). Uses useRef for sectionRef and phoneScreenRef, useState for screenOffset number. useInView from framer-motion (once: false, margin: '-10%') controls isInView. A rAF loop calculates scroll progress from section getBoundingClientRect relative to viewport height, translating phone screen content up to 280px via setScreenOffset. containerVariants defines staggerChildren: 0.12 and delayChildren for benefit card reveals. Imports MobileResponsiveShowcase.css.

As a frontend developer, implement the LandingCTA section for the Landing page. Uses useRef for rootRef, primaryBtnRef, and particleContainerRef. useInView (once: true, margin: '-80px') triggers framer-motion reveal. useState manages magnetOffset {x, y}. GSAP animates backgroundPosition on rootRef in an infinite yoyo tween (8s sine.inOut) stored in gradientTweenRef (cleaned up on unmount). handlePrimaryMouseMove (useCallback) calculates distance from button center; if dist < 60px applies magnetic GSAP translation (strength falloff); otherwise snaps back with elastic.out(1, 0.4). handlePrimaryMouseLeave snaps button back with elastic.out(1, 0.3). spawnParticles (useCallback) on button click creates 14 DOM particles appended to particleContainerRef, styled with random colors from ['#FF5722','#4CAF50','#FF9800','#FFC107','#81C784'] and random sizes (4–9px), animated via GSAP. Imports LandingCTA.css.

As a frontend developer, implement the Footer section for the Landing page. Renders footerColumns array of 4 columns (Product, Company, Legal, Support), each with a title and 4 link objects ({label, href}). Uses useRef for rootRef, colRefs array, socialRefs array, and hasAnimated flag. IntersectionObserver (threshold 0.15) triggers staggered GSAP fromTo animation on colRefs (opacity 0→1, y 16→0, stagger 0.1, 0.6s power2.out). Social icon SVGs in socialRefs get stroke-draw animations: getTotalLength sets strokeDasharray/strokeDashoffset, then gsap.to animates strokeDashoffset to 0 (0.8s power2.inOut, delay 0.4+i*0.1). A decorative ftr-deco-layer uses CSS --scroll variable for parallax translateY. Note: this Footer component may already exist from another page — reuse if available. Imports Footer.css.

As a frontend developer, implement the ProgressWeightChart section for the Progress page. This section renders an interactive weight-over-time line chart using react-chartjs-2 (Line component) with ChartJS registered for CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, and Filler. Features period toggle buttons mapping to PERIOD_DAYS constants (1M/3M/6M/1Y), a showGoal toggle to overlay a goal weight line, and procedurally generated realistic weight data via generateWeightData() and computeStats() helper functions. Uses IntersectionObserver with a 0.2 threshold to trigger scroll-based entrance, then fires GSAP animations (fromTo with opacity/y, stagger: 0.08) on .pwc-stat elements and the chart wrapper. Uses framer-motion AnimatePresence for period transitions. Manages state via useState hooks: period, showGoal, chartData, stats, isVisible. References rootRef and cardRef for DOM targeting.

As a frontend developer, implement the ProgressCalorieHistory section for the Progress page. This section renders a Bar chart (react-chartjs-2) with Chart.register(...registerables) for full Chart.js support, showing consumed vs. target calorie data across selectable periods (7d/30d/90d via PERIODS array). Data is generated procedurally by generateData() using sinusoidal variance and computeStats() calculates avg, overDays, deficitDays, maxDay, minDay, and total. Labels are dynamic: 7d uses getWeekDates() for real calendar dates, 30d uses 'Day N' labels, 90d groups into week labels ('W1'…). Below the chart, a MEAL_BREAKDOWN section shows four meal categories (Breakfast, Lunch, Dinner, Snacks) each with a custom SVG icon (mealIcons map), percentage, and calorie count. Uses framer-motion AnimatePresence for period tab transitions and gsap for scroll-triggered stagger entrance animations. State: period, chartData, stats managed via useState and useCallback.

As a frontend developer, implement the ProgressMacroTrends section for the Progress page. This section renders three macro trend cards (protein, carbs, fat) each driven by the MACRO_DATA config object containing label, unit, target, color (#FF5722 / #FF9800 / #FFC107), bgColor with rgba, 7-day data arrays, avg, delta percentage, and deltaDir. Each card contains a react-chartjs-2 Line chart with Filler plugin for gradient fill, registered via ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Filler, Tooltip). DAYS array ('Mon'…'Sun') provides x-axis labels. A summary panel shows animated progress bars per macro (barWidths state object keyed by protein/carbs/fat) triggered 400ms after scroll visibility. Uses IntersectionObserver (observerRef) to fire GSAP stagger entrance (fromTo opacity/y, duration 0.6, stagger 0.15) on cardRefs array elements. deltaIcon() helper renders ▲/▼/◼ and macroIcon() maps macro keys to emoji icons. Manages visible state and barWidths via useState.

As a frontend developer, implement the ProgressStatsSummary section for the Progress page. This section renders four animated stat cards from the statCards array (calories/1847kcal, weight/3.2kg, streak/28days, water/7.4cups), each with an accent color variant (primary/secondary/accent/highlight), custom SVG icon, value, unit, label, description, trend direction (up/down/neutral), and trendLabel. Uses a count-up animation on animatedValues state array triggered by IntersectionObserver via sectionRef and hasTriggered ref guard. A weeklyBreakdown section shows four progress bar rows (Calorie Target 87%, Protein Goal 92%, Meals Logged 26/28, Water Goal 75%) with barWidths state array that animates to target percentages on scroll trigger. framer-motion is used for card entrance animations and gsap for additional GSAP scroll-triggered effects. Imports ProgressStatsSummary.css.

As a frontend developer, implement the ProgressExportCTA section for the Progress page. This section renders an export call-to-action card (.pecta-card) with a mouse-follow glow effect via handleMouseMove callback that sets CSS custom properties --mx/--my on the card element. Three export format options (EXPORT_FORMATS: csv/json/pdf) are selectable via selectedFormat useState, each with a label, file extension, color class, and letter icon. EXPORT_DETAILS lists four data categories included in exports (Weight logs, Calorie history, Macro breakdowns, Meal entries). handleExport callback finds the selected format and triggers a GSAP timeline (toastTimeline ref using gsap.timeline) that animates .pecta-toast in with opacity/y then fades it out after 1.8s delay, managing toast message via useState. Scroll-triggered card entrance uses IntersectionObserver on sectionRef with hasEntered ref guard, firing gsap.fromTo on .pecta-card (opacity/y/scale) and staggered gsap.fromTo on .pecta-content children. Uses framer-motion AnimatePresence for toast visibility. Imports ProgressExportCTA.css.

As a Frontend Developer, implement the Dashboard page at /Dashboard. Display daily calories remaining (calculated from userProfile TDEE minus logged calories), macro progress bars (protein, carbs, fat) showing grams consumed vs goal with percentage fill, water intake tracker (cups consumed vs daily goal with visual indicator), and goal status card. Read all data from the localStorage data service hooks (useDailyLog, useUserProfile). Calculate TDEE from profile data using the Mifflin-St Jeor equation adjusted for activity level and goal (loss: -500 kcal, gain: +500 kcal, maintenance: 0). Render macro progress bars with color-coded fill (green for on-track, orange for near limit, red for exceeded). Use glassmorphism card styling with the FitByte theme. Make dashboard mobile-responsive with a stacked single-column layout on small screens.

As a Frontend Developer, implement the MealLog page at /MealLog. Render four meal sections: Breakfast, Lunch, Dinner, and Snacks. Each section shows a list of logged food items with their calorie and macro values, a total calories counter for that meal, and an 'Add Food' button that opens a food search modal. Implement the food search modal with a text input that filters the food database (from localStorage data service) by name. Clicking a food item adds it to the selected meal with a serving size selector. Persist all meal logs to localStorage via the useDailyLog hook. Show a daily totals summary bar at the top with calories, protein, carbs, fat. Support removing logged items from meals. Apply glassmorphism card styling and ensure mobile-friendly layout.

As a Frontend Developer, implement the FoodSearch page at /FoodSearch. Render a full-page food database browser with a search input, category filter tabs (matching the FoodDatabaseShowcase categories: All, Protein, Grains, Fruits, Vegetables, Dairy, Nuts & Seeds), and a grid of food cards. Each card shows food name, category, emoji, calories, and macros (protein, carbs, fat). Implement live filtering via useMemo as the user types. Clicking a food card opens a detail modal showing full nutrition info and a serving size input. Include an 'Add to Meal' button in the modal that prompts meal selection (Breakfast/Lunch/Dinner/Snacks) and logs the food via the useDailyLog hook. The food database (50+ foods) is read from localStorage data service.

As a Frontend Developer, implement the Profile page at /Profile. Render an editable user profile form with fields: age (number), height (cm or ft/in), weight (kg or lbs), gender (male/female/other select), activity level (sedentary/lightly active/moderately active/very active/extra active), and goal selection (weight loss/maintenance/weight gain). Calculate and display estimated TDEE and daily macro targets (protein: 0.8g/kg bodyweight, carbs: 45-65% calories, fat: 20-35% calories) based on form inputs, updating live as values change. Persist profile data via useUserProfile hook to localStorage on form submit. Show a profile completion indicator. Apply glassmorphism card styling with FitByte theme colors.

As a Frontend Developer, implement the Progress page at /Progress. Render two recharts charts: a LineChart for weight history (x-axis: date, y-axis: weight in kg/lbs) and a BarChart for daily calorie history (x-axis: date, y-axis: calories consumed vs goal). Add a date range toggle (7 days, 14 days, 30 days) that filters the chart data. Read progress history from useProgressHistory hook (localStorage). Include a weight entry form at the top allowing users to log today's weight. Display summary stats: average calories this week, average weight trend (loss/gain rate per week), best streak of meeting calorie goal. Apply responsive chart sizing and glassmorphism card styling.

As a Frontend Developer, implement the Hydration Hero Challenge page at /HydrationChallenge. Render: (1) Goal setup section where user selects daily water goal (2L/3L/4L) and reminder interval (1h/2h/3h). (2) Challenge level indicator (Beginner: 8 glasses, Intermediate: 10, Advanced: 12+) with progress toward current level. (3) Daily progress view showing cups consumed, streak counter, XP earned, and completion rate. (4) Rewards section displaying earned badges (7-Day Streak, 30-Day Hydration Master, 100-Day Water Champion) and XP level. (5) Smart notification schedule display showing the timed reminder messages. Implement browser Notification API permission request and schedule reminders using setTimeout/setInterval. Persist all challenge data via useHydrationChallenge hook (localStorage). Use framer-motion for badge unlock animations and AnimatePresence for transitions. Note: AI photo verification is deferred to the AI Integration task (task-ai-photo-verification).

As a Frontend Developer, implement global React state management using React Context API (no external state library, consistent with localStorage-only SRD). Create a FitByteProvider wrapping the app that exposes: UserProfileContext (profile data + setters), DailyLogContext (today's meals, water, calorie totals), ProgressContext (weight/calorie history), and HydrationContext (challenge state, XP, badges, streak). Each context reads initial state from the localStorage data service and writes back on updates. Export custom hooks (useUserProfile, useDailyLog, useProgress, useHydration) that consume these contexts. This replaces prop-drilling across Dashboard, MealLog, FoodSearch, Profile, Progress, and HydrationChallenge pages. Wrap the entire app in FitByteProvider in main.jsx/App.jsx.

As a frontend developer, implement the Navbar section for the FoodSearch page. This component may already exist from the Landing page (task 6d72e1a5-a30f-4ef6-94e1-8428528b7dfc). It uses useState for isScrolled, drawerOpen, underlineStyle, and underlineVisible; useRef for rootRef, svgRef, navRef, and drawnRef. Features include: GSAP SVG stroke-draw animation on .nb-leaf-path elements on mount, glassmorphic scroll transition that dynamically adjusts backdropFilter blur (0–12px) based on scroll progress up to 200px, body scroll lock when mobile drawer is open, and magnetic underline tracking via handleNavMouseMove callback that interpolates underlineStyle using 0.35 lerp factor. NAV_LINKS includes Dashboard, Meal Log, Food Search, Profile, and Progress routes.

As a Frontend Developer, implement the food database seed logic that populates localStorage with 50+ common foods on first app load. Each food entry must include: id, name, emoji, category (Protein/Grains/Fruits/Vegetables/Dairy/Nuts & Seeds), calories, protein (g), carbs (g), fat (g), and serving size description. The seed must be idempotent (only runs if the foodDatabase key is absent). This data service is required by the FoodSearch page, MealLog food search modal, and FoodDatabaseShowcase on Landing. Export a seedFoodDatabase() function called during app initialization in main.jsx before rendering.

As a Frontend Developer, implement the AI photo verification flow for the Hydration Hero Challenge. Add a 'Verify Hydration' button on the challenge page that opens a camera capture modal. Use the browser MediaDevices API (getUserMedia with facingMode: environment) to access the live camera. Capture a still frame via canvas.drawImage. Encode the image as base64. Implement a client-side heuristic check (detect dominant blue/clear colors and circular shapes as a proxy for water/bottle detection) using Canvas pixel analysis. If the image passes the heuristic, award +10 XP and advance the reminder counter. Implement duplicate-prevention by storing image hash (via simple pixel sampling fingerprint) in localStorage and rejecting re-uploads of the same image. Display a loading state during verification and a success/failure result with animated feedback. Note: SRD specifies AI verification — implement as client-side heuristic given localStorage-only tech stack with no backend.

As a Tech Lead, verify the end-to-end integration between the Landing page and the Dashboard/inner pages. Ensure the CTA button in LandingCTA navigates correctly to /Dashboard via React Router. Verify the Navbar component (task 9455aac2) links to /Dashboard, /MealLog, /FoodSearch, /Profile, /Progress correctly. Confirm the route guard in task-router-setup redirects new users (no profile in localStorage) to /Profile before accessing /Dashboard. Test the full first-time user flow: Landing → Profile setup → Dashboard. Verify framer-motion page transition animations work between routes. Check that the FoodDatabaseShowcase on Landing correctly mirrors the same 16-food dataset used in the FoodSearch page food database.

As a Tech Lead, verify the end-to-end integration between the MealLog page and FoodSearch page. Ensure that clicking 'Add Food' in MealLog opens the food search modal/navigates to FoodSearch with the correct meal context (Breakfast/Lunch/Dinner/Snacks) pre-selected. Confirm that selecting a food in FoodSearch correctly adds it to the intended meal in localStorage via the shared DailyLogContext. Verify that Dashboard macro progress bars and calorie counter update in real-time after a food is logged. Test the full flow: Dashboard → MealLog → FoodSearch → food selected → MealLog shows updated totals → Dashboard reflects updated calories remaining.

As a Tech Lead, verify the end-to-end integration between the Profile page and Dashboard. Ensure that when a user updates their profile (age, weight, height, activity level, goal), the Dashboard immediately recalculates and reflects the new TDEE and macro targets. Verify that changing the goal (loss/gain/maintenance) updates calorie targets on the Dashboard calories-remaining display. Test that setting a new weight in the Profile triggers a progress history entry. Confirm macro target bars on the Dashboard re-scale correctly after profile updates. Test the flow: Dashboard → Profile edit → save → Dashboard shows updated goals.

As a Tech Lead, verify the end-to-end integration between the Progress page charts and the data logged across Dashboard, MealLog, and Profile pages. Ensure daily calorie totals from MealLog are persisted as calorie history entries accessible in the Progress page BarChart. Verify weight entries from Profile/Progress log form appear correctly in the Progress LineChart. Confirm the 7/14/30-day range toggle filters data correctly from localStorage history. Test that the ProgressChartsPreview section on Landing (task b189ae0f) uses the same data shape as real progress history entries. Validate the full flow: MealLog food entries → Dashboard calorie totals → Progress calorie history chart displays accurate values.

As a frontend developer, implement the FoodSearchHeader section for the FoodSearch page. The component uses useRef for rootRef, headlineRef, and hasAnimated. It employs an IntersectionObserver (threshold: 0.3) to trigger one-time GSAP animations on scroll-into-view: the .fsh-headline fades in from opacity 0 / y:12 over 0.5s with power2.out, followed by staggered entrance (0.08s stagger, 0.45s duration) of all .fsh-anim-item elements. A framer-motion badge (fsh-badge) animates from scale 0.9/opacity 0 to full with a 0.5s delay and whileHover scale:1.03. The layout includes .fsh-accent-strip, .fsh-headline ('Food Search'), .fsh-subheadline, .fsh-divider, .fsh-description, and the animated badge showing '50+ foods in database' with an SVG star icon.

As a frontend developer, implement the FoodSearchBar section for the FoodSearch page. The component manages useState for query, isFocused, isListening, and pulseRing; useRef for inputRef, dropdownRef, and wrapperRef. A hardcoded FOOD_DATABASE of 20 items (name, detail, kcal, emoji) is filtered via useMemo when query.trim().length >= 1 using case-insensitive name/detail matching. The dropdown (showDropdown = isFocused && query.length > 0) uses framer-motion AnimatePresence for enter/exit transitions. A POPULAR array (5 items) and RECENT array (4 items) are surfaced in the idle dropdown state. Click-outside detection via mousedown listener on document closes the dropdown when click is outside wrapperRef. Supports a voice input mode (isListening state) with a pulseRing animation effect.

As a frontend developer, implement the FoodSearchFilters section for the FoodSearch page. The component manages useState for activeCategory (default 'All'), sortBy (default 'name'), and dietaryFilters (object keyed by dietary option). Uses useRef for rootRef, pillRefs (array), and hasAnimated. On mount, GSAP staggered entrance animation runs on pill elements (pillRefs array): from opacity:0/y:12/scale:0.92 to full with 0.45s duration, 0.06s stagger, back.out(1.4) ease. CATEGORY_FILTERS includes 6 items (All, Fruits, Vegetables, Proteins, Grains, Dairy) with emoji icons rendered as .fsf-pill buttons with aria-pressed and aria-label. SORT_OPTIONS has 3 values (name, calories, protein). DIETARY_OPTIONS has 3 toggles (vegan, vegetarian, glutenFree). handleDietaryToggle uses useCallback. activeDietaryCount computed from filtered Object.values. handleClearFilters resets all state.

As a frontend developer, implement the FoodSearchResults section for the FoodSearch page. The component manages useState for addedIds (Set), sortBy (default 'name'), foods (array), isLoading (true), and hasError. Uses useRef for rootRef and emptyRef. Data is simulated via setTimeout (800ms delay) populating FOOD_DATA (15 items with id, name, emoji, calories, protein, carbs, fat, serving fields). Framer-motion containerVariants (staggerChildren: 0.06, delayChildren: 0.05) and cardVariants (hidden: opacity:0/y:24, visible: opacity:1/y:0 with cubic bezier [0.25,0.46,0.45,0.94], exit: opacity:0/y:-12) animate cards in/out via AnimatePresence. Loading, error, and empty states are handled. Each card displays emoji, name, serving, and macros (calories, protein, carbs, fat). addedIds Set tracks which food IDs have been added to prevent duplicate additions.

As a frontend developer, implement the Footer section for the FoodSearch page. This component may already exist from the Landing page (task 95c42b1c-aca4-4a4b-848f-c24374bb5ff4). Uses useRef for rootRef, colRefs (array), socialRefs (array), and hasAnimated. An IntersectionObserver (threshold: 0.15) triggers one-time GSAP animations: staggered column fade-in from opacity:0/y:16 with 0.6s duration and 0.1s stagger (power2.out), plus SVG stroke-draw animation on social icon paths/circles/rects using getTotalLength() for strokeDasharray/strokeDashoffset with 0.8s duration and per-icon 0.1s delay increments. footerColumns contains 4 columns: Product (Dashboard, Meal Log, Food Search, Progress Charts), Company (About FitByte, Careers, Blog, Press), Legal (Privacy Policy, Terms of Service, Cookie Policy, GDPR), Support (Help Center, Contact Us, FAQ, Community). Includes a .ftr-deco-layer with CSS variable --scroll parallax transform.

As a Frontend Developer, implement a shared notification scheduling service for the Hydration Hero Challenge. Create a notificationService module that: (1) Requests browser Notification API permission on first use. (2) Schedules smart reminder notifications at configurable intervals (1h/2h/3h) using setTimeout/setInterval chains. (3) Cancels existing timers on re-schedule to prevent duplicate timers across page navigations (store timer IDs in a module-level map). (4) Clears all timers on app unmount via a cleanup() export. (5) Dispatches the 8 predefined smart notification messages (8AM Start your day, 10AM Hydration Check, 12PM fuel before lunch, 2PM Water Challenge, 4PM Beat fatigue, 6PM Almost there) based on configured interval. Used by the HydrationChallenge page task (a9486a62).

As a Frontend Developer, wire up the full application entry point in main.jsx/App.jsx. Wrap the entire app in FitByteProvider (from Global State Management task 65d77113). Call seedFoodDatabase() before rendering to ensure food data exists. Integrate React Router v6 (from task 01b6a0b7) with route definitions. Apply the Tailwind theme (from task bce8152c) base styles globally. Ensure the FitByteProvider is the outermost wrapper so all route components can consume contexts. Import and configure framer-motion's AnimatePresence at the router level for page transition animations. This task coordinates the outputs of: Global State (65d77113), Router (01b6a0b7), Tailwind Theme (bce8152c), and LocalStorage Data Service (60414efe).

As a Tech Lead, verify the end-to-end integration between the Dashboard page (task 925126c5) and the data layer (LocalStorage Data Service task 60414efe, Global State task 65d77113, TDEE Calculator task temp_tdee_calculator). Ensure the Dashboard reads userProfile from UserProfileContext and correctly calculates TDEE and macro targets using the shared utility. Verify calories remaining updates in real-time when meals are logged via DailyLogContext. Confirm water intake display reads from the same DailyLogContext updated by the HydrationChallenge. Test that macro progress bars correctly reflect consumed vs calculated target grams.

As a Tech Lead, verify the end-to-end integration between the Profile page (task edf009a7) and the data layer (LocalStorage Data Service task 60414efe, Global State task 65d77113, TDEE Calculator task temp_tdee_calculator). Ensure profile form changes persist to localStorage via useUserProfile hook and immediately update UserProfileContext so Dashboard reflects new TDEE targets without page reload. Verify that saving a new weight from Profile creates a ProgressHistory entry readable by the Progress page. Confirm the live TDEE/macro preview on the Profile form uses the shared calculateTDEE/calculateMacros utility functions.

As a Tech Lead, verify the end-to-end integration between the MealLog page (task 2f962681) and the data layer (LocalStorage Data Service task 60414efe, Global State task 65d77113, Food Database seed task temp_food_database_seed). Ensure the food search modal in MealLog reads from the seeded food database in localStorage. Verify that adding a food item to a meal updates DailyLogContext so Dashboard calories-remaining and macro bars update immediately. Confirm that meal log data persists correctly across browser refresh and is keyed by date. Test removing food items from meals and verifying totals recalculate correctly.

As a Tech Lead, verify the end-to-end integration between the FoodSearch page (task 0407d62d) and the data layer (LocalStorage Data Service task 60414efe, Global State task 65d77113, Food Database seed task temp_food_database_seed). Ensure the FoodSearch page reads the seeded 50+ food database from localStorage via the data service. Verify that the 'Add to Meal' flow in the food detail modal correctly invokes useDailyLog to persist the food entry to the correct meal (Breakfast/Lunch/Dinner/Snacks). Confirm that after adding a food from FoodSearch, navigating back to MealLog or Dashboard shows the updated meal totals from DailyLogContext.

As a Tech Lead, verify the end-to-end integration between the Progress page (task 7ce954a1) and the data layer (LocalStorage Data Service task 60414efe, Global State task 65d77113). Ensure the Progress page reads weight history and calorie history from useProgressHistory hook (localStorage). Verify the weight entry form on Progress correctly writes a new ProgressHistory entry to localStorage and updates ProgressContext immediately. Confirm the date-range filter (7/14/30 days) correctly slices the stored history arrays. Test that daily calorie totals computed from DailyLogContext entries are appended to calorie history on day rollover or manual trigger.

As a Tech Lead, verify the end-to-end integration between the Hydration Hero Challenge page and the Dashboard water intake tracker. Ensure cups logged in the HydrationChallenge page (and the WaterTrackingSection preview on Landing) are reflected in the Dashboard water intake display. Verify that XP, streak, and badge data from the challenge persists correctly in localStorage and updates across page navigations. Confirm the AI photo verification flow (task-ai-photo-verification) awards XP and updates the HydrationContext that the Dashboard reads. Test reminder notification scheduling survives page navigation without duplicate timers. Test full flow: Dashboard water tracker → HydrationChallenge page → complete reminder + photo verification → XP awarded → Dashboard updates.

As a frontend developer, implement the FoodSearchPagination section for the FoodSearch page. The component uses useState for currentPage (default 1). Constants: TOTAL_RESULTS=127, RESULTS_PER_PAGE=12, TOTAL_PAGES=Math.ceil(127/12)=11. getVisiblePages() logic produces smart ellipsis pagination: shows all pages if <=5, first 4+'...'+last if currentPage<=3, first+'...'+last 4 if near end, else 1+'...'+prev/current/next+'...'+last. useMemo recalculates visiblePages on currentPage change. startResult and endResult computed for result counter display. handlePageChange skips if same page. handlePrev/handleNext guard against boundary overrun. Each page number renders as a framer-motion button with initial/animate/exit scale:0.8/opacity:0 transitions (0.2s easeOut). Ellipsis rendered as static .fsp-ellipsis spans. Prev/Next buttons use aria-labels and disabled state.

As a Tech Lead, verify the end-to-end integration between the HydrationChallenge page (task a9486a62), the AI Photo Verification feature (task 7790736d), the Notification Service (task temp_notification_service), and the data layer (LocalStorage Data Service task 60414efe, Global State task 65d77113). Ensure HydrationChallenge reads/writes via useHydrationChallenge hook updating HydrationContext. Verify that XP awarded by the photo verification flow updates HydrationContext and is immediately reflected on the Dashboard water tracker and challenge page. Confirm streak counter increments correctly on daily completion and that badge unlock animations trigger at correct thresholds (7/30/100 days). Test notification scheduling persists interval setting across page navigations.

As a Tech Lead, verify the end-to-end integration of the full application entry point and provider wiring (task temp_app_entry_setup). Confirm FitByteProvider wraps all routes and context values are accessible from every page. Verify seedFoodDatabase() runs on first load and is skipped on subsequent loads (idempotent). Test React Router route guards: new users with no profile in localStorage are redirected to /Profile before accessing /Dashboard. Confirm framer-motion AnimatePresence page transitions fire correctly on route changes. Verify Tailwind theme classes and glassmorphism utilities apply globally across all pages.