curioscope web app

"Curioscope: Explore the Universe, Spark Your Wonder!"

Comment

Inspiration The spark for Curioscope came during a camping trip under a breathtaking night sky, where the vastness of the universe ignited a passion to share its wonders. Inspired by tools like Stellarium and NASA's open data, we envisioned a web app that democratizes astronomy, making it accessible and engaging for everyone, from kids to lifelong learners, through an intuitive and interactive platform. What It Does Curioscope is a web app that brings the universe to your fingertips. It features:

Interactive Star Map: A 3D visualization of constellations and celestial bodies, navigable via mouse or touch. Daily Cosmic Insights: Displays NASA's Astronomy Picture of the Day (APOD) with explanations tailored for all knowledge levels. Educational Quizzes: Gamified challenges to learn about stars, planets, and constellations. Responsive Design: Works seamlessly on desktops, tablets, and mobiles, encouraging exploration anytime, anywhere.

How We Built It Curioscope is a single-page React application designed for performance and accessibility:

Tech Stack: Frontend: React with JSX for modular components, styled with Tailwind CSS for a sleek, responsive UI. 3D Visualizations: Three.js for rendering a lightweight, interactive star map. Data Sources: NASA's APOD API for daily images and a public star catalog for the star map. Deployment: Hosted on Netlify with a CI/CD pipeline for rapid updates.

Process: Designed wireframes to prioritize user-friendly navigation. Integrated APIs through a proxy server to handle requests and cache data. Optimized 3D rendering for smooth performance across devices. Conducted iterative user testing to refine the experience.

Challenges We Ran Into

Performance Bottlenecks: Rendering thousands of stars in Three.js caused slowdowns. We optimized using instanced meshes and limited draw calls. API Complexity: NASA's data was rich but dense. We built parsers to extract and simplify key information for users. Cross-Device Compatibility: Ensuring WebGL worked consistently across browsers required extensive testing and fallbacks. Balancing Education and Fun: Early versions were too technical. We added quizzes and simplified content based on user feedback.

Accomplishments That We're Proud Of

Seamless 3D Experience: Achieved a smooth, interactive star map that runs on low-end devices. User Engagement: Early testers, including kids and non-astronomers, reported enjoying the quizzes and daily images. Accessibility: Built a fully responsive app with screen-reader support, making astronomy inclusive. Community Feedback: Positive responses from online astronomy forums validated our vision.

What We Learned

Technical Skills: Mastered Three.js for 3D rendering, React for scalable UIs, and API integration for real-time data. User-Centric Design: Learned the importance of iterative testing to balance education and engagement. Optimization: Gained expertise in WebGL performance tuning and cross-browser compatibility. Team Collaboration: Coordinated effectively across design, development, and testing phases.

What's Next for Curioscope Web App

New Features: Add a virtual telescope mode to simulate real-world stargazing and a timeline of cosmic events. Community Building: Introduce user accounts for saving favorite constellations and sharing discoveries. AR Integration: Explore WebAR for immersive experiences, like projecting constellations onto real-world views. Educational Outreach: Partner with schools to integrate Curioscope into science curricula, fostering the next generation of astronomers.

Curioscope is just the beginning of our mission to make the universe a place of wonder and discovery for all.

Share this project:

Updates