bronze-apps

As a student, I want to use the Signup page so that I can create an account and start practicing mock interviews. Implement based on existing Signup (v2) JSX design. Includes: NavBar, Hero section, registration form with fields for name, email, password, persona selection (Student/Job Seeker/Professional), terms acceptance, and primary CTA. On success, routes to /Dashboard. Links back to /Login for existing users.

As a user, I want to use backend APIs for registration, login, logout, and profile management so that my account is securely managed. Build FastAPI endpoints: POST /auth/register (with persona field), POST /auth/login (JWT), POST /auth/logout, GET /users/me, PATCH /users/me. Use MySQL with Alembic migrations for users table including persona, status, and timestamps. Supports Login (v1) and Signup (v2) page flows.

As a user, I want to use the Landing page so that I can view platform information, explore features, and navigate to Login or Signup. Implement based on the existing Landing (v2) JSX design. Includes: NavBar with sticky behavior, Hero section with 3D AI interview room avatar and animated signature concept, TrustBadges, InteractiveFeatures, HowItWorks, UserPersonas (Student/Job Seeker/Professional cards), RealTimeFeatures, Testimonials, CallToAction, FAQ accordion, and Footer. Links to /Login and /Signup.

As a user, I want to use the Login page so that I can sign in to the platform. Implement based on existing Login (v1) JSX design. Includes: NavBar, Hero section with AI interview room background, centered LoginForm card (email + password with show/hide toggle, remember me, forgot password link), AuthorityBadges, FeatureHighlights grid, SecurityTrust section, and Footer. On successful login, routes to /Dashboard. Links to /Signup for new users.

As an admin, I want to use the Admin Dashboard page so that I can monitor platform usage, view key metrics, and navigate to user and content management. Implement based on existing Admin Dashboard (v1) JSX design. Includes: TopBar with admin branding, Sidebar with admin navigation, usage stats cards (total users, active sessions, questions answered, uptime), activity charts, recent user registrations table, quick-action links to /User Management and /Content Manager.

As a user, I want to use the Dashboard page so that I can view my progress, stats, and navigate to all core features. Implement based on existing Dashboard (v1) JSX design. Includes: TopBar, Sidebar navigation (collapsible on mobile), WelcomeBanner with persona-aware greeting, StatsCards (interviews completed, average score, improvement streak), ActivityChart, RecentSessions list, QuickActions (Start Interview, Browse Questions, View Tips), Notifications panel, and Footer. Links to /Interview Setup, /Question Library, /Tips Library.

As a user, I want to use backend APIs for the question library so that I can browse, search, and filter interview questions. Build FastAPI endpoints: GET /questions (with filters: industry, role, type, difficulty, search query, pagination), GET /questions/{id}, POST /users/{id}/bookmarks (save question), GET /users/{id}/bookmarks. MySQL schema for questions table. Supports Question Library (v1) page.

As an admin, I want to use the Content Manager page so that I can add, edit, and organize interview questions and tips in the platform library. Implement based on existing Content Manager (v1) JSX design. Includes: TopBar/Sidebar (admin), tabbed interface for Questions and Tips, add/edit/delete question form (type, industry, role, difficulty, answer), add/edit tips form (category, content, industry), content preview panel, publish/draft toggle, and breadcrumb linking back to /Admin Dashboard.

As a professional, I want to use the Tips Library page so that I can access industry-specific interview tips and expert guidance. Implement based on existing Tips Library (v1) JSX design. Includes: TopBar/NavBar, industry/role filter panel, featured tips carousel, categorized tips cards with rich content (icons, formatted text), persona-aware recommendations (advanced tips for professionals), search functionality, and links to /Interview Setup.

As an admin, I want to use the User Management page so that I can view, search, edit, and manage all user accounts on the platform. Implement based on existing User Management (v2) JSX design. Includes: TopBar/Sidebar (admin), searchable and filterable user table (name, email, persona, status, join date), user detail/edit drawer or modal, role assignment, account status toggle (active/suspended), pagination, and breadcrumb linking back to /Admin Dashboard.

As an admin, I want to use backend APIs for user and content management so that I can monitor platform usage and manage all data. Build FastAPI endpoints: GET /admin/stats (platform-wide metrics), GET /admin/users (list with filters and pagination), PATCH /admin/users/{id} (edit role, status), POST /admin/questions (create), PATCH /admin/questions/{id}, DELETE /admin/questions/{id}, POST /admin/tips (create), PATCH /admin/tips/{id}, DELETE /admin/tips/{id}. Role-based access control for admin routes. Supports Admin Dashboard (v1), User Management (v2), Content Manager (v1) pages.

As a user, I want to use the Interview Setup page so that I can configure my mock interview session by choosing interview type, industry, and role. Implement based on existing Interview Setup (v1) JSX design. Includes: TopBar/NavBar, interview type selector (Technical, Behavioral, Case Study), industry/role selector (dropdown or searchable), difficulty level selection, session length preference, persona-aware recommendations panel, and CTA to start session routing to /Mock Interview.

As a professional, I want to use backend APIs for the tips library so that I can access industry-specific interview tips. Build FastAPI endpoints: GET /tips (with filters: industry, role, category, persona, search, pagination), GET /tips/{id}. MySQL schema for tips table with industry, role, and persona fields. Supports Tips Library (v1) page.

As a user, I want to use backend APIs for my dashboard so that I can view my progress, stats, and recent interview sessions. Build FastAPI endpoints: GET /users/{id}/stats (sessions completed, average score, streak), GET /users/{id}/sessions (recent sessions list), GET /users/{id}/notifications. MySQL schema for sessions and progress tracking. Supports Dashboard (v1) page.

As a user, I want to use the Question Library page so that I can browse, search, and study common interview questions and answers. Implement based on existing Question Library (v1) JSX design. Includes: TopBar/NavBar, search and filter bar (by industry, role, type, difficulty), categorized question cards with expandable answers, bookmark/save functionality, pagination, and links back to /Dashboard.

As a user, I want to use backend APIs for interview sessions so that I can start, manage, and complete mock interview sessions. Build FastAPI endpoints: POST /sessions/create (type, industry, role, difficulty), GET /sessions/{id}/questions (fetch questions for session), POST /sessions/{id}/responses (submit answer), POST /sessions/{id}/complete (end session). Supports Interview Setup (v1) and Mock Interview (v1) pages.

As a user, I want to use the Mock Interview page so that I can conduct a simulated interview session with AI. Implement based on existing Mock Interview (v1) JSX design. Includes: interview room UI with virtual interviewer avatar, real-time question display with typing animation effect (signature concept), user response input (text or voice), timer, progress indicator, micro-interaction animations (avatar nodding/gesturing), session controls (pause, end), and transition to /Feedback on completion.

As a user, I want to use an AI-powered feedback engine so that I receive real-time, AI-generated analysis and suggestions on my interview responses. Integrate LiteLLM router with GPT-5.4, Claude 4.6 Opus, and Gemini 3.1 Pro. Build Langchain pipeline to: analyze text responses for content, clarity, and relevance; score communication skills; generate per-question suggestions and overall improvement areas. FastAPI endpoint: POST /sessions/{id}/feedback. Supports Feedback (v1) page.

As a user, I want to use the Feedback page so that I can review AI-generated feedback and suggestions on my interview performance. Implement based on existing Feedback (v1) JSX design. Includes: TopBar/NavBar, overall score card, per-question breakdown with AI suggestions, communication skills radar chart, strength and improvement areas, actionable next steps panel, option to retake interview or return to /Dashboard. Real-time feedback display for job seekers.

As a user, I want all frontend pages to be connected to their respective backend APIs so that the application is fully functional end-to-end. Tasks include: integrating axios/fetch API client with JWT auth headers, connecting Login/Signup forms to auth endpoints, wiring Dashboard to progress/stats APIs, connecting Interview Setup and Mock Interview to session APIs, linking Feedback page to AI feedback endpoint, connecting Question Library and Tips Library to their respective APIs, and wiring Admin pages to admin management APIs.