Voyage into Space

A realistic Mars space voyage simulation to raise interest and spread knowledge about preparing a rocket and traveling in space, made using the MERN stack!

Comment

Inspiration

Most of the inspiration comes from our interest in space.

The lead developer, Matt has been an avid fan of all things space, from SpaceX launches (as you will get a feeling for as you go through the web app) to Star Wars. His brother, Kevin is also a space nerd (in addition to being a nerd in other sciences).

Having this common interest really drives both of us into developing an experience that would allow our users to have the awesome feeling of preparing and experiencing an entire space voyage for yourself from the comfort of the screen.

What it does

It's a simulation of what a Mars mission may look like, from test flights to launching, yourself. It has a more cartoon-esque and fun experience that helps users have a nice relaxing journey.

How we built it

The web app is a MongoDB, Express, React, Node (MERN) stack app.

MongoDB was used to get and post leaderboard data. Mongoose was used to provide more structure to the MongoDB data.

Express was used to run a backend server connecting to the MongoDB.

React was used to provide the frontend animations, interactivity, and simulation logic. React Redux was used for global state handling, where global states such as chance for success, fuel, etc. states and state actions were handled in the Redux store. Seamless linking was implemented with React router dom.

HTML/CSS was used to style text and containers.

Challenges we ran into

Having just learned React and fullstack programming, the main developer Matt was still learning setting up CRUD in the Express server, Incorporating state handling with React Redux, and utilizing React hooks to re-render pages for animations and specific state changes. Additionally, as Kevin was an amateur high school hacker, he had very little frontend experience, and made leaps and bounds figuring out CSS button and text-styling tricks.

Accomplishments that we're proud of

Making a well-functioning full-stack React app that provides users with a visually-appealing, easy-to-use, and inspiring space simulation.

What we learned

React Redux tricks, setting up CRUD for MongoDB in an Express server, and React hooks tricks. Css styling tricks.

What's next for Voyage into Space

Polishing the game, adding a lot more detail to make the simulation realistic, and adding more frontend to make the experience feel more real and exciting!

Share this project:

Updates