Inspiration
Our project, "FeelSync," is an interactive AI chatbot designed to log and track mental health and well-being over time. It combines the power of conversational AI with insightful analytics to help users better understand and manage their emotional state.
Our project started with us considering what tools we would want in our everyday life. One of our members had tried to document their mental health and well being on a google sheet, but found it both tedious and time consuming. Our solution was to create a platform that encourages self-reflection and self-care by having an easy to use chatbot that users can speak freely too. We wanted to provide users with a way to track their mood, receive personalized advice, and visualize their emotional health with intuitive analytics. Through the integration of the ChatGPT API, speech-to-text technology, microphone APIs, and customized graphs and calendars, we hope to create an experience that is both engaging and meaningful.
Features & Pages:
Home Page: The heart of the app, where users can view a calendar with images representing their diary entries. This calendar makes it easy to visualize mood changes over time, and with cute graphics, we hope just opening our website is able to cheer up users.
Add Entry Page: This is where users can add new entries, just by freely talking to Ducky, our super cute mascot! Ducky then crafts a thoughtful response, asking follow up questions to the user and comforting and empathizing with them. Once the user indicated that they are completed with this entry, we parse the information they provided into our database and craft a summarized journal entry that is stored in the main page so they can view it later.
Analytics Page: This page uses graphs and charts to show trends in different areas of mental health, including mood, sleep, and physical well-being. In addition to that, a color-coded calendar gives a quick visual reference to for the users to see how their mood fluctuates throughout the month, with colors like green for positive days, yellow for neutral, and red for tough days.
Our Development Process:
Candice worked on integrating the ChatGPT API for the interactive chatbot, enabling meaningful conversations and personalized advice. She also took care of the local storage to ensure users’ data was safely saved and accessible. She was also responsible for the speech-to-text parser API, will allowed for the API to craft a response, and allowing users to easily record their diary entries through voice.
Jessica handled the frontend design and development. From creating the figma, to developing the frontend, the user-friendly pages and navigation bar allows the user to easily navigate through the site. In addition to that, she user the microphone API to record and store audio from the users. She also designed the analytics page, ensuring it was both functional and visually engaging, using graphs to make data analysis easy to understand.
How we built it
We built FeelSync using a combination of powerful technologies and APIs to ensure a seamless, user-friendly experience. The core of the chatbot functionality was powered by the ChatGPT API, which enabled natural conversations and personalized responses to users' journal entries. For the voice-to-text feature, we integrated a speech-to-text API, allowing users to easily dictate their diary entries, making journaling more accessible and hands-free. We also utilized the local storage to securely store user data, including mood entries, personalized responses from the chatbot, and analytics data.
The front-end development was built using HTML, CSS, and JavaScript. We used React for dynamic and responsive components, allowing real-time updates to the user interface. The Figma design was translated into these web technologies, ensuring the visuals matched the vision. For the calendar, we implemented color-coding to help users visually track their mood over time, and graphs were used on the Analytics Page to display trends in mood, sleep, and physical well-being.
The microphone API was integrated into the Add Entry page, allowing users to record audio directly, which would be processed into text for further analysis by the system.
Challenges we ran into
One of the main challenges we faced was the integration of multiple APIs, particularly the speech-to-text API with the ChatGPT API. Ensuring that the voice entries were accurately transcribed and responded to in a meaningful way took a lot of testing and troubleshooting. We also ran into challenges with the local storage when managing large volumes of data, particularly with older entries becoming difficult to retrieve or causing performance issues in certain cases.
Another hurdle was ensuring that the color-coded calendar accurately reflected mood trends in a way that was both visually intuitive and informative. Balancing design aesthetics with functionality was a constant challenge to make the app both appealing and useful.
Finally, making sure the website was responsive and user-friendly across different devices and screen sizes required some adjustments to our initial design, particularly on mobile devices.
Accomplishments that we're proud of
We’re extremely proud of how FeelSync turned out both functionally and aesthetically. One of the standout features is the interactive chatbot, Ducky, which provides a warm, empathetic experience for users. The journal entry calendar is another feature that we’re proud of, as it provides an immediate visual cue of how users have been feeling over time.
Our analytics page turned out exactly as we envisioned it, providing users with insightful data in a clear and easy-to-read format. We also feel accomplished with the integration of voice-based journaling, making the process more engaging and accessible for users who prefer speaking over typing.
What we learned
Throughout the development of FeelSync, we learned a great deal about integrating third-party APIs and handling real-time data with local storage. We also gained a better understanding of how to create an empathetic and engaging AI chatbot that can genuinely help users with their mental well-being.
In terms of front-end development, we learned how to optimize for responsiveness and usability, especially when it comes to designing a user interface that is easy to navigate and visually appealing. On the backend side, we refined our skills in data storage, particularly when dealing with sensitive data like mental health tracking, ensuring that the user's privacy and security were always prioritized.
What's next for FeelSync
We see FeelSync evolving into a more comprehensive tool for mental well-being. In the future, we plan to incorporate even more features, such as mood predictions based on past entries, daily reminders to encourage journaling, and the ability to connect with mental health professionals directly through the app.
Built With
- assemblyai
- express.js
- html/css
- javascript
- microphoneapi
- node.js
- openaiapi
- pyaudio
- react
Log in or sign up for Devpost to join the conversation.