meteor-roadmap
Prince GajjarI want to create one roadmap project where User can direcly input movie and it will show the user the roadmap movied and tree structure of which movies are required to watch prioly and after. It should show in such a way that if movie is identical without any sequal then it should return single node with that given movie. But Lets suppose if I say Avengers: EndGame. then It should return all the movie in correct sequence I should watch with where the Avengers: EndGame exists in that sequence with highlighted as user has searched that movie. Same for Series as well
Comments (0)
Sign in to leave a comment
Project Tasks10
Implement Theme & Global Styles
As a user I want to see a consistent dark cinematic theme across all pages. Implement the global CSS design tokens (Midnight Blue #2C3E50 background, Neon Green #27AE60 primary, Golden Yellow #F1C40F accents, Sky Blue #3498DB interactive elements, Soft White #ECF0F1 text), animated starfield root background with twinkling particles and nebula drift overlay, font setup with Inter, and the frosted-glass section panel system (alternating rgba overlays). Remove any scaffold pages not needed by the user flows (e.g. login, signup, welcome, dashboard sub-pages that are not part of this product). This task must be completed before any page-specific UI tasks.
Implement AI Roadmap Generation API
As a user I want the backend to dynamically generate a structured roadmap via AI so the frontend can render the correct node tree every time. Build a FastAPI endpoint POST /api/roadmap that accepts a search query (title or universe term), routes the request via LiteLLM to the appropriate AI model (GPT or Claude), and returns a consistent JSON schema representing the roadmap tree: nodes (id, title, year, type, isHighlighted, posterUrl, synopsis, director, imdbRating, language, status), edges (fromId, toId, label), and metadata (universeTitle, totalNodes, searchedTitle). Ensure the AI prompt engineering guarantees deterministic, consistently structured output on every call. Handles both specific-title (with highlighted node) and broader-universe (no highlight) modes.
Build Home Page
As a user I want to land on an immersive galaxy-map homepage so I can discover and search cinematic universes. Implement the Home page based on the existing JSX design (v2) which includes: NavBar with meteor-roadmap logo and 'Launch App' CTA, HeroGalaxy full-viewport section with animated starfield, SearchBar with pill-shaped input and quick-access chips, FeatureHighlights 3-column card grid, HowItWorks step-by-step section, GalaxyPreview interactive SVG mini-demo, UserPersonaCards, ExampleUniverses horizontal scroll showcase, CallToAction banner, and Footer. Wire up the Search input to navigate to the Search/Roadmap page on submit.
Implement Node Detail API
As a user I want the backend to fetch full detail for a specific roadmap node via AI so I can view rich metadata, cast, synopsis, and connections. Build a FastAPI endpoint GET /api/node/{nodeId} (or POST with node context) that uses AI to return extended node details: full synopsis, director, cast & crew list, IMDb rating, streaming platforms, predecessor nodes (Watch Before), successor nodes (Watch Next), and related titles. Ensure consistent JSON schema so the Node Detail page renders reliably without a database.
Build Search & Roadmap Page
As a user I want to enter a movie title or universe name and see the generated roadmap tree so I can understand the correct watch sequence. Implement the Search page (v2) and Roadmap page (v2) based on existing JSX designs. Includes: search input with real-time query state, results transitioning into the interactive roadmap tree (SVG/canvas), golden connection lines between nodes, highlighted neon-green node for specific title searches, no highlight for broader universe searches, zoom/pan interactions, node tooltips on hover, and a standalone single-node display for movies with no connections. The page should handle both 'specific title' and 'broader universe' search modes as per the user flow for all three personas.
Build Node Detail Page
As a user I want to click a roadmap node and view full details about that movie or series so I can learn more and navigate connections. Implement the Node Detail page (v2) based on the existing JSX design which includes: NavBar with breadcrumb, NodeHero with blurred poster art and neon-green highlighted badge, NodeMetadata stats bar (Director, IMDb Rating, Release Date, Language, Status), NodeSynopsis with expand toggle and story position context, NodeConnections with 'Watch Before' and 'Watch Next' cards connected by animated golden dashed lines, NodeRoadmapMinimap, NodeCastCrew horizontal scroll strip, NodeWatchOptions action panel, RelatedTitles horizontal scroll, and Footer. Navigates from Roadmap page node click; 'View Node' links return to other Node Detail pages.
Integrate Roadmap API with Frontend
As a user I want the Search and Roadmap page to fetch real AI-generated roadmap data so the tree reflects actual movie universe sequences. Connect the frontend Search/Roadmap page (t3) to the backend POST /api/roadmap endpoint (t5). Implement loading states (starfield shimmer placeholder), error handling (Crimson Red #E74C3C alerts), and response parsing to render nodes and edges on the SVG/canvas roadmap tree. Ensure highlighted node logic (neon green #27AE60 pulse) is driven by the isHighlighted flag in the API response.
Integrate Node Detail API with Frontend
As a user I want the Node Detail page to display real AI-fetched metadata, synopsis, cast, and connections so I get accurate information for every title. Connect the Node Detail page (t4) to the backend GET /api/node endpoint (t6). Wire up NodeHero poster data, NodeMetadata stats, NodeSynopsis text and story position, NodeConnections Watch Before/Watch Next cards, NodeCastCrew strip, NodeWatchOptions streaming platform badges, and RelatedTitles carousel with live API data. Implement skeleton loading states and graceful error fallbacks.
Implement Interactive Roadmap Tree
As a user I want to zoom, pan, and interact with the roadmap tree so I can explore large universes like Marvel or DC comfortably. Implement the interactive tree canvas/SVG layer on the Roadmap page: smooth zoom in/out (mouse wheel + pinch), drag-to-pan, node click navigation to Node Detail page, hover tooltips (title, year, brief description), animated golden connection lines with dash-flow animation, pulsing neon-green highlight for searched node, and smooth fade transitions between roadmap states. Must handle large graphs (20+ nodes) without performance degradation per NFR Section 7.
Performance & Accessibility Audit
As a user I want the platform to load roadmaps within 2 seconds and be accessible so everyone can use it regardless of ability. Conduct a performance audit targeting sub-2-second roadmap render times: implement API response caching (in-memory or Redis), lazy-load heavy SVG tree components, and optimize animation performance. Run WCAG 2.1 accessibility checks on all four pages (Home, Search/Roadmap, Node Detail): add ARIA labels to interactive nodes, keyboard navigation for the roadmap tree, sufficient color contrast ratios, and screen-reader-friendly tooltips.
No comments yet. Be the first!