golden-productivity

As a frontend developer, implement the `LandingHero` section for the Landing page. Build a full-viewport hero with a left column containing: a `motion`-animated badge with `Sparkles` icon, an H1 headline with gradient text span, a subheading paragraph, a primary CTA button (`ArrowRight` icon) and a secondary ghost button (`PlayCircle` icon), and a stats row rendering `STAT_DATA` (120K+ Goals Achieved, 4.9/5 User Rating, 38% Avg. Time Saved) as animated stat blocks. On the right, render a `@react-three/fiber` `Canvas` (class `lh-scene-canvas`) hosting `GalaxyScene`, which includes ambient and point lights plus the `GalaxyCore` component. `GalaxyCore` uses `useRef` for `groupRef` and `coreRef`, `useMemo` to generate 90 spiral star positions with `ORB_COLORS` (`#4F46E5`, `#06B6D4`, `#8B5CF6`), and `useFrame` to rotate the group at `delta * 0.12` and pulse the icosahedron core using `Math.sin`. Two `Float`-wrapped satellite spheres (cyan and violet) orbit the core. Import and apply `LandingHero.css`.

As a frontend developer, implement the `LandingFeatures` section for the Landing page. Build a grid of 6 `FeatureCard` components driven by the `FEATURES` array (ai-chat, smart-planner, flashcards, predictor, streaks, notes), each with a unique `gradient`, lucide icon (`MessageSquareText`, `CalendarClock`, `Layers`, `LineChart`, `Flame`, `Sparkles`), bullet `points`, and an `href`. Implement a magnet hover effect using `MAGNET_RANGE = 8` and `useCallback`-based mouse move handlers registered via `registerRef`. Track `hoveredId` with `useState` to trigger card highlight state. Use `AnimatePresence` to render an expanded detail overlay panel when a card is selected, showing `Check`-prefixed bullet points and an `ArrowRight` CTA link. Implement `useEffect` with `useRef` for intersection-based card entrance animations. Section header uses `motion` stagger animations. Import and apply `LandingFeatures.css`.

As a frontend developer, implement the `LandingGalaxyMap` section for the Landing page. Build a full interactive 3D galaxy map using `@react-three/fiber` `Canvas` with `OrbitControls`, `Line`, and `Html` from `@react-three/drei`. Render 9 feature nodes (ai-chat, smart-planner, flashcards, predictor, notes, streaks, calendar, tracking, timetable) as 3D spheres positioned on a spiral layout computed with `useMemo` and `THREE`. Color-code by `CATEGORY`: student (`#06B6D4`), professional (`#8B5CF6`), shared (`#F59E0B`). Use `useFrame` for rotation animation and `useThree` for camera access. Render `Line` components for `related` feature connections. Use `Html` from drei to overlay lucide icons (`MessageSquare`, `CalendarRange`, `Layers`, `TrendingUp`, `FileText`, `Flame`, `CalendarDays`, `Gauge`) on each node. Manage `useState` for `selectedFeature` to drive an `AnimatePresence`-powered sidebar detail panel with description, related links (`ArrowRight`), and close (`X`) button. Include a `MousePointer2` hint overlay and category legend. Import and apply `LandingGalaxyMap.css`.

As a frontend developer, implement the `LandingPricingPreview` section for the Landing page. Build a billing toggle (`useState` for `'monthly'`/`'annual'` billing) that switches between monthly and annual pricing. Render 3 `PricingCard` components from the `TIERS` array (Starter $0, Pro $12/$9, Enterprise $29/$24). The `PriceDisplay` sub-component uses `AnimatePresence` with `mode='popLayout'` and `motion.span` with `rotateY: -180→0→180` flip animation on billing change. Each `PricingCard` uses `useState` for a `confirmed` ripple/confirmation state on CTA click (`handleChoose`). Cards display feature lists with `CheckCircle2`/`Check` icons (included/excluded). The Pro tier has `featured: true` styling. CTA buttons link to `/Signup` or `/Subscription`. Import and apply `LandingPricingPreview.css`.

As a frontend developer, implement the `LandingTestimonials` section for the Landing page. Build an auto-advancing carousel (`AUTO_MS = 5000`) using `useEffect` and `useCallback` with `useState` for `activeIndex`. Render 3 testimonial cards from `TESTIMONIALS` (Maya Rodriguez, Daniel Okafor, Aisha Patel) using `AnimatePresence` with `cardVariants` (`enter: {opacity:0, y:28, scale:0.96}`, `center`, `exit: {opacity:0, y:-22, scale:0.96}`). Each card shows: avatar initials via `Initials()` helper, name, role, star rating rendered by `StarRow` component using `starsContainer`/`starItem` motion variants with stagger (`0.09s`) and `delayChildren: 0.12s`, quote text, and an expandable detail section. Include `ChevronLeft`/`ChevronRight` navigation buttons, dot indicators, and a metric badge with `TrendingUp`/`Clock`/`Award` icons and `benefit` strings. Use `useRef` for carousel timer ref to pause on hover. Import and apply `LandingTestimonials.css`.

As a frontend developer, implement the `LandingCTA` section for the Landing page. Build an email capture section with `useState` for `email`, `focused`, and `status` (`idle | loading | success`). Implement a magnet button effect using `useRef` for `btnShellRef` and `useCallback` handlers (`handleMouseMove`, `handleMouseLeave`) that clamp cursor offset to ±12px via `setMagnet({x, y})`. On form submit (`handleSubmit`), invoke `emitParticles()` which uses `particleLayerRef` to dynamically append 18 `<span class='lcta-particle'>` DOM elements and animates them with GSAP (`gsap.fromTo`) radially outward using `power2.out` easing over 0.7–1.1s, then removes each on complete. Simulate async submission with `setTimeout` to transition to `success` state showing a `Check` icon. Render 3 trust badges from `TRUST_BADGES` (120,000+ users `Users`, 4.9/5 rating `Star`, SOC 2 `ShieldCheck`). Include decorative `.lcta-grid`, `.lcta-wash`, and `.lcta-orb` parallax divs driven by CSS `--scroll` variable. Import and apply `LandingCTA.css`.

As a frontend developer, implement the `Footer` section for the Landing page. Build a `Footer` component with 4 link columns defined in `linkColumns` (Product, Company, Resources, Legal), each rendered as a `motion.ul` with `colChildVariants` hover animation (`opacity: 0.72→1`, `x: -6→0`) on each `<li>`. Include a brand block with the SVG logo mark (hexagon path + star path with CSS classes `ftr-logo-path` and `ftr-logo-star`) and brand description. Render social links for LinkedIn, Twitter, and GitHub using lucide-react icons (`Linkedin`, `Twitter`, `Github`) from the `socials` array. Include decorative parallax elements: `.ftr-grid`, `.ftr-orb-1/2/3` divs with CSS `--scroll` variable transforms. Display dynamic copyright year via `new Date().getFullYear()`. Import and apply `Footer.css`. This component is shared across pages — verify it doesn't already exist before recreating.

As a Backend Developer, implement NextAuth/Auth.js configuration with Google OAuth provider and email/password credentials provider. Create API routes for signup (/api/auth/signup), login (/api/auth/signin), forgot password (/api/auth/forgot-password), and session management. Implement JWT session strategy, password hashing with bcrypt, rate limiting, CSRF protection, and input validation. Depends on Prisma schema being ready.

As a Frontend Developer, implement global state management for the application. Create React Context providers or Zustand stores for: auth session state (user, role, subscription), theme preferences, notification/toast state, AI chat session state (conversation history, voice mode). Set up SWR or React Query for server state management and API caching. Create custom hooks: useAuth, useSubscription, useRole, useChatSession. Ensure state persists appropriately across page navigations in Next.js 15 App Router.

As a frontend developer, implement the `LandingHero` section for the Landing page. Build the hero layout with a `GalaxyCore` Three.js component rendered inside `@react-three/fiber` `Canvas` (`lh-scene-canvas` class) using `@react-three/drei` `Float` wrapper. `GalaxyCore` uses `useRef` for `groupRef` and `coreRef`, `useMemo` to generate 90 spiral star positions using ORB_COLORS (`#4F46E5`, `#06B6D4`, `#8B5CF6`), and `useFrame` for continuous rotation (`delta * 0.12`) and core pulsing scale via `Math.sin`. The core mesh is an `icosahedronGeometry` with `emissive` indigo material. Two floating satellite orbs use `Float` with `speed`/`rotationIntensity`/`floatIntensity` props. The 2D overlay includes headline text animated with framer-motion, a `STAT_DATA` array (120K+ Goals Achieved, 4.9/5 Rating, 38% Time Saved), a primary CTA button, and a Play Demo button with `PlayCircle` and `ArrowRight` lucide icons. Apply `LandingHero.css`.

As a frontend developer, implement the `LandingFeatures` section for the Landing page. Build an interactive feature grid from the `FEATURES` array (6 items: ai-chat, smart-planner, flashcards, predictor, streaks, notes) each containing `id`, `title`, `desc`, `Icon` (lucide-react), `gradient`, `href`, and `points`. Implement `FeatureCard` with magnetic hover effect using `MAGNET_RANGE = 8` and a `registerRef` callback for ref tracking. Use `useState` for `hoveredId`, `useRef` for card refs, `useEffect` and `useCallback` for mouse-tracking logic. Cards expand on hover with `AnimatePresence` to reveal bullet points (`Check` icon) and an `ArrowRight` CTA. The section header includes a `Sparkles` icon badge. An `X` button closes expanded card detail panels. Apply `LandingFeatures.css`.

As a frontend developer, implement the `LandingGalaxyMap` section for the Landing page. Build an interactive 3D galaxy map using `@react-three/fiber` `Canvas` with `OrbitControls`, `Line`, and `Html` from `@react-three/drei`, and `THREE` from three.js. The `FEATURES` array (9 nodes: ai-chat, smart-planner, flashcards, predictor, notes, streaks, calendar, tracking, timetable) is positioned in 3D space with category color coding via `CATEGORY` object (`student: #06B6D4`, `professional: #8B5CF6`, `shared: #F59E0B`). Each node uses `useFrame` for animation. `Line` components draw relationship edges between `related` features. `Html` overlays render feature labels in 3D space. `useState` tracks `selectedId` for the detail panel; `AnimatePresence` shows a slide-in detail card with `desc`, `related` tags, and `ArrowRight` href link. A `MousePointer2` hint, category legend, and `X` close button are included. `Suspense` wraps the Canvas. Apply `LandingGalaxyMap.css`.

As a frontend developer, implement the `LandingPricingPreview` section for the Landing page. Build a 3-tier pricing grid from the `TIERS` array (Starter free, Pro $12/$9, Enterprise $29/$24) with a monthly/annual billing toggle using `useState`. The `PriceDisplay` sub-component uses `AnimatePresence` with `mode='popLayout'` and a `rotateY` flip animation (180deg, 0.6s easeInOut) when switching billing periods keyed on `${tier.id}-${billing}`. `PricingCard` uses local `useState` for `confirmed` state. Each card renders `CheckCircle2`/`Check` lucide icons per feature row, with `included: false` features visually dimmed. The Pro tier has `featured: true` styling. CTA buttons link to `/Signup` or `/Subscription`. Apply `LandingPricingPreview.css`.

As a frontend developer, implement the `LandingTestimonials` section for the Landing page. Build an auto-advancing carousel from the `TESTIMONIALS` array (3 entries: Maya Rodriguez, Daniel Okafor, Aisha Patel) with `AUTO_MS = 5000` interval using `useEffect`, `useCallback`, and `useRef` for pause-on-hover. Navigation uses `ChevronLeft`/`ChevronRight` buttons. `AnimatePresence` animates cards using `cardVariants` (`enter: {opacity:0, y:28, scale:0.96}`, `center`, `exit`). `StarRow` renders stars with `starsContainer` stagger variants (`staggerChildren: 0.09`, `delayChildren: 0.12`) and `starItem` x-slide animation. Each card shows the `Initials` helper function output as an avatar, `benefit` badge with the feature `icon` (Award, Clock, TrendingUp from lucide-react), and an expandable `detail` panel toggled by `AnimatePresence`. Gradient classes (`lt-grad-0/1/2`) are applied per testimonial. Apply `LandingTestimonials.css`.

As a frontend developer, implement the `LandingCTA` section for the Landing page. Build the `LandingCTA` component using `useRef` for `btnShellRef` and `particleLayerRef`, and `useState` for `magnet ({x,y})`, `email`, `focused`, and `status ('idle'|'loading'|'success')`. Implement magnetic button effect via `handleMouseMove`/`handleMouseLeave` callbacks clamping offset to ±12px at 0.4 scale factor. On form submit, `emitParticles` uses `gsap.fromTo` to burst 18 `lcta-particle` span elements in a full circle using `PARTICLE_COLORS` (`#4F46E5`, `#06B6D4`, `#8B5CF6`, `#F59E0B`, `#A5B4FC`) with `power2.out` easing, then `setTimeout` transitions status to `'success'` after 1100ms showing a `Check` icon. Three `TRUST_BADGES` (Users 120,000+, Star 4.9/5, ShieldCheck SOC 2) render below the form. Background decorative elements (`lcta-grid`, `lcta-wash`, `lcta-orb-1/2`) use CSS `--scroll` variable for parallax. `AnimatePresence` handles idle/loading/success state transitions. Apply `LandingCTA.css`.

As a frontend developer, implement the `Footer` section for the Landing page. Build the `Footer` component rendering four `linkColumns` (Product, Company, Resources, Legal) each with 4 anchor links. Each column uses `colChildVariants` framer-motion variants (`rest: {opacity:0.72, x:-6}`, `hover: {opacity:1, x:0}`) for link hover animations. Social icons (LinkedIn, Twitter, GitHub from lucide-react) render as `socials` array anchor links. The brand logo reuses the SVG hexagon with inner star path (`ftr-logo-path`, `ftr-logo-star` classes). Background decorative elements include `ftr-grid`, `ftr-orb-1/2/3` divs with CSS `--scroll` parallax transforms. The bottom bar displays dynamic `year` via `new Date().getFullYear()` and a copyright notice. Note: this Footer component may already exist from a shared layout — check before recreating. Apply `Footer.css`.

As a Backend Developer, create Prisma seed scripts for development and staging environments. Seed data should include: admin user account, sample student and professional user accounts with profiles, sample notes, flashcard decks, schedules, achievements, subscription plans (Free, Pro, Premium with feature sets), and sample activity logs. Add npm script 'prisma:seed' to package.json. Ensure seeds are idempotent and can be re-run safely.

As a Backend Developer, set up Cloudinary SDK integration as a shared service module. Configure upload presets, folder structure (user-uploads/{userId}/), file type restrictions, and size limits. Implement local fallback storage using Node.js fs module for development environments where Cloudinary is unavailable. Create a unified StorageService with upload(), delete(), and getUrl() methods used by the File Upload API. Add CLOUDINARY_* environment variables to configuration.

As a Backend Developer, implement global error handling utilities for Next.js API Routes. Create a standardized API response format with success/error/data fields. Implement error handler middleware that catches Prisma errors, OpenAI API errors, validation errors, and auth errors, returning appropriate HTTP status codes and user-friendly messages. Add request validation using Zod for all API route inputs. Create typed API response helpers (apiSuccess, apiError). Document error codes.

As a Frontend Developer, implement a global notification/toast system for the application. Create a NotificationProvider using React Context that exposes toast() helper with variants: success, error, warning, info. Use Framer Motion for animated toast entrance/exit. Integrate with Shadcn UI Toast component. Ensure toasts are accessible (ARIA live regions) and auto-dismiss after configurable duration. Used across all pages for API success/error feedback.

As an AI Engineer, create a centralized prompt template library for all AI features. Define and version-control prompt templates for: study plan generation (student context, goals, subjects), work plan generation (professional context, tasks, deadlines), flashcard generation (topic extraction, Q&A format), note summarization, performance analysis (student exam prediction, professional productivity forecast), and motivational message generation. Include system prompts, user message templates, and output format specifications. Store as typed TypeScript constants. Integrate with OpenAI service layer.

As a DevOps Engineer, configure automated database migration execution in CI/CD pipeline. Set up Prisma migrate deploy command to run on each deployment to Vercel/Railway. Configure migration safety checks, rollback procedures, and ensure DATABASE_URL is available in all deployment environments. Add pre-deploy migration step to vercel.json build command or Railway deploy hook.

As a Backend Developer, implement a payment gateway service module supporting Razorpay (primary, India locale) with Stripe as fallback. Create PaymentService with methods: createCheckoutSession(planId, userId), verifyWebhookSignature(payload, signature), refund(transactionId). Handle Razorpay order creation, signature verification on callback, and webhook event processing (payment.captured, payment.failed, subscription.activated, subscription.cancelled). Store transaction records linked to Subscriptions table. Add RAZORPAY_KEY_ID, RAZORPAY_KEY_SECRET to env config. Note: Consumed by Subscription & Billing API (b3083e23).

As a Backend Developer, implement REST API routes for user management: GET /api/users (list with pagination/filters), GET /api/users/:id, PUT /api/users/:id (update role, status, profile), DELETE /api/users/:id. Include admin-only middleware guards, role-based access control, and audit logging. Also implement onboarding profile completion endpoints for StudentProfile and ProfessionalProfile creation/update.

As a Backend Developer, implement API routes for notes management: POST /api/notes (create/save), GET /api/notes (list with search/category filter), GET /api/notes/:id, PUT /api/notes/:id (edit), DELETE /api/notes/:id. Include AI-powered note generation endpoint POST /api/notes/generate using OpenAI. Support categorization and PDF export endpoint GET /api/notes/:id/export. Secure all routes with auth middleware.

As a Backend Developer, implement API routes for the flashcard system: POST /api/flashcards/generate (AI-powered generation from notes/PDFs/text), POST /api/flashcards (save deck), GET /api/flashcards (list user decks), GET /api/flashcards/:id, PUT /api/flashcards/:id, DELETE /api/flashcards/:id. Add quiz mode endpoints: POST /api/flashcards/:id/quiz-result to record progress, and GET /api/flashcards/:id/spaced-repetition to return next review schedule. Secure with auth middleware.

As a Backend Developer, implement API routes for the Smart Planner: POST /api/planner/generate (accepts notes/PDF content/goals and returns AI-generated daily/weekly/monthly plan using OpenAI), POST /api/planner/schedules (save schedule), GET /api/planner/schedules (list user schedules), PUT /api/planner/schedules/:id (edit), DELETE /api/planner/schedules/:id. Include timetable generation endpoint POST /api/planner/timetable and PDF export GET /api/planner/schedules/:id/export.

As a Backend Developer, implement API routes for the Performance Predictor: POST /api/predictions/student (accepts study hours, quiz scores, progress; returns readiness %, predicted score, weak topic analysis), POST /api/predictions/professional (accepts tasks completed, productivity data; returns productivity score, goal completion probability). Store prediction history in Predictions table. Use OpenAI for AI-generated insights. GET /api/predictions/history for past predictions.

As a Backend Developer, implement API routes for the AI Chatbot: POST /api/chat/message (sends message to OpenAI with session context, returns streamed or buffered response), GET /api/chat/history (retrieve session chat history), POST /api/chat/voice-to-text (accepts audio blob, uses OpenAI Whisper for transcription), POST /api/chat/text-to-speech (converts AI response text to audio using OpenAI TTS). Store chat sessions and messages in Chats table. Implement session-level context memory.

As a Backend Developer, implement API routes for the Streak & Achievement System: GET /api/streaks (get current streak count and milestones), POST /api/streaks/activity (log daily activity to update streak), GET /api/achievements (list user badges and achievements), POST /api/achievements/check (evaluate and award new badges based on activity). Implement streak logic: consecutive active days, goal completion tracking, badge award rules (Beginner, Consistent Learner, Productivity Champion, MindMate Master). Store in Streaks and Achievements tables.

As a Backend Developer, implement API routes for Productivity Tracking: POST /api/activity/log (record daily activity: focus hours, completed tasks, study hours), GET /api/activity/daily (get today's metrics), GET /api/activity/weekly (weekly aggregated metrics), GET /api/activity/monthly (monthly aggregated metrics with productivity index). Store in ActivityLogs table. Include chart-ready data formatting for Recharts consumption. Support both student and professional metrics.

As a Backend Developer, implement API routes for Calendar Integration: POST /api/calendar/events (create event/deadline/reminder), GET /api/calendar/events (list events with date range filter), PUT /api/calendar/events/:id (update), DELETE /api/calendar/events/:id. Include reminders/notifications endpoint. Support schedule views (daily, weekly, monthly). Store schedule data linked to Schedules and Tasks tables. Ensure timezone support for India locale defaults.

As a Backend Developer, implement API routes for secure file uploads: POST /api/files/upload (accepts PDF, DOCX, TXT, images; validates type/size; uploads to Cloudinary with local fallback; extracts text content for AI analysis), GET /api/files (list user uploads), DELETE /api/files/:id. Implement POST /api/files/:id/analyze to trigger AI analysis of uploaded content via OpenAI. Store file metadata in UploadedFiles table. Add secure upload validation and CSRF protection.

As a Backend Developer, implement API routes for the Subscription System: GET /api/subscriptions/plans (list Free/Pro/Premium tiers with features), POST /api/subscriptions/checkout (create Razorpay/Stripe payment session), POST /api/subscriptions/webhook (handle payment events and update user subscription status), GET /api/subscriptions/current (get user's current plan), POST /api/subscriptions/cancel. Implement feature gating middleware based on subscription level. Store subscription data in Subscriptions table.

As a Frontend Developer, implement the Signup page with fields for Full Name, Email, Password, and Role Selection (Student 🎓 / Working Professional 💼). Include client-side validation, Google OAuth sign-up button, and form submission to the auth API. Use the design system theme with glassmorphism card styling. Handle loading, error, and success states. Redirect to onboarding on successful signup. Note: depends on Auth API (tmp-auth-api) being available.

As a Frontend Developer, implement the Login page with email/password form, Google Login OAuth button, and Forgot Password link. Include client-side validation, loading and error states, and redirect logic based on user role (Student → StudentDashboard, Professional → ProfessionalDashboard, Admin → AdminDashboard). Apply design system glassmorphism card and animation styles. Note: depends on Auth API (tmp-auth-api).

As a Frontend Developer, implement the Onboarding page. After signup, ask 'What best describes you?' and present Student and Professional role cards. For Student: collect School/College, Stream, Academic Level, Target Exams, Study Goals. For Professional: collect Job Title, Industry, Company, Career Goals, Productivity Goals. Submit profile data to User Management API. On success, redirect to the appropriate role dashboard. Use animated multi-step form with Framer Motion transitions. Note: depends on User Management API (tmp-user-api).

As a Frontend Developer, implement the Student Dashboard page with widgets: Today's Study Plan, Study Hours, Subjects Progress, Flashcards, Exam Countdown, Notes Library, Performance Predictor, AI Chat, Motivation Card, and Streak Counter. Include action buttons: Upload Notes, Upload PDF, Generate Flashcards, Generate Timetable. Fetch data from productivity, streaks, flashcards, notes, and prediction APIs. Use Recharts for progress visualization. Apply glassmorphism widget cards with Framer Motion entrance animations. Note: depends on multiple backend APIs.

As a Frontend Developer, implement the Professional Dashboard page with widgets: Today's Tasks, Project Progress, Calendar, Productivity Score, Meeting Notes, Goal Tracking, AI Assistant, Motivation Card, Work Streak. Include action buttons: Upload Meeting Notes, Create Work Plan, Generate Reports, Summarize Documents. Fetch data from productivity, calendar, streaks, notes, and prediction APIs. Use Recharts for productivity and project visualization. Apply glassmorphism widget cards. Note: depends on multiple backend APIs.

As a Frontend Developer, implement the AI Chat page with text and voice conversation interface. Include a message thread UI, text input with send button, voice recording button (toggle), and display of AI responses with typing animation. Integrate voice-to-text and text-to-speech via AI Chat API. Maintain session-level chat history display. Support student examples (Explain Calculus, Create Exam Plan) and professional examples (Summarize Meeting, Create Project Timeline) as quick-start prompts. Note: depends on AI Chat API (tmp-aichat-api).

As a Frontend Developer, implement the Smart Planner page where users can input notes, upload PDFs, or enter text/goals to generate daily/weekly/monthly plans. Display generated plans in a structured timeline or card layout. Allow editing, saving, and PDF export. Integrate with Smart Planner API. Show progress indicators during AI generation. Apply design system styles with Framer Motion transitions. Note: depends on Smart Planner API (tmp-planner-api) and File Upload API (tmp-file-upload-api).

As a Frontend Developer, implement the Timetable Generator page. Allow users to input notes, PDF content, or goals. Display the AI-generated timetable as a visual schedule grid (daily/weekly/monthly views). Support editing schedule slots inline, saving the timetable, and exporting as PDF. Integrate with Smart Planner API timetable endpoint. Use Framer Motion for panel transitions. Note: depends on Smart Planner API (tmp-planner-api).

As a Frontend Developer, implement the Flashcards page. Allow users to generate flashcard decks from notes/PDFs/AI responses, view saved decks, enter quiz mode with flip-card animations, and use spaced repetition review mode. Display progress tracking per deck. Integrate with Flashcards API. Use Framer Motion card flip animations and AnimatePresence for mode transitions. Note: depends on Flashcards API (tmp-flashcards-api) and File Upload API (tmp-file-upload-api).

As a Frontend Developer, implement the Performance Predictor page with role-aware UI. For Students: input study hours, quiz scores, and progress to view readiness % and predicted exam score with weak topic analysis. For Professionals: input tasks completed and productivity data to view productivity score and goal completion probability. Display results with Recharts gauges and bar charts. Show AI-generated insights. Note: depends on Performance Predictor API (tmp-performance-api).

As a Frontend Developer, implement the Notes Management page. Allow users to generate notes via AI, save, delete, edit, categorize, and export notes as PDF. Display a notes library with search and category filters. Show a 'Save generated notes?' modal with Save/Discard buttons. Integrate with Notes API. Use a rich text editor for editing. Apply design system card styles with Framer Motion transitions. Note: depends on Notes API (tmp-notes-api) and File Upload API (tmp-file-upload-api).

As a Frontend Developer, implement the Streaks & Achievements page. Display current streak count, streak calendar heatmap, milestone timeline, and achievement badges (Beginner, Consistent Learner, Productivity Champion, MindMate Master) with lock/unlock states. Show personalized motivational message fetched from Motivation API. Integrate with Streaks API and Motivation API. Use animated badge reveal with Framer Motion. Note: depends on Streaks API (tmp-streaks-api) and Motivation API (tmp-motivation-api).

As a Frontend Developer, implement the Productivity Tracking page with daily, weekly, and monthly analytics views. Display metrics: Focus Hours, Completed Tasks, Study Hours, Productivity Index using Recharts bar charts, line charts, and area charts. Include a metric logging form for daily activity input. Fetch data from Productivity Tracking API. Use tab-based navigation for time period switching and Framer Motion for chart entrance animations. Note: depends on Productivity API (tmp-productivity-api).

As a Frontend Developer, implement the Calendar page with month/week/day view switcher. Display events, deadlines, and reminders. Allow creating, editing, and deleting events via modal form. Show smart planner-generated schedules alongside manually added events. Integrate with Calendar API. Use a calendar grid component (or react-big-calendar) styled with the design system theme. Note: depends on Calendar API (tmp-calendar-api) and Smart Planner API (tmp-planner-api).

As a Frontend Developer, implement the File Management page. Allow users to upload PDF, DOCX, TXT, and image files with drag-and-drop support. Display uploaded files list with type icons, upload date, and file size. Provide actions: trigger AI analysis, download, delete. Show AI analysis results inline. Integrate with File Upload API (tmp-file-upload-api). Include upload progress indicators and error handling for invalid file types/sizes.

As a Frontend Developer, implement the user-facing Subscription page displaying Free, Pro, and Premium plan tiers with feature comparison. Include monthly/annual billing toggle. Integrate with Subscription API to load current plan and initiate checkout (Razorpay/Stripe). Handle payment redirect/callback and show success/failure states. Display current plan status and upgrade/downgrade options. Note: depends on Subscription API (tmp-subscription-api).

As a Frontend Developer, implement the Admin Dashboard page with an overview of platform stats: total users, AI usage, revenue metrics, active subscriptions, and recent activity. Use Recharts for analytics charts. Provide navigation to User Management, Analytics, Content Management, Subscription Management, and File Management admin sections. Apply admin-specific layout with sidebar navigation. Note: depends on Admin Analytics API (tmp-admin-analytics-api).

As a Frontend Developer, implement the Admin User Management page. Display a paginated, filterable, searchable table of all users with columns: name, email, role, subscription plan, status, join date. Support editing a user (role change, status toggle) via an inline drawer or modal. Support user deletion with confirmation dialog. Integrate with User Management API (tmp-user-api). Apply admin layout and design system styles.

As a Frontend Developer, implement the Admin Analytics page. Display platform-wide stats with Recharts: user growth over time (line chart), AI API usage and token consumption (bar chart), subscription revenue breakdown (pie chart), and engagement metrics (area chart). Include date range filters. Integrate with Admin Analytics API (tmp-admin-analytics-api). Apply admin layout.

As a Frontend Developer, implement the Admin Content Management page. Display a list of content entries (announcements, feature descriptions, FAQs) with edit and delete actions. Support creating new content via a rich text form. Integrate with Admin Analytics API content endpoints (tmp-admin-analytics-api). Apply admin layout and design system styles.

As a Frontend Developer, implement the Admin Subscription Management page. Display subscription plan configurations (Free, Pro, Premium) with feature lists and pricing. Allow admins to update plan pricing, toggle features, and view subscriber counts per plan. Integrate with Subscription API admin endpoints (tmp-subscription-api). Apply admin layout and design system styles.

As a DevOps Engineer, configure the production deployment pipeline for Vercel. Set up vercel.json with build settings, environment variables (NEXTAUTH_SECRET, OPENAI_API_KEY, DATABASE_URL, CLOUDINARY_*, RAZORPAY/STRIPE keys). Configure Railway/Supabase PostgreSQL connection string. Set up environment variable management for preview vs production. Add Vercel project settings for Next.js 15 App Router. Create .env.example with all required variables documented.

As a Backend Developer, implement global authentication and authorization middleware for Next.js 15 App Router. Create route protection middleware (middleware.ts) that validates JWT sessions via NextAuth, enforces role-based access (Student, Professional, Admin routes), and redirects unauthenticated users to Login. Implement withAuth and withRole higher-order functions for API route protection. Add subscription-level feature gating checks. This is a prerequisite for all protected API routes.

As a Frontend Developer, implement shared layout components used across internal pages: AppSidebar (with role-aware navigation links for Student, Professional, Admin), AppHeader (user avatar, notifications bell, subscription badge), AppShell (sidebar + header + main content wrapper). Implement mobile-responsive collapsible sidebar. Use role from auth session to conditionally render appropriate nav items. Apply glassmorphism design system styles with Framer Motion sidebar transitions. These are consumed by all dashboard and feature pages.

As an AI Engineer, create a centralized OpenAI service module (lib/openai.ts) that wraps the OpenAI SDK for all AI features. Implement methods for: chatCompletion(messages, systemPrompt), transcribeAudio(audioBuffer) via Whisper, textToSpeech(text, voice), generateEmbedding(text). Add token usage tracking, retry logic with exponential backoff, error normalization, and cost logging to ActivityLogs. This service is consumed by AI Chat API, Notes API, Flashcards API, Smart Planner API, Performance Predictor API, and Motivation Engine API. Depends on OPENAI_API_KEY env config and prompt template library.

As a Backend Developer, implement a shared PDF generation service used by Notes export (GET /api/notes/:id/export) and Smart Planner export (GET /api/planner/schedules/:id/export). Use a Node.js PDF library (e.g., @react-pdf/renderer or puppeteer) to render styled PDF documents. Support notes content with formatting, and schedule/timetable grid layouts. Return PDF as binary response with Content-Disposition: attachment header. Integrate with the Cloudinary StorageService for optional cloud storage of generated PDFs.

As a Backend Developer, implement admin-only API routes for Analytics Dashboard: GET /api/admin/analytics/users (total users, signups over time, role distribution), GET /api/admin/analytics/ai-usage (OpenAI API calls, tokens consumed, cost estimates), GET /api/admin/analytics/subscriptions (revenue metrics, plan distribution), GET /api/admin/analytics/activity (platform-wide engagement metrics). Also implement content management endpoints: GET/POST/PUT/DELETE /api/admin/content. All routes must verify admin role. Return Recharts-ready data.

As a Backend Developer, implement API route for the Personalized Motivation Engine: POST /api/motivation/generate (uses OpenAI to generate personalized motivational messages based on user goals, current streak, recent achievements, and progress data). GET /api/motivation/history (past motivational messages). This endpoint aggregates data from Streaks, Achievements, and ActivityLogs to build context for the AI prompt.

As a Tech Lead, verify the end-to-end integration between the Signup/Login frontend pages and the Auth API backend. Ensure user registration, email/password login, and Google OAuth flow work correctly end-to-end. Verify JWT session is established, role-based redirect to the correct dashboard functions, and error states (invalid credentials, duplicate email) are handled properly in the UI.

As a Tech Lead, verify the end-to-end integration between the Onboarding frontend page and the User Management API. Ensure role selection, profile data submission (Student/Professional fields), and redirect to the appropriate dashboard work correctly. Verify profile data is persisted in the database and accessible in subsequent sessions.

As a Tech Lead, verify the end-to-end integration between the AIChat frontend page and the AI Chat API. Ensure text messages are sent and AI responses received correctly, voice-to-text transcription works, text-to-speech audio plays back, session context is maintained across messages, and chat history persists. Verify both student and professional quick-start prompts function as expected.

As a Tech Lead, verify the end-to-end integration between the SmartPlanner frontend page and the Smart Planner API. Ensure AI-generated plans are returned correctly from inputs (notes/PDFs/goals), plans are saved to the database, editing and PDF export work, and the timetable generation flow functions end-to-end.

As a Tech Lead, verify the end-to-end integration between the Flashcards frontend page and the Flashcards API. Ensure flashcard generation from notes/PDFs works, decks are saved and retrieved, quiz mode records results, and spaced repetition scheduling is applied correctly. Verify progress tracking data is reflected in the UI.

As a Tech Lead, verify the end-to-end integration between the Notes frontend page and the Notes API. Ensure AI note generation works, notes are saved/edited/deleted/categorized, search and filtering function correctly, and PDF export works. Verify the 'Save generated notes?' modal flow persists data correctly.

As a Tech Lead, verify the end-to-end integration between the PerformancePredictor frontend page and the Performance Predictor API. Ensure student and professional prediction inputs are submitted correctly, AI-generated predictions are displayed accurately in the UI with Recharts visualizations, and prediction history is accessible.

As a Tech Lead, verify the end-to-end integration between the ProductivityTracking frontend page and the Productivity Tracking API. Ensure daily activity logging works, daily/weekly/monthly metrics are fetched and displayed accurately in Recharts charts, and the productivity index calculation is correct.

As a Tech Lead, verify the end-to-end integration between the Calendar frontend page and the Calendar API and Smart Planner API. Ensure events can be created/edited/deleted and are reflected in the calendar view. Verify smart planner-generated schedules appear on the calendar. Check reminder and deadline display.

As a Tech Lead, verify the end-to-end integration between the FileManagement frontend page and the File Upload API. Ensure file uploads (PDF, DOCX, TXT, images) succeed via Cloudinary with local fallback, uploaded files are listed and manageable, and AI analysis is triggered and results displayed correctly.

As a Tech Lead, verify the end-to-end integration between the Subscription frontend page and the Subscription API. Ensure plan listing, billing toggle, and checkout initiation with Razorpay/Stripe work correctly. Verify payment webhook updates the user's subscription status, feature gating based on subscription level is enforced, and the UI reflects the current plan accurately.

As a Tech Lead, verify the end-to-end integration between the TimetableGenerator frontend page and the Smart Planner API timetable endpoint. Ensure timetable generation from notes/PDF/goals works, the visual schedule grid displays generated slots correctly, inline editing updates are persisted, and PDF export functions.

As a Tech Lead, verify the end-to-end integration between the AIChat frontend page and the AI Chat API. Ensure text messages are sent and AI responses received correctly, voice-to-text transcription works via OpenAI Whisper, text-to-speech audio plays back via OpenAI TTS, session context is maintained across messages, and chat history persists. Verify both student and professional quick-start prompts function as expected. Note: This task is a duplicate check — if 'bccdb232' already covers this, skip.

As a Tech Lead, verify the end-to-end integration between the UserManagement frontend page and the User Management API. Ensure paginated user listing, search/filter, role change, status toggle, and user deletion operations all work correctly. Verify admin-only access control is enforced and audit logs are created for admin actions.

As a Tech Lead, verify the end-to-end integration between the SubscriptionManagement frontend page and the Subscription & Billing API admin endpoints. Ensure plan configurations are displayed correctly, pricing updates persist, subscriber counts per plan are accurate, and admin-only route protection is enforced.

As a Backend Developer, implement rate limiting for sensitive and AI-intensive API routes. Apply per-user rate limits to: AI Chat (30 req/min), Notes Generate (10 req/min), Flashcard Generate (10 req/min), Smart Planner Generate (5 req/min), Performance Predictor (10 req/min), Motivation Generate (20 req/min). Apply stricter limits for unauthenticated routes (auth endpoints). Use an in-memory store or Redis for rate limit counters. Return 429 with Retry-After header on limit exceeded.

As a Tech Lead, verify the end-to-end integration between the Login frontend page and the Auth API. Ensure email/password login, Google OAuth flow, and Forgot Password flow work correctly end-to-end. Verify JWT session is established, role-based redirect to the correct dashboard (Student → StudentDashboard, Professional → ProfessionalDashboard, Admin → AdminDashboard) functions, and error states (invalid credentials) are handled in the UI. Note: check if task '21d1fbea' already covers this for both Login and Signup before keeping.

As a Tech Lead, verify the end-to-end integration between the Signup frontend page and the Auth API. Ensure user registration with email/password and Google OAuth sign-up work correctly, duplicate email errors are surfaced in the UI, role selection is stored, and redirect to Onboarding occurs on successful signup. Verify the new user record is created in the database with correct role.

As a Backend Developer, implement subscription-level feature gating as reusable middleware and utility functions. Define feature access maps for Free, Pro, and Premium tiers (e.g., AI chat message limits, flashcard deck limits, planner generation limits, performance predictor access). Create withSubscription(feature) middleware that checks the user's current plan before allowing access to gated API routes. Return 402 Payment Required with upgrade prompt on access denial. Integrate with the Subscriptions table and session-based plan caching. Note: Referenced by Auth Middleware (3aff071b) and Subscription API (b3083e23).

As a Tech Lead, verify the end-to-end integration between the SmartPlanner API and the Calendar & Events API. Ensure that AI-generated plans and timetable slots from the Smart Planner are persisted as Calendar events (POST /api/calendar/events) so they appear on the Calendar page alongside manually created events. Verify the Calendar frontend page (2ae1c958) correctly displays planner-generated schedules and that the SmartPlanner frontend page (e667c775) shows confirmation when schedule is synced to calendar.

As a Tech Lead, verify the end-to-end integration between the Productivity Tracking API (POST /api/activity/log) and the Streaks & Achievements API (POST /api/streaks/activity). Ensure that when a user logs daily activity via the Productivity Tracking page, the streak system is automatically updated and achievements are evaluated. Confirm the Streaks page (dcad5ed6) reflects updated streaks immediately after logging activity on the ProductivityTracking page (6089a633).

As a Tech Lead, verify the end-to-end integration between the FileManagement frontend (8358a893), File Upload API (65b884a2), OpenAI service layer (tmp-openai-service), and the downstream AI feature APIs (Notes, Flashcards, SmartPlanner). Ensure uploaded PDFs/documents are analyzed via POST /api/files/:id/analyze, extracted text content is passed correctly to AI generation endpoints, and results are surfaced in the respective feature pages (Notes, Flashcards, SmartPlanner).

As a Tech Lead, verify the end-to-end integration between the TimetableGenerator frontend (97a303e8), Smart Planner API timetable endpoint (ca817d22), and the Calendar page (2ae1c958). Ensure timetable slots generated via POST /api/planner/timetable are saved as Calendar events and rendered correctly in the Calendar's daily/weekly/monthly views. Confirm the TimetableGenerator page shows a 'Sync to Calendar' action that triggers the Calendar API (aeaf4d0e).

As a Tech Lead, verify the end-to-end integration between the Streaks frontend page and the Streaks API and Motivation API. Ensure streak counts are accurately calculated and displayed, activity logging updates streaks correctly, achievements are awarded based on milestones, and personalized motivational messages are rendered from the Motivation Engine API.

As a Tech Lead, verify the end-to-end integration between the AdminDashboard, UserManagement, Analytics, ContentManagement, and SubscriptionManagement frontend pages and the Admin Analytics API and User Management API. Ensure all admin CRUD operations work, analytics charts render with real data, and admin-only route protection is enforced correctly.

As a Tech Lead, verify the end-to-end integration between the Student Dashboard frontend page and all its backend data sources: productivity API (study hours), flashcards API (flashcard widget), notes API (notes library widget), streaks API (streak counter), performance predictor API (predictor widget), and motivation API (motivation card). Ensure all widgets load real data, upload actions trigger file upload API correctly, and generate actions invoke the appropriate AI generation endpoints.

As a Tech Lead, verify the end-to-end integration between the Professional Dashboard frontend page and all its backend data sources: productivity API (productivity score, tasks), calendar API (calendar widget), notes API (meeting notes widget), streaks API (work streak widget), performance predictor API (forecasts), and motivation API (motivation card). Ensure all widgets load real data and action buttons function correctly.

As a Tech Lead, verify the end-to-end integration between the Analytics frontend page and the Admin Analytics API. Ensure platform-wide stats (user growth, AI usage, revenue, engagement) are fetched and rendered correctly in Recharts charts. Verify date range filters work and admin-only access control is enforced.

As a Tech Lead, verify the end-to-end integration between the ContentManagement frontend page and the Admin Analytics API content endpoints. Ensure content listing, creation, editing, and deletion work correctly. Verify rich text form submissions persist data and admin-only route protection is enforced.

As a Tech Lead, verify the end-to-end integration between the Motivation Engine API (d483ecef), the Student Dashboard (a159ae5b), and the Professional Dashboard (c5502893). Ensure the Motivation Card widget on both dashboards fetches personalized motivational messages from POST /api/motivation/generate with correct user context (streaks, achievements, progress), and the message updates dynamically when streaks or achievements change. Verify the Streaks page (dcad5ed6) also renders the motivation message correctly.

As a Tech Lead, verify the end-to-end integration between the subscription feature gating middleware (tmp-subscription-feature-gate), the Subscription frontend page (88e1938a), and all gated feature pages (AIChat, SmartPlanner, PerformancePredictor, Notes, Flashcards). Ensure 402 responses from gated API routes surface upgrade prompts in the UI via the global notification system, the Subscription page accurately reflects the current plan, and upgrading/downgrading plans immediately updates accessible features without requiring re-login.