1

Final Submission SpaceTravel is released 🚀🛸

 3 years ago
source link: https://dev.to/krishnakakade/final-submission-spacetravel-is-released-3h0d
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Cover image for Final Submission SpaceTravel is released 🚀🛸

Final Submission SpaceTravel is released 🚀🛸

Jan 10

・2 min read

DigitalOcean hackathon (6 Part Series)

What We built

We built a SpaceTravel web application in reactjs and also using its other libraries and other NPM packages this application is divided into 4 different components are following

  • First component:- In the first component there is one 3D earth that is built with help of three.js and a library called ReactGlobe in react and also there is one navbar those links are linked to them all components.
  • Second Component:- In we used NASA APOD API that APOD(Astronomy Picture of the day)API content is regularly updating on our website also that content is dynamic on that text we performed Text-to-speech with help of react-speech-kit library and also cool designs are there and also there is one button called search that is linked to another component and also now there is random APOD picture feature is there click on it to view those pictures.
  • Third Component:-Third component is search.js in this component there is one search button for that we used unsplash-js API and also after clicking on search images will be load there and you can preview those images also you can download those images and other cool stuff is given there.
  • Fourth/Fifth/sixth Component:- Fourth component is footer.js includes article links and authors of the project and other components are navlinks.js and notfound.js this all the components of this project.

Category Submission:

  • Random Roulette

App Link(Live Demo)

Live demo link🔥

Screenshots

  • Zoomed out because of taking whole that's some things are not visible

For more details Youtube video⤵️(Note:- But now we updated new features for that check live demo)

Link to Source Code

GitHub logo krishnadevz / SpaceTravel

SpaceTravel app in reactjs and with help of 3D libraries like 3JS and in second part used NASA open API for getting contents and also text-to-speech and many more things check the live demo and description of the project.🌠

</🌠>SpaceTravel🌍</🛸>

Key Features and basic Description of project

  • First Component of this project and is 3d earth and also it is built with help of reactjs and threejs liraries and also there is one footer component below and for routing pages we used react-router library

  • Second Component is fully dynamic means that content is regualry updated for that we NASA APOD(Astronomy picture of the day) API and also there one text-to-speech button is there that uses react-speech-kit library please don't overuse the api and don't click again again on that text to speech icon and now also there is new random APOD images feature and many more check the articles for that and live demo links .

  • 3rd component takes input from users and shows images(those images coming from unsplash api) according user search and also we can download those high resolution images and preview of those…

Permissive License

Background

Since a childhood i love the space that's why i thought we can do project on that and also this idea is unique and also we added new features too that makes SpaceTravel creative and unique .

How I built it

I learn so many things and also solved many issues also and also hally did a great job.
if you want to know what whole Journey of our hackathon then check series of all articles from Day1 that links will be shown at the start of this article i am working on this project since last week of 2020 i love the journey and wonderful experience.

Authors

  • Krishna
  • Hally

Team Members

Additional Resources/Info

  • All details are covered in the series of previous articles and in github repo dependancies section Thank you for reading and have good day all 😊 We did it 🌠

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK