We stumbled upon this project idea while reflecting on problems we face in our own daily lives. As students in a rigorous college environment—constantly bogged down with homework, projects, and exams—managing stress and caring for our mental health has become critical for both productivity and happiness. So we decided to build a web app to help people track their moods and find solutions for anxiety and stress. That’s how BeAware was born. Drawing on our expertise in web development and frameworks, we put together a prototype within the first few hours. Later, as we hit more crossroads, we added several features that enhanced the journaling experience, including AI suggestions during the writing process. In the end, our team designed a web app we were genuinely proud of; we even joked that no matter the outcome of the competition, we’d personally use the site regardless.
BeAware is an AI-assisted journaling tool designed to help users reflect on their daily experiences, recognize emotional patterns, and take small, actionable steps toward mental wellbeing. Using AI insights and a minimalist interface, it:
- Allows Unlimited Journaling: The app lets users write as often as they want everyday, encouraging frequent expression and daily habit building.
- Creates a Peaceful Space: Through a clean and minimal journaling environemnt, the user interface reduces distractions and inspires reflection, whether for today or over the past week. The UI includes changing backgrounds and a collapsable sidebar.
- Prompts Deeper Reflection: The website uses AI tooltips and guiding questions to nudge users toward more thoughtful and meaningful entries. A lightbulb appears after 5 seconds of inactivity and prompts the user with questions.
- Analyzes Emotional Trends: The insight page delivers AI-driven insights into a user’s emotions across daily, weekly, or monthly timelines.
- Visualizes Insights Clearly: The site transforms journal entries and emotional data into simple, easy-to-read graphs that highlight patterns and changes. The page includes pie charts, bar-line charts, area charts, and a core emotion plot.
- Suggests Actionable Habits: We offer tailored AI tips tied to each graph and past journal entries, suggesting possible habit adjustments that may improve mental health over time.
We combined modern web frameworks with AI workflow an inviting journaling experience:
Languages: TypeScript (backend), JavaScript (frontend), CSS Frontend: Handlebars (templated HTML) Backend: Node.js (Koa) Database: MongoDB AI Workflow: Mastra
- Login: The user login system is done through a simple email and password login, storing the user's email and hashed password in the database.
- Journaling: While the user is journaling, the app tracks inactivity while writing. After 5 seconds of inactivity, the app sends a request to an AI tooltip Mastra workflow, prompting gpt-4o-mini for a tooltip.
- Sentiment Analysis: Once a journal is submitted and stored in the database, an array of sentiment values is assigned to the journal based on each emotion: [Happiness, Sadness, Fear, Disgust, Anger, Surprise]. This is done through a separate sentiment anaylsis workflow.
- Graph Analysis: Through chart.js, the app creates the graphs in the backend, sending them to the frontend for display. Graphs include pie charts, area charts, bar-line charts, and a core emotion chart.
- Insight Analysis: The app shows personalized AI insight tips under each graph to improve long-term mental health. These tips are collected through a separate tips workflow.
Working as a team of two, we had to greatly split up the workload and manage our time effectively.
- Mastra Integration: Connecting Mastra into our existing web framework required exposing multiple dedicated endpoints for AI workflows, which we solved by routing requests between our website and the Mastra backend.
- Balancing Design Goals: Striking the right balance between minimalism, usability, and inspiration was tricky. We solved this with subtle design touches; we added simple switchable backgrounds for journal pages and an inviting gradient landing page reflecting the “colors of emotion.” Furthermore, the UI included designing a comfortable sidebar that could collapse/expand smoothly while keeping icons visible proved challenging, especially with CSS transitions on width changes.
- Pagination & Graph Carousel: Creating a system to flip through journals and graphs without clutter led us to build a custom objects (
window.JournalPager) and (window.GraphCarousel) that manages cached data, tooltips, and navigation. - Performance Optimization: To keep the platform lightweight, we downsized assets, cached processed data, and wrote clean, simple code that loads quickly. For example, unsplash backgrounds stored in the sidebar would lag the animations, leading us to downsize the background images.
- AI Tip Uniqueness: Early tests showed repetitive AI insight suggestions Through adjusting our prompts to the insight tips workflow and increasing the model's temperature, we managed to improve the model's variety and usefulness of graph-linked AI tips.
- Product we use: We shipped a journaling app that we are excited to open every day, not just demo. Disregarding the fact that this is a hackathon, we both look forward to developing journaling habits everyday and using the AI to better out mental health. We can form consistent reflection habits, track emotional patterns, and nudge small improvements in mental health.
- Minimalistic UI We focused on calm typography, breathing room, and gentle animations so writing stays front and center. The collapsible sidebar, switchable backgrounds, and accessible navigation make the experience welcoming without being cluttered. The result invites reflection without distraction.
- AI for habits Beyond sentiment, our AI offers reflective prompts, allowing users to make concrete plans on mental health improvement.
- Focus on Core Features: We spent too much time in the beginning tweaking little details in the UI or making the backend as efficient as possible, but the core product should come before the polishing. As we continued working, we gradually adjusted our workflow to focus on building the important functionalities first, then adding extra features later.
- Stay Curious: Ideas you start out with don't always reflect the end product. By "staying curious," we managed to come up with better ideas during the development process that eventually played key roles in our end result, including the AI prompting, tips, and UI choices.
- Don't Install MongoDB For 4 Hours Straight: Yes, this actually happened during the hackathon as a corrupted MongoDB made its way to one of our laptops, and we ended up spending four hours trying to fix it using brew and other methods. Legend has it it's still not fixed to this day.
- Don't Sleep on Your Teammate's Couch: No matter how comfy that sofa looks, try to get some sleep elsewhere.
- Surveys & Quizzes: Beyond just journaling capabilities, BeAware could also serve as a mental health assessment platform of sorts, offering tailored surveys to users that would provide invaluable information about mood cycles and emotional well-being.
- Custom Typography: Custom cursor and typing for a more smooth journaling experience.
- Therapist Usage: Connect with therapists and psychiatrists on how to properly apply sentiment data for support and treatment.
Check out the repo.
- / – TypeScript + Koa server
- /mastra – AI workflow
- Clone the repository.
- Run
npm installin both/and/mastra. - Rename the
config/exampleapiconfig.tstoconfig/apiconfig.ts. - Create a
mastra/.envfile and fill inOPENAI_API_KEY=<> - Start the koa server with
npm run buildandnpm run devin/. - Start mastra with
npm run buildandnpm run devin/mastra.
Once both are running, the app is on http://localhost:2329.