As a curious, science-loving kid growing up near Houston, space was everything. Every month or so my parents would take me to the Johnson Space Center and I would marvel at the rocket they had on display. I couldn't believe something so huge had actually left Earth. It made impossible things seem possible. Now as an adult, I try to foster that same appreciation for space exploration in my daughter. So my first React project seemed like a good opportunity to create something fun and educational about my favorite subject, space. I present NASA Watch.
Lucky for me, I'm not the only space nerd in the world and the science community is built on sharing, so I had a fair amount of options for APIs I could use to bring information into my site. The NASA API was my starting point since they actually have several sub-APIs for different projects and divisions. I wanted my site to draw in the user so I went with the more visual parts and chose to use the NASA Images and Astronomy Picture of the Day APIs. I also wanted to use photos from the new James Webb Telescope and luckily there was an API for that as well. I thought perhaps a news aspect would give the project some meat I found a news aggregate API. If you've ever worked with open-source APIs you know, four APIs was plenty.
Next I needed to decide on a design. I was recently admiring the simple effectiveness of the Discord signup page so I started with that as inspiration for my homepage and navbar design. I also enjoy LinkedIn's three column layout so I used that as inspiration for the photo and news pages. For mobile responsiveness I needed a solution to consolidating a three column layout into a single column. I didn't want to give any one feed importance over the others so I went with a tabbed function to allow the user to select which column to display individually. I also added a search function to the NASA Images column.
Working with React was actually much easier than most of the projects I had done previously. With a project of this size it made it much easier to organize separate functions, components, and css into different files. Redux made it easy to deliver the data without endless prop drilling. I chose to do the css from scratch rather than use a framework or bootstrap. I prefer to know how all the pieces come together and how they are made so that making little adjustments is easier later on.
The biggest challenge of this project was the creative aspect. Formulating an idea and a design myself is much more of a task than being given a goal and working towards it. But I also enjoy the freedom to let a project evolve in any direction I see fit. The best way to overcome a creative block is to make something you enjoy, hence the space theme. Another challenge was the time constraint. I had roughly a week to bring the project from conception to a finished product. Prioritizing essential vs non-essential functions was key.
With more time I would like to add some more functionality and customization. I plan to deploy this project in the near future but in the meantime feel free to check out the repo here
Top comments (0)