jolly-litlabs

As a frontend developer, implement the LandingHero section for the Landing page. This full-viewport hero combines @react-three/fiber Canvas with GSAP ScrollTrigger and framer-motion. The Canvas renders two 3D components: FloatingParticles (60-point bufferGeometry with Float32Array positions/sizes, pointsMaterial color #1A73E8 opacity 0.5, useFrame animating sinusoidal Y/X drift and slow Y rotation) and FloatingBook (group with useFrame sin/cos rotation and Y float animation). GSAP registers ScrollTrigger plugin and drives scroll-triggered entrance animations. Static content includes an illustrations array (3 items: Interactive Storybooks, Spark New Ideas, Community Learning with icon/label/desc/variant fields) and stats array (10K+ Learners, 500+ Courses, 98% Satisfaction). Uses useRef for DOM targets, useState for particle positions/sizes initialized with Float32Array. Requires three, @react-three/fiber, gsap/ScrollTrigger, and framer-motion dependencies.

As a frontend developer, implement the LandingValueProp section for the Landing page. Uses GSAP ScrollTrigger for 5 distinct scroll-triggered animations: (1) headlineRef color shift from gray to #1A73E8 (power2.out, 0.8s, start 'top 80%'); (2) accentLineRef scaleX 0→1 with opacity (power3.out, 0.6s, start 'top 75%'); (3) introRef opacity fade (power2.out, 0.7s, start 'top 65%'); (4) foldLeftRef x slide-in from off-screen with opacity 0.12 scrub 0.8 (start 'top 85%', end 'bottom 20%'); (5) foldRightRef mirrored slide-in. framer-motion wordVariants animate individual words with opacity 0→1, y 18→0, blur 4px→0 (duration 0.45, cubic-bezier easing). containerVariants staggers children at 0.05s with 0.3s delayChildren. subheadlineText is split into words array for per-word animation. introText is a static paragraph. Uses useRef for sectionRef, headlineRef, accentLineRef, introRef, foldLeftRef, foldRightRef with gsap.context for cleanup.

As a frontend developer, implement the LandingFeatures section for the Landing page. Renders a grid of 6 feature cards from the features array (Secure Authentication, Community Learning, Personalized Content, Activity Tracking, Admin Dashboard, Collaborative Tools — each with title, description, icon key). Six custom SVG icon components: ShieldIcon (path with checkmark), CommunityIcon (circle + path + two semi-transparent circles), PersonalizeIcon (rect with lines and circle), ActivityIcon, DashboardIcon, CollabIcon — each using stroke='currentColor' strokeWidth='2'. Uses framer-motion useInView hook for scroll-triggered card entrance animations. Each card animates independently on viewport entry. Responsive grid collapses from 3-col to 2-col to 1-col across breakpoints.

As a frontend developer, implement the LandingHowItWorks section for the Landing page. Renders a 4-step journey using steps array (Sign Up/UserPlus/BookOpen, Explore/Compass/Sparkles, Engage/MessageCircle/Users, Grow/TrendingUp/Rocket) with dual icon fields (Icon from lucide-react for step, pageIcon for book illustration page). StepItem sub-component uses useInView (framer-motion, once:false, amount:0.6) to toggle hiw-step--active class and animate step number scale (1→1.1) and fontSize (20px→24px) via spring (stiffness 300, damping 20). Each StepItem entrance: opacity 0→1, x -30→0 with 0.12s staggered delay. BookIllustration component uses GSAP ScrollTrigger with pageRef animating rotationY 0→-160deg (power2.inOut, scrub) triggered from 'top center' to 'bottom center'. Requires lucide-react for icon imports.

As a frontend developer, implement the LandingInteractive section for the Landing page. Renders 4 expandable popup cards from popupCards array: Security (Shield, #1A73E8, direction:left), Learn Together (Users, #FF6F61, direction:right), Track Progress (BarChart3, #b8960a, direction:left), Customize Your Path (Palette, #FFA500, direction:right). Each card has id, title, snippet, description, tags array, icon (lucide-react component), colorVar, modifier (CSS class suffix), and direction fields. Custom useInView hook uses IntersectionObserver (threshold 0.15) with once:true behavior. PopupCard sub-component receives isExpanded/onToggle props and toggles expanded content via AnimatePresence. Uses useState for tracking expanded card id, useRef for section container. Lucide-react icons: Shield, Users, BarChart3, Palette, ChevronDown. Tags rendered as badge chips. Direction field controls animation offset direction.

As a frontend developer, implement the LandingTestimonials section for the Landing page. Renders a carousel/slider of 6 testimonials from the testimonials array (Sarah Mitchell/Educator, David Chen/Student, Amara Johnson/Organizer, Marcus Rivera/Professor, Priya Patel/EdTech Admin, James Okafor/Researcher — each with name, initial, role, rating:5, quote). StarRating sub-component maps 5 motion.svg stars with staggered entrance animations: initial opacity 0.2/scale 0.6, animate to opacity 1/scale 1 with spring (stiffness 300, damping 18, delay 0.15*i). Each star's motion.path fill animates from rgba(200,200,200,0.3) to #FFD700 for active stars (delay 0.15*i+0.1). Uses useState for active slide index, useEffect for auto-advance timer, useRef for carousel container, useCallback for navigation handlers. useAnimation and AnimatePresence from framer-motion for slide transitions.

As a frontend developer, implement the LandingCTA section for the Landing page. Uses GSAP ScrollTrigger to animate gradientRef opacity (power2.out, 0.8s, scrub 0.6, start 'top 80%', end 'center center'). Magnetic button effect via handleMouseMove/handleMouseLeave callbacks computing dx/dy offset (multiplied by 0.15) from button center via getBoundingClientRect, stored in btnOffset state ({x,y}). Click handler spawns 10 particle burst objects: angle computed as (2π*i/10 + random offset), distance 40-90px, random color from PARTICLE_COLORS array (#FFD700, #FFA500, #FF6F61, #1A73E8, #34A853), size 5-11px — stored in particles state and cleaned up after 700ms timeout via particleIdRef counter. framer-motion variants: headlineVariants (y:40→0, spring stiffness:80 damping:18, delay:0.1), subheadlineVariants (y:30→0, delay:0.25). useInView (once:true, amount:0.3) gates all animations. AnimatePresence wraps particle renders.

As a frontend developer, implement the Footer section for the Landing page. Renders a multi-column footer with 5 link arrays: productLinks (Interactive Learning /Dashboard, Community Hub /Community, Activity Logs /ActivityLogs, Public Content /PublicContent, Results & Analytics /Results), companyLinks (About Us, Mission, Careers, Blog, Press — all /About or /Community), resourceLinks (6 items linking to /Home, /PublicContent, /Community), legalLinks (5 items linking to /Landing). LeafLogo SVG uses 4 sequential motion.path animations: outer leaf shape (pathLength 0→1, duration 1.8), central vein (delay 0.8, duration 1.2), left vein (delay 1.4, duration 0.8), right vein (delay 1.6, duration 0.8). Social icons (LinkedIn, Twitter, GitHub, Discord) each animate with whileHover rotate:360 transition (duration 0.6). containerVariants staggers LinkColumn children at 0.1s. Parallax background SVG layer (two wave paths at rgba(26,115,232,0.06/0.04)) and parallax midground dot layer use CSS transform with --scroll variable. whileInView trigger with once:true, amount:0.15. Note: this component may already exist from a previous page — verify before regenerating.

As a Backend Developer, implement FastAPI user management endpoints: GET /users (list with pagination/filter), GET /users/{id}, PUT /users/{id}, DELETE /users/{id}, POST /users/{id}/suspend, POST /users/{id}/permissions. Include role-based access control (RBAC) so only Admins can access these routes. Required by UserManagement page (Manage Accounts, Edit Permissions, Suspend Account flows).

As a Backend Developer, implement FastAPI activity log endpoints: GET /activity-logs (paginated, filterable by user/action/date), GET /activity-logs/{id}, POST /activity-logs (internal write). Middleware to auto-log significant user actions (login, permission changes, content access). Required by ActivityLogs page (Admin: Review Events flow). Note: frontend ActivityLogs page tasks should depend on this API.

As a Backend Developer, implement FastAPI community endpoints: GET /community/activities (list community activities), POST /community/activities/{id}/join, GET /community/activities/{id}/participants, POST /community/posts, GET /community/posts (feed), POST /community/posts/{id}/reactions. Requires auth for write operations. Required by Community page (Join Activity, Participate flows).

As a Backend Developer, implement FastAPI profile endpoints: GET /profile (current user), PUT /profile (update name, bio, avatar), GET /profile/{id} (public profile), GET /profile/activity (user's own activity summary). Required by Profile page (View Profile flow) and Settings page (Reset Password flow).

As a Backend Developer, implement FastAPI search/results endpoints: GET /search?q=&type=&page= (unified search across content and community items), GET /results/{id} (detail view). Support filtering and sorting. Required by Results page (View Results flow from Home: Search Content).

As a Backend Developer, implement FastAPI settings endpoints: GET /settings (user preferences), PUT /settings (update preferences), PUT /settings/security (change password, enable/disable 2FA), PUT /settings/notifications. Admin-specific: GET /settings/security-protocols, PUT /settings/security-protocols. Required by Settings page (Configure Security, Update Protocols, Reset Password flows).

As an AI Engineer, integrate LiteLLM for LLM routing and Langchain for chain management. Set up LiteLLM proxy configuration targeting GPT 5.4. Implement FastAPI endpoint POST /ai/chat for user-friendly AI responses. Create Langchain chains for: content recommendations, community activity suggestions, and help/FAQ responses. Expose via REST API consumed by Home and Community pages.

As a Frontend Developer, implement route guards and auth middleware: ProtectedRoute component (redirects unauthenticated users to /Login), AdminRoute component (redirects non-admin users), and GuestRoute (redirects logged-in users away from Login/Register). Configure Axios interceptors to attach JWT Bearer tokens to all API requests and handle 401 responses by clearing auth state and redirecting to login. Wire into React Router for all protected pages (Dashboard, Profile, UserManagement, ActivityLogs, Settings, Community, Home).

As a Frontend Developer, create a centralized API client (src/api/) using Axios with base URL configuration from environment variables. Implement typed API service modules: authService, userService, contentService, communityService, activityLogService, dashboardService, settingsService, searchService, aiService. Each service wraps Axios calls with error handling and response typing. Provides a consistent data-fetching layer for all page components.

As a Backend Developer, implement FastAPI dashboard endpoints: GET /dashboard/stats (aggregated platform metrics: total users, active sessions, content views, community activity counts), GET /dashboard/recent-activity (latest events for admin overview). Requires admin role. Required by Dashboard page (View Overview, View Activity Logs flows).

As a Tech Lead, verify the end-to-end integration between the Login/Register frontend pages and the Auth backend API. Ensure JWT tokens are correctly stored, auth state is updated in global context, route guards redirect correctly, and token refresh works transparently. Validate password reset email flow and session persistence across page reloads.

As a Tech Lead, verify the end-to-end integration between the UserManagement frontend page and the User Management backend API. Ensure admin can list users with pagination, edit permissions, suspend accounts, and all actions reflect correctly in the UI with proper error states and success feedback.

As a Tech Lead, verify the end-to-end integration between the ActivityLogs frontend page and the Activity Logs backend API. Ensure admin can view paginated logs, filter by user/action/date, and that significant user actions are automatically recorded by the middleware.

As a Tech Lead, verify the end-to-end integration between the PublicContent frontend page and the Public Content backend API. Ensure guest users can browse and search articles without authentication, content loads with pagination, and individual article detail views render correctly.

As a Tech Lead, verify the end-to-end integration between the Community frontend page and the Community backend API. Ensure authenticated users can view activities, join them, participate in posts/discussions, and that real-time or near-real-time updates reflect correctly in the UI.

As a Tech Lead, verify the end-to-end integration between the Profile and Settings frontend pages and their respective backend APIs. Ensure profile updates persist, password reset flow completes successfully, security settings save correctly, and admin security protocol configuration works as expected.

As a Tech Lead, verify the end-to-end integration between the Home search functionality and Results frontend page with the Search/Results backend API. Ensure search queries return relevant paginated results, filters apply correctly, and result detail navigation works.

As a Tech Lead, verify the end-to-end integration between the AI-powered frontend components (content recommendations on Home, community suggestions, help chatbot) and the LiteLLM/Langchain backend AI endpoints. Ensure responses are returned within acceptable latency, errors are gracefully handled, and AI suggestions display correctly in UI.

As a Tech Lead, verify the end-to-end integration between the Dashboard frontend page and the Dashboard Stats backend API. Ensure aggregated platform metrics render correctly, recent activity feed is live, and admin-only access controls are enforced at both frontend route guard and API levels.