giant-cyber

As a student, I want to view an interactive galaxy map landing page so that I can explore cyber attack types visually. Implement the Landing (v3) design with the interactive galaxy map where each star represents a cyber attack type. Include twinkling star animations, comet streaks, smooth zoom transitions, hover micro-interactions revealing attack names and descriptions, and time-of-day color shifts. Navigation links to Login and Signup pages.

As a student or admin, I want to sign in to the platform so that I can access my personalized dashboard and content. Implement the Login (v2) design page with email/password fields, form validation, and links to Signup. On success, redirect students to the Home page and admins to the Dashboard.

As a student, I want to create an account on the platform so that I can start learning about cybersecurity. Implement the Signup (v2) design with name, email, password fields, validation, and a link back to Login. On success, redirect to Login.

As a student, I want to browse all cyber attack types on the Home page so that I can choose a topic to learn about. Implement the Home (v1) design showing categorized attack type cards. Each card links to the corresponding Topic page. Includes navigation to Profile and Settings.

As a student or admin, I want to update my profile settings so that I can manage my account preferences. Implement the Settings (v1) design with editable name, email, password fields, and save functionality. Accessible from both Profile (student) and Dashboard (admin).

As an admin, I want to view a dashboard with site stats and navigation so that I can monitor engagement and access management tools. Implement the Dashboard (v1) design with stats cards, engagement metrics overview, and navigation links to Content, Quiz management, Users, and Settings sections.

As a student, I want to use the backend API for cyber attack topics so that I can fetch categorized attack types, topic details, videos, and animations. Implement FastAPI endpoints: GET /topics, GET /topics/{id}, with topic metadata stored in MySQL and video/animation references.

As an admin, I want to use the backend API for content management so that I can upload videos, manage animations, and edit lessons via the admin Content page. Implement FastAPI endpoints: POST /admin/videos, PUT /admin/videos/{id}, DELETE /admin/videos/{id}, similar for animations and lessons. Secure with admin-only JWT role check.

As an admin, I want to use the backend API for user management so that I can list users, view their activity, and enable/disable accounts. Implement FastAPI endpoints: GET /admin/users, GET /admin/users/{id}/activity, PATCH /admin/users/{id}/status. Secure with admin-only JWT role check.

As a student, I want to use an AI assistant on the platform so that I can ask questions about cybersecurity topics and get helpful, accurate answers. Integrate LiteLLM routing with GPT-5.4 for user-friendly responses and Claude 4.6 Opus for academic/technical queries. Expose via FastAPI POST /ai/chat endpoint and surface in the dashboard AI-assistant page.

As a student, I want to view a topic detail page for a specific cyber attack type so that I can watch the teaching video, view the animation, and complete the lesson. Implement the Topic (v1) design with an embedded video player, animation section, interactive lesson actions, and a link to the Quiz for that topic.

As a student, I want to view my profile and learning progress so that I can track which topics I've completed and my quiz scores. Implement the Profile (v1) design showing user info, completed topics, and progress metrics. Links to Settings for profile updates.

As an admin, I want to upload videos, manage animations, and edit lessons so that I can keep the educational content up to date. Implement the Content (v1) design with a video upload form, animation management list, and lesson editor. Links back to Dashboard.

As an admin, I want to manage users and view their activity so that I can ensure appropriate use of the platform. Implement the Users (v1) design with a users list table, activity view per user, and actions (disable/enable). Links back to Dashboard.

As a student, I want to use the backend API for quizzes so that I can fetch questions per topic and submit answers to get my score. Implement FastAPI endpoints: GET /quizzes/{topic_id}, POST /quizzes/{quiz_id}/submit. Store quiz results in MySQL linked to user profiles.

As a user, I want the Login and Signup pages to connect to the backend auth API so that my credentials are validated and I receive a session token. Wire Login (v2) and Signup (v2) pages to POST /auth/login and POST /auth/signup. Store JWT in secure storage and redirect on success.

As a student, I want to take a quiz on a cybersecurity topic so that I can test my understanding and see my results. Implement the Quiz (v1) design with question cards, multiple choice options, a submit flow, and a Results view showing score and correct answers. Links back to Home or next topic.

As a student, I want to use the backend API for progress tracking so that my completed topics and quiz scores are saved and retrievable on my Profile page. Implement FastAPI endpoints: GET /users/{id}/progress, POST /users/{id}/progress. Store progress data in MySQL.

As a student, I want the Home and Topic pages to load data from the backend topics API so that I see real attack type categories and topic content. Wire Home (v1) to GET /topics and Topic (v1) to GET /topics/{id}, including video embeds and animation display.

As an admin, I want the Content and Users management pages to connect to their respective backend APIs so that I can manage platform content and users in real time. Wire Content (v1) to content management endpoints and Users (v1) to user management endpoints.

As a student, I want the Quiz page to load questions from the backend and submit answers so that I can take real quizzes and see my score. Wire Quiz (v1) to GET /quizzes/{topic_id} and POST /quizzes/{quiz_id}/submit. Display result summary after submission.

As a student, I want the Profile page to display my real learning progress from the backend so that I can track completed topics and quiz scores. Wire Profile (v1) to GET /users/{id}/progress. Show completed topic list and score history.