ProjectsSpace tourism
Space tourism
Stack
- Next.js
- React
- TypeScript
- Tailwind
Moved to Next.js, October 2026 · History
Space tourism repository (opens in a new tab)
What it is
A multi-page space-tourism demo with destination, crew and technology pages, built from a supplied design.
Why it exists
The brief gave me several related page types to implement. Within the broader design-to-code work, it is a reference for navigating related content across a site. I built it in late 2021 as Breakthrough Development work, during my post-bootcamp job search.
How it works
Static routes separate destinations, crew and technology. The demo presents supplied content and imagery; it does not book travel or create accounts.
Story
The next page had its own job.
I built this space-tourism site twice from one supplied design, each time to sharpen the tools I use at work. First came Angular, the framework my first developer job ran on. Then I ported it to React with TypeScript, with the pages reading their content from a small GraphQL server. In 2026 AI coding agents rebuilt it in Next.js, which is what I work in now.
The design gave someone several reasons to keep exploring. They could choose a destination, look at the crew and learn about the technology. Each part needed its own page and a way to reach it.
I built the multi-page demo from the brief. Home leads into the destinations; crew and technology have separate routes. The deployed result keeps those content types distinct while carrying the design through the site.
This is another kind of reference within the work I can revisit. A product page centers on one item. Here, the useful structure is a collection of related content a visitor can move through.
What I took from it is how to carry one design across related pages so each page keeps its own job, whichever framework is underneath.
Design: Frontend Mentor's Space tourism multi-page website (opens in a new tab). Build: Royer Adames. The demo is an October 2026 rebuild by AI coding agents; the code link holds my 2021 Angular and React versions.
Case studies
History
Moved to Next.js
· By AI coding agents
Before:
Stack
- React
- TypeScript
- GraphQL
- Sass
Every Frontend Mentor project moved to one locked stack: Next.js, TypeScript and Tailwind CSS.
- Changed React with GraphQL and Sass to static Next.js pages with Tailwind CSS.
Ported from Angular to React with TypeScript
· By Royer
Before:
Stack
- Angular
- TypeScript
I built it a second time to sharpen the tools I use at work, this time in React with TypeScript.
- Changed Angular to React with TypeScript, with page data from a GraphQL server.
- Showing still 1 of 5
Destinations
A Mentor brief for separate routes, not a product host with accounts.
- Added Destination pages for Moon, Mars, Europa, and Titan.
Showing still 1 of 4Crew
A Mentor brief for separate routes, not a product host with accounts.
- Added Crew pages as their own routes.
Showing still 1 of 3Technology
A Mentor brief for separate routes, not a product host with accounts.
- Added Technology pages as their own routes.