Inspiration
As someone who struggles with mental health, I’ve always looked for ways to track my habits, mood, and simply better ways to journal. I’ve always been attracted to bullet journals but have also never had the motivation to keep one going, which led me to the idea of creating a bullet journal website that was simple, easy to use and, of course, nice to look at!
What it does
graces is a daily journaling app focused on making wellness tools feel encouraging, instead of making them feel like a chore. Each day, users log their mood, habits, exercise, and complete a journal entry on their very own virtual bullet journal. As you keep logging day after day, your personal sprout companion Grace will visually grow through the results of your activity! Main features: Main Page - Includes daily trackers! A 1-5 mood scale, customizable habits, exercise tracker with a log, journal entry, and a to-do list. Grace - grows visually as you earn XP through logging your habits, exercise, and journal entries! Grace will only ever grow, so even if you miss a day she will never die. Pattern analyzer - the app compares your mood data to your habits, exercise, and journal entries to create correlations between the two, delivered by Grace (ex. “Your mood tends to be higher on days you exercise!”) Grace’s Weekly Recap - a summary of the week that puts together your mood, habits completed, exercise, and insights about the week. Monthly view - a full-month habit tracking grid and color-coded mood calendar, to let you see your progress at a glance. Customizable habits & trackers - the ability to add your own habits to track and create your own 1-5 scale trackers! These may be for anxiety, energy, focus, social battery, or anything you can think of. Long-term goals - A checklist of long term goals that includes numerical progress goals that you can slowly complete and track!
How we built it
Tech stack: Plain HTML, CSS, and JavaScript were used to create graces! I did use Claude AI to assist me in creating some of the JavaScript elements, such as the page turning animation. I also used it with some of the CSS and HTML work, like creating the grid and background gradient, since I’m not too well-versed to know exactly how to create these elements. All website data is stored locally in the users browser through localStorage, so the app works fully offline without the need for an account or a specific server.
The book’s UI: The app is structured through a single .book contained that holds several “spreads” for the book (main page, settings, goals, weekly recap, monthly grid), which are visible one at a time using the CSS display. The page flipping animation uses the CSS rotateY transformation, rotating it out of view, swapping the spread, and then coming back into view. I also used clip-path to make each element's corners into a small octagon, creating a more pixel game feel instead of fully rounded corners! All these design choices are applied consistently to the cover, pages, buttons, etc.
Data model: Every day’s entry (mood, habits, trackers, etc) is stored as one object in a history map that is keyed by date inside localStorage. Habits, custom trackers, and goals are each stored as their own list, so adding or removing one updates every page that reads from it.
Grace’s growth system: Each logged day earns XP: one point per habit completed, one for any exercise logged, and one for writing a journal entry. A user's total XP determines their level (5 XP = 1 level), and Grace’s visual stage (sprout → plant → flowering) is derived from that level as well. The level is freshly recalculated every time you save an entry, which stops it from going out of sync with your actual data since it isn’t stored separately.
The non-punishing streak: Missing days does not cause Grace to die or be harmed. Missing two or more consecutive days will cause your streak to be halved rather than reset to zero, and only missing one will not affect the streak at all. This was a deliberate choice I made based on the hackathon’s theme of increasing wellness. Punishing streak mechanics that are commonly seen in habit tracking apps can actually discourage users, which is why I went for the opposite approach.
The AI Synthesis: This is a rule-based pattern detection, not an LLM. For each habit and exercise and journaling (separately), the app splits your history into “days you did this” vs. “days you didn’t), and compares average mood between the groups. If the difference is large or meaningful and there’s at least two days of data on each side, it’s surfaced by Grace as an insight.
Challenges we ran into
I had a lot of trouble executing my vision of graces UI. I have experience working with CSS and JavaScript, but it didn’t go deep enough to create graces on my own. I worked with Claude with prompts such as “How can I create a page turning animation in JavaScript?” to help bring graces to the stage it is at now.
Accomplishments that we're proud of
I’m really happy to have been able to create a fully-featured app. It’s not just a single tracker, but a growth system with your own companion, pattern detection, customizable trackers, and more! This is my first solo hackathon project, and I’m really happy with the result.
What's next for graces
Full theme customization ability for users Connecting the insights to an actual LLM for deeper reflection on journal entries A “when did I last…” tracker for tasks that don’t fit a daily or weekly rhythm
Log in or sign up for Devpost to join the conversation.