MindHush – AI Mental Health Companion

Project Overview

MindHush is an empathy-driven AI platform designed to provide accessible 24/7 mental health support. As the Frontend Engineer, I was responsible for building the user-facing application and integrating it with the backend AI services. My goal was to create a frictionless, comforting interface where the technology disappears, allowing users to focus entirely on their mental well-being.

The Problem

Connecting a frontend to a generative AI backend introduces unique latency and state challenges that standard CRUD apps don't face.

1. Handling Asynchronous Streams: AI responses don't arrive all at once. Waiting for a full response creates a "frozen" UI that feels unresponsive and robotic—fatal errors for a mental health app.
2. Real-Time State Synchronization: The app features a "Freemium" model where token usage limits must be updated on the client-side instantly after every message, requiring tight synchronization with the backend to prevent usage exploits.
3. Visual Stability: The chat interface needed to handle dynamic content lengths and rapid updates without "layout shift" or jitter, which disrupts the calming atmosphere.

The Solution: Integration & Performance Architecture

I engineered a highly reactive frontend structure to solve these integration hurdles:

• Streaming API Integration: I implemented a custom hook to handle Server-Sent Events (or chunked responses). Instead of a standard loading spinner, the frontend processes data chunks as they arrive, rendering the AI's response character-by-character. This reduced the perceived latency to near zero.
• Centralized Service Layer: I decoupled the UI components from the API logic by creating a dedicated service layer. This module handles all HTTP requests, error interception, and authentication headers, ensuring the UI code remains clean and maintainable.
• Optimized State Management: I utilized React Context/State to manage the user's session data and token count globally. This ensured that when a user sent a message, their token balance updated instantly across the navbar and chat interface without requiring a page reload.

Key Features (Frontend Contribution)

• Real-Time Chat Interface: A polished, "WhatsApp-style" UI that auto-scrolls and animates incoming messages smoothly.
• Dynamic Authentication Flow: Seamless login/signup screens that integrate with the backend auth system, handling protected routes and user sessions secure.
• Responsive Dashboard: A mobile-first design that adapts the sidebar, chat window, and pricing tables perfectly to any screen size.
• Error Handling: Graceful UI fallbacks for network errors or API timeouts, ensuring the user is never left staring at a blank screen.

Tech Stack

• Frontend Library: React.js
• Build Tool: Vite (for optimized asset bundling)
• Integration: REST / Fetch API
• Styling: CSS / Tailwind
• Deployment: Vercel

Outcome

By focusing on efficient backend integration and performance optimization, I delivered a frontend that feels instantaneous and organic. The smooth handling of AI streams and robust state management ensured that the complexity of the backend was completely hidden from the user, resulting in a serene and professional application experience.