Odyssey

https://odyssey-cjlaserna.vercel.app/
https://odyssey-cjlaserna.vercel.app/
https://odyssey-cjlaserna.vercel.app/
https://odyssey-cjlaserna.vercel.app/

Main

This is Odyssey, an educational space website for all ages. It's created through TS, React, Chakra UI, and Babel webpack deployed through Github/Vercel. Behind it are countless NPM packages and work.

News Page + Infinite Scrolling 🎉

The news page pulls in articles from a space news API and has a built in infinitely scrolling loading system so there are literally infinite articles. When a user reaches the bottom of the page, the page loads more in.

Astronauts Page + Infinite but Horizontal 🎉

Astronauts Page

Similarly, the astronauts page pulls from a similar space API to display information and more astronauts can be manually loaded there as well.

For Fun! Your weight but in other planets + Your Birthday @ NASA!

Experimental Page

The last experimental page takes the weight of any individual in kilograms and converts into what your weight would be in other planets. It takes in your weight and does some math to calculate what you would weigh on other planets in kg.
You can also find out what picture NASA took on your birthday on the birthdays page!

Wrap Up

Overall, this project has 3 components, the news page, astronauts page, and the experimental weight page. This was my first project using Typescript and Webpacks with React.

Challenges

It was challenging figuring out how web packs worked, and I spent a good chunk of my time debugging config files and small type errors The hardest part of this project was learning Typescript, solo hacking, and deploying the site.