As a Frontend Developer, I want to implement the global theme, design tokens, color palette (Deep Blue #1A237E, Gold #FFD700, White #FFFFFF, Light Gray #F5F5F5), typography (Inter font family), and shared CSS/component primitives across the entire scaffold so all pages inherit consistent styling. This task is the foundation for all page-level implementations. Remove any scaffold pages not present in the design (welcome page). This task must be completed before any page-specific implementation begins.
As a Frontend Developer, I want to implement the Signup page based on the existing v2 JSX design so that new students and coaches can create accounts. The page includes name, email, password fields, role selection (Student / Coach), terms agreement checkbox, and a link back to Login. On success, routes to Coach Directory (for students) or Profile Setup (for coaches).
As a Frontend Developer, I want to implement the Login page based on the existing v2 JSX design so that students, coaches, and admins can sign in. The page includes glassmorphism card layout, email/password fields, role selector, 'Forgot Password' link, social login options, and a link to Signup. On success, routes to Dashboard (for student/coach) or Admin Dashboard (for admin).
As a Frontend Developer, I want to implement the Landing page based on the existing v2 JSX design so that users (students and coaches) can explore the platform. The page includes: sticky NavBar with glassmorphism, Hero section with animated starry night sky canvas and interactive 3D chessboard centerpiece, TrustBadges marquee, InteractiveChessboard section, FeatureHighlights grid, HowItWorks stepper, CoachShowcase carousel, Testimonials masonry grid, Pricing toggle cards, CallToAction band, and Footer. Links to: Login, Signup, Coach Directory, How It Works, Pricing.
As a Frontend Developer, I want to implement the Admin Dashboard (Reports page) based on the existing v2 JSX design so that admins can view platform analytics. Includes: TopBar (admin branding, breadcrumb, notifications, Generate Report CTA), Sidebar (admin nav: Dashboard, Reports active, Users, Coaches, Disputes, Settings, Audit Logs), ReportsHeader (H1 + date range picker + Export CSV/PDF), KPIStatsRow (Revenue, Bookings, Students, Coaches), RevenueChart (line/area chart, Daily/Weekly/Monthly toggle), UserActivityChart (bar + donut charts), TopCoachesTable, RecentTransactionsTable, ExportReports panel. Links from: Login (admin role).
As a Backend Developer, I want to implement authentication and user management API endpoints using FastAPI so that login, signup, JWT token issuance, role-based access control (Student/Coach/Admin), password reset, and session management are all functional. Endpoints: POST /auth/login, POST /auth/signup, POST /auth/refresh, POST /auth/logout, GET /users/me, PATCH /users/me.
As a Frontend Developer, I want to implement the Dashboard page based on the existing v2 JSX design so that students and coaches can view their overview after login. Includes: TopBar with logo, search, notifications and avatar dropdown; Sidebar navigation with role-based links; WelcomeBanner with greeting; StatsOverview (4 KPI cards); UpcomingLessons list; QuickActions grid; ProgressChart (Elo line chart); RecentActivity feed; RecommendedCoaches horizontal scroll. Links to: Find a Coach, Book a Lesson, AI Analysis, My Progress, Payments.
As a Frontend Developer, I want to implement the Coach Directory page based on the existing v2 JSX design so that students can search and browse coaches. Includes: NavBar, DirectoryHero banner, SearchFilterBar (search input, skill level dropdown, language multi-select, availability toggle, price range slider), ActiveFiltersChips row, ResultsSummaryBar (count + sort + view toggle), CoachGrid (responsive 3-col / 2-col / 1-col cards with avatar, rating, specializations, price, Book Now), Pagination, WhyFrostyCoach trust strip, CallToAction band, Footer. Links from: Landing, Signup success. Links to: Coach Profile.
As a Backend Developer, I want to implement coach profile CRUD API endpoints using FastAPI so that coaches can create, update, and publish their profiles including bio, specializations, FIDE rating, certifications (file upload to S3/storage), hourly rate, and languages. Endpoints: GET /coaches, GET /coaches/{id}, POST /coaches, PATCH /coaches/{id}, POST /coaches/{id}/certifications, DELETE /coaches/{id}/certifications/{cert_id}.
As a Frontend Developer, I want to implement the Profile page based on the existing v2 JSX design so that coaches can set up and manage their public profile. Includes: ProfileHero edit mode, bio editor, specialization tag selector, certification upload section (with FIDE cert, national federation cards), hourly rate setter, and profile preview. Links from: Dashboard (coach). Links to: Availability.
As an AI Engineer, I want to integrate GPT-based AI analysis into the platform so that students receive AI-powered post-game analysis, move suggestions, and coaching recommendations. Uses Litellm for LLM routing and Langchain for prompt orchestration. Endpoints: POST /ai/analyze-game (accepts PGN notation, returns analysis), POST /ai/suggest-coach (returns coach recommendations based on student's weak areas), GET /ai/daily-puzzle.
As a Frontend Developer, I want to implement the Coach Profile page based on the existing v2 JSX design so that students can view detailed coach information. Includes: NavBar, ProfileHero (avatar, FIDE badge, rating, location, languages, experience, Book/Message CTAs), ProfileTabsNav (About, Specializations, Certifications, Reviews), AboutSection, SpecializationsSection (tag cloud + teaching approach cards), CertificationsSection, ReviewsSection, and sticky BookingPanel (rate display, session type, calendar availability, duration, Book Now). Links from: Coach Directory. Links to: Booking.
As a Frontend Developer, I want to implement the Bookings page based on the existing v2 JSX design so that coaches and students can manage their lessons. Includes: TopBar, SidebarNavigation, StatsStrip (Upcoming/Completed/Cancelled/Hours), FiltersAndViewToggle (tab filters, search, sort, list/calendar toggle), BookingList (cards with join/reschedule/cancel/review actions), CalendarPanel (interactive monthly calendar with booking dots), QuickActionsBar (Schedule, Export, Sync), BookingDetailModal, NotificationToast, and StatusBar. Links from: Dashboard.
As a Backend Developer, I want to implement admin-specific API endpoints so that admins can manage users, approve/reject coach profiles, resolve disputes, and generate platform analytics reports. Endpoints: GET/PATCH /admin/users, GET/PATCH /admin/coaches (approve/reject), GET/POST/PATCH /admin/disputes, GET /admin/reports/revenue, GET /admin/reports/user-activity, GET /admin/reports/coach-performance. All endpoints protected by admin role middleware.
As a Frontend Developer, I want to implement the Coaches admin page based on the existing v2 JSX design so that admins can review and approve coach profiles. Includes: coaches data table with filter by status (Pending/Approved/Rejected), coach rows (avatar, name, FIDE rating, specializations, submission date, status badge), Approve/Reject action buttons, and coach detail preview panel. Links from: Admin Dashboard.
As a Frontend Developer, I want to implement the Disputes page based on the existing v2 JSX design so that admins can view and resolve reported issues between students and coaches. Includes: disputes list with status filters (Open/In Review/Resolved), dispute cards (parties involved, issue summary, date, priority badge), dispute detail modal with communication thread, resolution action buttons (Resolve, Escalate, Dismiss), and notes input. Links from: Admin Dashboard.
As a Frontend Developer, I want to implement the Users page based on the existing v2 JSX design so that admins can manage student accounts. Includes: data table with search/filter, user rows (avatar, name, email, role, status, join date), action buttons (View, Suspend, Delete), bulk actions, pagination, and user detail drawer/modal. Links from: Admin Dashboard.
As a Frontend Developer, I want to implement the Availability page based on the existing v2 JSX design so that coaches can set their weekly schedule and manage open time slots. Includes: weekly calendar grid with drag-to-select time blocks, recurring availability toggle, timezone selector, blackout date picker, and save/publish controls. Links from: Dashboard (coach flow).
As a Backend Developer, I want to implement availability management API endpoints so that coaches can define their weekly schedule and students can view open time slots. Endpoints: GET /coaches/{id}/availability, POST /coaches/{id}/availability, PUT /coaches/{id}/availability, GET /coaches/{id}/slots?date=, DELETE /coaches/{id}/availability/{slot_id}. Handles timezone conversion and recurring slot generation.
As a Backend Developer, I want to implement the coach search and filtering API so that students can query coaches by skill level, language, availability, price range, and free-text search. Endpoints: GET /coaches/search?q=&skill_level=&language=&availability=&price_min=&price_max=&sort=&page=&limit=. Returns paginated results with coach summary cards.
As a Frontend Developer, I want to implement the Booking page based on the existing v2 JSX design so that students can select a lesson time slot and confirm a booking. Includes: coach summary card, calendar with available slots highlighted in gold, time slot picker, lesson type/duration selector, booking summary panel, and 'Proceed to Payment' CTA. Links from: Coach Profile. Links to: Payment.
As a Frontend Developer, I want to implement the Payment page based on the existing v2 JSX design so that students can complete a secure lesson purchase. Includes: order summary card (coach info, date/time, duration, price in ₹), payment method selector (Razorpay, PayPal, UPI), promo code input, total calculation, and 'Pay Now' CTA with gold glow. On success, routes to Lesson page or confirmation. Links from: Booking.
As a Backend Developer, I want to implement booking creation and management API endpoints so that students can book lessons and coaches can confirm/reschedule/cancel them. Endpoints: POST /bookings, GET /bookings, GET /bookings/{id}, PATCH /bookings/{id} (status: confirmed/rescheduled/cancelled), GET /bookings?role=coach|student&status=upcoming|past|cancelled. Also includes lesson join link generation via Zoom/Jitsi API integration.
As a Frontend Developer, I want to implement the Lesson page based on the existing v2 JSX design so that students and coaches can attend/conduct live sessions. Includes: video conferencing embed (Zoom/Jitsi), lesson details panel (topic, duration, coach/student info), shared notes area, AI analysis sidebar, session controls (mute, video, end session), and post-session review prompt. Links from: Bookings, Dashboard upcoming lessons.
As a Backend Developer, I want to implement payment processing API endpoints integrating Razorpay and PayPal so that students can pay for lessons securely in INR and other currencies. Endpoints: POST /payments/create-order, POST /payments/verify, GET /payments/{id}, POST /payments/{id}/refund. Handles webhook callbacks, payment status updates, and receipt generation.
As a Backend Developer, I want to implement reviews and ratings API endpoints so that students can leave reviews for coaches after completed lessons and coaches' aggregate ratings are computed. Endpoints: POST /reviews, GET /coaches/{id}/reviews, PATCH /reviews/{id}, DELETE /reviews/{id}. Includes average rating recalculation and verified purchase badge logic.
As a Frontend Developer, I want to wire all frontend pages to their respective backend API endpoints using an API client (Axios/React Query) so that all data is live and dynamic. Includes: auth token management, API base URL config, request/response interceptors, error handling, loading states, and data caching. Covers all pages: Dashboard, Coach Directory, Coach Profile, Booking, Payment, Bookings, Availability, Profile, Admin pages.
As a Frontend Developer, I want to implement i18n support for English and Hindi languages using react-i18next so that the platform is accessible to Hindi-speaking users in India. Includes: language switcher component in NavBar/Footer, translation files for all UI strings, RTL-safe layout considerations, and language preference persistence in user profile.
No comments yet. Be the first!