Satellite Crafter

• 

  Additional Information

• 

  Example Design

• 

  Website UI

Inspiration

Satellite Crafter was built as a way to test the capabilities of React and Redux in making a web game and handling states. I wanted to see what I could do with React and powerful visual tools like Tailwind.css. I also have a fascination with cosmology and our interaction and future in the stars, and satellites, I feel, are one of the cornerstones of this development. I included the Hubble Space Telescope, one of the more preeminent imaging telescopes aimed at the universe, in the game.

What it does

Satellite Crafter allows a player to assemble a satellite based on certain parts, arranging them much like how crafting works in Minecraft (3 x 3 grid). Depending on the parts' configuration, they can see if their design resembles a real-life satellite. They can also view information about satellites by clicking on certain tabs. This allows them to learn more about the satellites, why they were built, and their applications.

How we built it

Satellite Crafter was built in React. As such, I used functional components to assemble each element of the game. It is exceptional for its versatility and frontline interactions. To handle the necessary states that hold game data, I used React Redux Toolkit, which is a global state manager that allowed me to manage all my states effectively. Essentially, by saving states in “slices,” the app doesn’t need to re-render itself again and again and export states everywhere, which is tedious and extremely inefficient. Instead, the states reside in one global head, where my components can easily access them at any time. This is especially valuable for my game as I have to share a lot of states between my components, like my parts list and the grid, which has to exchange data on what images, parameters, etc. need to be passed in. For instance, take this object that defines a "Camera" part:

{
add: 0
payload: (a SVG, but it didn't translate well here)
type: "component/setCamera"
icon: {$$typeof: Symbol(react.element), type: 'img', key: null, ref: null, props: {…}, …}
name: "Camera" 
picture: "https://pngimg.com/uploads/camera_lens/camera_lens_PNG101.png"
}

I need states to read the name, picture, etc. that needs to show up on the grid as well.

In addition to functional mechanics, also need reactive displays that change appearance upon interaction to make the game feel more responsive. Accordingly, to make the game as visually appealing as possible, I used Tailwind.css to create a functional, modern aesthetic. Tailwind’s simplification of CSS into bootstrap-like classNames significantly improved the process of styling the game and organizing components.

Challenges we ran into

When I was working with Redux, errors kept popping up saying that the values being passed from the states couldn’t be read by my selectors, which were supposed to receive these values. It was a frustrating experience as nothing seemed to be out of the ordinary - except for one vulnerability that could only be resolved by completely redesigning my state management. This led to me having to completely redesign the way the parts interacted with the grid. I had to modify my selector to use a useSelector hook called from the top level of the function, as hooks cannot be called in loops. Meanwhile, I was also trying to deal with the standard bugs resulting from typos and syntax errors - but this was even more challenging as I had to snoop around my Redux slices and between my states! While I resolved the issues, needless to say, I learned a lot about how to manage my states with Redux and how to watch out for breaking the rules of hooks. It was occasionally rage-inducing, but it was well worth it for the experience I gained.

Accomplishments that we're proud of

I am very proud of how the game turned out. It is functional and attractive - but as much as the final product is impressive to me, I am just as encouraged by the journey - this entire day of staying up through the night, browsing through Stack Overflow and documentation for various libraries, has honestly really excited me about what I can do and achieve with enough dedication and motivation. I really feel more interested and compelled by coding and making great projects.

What we learned

I learned a lot about React-Redux. States are one of the key properties of React, so it is critical to have a strong grasp on not only the concept but being able to actually implement it. By figuring out an area of improvement and this experience in resolving it, I feel I am much more prepared for making more applications with global state managers like Redux Toolkit. Additionally, working with additional CSS libraries like Tailwind and plugins like Flowbite have significantly improved my web design and enhanced my knowledge regarding design philosophy and aesthetics.

What's next for Satellite Crafter

Satellite Crafter is relatively complete, but I can imagine additional satellite configurations, more available parts, and more grid space. This would open up the possibilities of designs even more. Certainly, it would be a challenge, but this would significantly increase the potential of the game and its intention to educate and interest.

Built With

• react
• redux
• tailwind