Astroplay

• 

  explore page/ Home page

• 

  Visualizations Page of space data

• 

  Space starts

• 

  Quiz results dashboard

• 

  Quiz Page

• 

  Definations of some difficult names and terms

• 

  Blogs Page

Inspiration

AstroPlay was inspired by the desire to make space science accessible and exciting for everyone. The project grew from a fascination with cosmic phenomena and the need for interactive, modern educational tools. We wanted to bridge the gap between complex space concepts and public understanding. The discoveries of the James Webb Space Telescope and the stories of legendary astronomers motivated us to create a platform that brings space learning to life. Our goal was to spark curiosity and inspire future explorers.

What it does

AstroPlay is an interactive space education platform. It features a 3D solar system simulation, adaptive quizzes, and a Space Legends section highlighting famous astronomers. Users can explore orbital mechanics, gravitational forces, and time dilation through hands-on demos. The app also includes blogs on current space topics and a gallery of space pioneers with their quotes and achievements. It has also a mini game so users can play it to engage them while difficult points.

How we built it

We built AstroPlay using KIRO AI Agent using React 18, Vite, and Tailwind CSS for a fast, responsive UI. Three.js and React Three Fiber power the 3D space simulations. Content is managed with modular JSON data for blogs, quizzes, and legends. We implemented custom physics algorithms for orbital calculations and used adaptive routing to support single-page app navigation. Deployment is optimized for Vercel, with SPA rewrites to prevent refresh errors.

Challenges we ran into

While making the 3D part we make big mistakes and have trouble to embed the .gltf models so we have make the dummy models to show the results.

Accomplishments that we're proud of

The 3D rendering of the planets is the proudest feature for us and the travel distace and gravity lines and making this part exceptional.

What I have learned

I have learnedthe time management and 3D deployment using three.js and better components management in react.

What's next for Astroplay

I can deploy real 3d models of all objects and can have make this app on a wider scale so that it can encourage the youth.

Built With

• css
• fiber
• jpg
• react
• react-three-fiber
• tailwind
• three
• three.js
• vite
• zustand