Code by

Mateus

Paula

Loading...

Quiet Mind

ROLE / SERVICES

design & development

CREATED FOR

Case Study

YEAR

2025

Quiet Mind

Overview

Quiet Mind is a modern web application that transforms journaling into a powerful tool for emotional self-awareness. Users write journal entries which are analyzed by AI to extract mood, sentiment scores, tags, and personalized advice.Key Features

1. AI-Powered Emotional Analysis

Write freely about your day, and our AI analyzes your entries to identify:

  • Mood Detection: Happy, Sad, Anxious, or Neutral
  • Sentiment Score: 1-5 scale indicating emotional positivity
  • Smart Tags: Automatically extracted themes from your writing
  • Personalized Advice: Empathetic, context-aware suggestions

2. Interactive Dashboard

dashboard-authenticated
Dashboard Authenticated
  • Real-time emotional overview with key metrics
  • Mood trends visualization with interactive charts
  • Recent entries at a glance
  • Weekly/monthly statistics

3. Journal Entries Management

journal-entries
Journal Entries
  • Chronological list of all journal entries
  • Quick mood indicators with color coding
  • Sentiment scores at a glance
  • Pagination for large datasets

4. AI Analysis Detail View

entry-detail-drawer
Entry Detail Drawer
  • Full entry content with AI analysis
  • Mood and sentiment breakdown
  • Auto-extracted themes as hashtags
  • Personalized daily wisdom/advice

5. Analytics & Insights

insights-page
Insights Page
  • Mood distribution pie chart
  • Top themes bar chart
  • Journaling activity over time
  • Streak tracking for consistency

6. Secure Authentication

signin
Signin
  • OAuth integration with Google and GitHub
  • Secure session management with NextAuth.js v5
  • User data synced to Supabase on sign-in

7. New Entry Creation

new-entry-modal
New Entry Modal
  • Clean, focused writing experience
  • Character counter (1000 max)
  • Optional title field
  • Instant AI analysis on save

8. Beautiful, Responsive UI

  • Clean, minimalist design inspired by modern wellness apps
  • Fully responsive across all devices
  • Smooth animations and transitions
  • Dark/light mode support ready

Tech Stack

Architecture

Data Flow

  1. User writes a journal entry (max 1000 characters)
  2. Server validates auth and daily limit (5 entries/day)
  3. OpenAI GPT-4o-mini analyzes the text with structured prompts
  4. Analysis result saved to Supabase diary_entries table
  5. Dashboard updates with new insights and mood trends

Technical Challenges & Solutions

Challenge 1: Structured AI Responses

Problem: Getting consistent, parseable responses from GPT for mood analysis.

Solution: Implemented structured prompting with explicit JSON schema requirements and TypeScript validation:

Challenge 2: Real-time User Sync

Problem: Keeping user data in sync between NextAuth sessions and Supabase.

Solution: Used NextAuth callbacks to automatically create/update users in Supabase on sign-in, storing the Supabase user ID in the JWT token for subsequent requests.

Challenge 3: Rate Limiting & Abuse Prevention

Problem: Preventing API abuse while keeping the free tier accessible.

Solution: Implemented server-side validation for:

  • Daily entry limits (5/day per user)
  • Character limits (1000 chars max)
  • Authentication checks on all API routes

Challenge 4: Type-Safe Full Stack

Problem: Maintaining type consistency between frontend and backend.

Solution: Centralized type definitions in lib/types.ts shared across the entire codebase, with Zod validation at API boundaries.

What I Learned

  • Next.js 16 App Router: Deep dive into server components, route groups, and the latest React Server Components patterns
  • NextAuth.js v5 Beta: Working with cutting-edge authentication patterns and JWT strategies
  • OpenAI API Integration: Prompt engineering for consistent structured outputs
  • Supabase: Real-time database with row-level security policies
  • Modern UI/UX: Building polished, accessible interfaces with shadcn/ui
My Projects Image
My Projects Image
My Projects Image
My Projects Image
My Projects Image
My Projects Image
My Projects Image
My Projects Image