Astronomix

Inspiration

Money management tools often feel impersonal and overwhelming. We wanted to create something that makes finance approachable, emotional, and even a little magical. Astronomix was inspired by the night sky, tarot, and gamified care systems — where your financial decisions directly shape the health of your own cosmic companion. Our goal was to turn personal finance into an experience that’s visually rewarding, intuitive, and emotionally engaging.

What it does

Astronomix turns financial tracking into a celestial experience. Users care for a virtual star whose brightness reflects their financial habits. Smart spending strengthens it, savings grow it, and overspending dims it.

The dashboard includes:

Star Companion: A living visual of your financial wellness.
Cosmic Overview: Displays balance, savings, and spending health.
Stock Monitor: Offers insights and updates.
Tarot Insights: Provides reflective prompts tied to your financial journey.

Astronomix combines financial education, visualization, and emotion-driven design to help users make better decisions and feel connected to their progress.

How we built it

Astronomix was built using React and Vite for a fast, modular frontend. We used Tailwind CSS for styling and Framer Motion for interactive animations. The system is powered by React state variables representing happiness, growth, and energy — dynamic values that respond to user actions like saving or spending. Design mockups were created in Canva, emphasizing a cosmic aesthetic with smooth gradients, glowing UI components, and space-inspired typography.

Challenges we ran into

Tailwind Setup Issues: Version mismatches between Tailwind and PostCSS caused recurring build errors.
Design vs. Data: Finding the balance between a visually rich interface and functional financial tracking.
State Synchronization: Ensuring smooth interaction between animations and state logic for the virtual star.
Time Constraints: Building a polished, responsive experience in a limited hackathon timeframe.

Accomplishments that we're proud of

Built a functional and visually cohesive prototype that merges gamification with financial literacy.
Designed a fully modular React architecture for scalability.
Created a clean, space-inspired interface that feels emotionally engaging.
Overcame complex animation and Tailwind configuration issues under time pressure.

What we learned

How emotion and design can enhance engagement in financial technology.
How to integrate real-time React state management with animated UI components.
The importance of accessibility and visual balance in user experience.
Deeper familiarity with Tailwind CSS v4, PostCSS, and Framer Motion transitions.