MindBridge

Inspiration

Many people struggle to express or understand their emotions, feeling unseen or alone. MindBridge was inspired by the desire to provide support and guidance, turning emotions into understanding, hope, and personal growth.

What it does

MindBridge is an emotion-aware chatbot that responds to how users feel. Users type in their feelings (e.g., happy, sad, anxious, lonely), and the app provides heartfelt, personalized responses. It also tracks emotional patterns with an optional interactive graph for reflection.

How we built it

Frontend: HTML, CSS, JavaScript for a smooth, interactive interface

Logic: JavaScript tracks user input and generates responses

Visualization: Chart.js for emotion-tracking graphs

Personalization: Uses user’s name to make responses feel human and empathetic

UX design: Colorful backgrounds, transitions, and motivational thoughts

Challenges we ran into

Crafting authentic and empathetic responses for over 25 emotions

Balancing simplicity and functionality while keeping the app fast

Designing an interface that’s engaging yet lightweight

Accomplishments that we're proud of

Built a fully functional chatbot with emotion tracking

Created 25+ meaningful responses that touch on various human emotions

Developed an interactive and visually appealing UI

What we learned

How to design emotionally impactful user experiences

Using JavaScript and Chart.js for real-time data visualization

The importance of simplicity and accessibility in applications

What's next for MindBridge

Expand the database to include more emotions

Add AI-powered suggestions for coping strategies

Develop a mobile-friendly version

Optional login for saving user progress and history

Built With

• and
• colors
• css
• data
• emotion
• git-&-github-for-version-control-design:-custom-css-for-transitions
• in-browser
• javascript-libraries-&-frameworks:-chart.js-(for-emotion-tracking-graphs)-frontend-platform:-browser-based-web-app-(works-on-desktop-&-mobile)-tools:-vs-code-for-development
• languages:-html
• responsive
• storage
• storage:
• tracking
• ui