All work, from ideation to conception, is completely my own.
2023-02-22.15-54-14.mp4
“He insisted that stars were people so well loved, they were traced in constellations, to live forever” ― Jodi Picoult, My Sister's Keeper
I have always loved astronomy. One of the most transformative moments I had was as a young scout paddling on the waters of Lee Lakes near the Grand Tetons on a night devoid of any human source of light. Above me was a skyscape of stars so impressive and immediate that if I stood up in my canoe I would have surely hit my head on the milky way.
So when I came to a point in my learning that I needed to learn how to connect to an API, I knew I wanted to connect to NASAs. With hard work and many, many iterations, I now have a project that can take my love of astronomy and hopefully use it to inspire other people.
To use the app simply click on the View Project
button or visit space-rhino.com.
-
Tracking multiple stateful components and multiple states within the same component, using .useState() hook.
-
Passing state from child -> parent and parent -> child
-
use useEffect() hook to update effects
-
move from a purely Vanilla JavaScript app to a React App
-
use of ternary operators for conditional rendering of elements
-
fancy modal 😄 😄 😄
-
use Style Components
-
spread and rest operators
-
automated scrolling effect
The original v1.0 was built on pure Vanilla JavaScript. It demonstrated the following:
- Use of vanilla JavaScript to connect to an API.
-
JSON.parse().
- Iterating through a JS object.
- Use of
Math.floor()
andMath.random()
to generate a random number between 1 and 10. - Use of
querySelector()
andquerySelectorAll()
. - Use of template literals
`
and placeholders&{}
.
This was a cool accomplishment for me to see an API bring back information for the first time. It was pretty freakin' awesome! But it was also a non-sensical display of JSON. To get this into something that would work in an App I knew I would have to bring in React. At that point in my studies I had no experience with it. So by far the biggest obstacle was learning React.
Specific things I learned included:
- Passing props from parent to child, parent to grandchild, and child to parent
- Using useEffect to create changes based off of state
- Combining ternary operators and props to render different possibilities based on props
- Setting up a favorites section that would save favorites after you closed required passing information stored in state and setting it in localStorage
- Setting up a way to share with friends using the Navigator API was fine enough until I wanted to pass a photo as well, which then required learning how to use a blob so I could pass a file, something I had never done before.
- all work is completely my own. The only directions were user stories the assignment needed to complete.
- artwork was created by Trevor Rapp in DallE3
This project was bootstrapped with Create React App.
For more information see my LinkedIn, or return to my Github