A Mental Wellness App — DevScale Bootcamp Final Project

The application helps users track their daily moods, interact with an AI-powered chatbot that responds based on their emotional state, and provides personalized mental wellness content. Built with a mobile-first approach, TheraMind represents our team's ability to develop a complex, full-stack application under real-world constraints.

Technical Implementation

Core Features

1. Mood Tracking System

Multi-step form with state persistence across pages using React Context API. User mood data is stored with timestamps for pattern analysis.

2. AI-Powered Chatbot

Integration with OpenAI API to provide contextual responses based on user's mood input. System prompts dynamically adjust based on mood state to offer appropriate support.

3. Authentication & Data Privacy

Implemented Arctic Auth for secure user authentication. All mood data and journal entries are private and linked to user accounts with proper data encryption.

4. Multi-page Form State Management

Created system to maintain form state across multiple screens (mood input, journaling, recap) with a final submission that combines all data into a single POST request.

Technical Architecture

Frontend

• Next.js 14 with App Router for optimized routing and server components
• Mobile-first responsive design with Tailwind CSS
• Context API for multi-page form state management
• MDX for dynamic content rendering in blog section

Backend

• Next.js API routes for serverless functions
• PostgreSQL database for structured data storage
• Prisma ORM for type-safe database queries
• OpenAI API integration for chatbot functionality

Authentication

• Arctic Auth for user authentication and profile management
• JWT tokens for secure API requests
• Role-based access control for admin features

Deployment

• Vercel for hosting and continuous deployment
• Environment variable management for API keys
• Automated testing via CI/CD pipeline

Theramind UI

Video Demo

Watch a complete walkthrough of the TheraMind application features

Visit TheraMind App

It might be error while visiting the apps due to limited service from the database or API

Challenges & Solutions

Technical Challenges

1. Multi-page Form State Management

Challenge: Maintaining state across multiple pages (mood input, journaling, recap) while only POSTing data after completing all steps.

Solution: Implemented React Context API to store form data across all steps and created a final submission function that combines all data into a single POST request. This preserved user progress while ensuring data integrity.

2. AI Integration & Context Preservation

Challenge: Creating a chatbot that remembered user's mood input and provided appropriate responses based on emotional state.

Solution: Developed dynamic system prompts that incorporated the user's mood data into each API call, allowing the AI to maintain context throughout the conversation and provide more relevant support.

3. Performance Optimization

Challenge: Initial AI responses were slow, causing a poor user experience, especially on mobile devices.

Solution: Implemented streaming responses from the OpenAI API and added optimistic UI updates to show typing indicators. Also utilized Next.js server components where appropriate to improve initial load times.

4. Project Management Challenges

Challenge: All team members were employed full-time, leaving limited hours for project development and causing timeline pressures.

Solution: Implemented strict prioritization using MoSCoW method (Must have, Should have, Could have, Won't have). Created a detailed sprint plan with clearly defined responsibilities and daily async standups via Slack.

5. Communication & Task Overlap

Challenge: Miscommunication led to task overlap where multiple team members worked on the same features unknowingly.

Solution: Established a more robust GitHub workflow with feature branches and pull request reviews. Implemented a shared Notion board for task tracking with clear ownership assignments.

6. Team Motivation

Challenge: Maintaining team motivation through technical difficulties and tight deadlines while everyone balanced full-time jobs.

Solution: As project lead, I focused on leading by example, taking on challenging tasks first to demonstrate feasibility. Scheduled regular celebration of small wins and implemented pair programming sessions to tackle difficult problems together.

Key Learnings

Technical Growth

Gained hands-on experience with modern web development practices including Next.js App Router, React Context API, and API integration. Learning to manage state across multi-page forms was particularly valuable.

Project Management

Developed practical leadership skills by managing a remote team with limited availability. Learned how crucial clear communication, documentation, and task prioritization are to project success.

Problem-Solving

Enhanced ability to tackle complex technical challenges through research, experimentation, and collaboration. Documentation reading skills improved significantly by necessity, a crucial skill for any developer.

Conclusion

TheraMind represents more than just a bootcamp final project—it was a transformative learning experience that pushed our technical and collaborative skills to new heights. Despite working within the constraints of full-time jobs and limited experience, our team delivered a functioning mental wellness application with meaningful features.

As project lead, I'm particularly proud of how we overcame both technical and logistical challenges through persistence and teamwork. The experience of building a multi-step form with state management across pages, integrating AI capabilities, and coordinating remote development has provided invaluable lessons that will serve us all in our future development careers.