Celestial

mission log/journaling!
analytics!
Dashboard!
mood tracker!

Inspiration

We've seen countless examples of mood trackers and journaling apps in the past. But none of them are as immersive or as motivating as Celestial. We wanted to build an app that would actually make the user feel as if they're being productive, and really immerse them into this cosmic experience.

What it does

Instead of boring checkboxes, users select their emotions by choosing planets in a beautiful solar system interface - Mercury for anxious, Venus for love, Mars for energetic. The app combines mood logging with mission log-style journaling, voice recording capabilities, and personalized guidance based on your emotional state.

How we built it

The app is primarily a TypeScript/React application, but it leverages CSS heavily for the custom space theme with animated backgrounds, planet effects, and styling. The Tailwind CSS utility classes create a immersive space adventure. The backend was primarily coded with JavaScript, CSS, and HTML and we configured with JSON and TOML. We also used Repl.it Agent to organize and debug our code.

Challenges we ran into

We had trouble figuring out the voice recording feature as well as coding the planet orbiting UI in the Mood Tracker. But it all paid off in the end!

Accomplishments that we're proud of

We are very proud of the UI/UX as it is the thing we put the most work into. Team 42 spent a lot of time planning out the colors, and general vibe of the app and in the end, it came together really well.

What we learned

We learned a lot about working with React, as well as TypeScript. Using the ToastActionElement from React to make the voice recording feature was also new concept for us.