[EPIC] Project Roadmap

[NashJames]

MVP

Iteration 1:

• Initial project configuration
• Add Fetch
• Add CodeMirror
• Add server side fetch for page load performance
• Add SearchBar (Radix-UI design style)
• Add Ascii art easter egg to browser console
• Add Theme (MUI)
• Build app header (Curved rectangle 50% width centre screen at the top. Fixed on scroll. Add external archives and github links)

Iteration 2:

• Inkscape: Design background (Miniature SVGs to distribute across the page. Lots of single pixel blues like stars made of fibre optic?)
• Inkscape: Design background death star (Geometric styling. Fades out left to right?)
• Inkscape: Simple geometric Holocron logo design. Add spinning animation inside HTML style tag?
• Add paragraph description/explanation under header?
• Add Typography
• Refactor UI Design

Iteration 3:

• Animations: Translate elements upwards into view on page load
• Add CI checks for linting and prettier
• Write E2E tests - Playwright
• Write Snapshot tests - Jest

Mood Board: Dribble - Millenium Falcon, GitHub Downloads, Father-Son-Daughter Wall Mural, Jedi Temple, Death Star illustration

Stretch Goals

Iteration 1:

• Add api response time box to CodeMirror
• Add copy URL button to top-right of CodeMirror. Show url in tooltip
• Add loading spinner to CodeMirror
• Animations: Meteors on CodeMirror background
• Mobile Responsiveness (Responsively App)
• Adjust folder structure and tests for a production environment
• Add security headers (Delayed - Waiting on Next.js CSP middleware fixes)

Iteration 2:

• Add basic POST API. Use JSON schema for types as it's language agnostic.
• Meilisearch API data with autocomplete (Demo w/ recent searches and categories). Can it search the entire dataset and clicking on the item will prefill the relevant API link to the search bar? E.g. Search 'Luke Skywalker' will return 'https://swapi.dev/api/people/1/'
• Searching should add to the URL. Possibly under /search/[subject]/[id], with autoscrolling the user down to the CodeMirror
• Add rate-limiting
• Add basic metrics for requests
• Add docs page (about the data, basic API interaction, language-specific interactions) - docasaurus/gitbook, meilisearch and giscus?
• Add app footer info (API license, disney copyright, etc. Credit original authors/hosts? List technologies? Designed & built by...) - docs only?
• Update readme (Badges [code license, api license, code climate, test coverage, CI status, etc.], all-contributors) - carbon?
• Add repo social preview image (Adjust banner to include 40pt border)

Iteration 3:

• Add graphql interactions
• Update docs (graphql Interactions)
• Add settings pop-out sidebar (like mui docs). Options for dark/light mode (not full white? cream?), accent colour theme (mimic lightsaber colour options?), font size, colour blindness, language?. Have the allow or deny cookies option at bottom with helper text: "To remember these options, enable cookies below".
• Add notifications like MUI docs? To announce additional API interactions, etc.
• Animation: Hovering on Death Star builds it by translating other SVGs (e.g. moving the pieces from Andor S1 ending into place, then activating it)
• Add screenshot testing with visual regression tests
• Create contributing + development guide for repo
• Custom 404 and 500 error pages
• Add SEO
• Deploy to custom site?

Building a stronger API service

• Create DB with data
• Create a rust server for requests - rtz crate
• Create docker image of DB and rust server (Fly.io)
• Update docs (Docker Image Interaction, How to create an API)
• Add a statistics page. Usage Graphs, Benchmark Tests (GraphQL vs REST), etc.
• ThreeJS world map (live pings when someone makes a request)

Expanding the dataset

• Crawl data from https://starwars.fandom.com/wiki/Millenium_Falcon?action=edit or page HTML. Data licensed under CC BY-SA 3.0
• Include images and low quality/short videos for real-world testing applications
• Additional API languages: https://starwars.fandom.com/wiki/List_of_Star_Wars_Wikis_in_other_languages
• Additional UI languages - Written German is roughly 45% longer than English. Test any broken UI layouts
• Add UI language choice to settings sidebar (incl. Aurebesh and Wookie?). Detect language by window.navigator.language