Space Explorer

"Space Exploration🚀" is a web-based interactive quiz game where players explore the solar system, unlocking each planet by answering three space-related questions.

Comment

đź’ˇ What Inspired Me

As a space enthusiast and lover of educational games, I wanted to create something that makes learning about the solar system both fun and interactive. I noticed that most space learning tools were either too text-heavy or too basic. This led me to build Space Explorer — a quiz-based adventure that gamifies planetary exploration for students, hobbyists, and curious minds.

🕹️ How to Play spaceXpo

  1. Start the Mission
    Click the “Start Mission” button on the homepage to begin your journey from Mercury.

  2. Answer the Quizzes
    Each planet presents 3 questions based on real planetary facts. Choose the correct answer to progress.

  3. Unlock New Planets
    Finish the quiz on one planet to unlock and land on the next — from Mercury all the way to Neptune.

  4. Complete the Mission
    After Neptune, you'll reach the final screen and see your total score. Try again to beat it!

🧠 What I Learned

  • How to structure a React project with multiple pages using React Router.
  • Building and styling components using Tailwind CSS for responsive design.
  • Managing quiz logic and progression using React hooks (useState, useParams, useNavigate).
  • How to configure and deploy a React app to GitHub Pages using gh-pages and Vite.

🛠️ How I Built It

  1. Frontend Framework: React + Vite for fast development and modular structure.
  2. Routing: Used React Router to move between Home, Planet, and Result pages.
  3. Styling: Tailwind CSS provided utility classes for clean, responsive UI.
  4. Quiz Logic: Stored questions per planet in a central data file (quizData.js) and built a progression system.
  5. Deployment: Published the app using gh-pages, with GitHub Pages hosting the live demo.

⚠️ Challenges I Faced

  • Managing quiz flow: Handling stateful transitions between questions and planets while tracking scores required careful planning.
  • Routing issues: Configuring React Router for GitHub Pages required understanding Vite’s base settings.
  • Responsiveness: Making the UI look good on all devices took multiple design tweaks and testing.
  • Dynamic loading: Ensuring quiz data loaded correctly for each planet while preventing crashes on invalid routes.

âś… Final Thoughts

Building Space Explorer was both a fun and educational experience. It gave me the opportunity to apply front-end skills, deepen my understanding of React, and build something that reflects my interest in science and learning. I'm excited to expand it with animations, a leaderboard, and maybe even multiplayer features in the future.

Built With

Share this project:

Updates