gamma-algovision

As a user, I want to sign in via the Login page so I can access the platform's features. Implement the Login page with email/password fields, sign-in CTA, error states, and link to signup. Receives users from the Landing page. On success, routes to the Library (students/job seekers) or Editor (self-learners) or Dashboard (admins). Apply gamma-algovision theme tokens and ensure responsive design. Design not yet available — include a design sub-step following the SRD color palette.

As an admin, I want to use a backend API to monitor user activity metrics and platform feedback, so I can manage the platform effectively. Implement FastAPI endpoints: GET /admin/activity (user counts, session stats, algorithm popularity), GET /admin/feedback (user feedback list), GET /admin/users (user list with activity). Secure all endpoints with admin role check. Return aggregated stats suitable for dashboard charts.

As a user, I want to use a backend API to execute algorithms step-by-step and receive structured visualization data (states, transitions, code highlights), so the Visualizer page can animate the diagram. Implement FastAPI endpoints: POST /visualize (accepts algorithm id or custom code + language, returns step-by-step execution states as JSON), POST /visualize/custom (for user-submitted code). Include sandboxed execution for custom code (Python/JavaScript). Validate and sanitize all inputs.

As a user, I want to explore the Landing page that showcases the Interactive Algorithm Galaxy concept, so I can understand the platform and navigate to Login. Implement the Landing page based on the existing JSX design (v2) covering: NavBar with frosted-glass effect, HeroGalaxy full-viewport section, interactive GalaxyMap canvas with pulsing star nodes, TrustBadges strip, FeaturesHighlight 6-card grid, HowItWorks 3-step flow, AlgorithmCategories grid, Testimonials carousel, CallToAction band, and Footer. Links to: Login page. The design is already complete (v2), so implementation should closely follow the provided JSX sections.

As a user, I want to use a backend API to save, retrieve, and delete my personal annotations on algorithm visualizations, so my notes persist across sessions. Implement FastAPI endpoints: POST /annotations, GET /annotations?algorithm_id={id}, DELETE /annotations/{id}. MySQL schema for annotations entity (id, user_id, algorithm_id, content, step_index, created_at). Secure endpoints with JWT auth.

As an admin, I want to view a Dashboard page that displays platform activity stats and user feedback monitoring, so I can manage the platform effectively. Implement the Dashboard/Overview page showing activity metrics, feedback monitoring panels, and navigation to the Library for algorithm management. Apply gamma-algovision theme. This page is only accessible to admin users after login. Design not yet available — include a design sub-step.

As a user (job seeker or self-learner), I want to input custom logic/code in the Editor page and send it to the Visualizer for visualization, so I can experiment with my own algorithms. Implement: code editor (Monaco or CodeMirror) supporting Python and JavaScript, language selector, run/visualize button, and output/error panel. Links from: Visualizer (job seeker flow), Login (self-learner flow). Links to: Visualizer (run custom algo). Design not yet available — include a design sub-step.

As a user, I want to use an AI-powered explanation feature on the Visualizer page to get natural language explanations of algorithm steps, so I can better understand complex concepts. Implement a FastAPI endpoint POST /ai/explain (accepts algorithm name + current step context, returns LLM explanation). Use LiteLLM for routing: GPT for conversational/user-friendly responses, Claude for academic/coding explanations. Integrate LangChain for prompt management. Expose as a chat panel or tooltip on the Visualizer page.

As a user (student or job seeker), I want to browse the Algorithm Library page to discover and select pre-built DSA algorithms organized by category (Sorting, Searching, Graph Traversal, Trees, Dynamic Programming, etc.), so I can navigate to the Visualizer. As an admin, I want to manage (add/update) algorithms in the library. Implement category filters, algorithm cards with name/description/category badge, and search functionality. Links from: Login (student/job seeker flow), Dashboard (admin flow). Links to: Visualizer page. Apply galaxy-inspired category color accents per SRD. Design not yet available — include a design sub-step.

As a user, I want the Editor page to submit my custom code to the backend and redirect to the Visualizer with the resulting step-by-step data, so I can visualize my own algorithms. Wire POST /visualize/custom to the Editor's run button, pass execution result to Visualizer state, handle syntax errors and unsupported language errors with clear UI feedback.

As an admin, I want the Dashboard page to display live activity metrics and feedback data fetched from the backend, so I can monitor and manage the platform. Wire GET /admin/activity and GET /admin/feedback to the Dashboard charts and tables. Implement role-based route guard so only admin users can access this page. Add algorithm CRUD management UI connected to Library API.

As a user, I want to view algorithm visualizations step-by-step on the Visualizer page, see code snippets side-by-side with the diagram, and add personal annotations, so I can deeply understand DSA concepts. Implement: animated visual diagram canvas, step-by-step execution controls (play/pause/next/prev), code snippet panel, annotation sidebar, and support for both pre-built and custom algorithm inputs. Links from: Library (pre-built), Editor (custom logic). Links to: Editor (for custom logic input). Apply #3498DB accents for interactive elements. Design not yet available — include a design sub-step.

As a user, I want the Library page to fetch and display real algorithm data from the backend API, with working search and category filters, so I can browse and navigate to visualizations. Wire GET /algorithms API to the Library page components, implement loading/error states, pagination, and filter controls. Ensure admin users see management actions (add/edit/delete).

As a user, I want the Visualizer page to fetch step-by-step execution data from the backend and animate the diagram in sync with code highlights and annotations, so I can interactively learn algorithms. Wire POST /visualize API to the Visualizer canvas, implement animation playback controls, sync code panel highlights, load/save annotations via POST/GET /annotations. Handle loading and error states gracefully.