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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent