Disclaimer: I had to help of ChatGPT through most of my project, I did most of the CSS and a lot of the debugging, but pretty much the rest I had ChatGPT build code for me.
Inspiration
Balancing school, work, and everyday responsibilities can become overwhelming. Sometimes, people need a place to organize their thoughts, reflect on their feelings, or simply take a moment to breathe. I wanted to create something that could bring these activities together in one accessible application.
That idea inspired MindMate, an AI-powered mental wellness application built during the ColorStack BU Hackathon. My goal was to create a simple space where users could talk through what's on their minds, journal their thoughts, and practice guided breathing.
What it does
AI-Powered Chat: Users can express their thoughts and receive AI-generated responses designed to support reflection and help them work through everyday stress.
Conversation Modes: Users can choose different modes to explore their feelings, better understand situations, or identify possible next steps.
Personal Journal: Users can write, save, edit, and delete journal entries, allowing them to reflect on their thoughts in a private space within the application.
Guided Meditation: Users can follow timed breathing exercises with visual animations and breathing prompts to help them pause and relax.
The goal is to make everyday mental wellness activities accessible through one straightforward interface. MindMate is designed as a wellness support tool, not a replacement for professional mental health care.
How we built it
I built MindMate as a full-stack web application using the following technologies:
React: Built the user interface and interactive components.
Vite: Set up the frontend development environment.
Node.js and Express: Created the backend and API endpoints.
Groq API: Powered the AI conversations.
JavaScript, HTML, and CSS: Implemented the application's functionality and styling.
Browser Local Storage: Preserved journal entries and conversation-related application data across page refreshes.
The frontend communicates with the backend through an API endpoint, which sends user messages to the AI service and returns the generated response. I kept the AI API key on the backend so it would not need to be exposed in the frontend.
I developed the application incrementally, building and testing its features before bringing them together into the final experience.
And yes I extensively used ChatGPT to build most of this project
Challenges we ran into
One of my biggest challenges was turning an idea into a working full-stack application. Connecting the frontend to the backend and integrating the AI API required me to understand how different parts of a web application communicate with each other.
I also had to troubleshoot issues while implementing features such as conversation modes, persistent journal entries, and the meditation timer. Getting individual components to work was only part of the process; I also needed to make sure they worked together properly.
As a solo developer, I had to learn, troubleshoot, and make implementation decisions throughout development. These challenges pushed me to break larger problems into smaller steps, test changes incrementally, and focus on building a functional product rather than just an idea.
Accomplishments that we're proud of
I'm proud that I turned my idea into a working application with multiple interconnected features. This is easily the biggest project I had ever built before, its not even close.
Some of my biggest accomplishments include:
Building a functional AI-powered chatbot.
Integrating journaling and guided meditation into the same application.
Implementing persistent journal entries.
Creating an interactive meditation timer with breathing animations.
Connecting a React frontend to a Node.js and Express backend.
Completing a working project independently while learning along the way.
Most importantly, MindMate gave me the opportunity to take an idea from concept to implementation and experience the process of building a full-stack application.
What we learned
Building MindMate taught me how the frontend, backend, and external APIs work together to create a complete application. I gained practical experience with React, Express, API integration, browser storage, and debugging.
I also learned that developing a project involves much more than writing code. It requires breaking down problems, testing features, managing time, and making decisions about what to prioritize.
This project helped me become more comfortable approaching unfamiliar technical challenges and reinforced the value of learning by building something real.
What's next for Mindmate (ColorStack BU Hackathon Project)
Improve personalization: Make conversations more responsive to users' preferences and needs.
Expand wellness activities: Introduce additional guided breathing exercises and meditation options.
Enhance journaling: Add optional mood tracking and tools to help users reflect on patterns over time.
Improve the user experience: Refine the interface and make navigation even more intuitive.
Strengthen privacy and safety: Continue improving how user data is handled and how the application responds to sensitive situations.
My long-term vision is to develop MindMate into a more personalized wellness companion that helps people make time for reflection and small, meaningful wellness habits.
MindMate started as an idea during the ColorStack BU Hackathon, but building it showed me how much I can learn by turning an idea into a working product. I'm excited to keep improving it beyond the hackathon.
Log in or sign up for Devpost to join the conversation.