Spacely

Inspiration

The night sky has always fascinated me — from constellations to moon phases, every cosmic element reflects our emotions and dreams in a magical way. Inspired by that connection between space and mental wellness, I created Spacely, a cosmic-themed web app that blends astronomy, mood journaling, and interactive space tools to spark curiosity, reflection, and joy.

What it does

Spacely offers 7 engaging components: 🌙 Cosmic Mood Journal – Track your emotions alongside lunar phases for cosmic self-awareness. 🧠 Cosmic Quiz – A fun personality quiz that connects your traits with celestial archetypes. 🚀 Launch Dream – Visualize and share your personal space mission inspired by your dreams. 📅 Lunar Mood Calendar – View daily moon phases and how they may influence your mood. 🌕 Moon Mission – Create your own moon exploration adventure and story. ☁️ Stargazing Weather – Get real-time weather info to plan perfect stargazing nights. 🪐 Starry Twin – Check planetary alignment on any chosen date to find your cosmic connection.

How we built it

Frontend React (v18) – for building a dynamic single-page application

Tailwind CSS with shadcn-ui – utility-first styling + component UI

Lucide React – icon library for visuals

Sonner / Radix UI – toast notifications, tooltips, forms, etc.

Public APIs for Space Data Open Notify API – real-time ISS location and astronaut count

Open-Meteo API – lunar phase and stargazing weather info

SpaceX API (/launches/upcoming) – fetch upcoming SpaceX mission details

Challenges we ran into

Performance Bottlenecks: Initially, the app was sluggish due to rendering delays and inefficient state updates. We improved performance by optimizing component structures and reducing unnecessary re-renders. Complex Animations Integration: Incorporating multiple smooth animations (like planet transitions and interactive cards) using Framer Motion and Tailwind required fine-tuning for both UX and performance.

Accomplishments that we're proud of

Built a Fully Functional Multi-Component App: Designed and implemented seven interactive components — from mood quizzes to celestial visualizations — in a modular and efficient way. Creative Use of Astronomy APIs: Successfully integrated and displayed real astronomical data, offering users a unique stargazing and mood-tracking experience. Custom UI/UX with ShadCN & Tailwind: Crafted a clean and visually appealing interface using modern UI libraries, enhancing both usability and aesthetic appeal.

What we learned

Working with astronomical APIs and translating cosmic data into human-readable visuals

Integrating modular TypeScript components efficiently using Vite and ShadCN

Designing a wellness-oriented interface that’s both functional and inspiring

What's next for Spacely

Live Hosting: Deploy the app on a live platform so users can explore Spacely directly in their browsers. Personalization Features: Enable users to save their moods, quiz results, and star twin matches using local storage or a backend service. Mobile Optimization: Enhance responsiveness and turn Spacely into a Progressive Web App (PWA) for installable mobile use. API Expansion: Integrate additional APIs like NASA’s image archive, the Astronomy Picture of the Day, or advanced astrology datasets for more cosmic content.

Built With

• nasa-api
• open-meteo
• opennotifyapi
• react
• spacex
• tailwindcss