Far Shores

An interplanetary travel catalogue to make learning cosmology fun. Select from a wide range of planetary destinations, check the weather and if you will survive the journey. Book the travel.

Comment

Inspiration

Ever since I was a little kid, I have loved reading about the cosmos. It was the only subject I was interested in, and sadly, they never taught it in school. My only source of information was an encyclopedia, which I used to read every chance I got. I learnt everything from the lifecycle of stars to planets to galaxies (which always made me wonder if aliens are real). This project has been in my head for a long time, and finally, with the help of Codex, I have tried to recreate that sense of wonder again.

What it does

This project is designed as a travel catalogue where you can browse planets as travel destinations (sadly, not Instagrammable) and book fictional holidays. It is meant to be educational with a touch of entertainment, so you don’t have to memorize boring details.

By imagining yourself on a holiday on one of these far shores, you can learn about what the surface is like, what the atmosphere would do to you, and what your chances of survival are.

In this project, you can:

  • Browse a list of planets in our solar system (to start with).
  • If any of the planets interest you, click on the card to get the details of your destination.
  • See details such as distance from Earth, atmospheric conditions, and sights worth seeing (if you survive the travel itself).
  • Finally, if you would like to take a chance and book your vacation, click on the book button and get yourself a downloadable ticket.
  • For this initial version, since there are no accounts, planets can be added and details can be edited by users running this on their systems locally.

How we built it

  • I started with the idea of a travel catalogue, but for planets, keeping the actual information but making it entertaining so people are not reading dry facts.
  • Then I wrote the product requirements with the help of a Codex skill, where I defined features such as browsing and searching, planet profiles, adding and editing destinations, and booking fictional trips.
  • Once the PRD was completed, I worked on deciding which tech stack to use and decided to use React with Vite. There is no backend, and the data is saved in browser localStorage, since this is a POC.
  • The next step was to set up the far-shores repo and make code changes in three steps:
    1. Code planet browsing, searching, and the details page, along with the basic fictional booking flow, with feedback for any changes.
    2. Implement add and edit features, with browser localStorage to preserve saved changes.
    3. Refine the booking flow by adding a separate travel-pass page with journey estimates, packing advice, survival details, and download and close buttons.estimates, packing advice, survival details, download, and close buttons.
  • I refined the design through my own testing of each flow, from browsing to editing to booking a trip. I improved typography, page transitions, scrolling, section separation, sight cards, ticket sizing, and top-of-form cancellation.
  • I tested everything again after the above improvements.
  • I published the final app’s source code on GitHub for sharing.

Challenges we ran into

Below are the challenges I ran into:

  • Deciding on the theme and typography, and balancing facts with entertainment.
  • Testing each flow manually and checking whether everything looked good and the app transitions felt smooth.
  • Not being able to explain some of the changes without a visual design.
  • Actually sitting through and completing the POC version of the app, along with testing it multiple times.

Accomplishments that we're proud of

  • Finally being able to conceptualize what was just an idea in my head.
  • Taking a project from an idea to an actual working prototype that I can expand further.

What we learned

  • Learning through step-by-step guidance on getting projects built through Codex using the skills.
  • That I should have conceptualised the app’s design, along with its navigation, concept, and typography, before starting.
  • Facts about planets in our solar system that I previously didn’t know.

What's next for Far Shores

  • Along with planets, I want to extend it to other cosmic objects such as stars, galaxies, and nebulae.
  • Book trips to multiple planets as packages and get an estimated time and cost for each.
  • Add different types of travel modes (real and fictional).
  • Generate your own planet with its features and visualize it.
  • 3D exploration of a planet after booking the package.

Built With

Share this project:

Updates

Submission history