• 

  Leaderboard page

• 

  Quiz page

• 

  Facts page

• 

  Login page

• 

  Home page

🌠 StarSphere

🌌 Inspiration

As students, we often struggle to stay engaged while learning and exploring new topics. We wanted to create a fun, interactive, and visually appealing space-themed quiz platform that not only tests knowledge but also gives a sense of achievement with a dynamic leaderboard. Thus, StarSphere was born — a cosmic gateway to learning!

🚀 What it does

StarSphere is a web-based quiz app that allows users to:

• Log in with their credentials
• Attempt a daily quiz (limited to 10 questions per day)
• View fun and informative space facts
• Compete on a real-time leaderboard

🛠 How we built it

• Frontend: HTML5, CSS3, and JavaScript
• User sessions & score tracking: Web Storage API (localStorage)
• Leaderboard: Automatically ranks users by score
• Daily Limit: Enforced via localStorage date-checking

🧱 Challenges we ran into

• Implementing daily quiz limit using only localStorage
• Avoiding zero-score entries and duplicate names on the leaderboard
• Ensuring responsive design and smooth UI interactions
• Maintaining clean data flow without a backend

🏆 Accomplishments that we're proud of

• Built a fully functional quiz platform with persistent storage and no backend
• Developed custom leaderboard logic and score sorting
• Designed a space-themed UI that's both clean and interactive
• Successfully managed state and navigation using just JavaScript

📚 What we learned

• Deep understanding of the Web Storage API
• Structuring frontend logic efficiently in JavaScript
• Improving CSS layout and animation skills
• Handling dynamic DOM updates and form validation

🔭 What's next for StarSphere

• Add backend (e.g., Firebase or Node.js) for cross-device sync
• Introduce multiple quiz categories and levels
• Add time-based challenges and multiplayer support
• Integrate space-themed animations or sound effects
• Launch mobile-first responsive version

Made with 💫 and curiosity under the MIT License

Built With

• css3
• github
• html5
• javascript
• localstorage
• quiz-scores
• webstorage-api