Introduction

This project documents the journey of building Kimic, a private, AI powered online journal application. What began as a request for a digital diary evolved into a "glassmorphic" web experience featuring an inbuilt analytics section, conversational AI mentor, a comprehensive gamification system with 42 unique badges, and deep analytics. The result is a premium, modern application that turns daily reflection into an engaging habit.

The Challenge: Writing by hand is often too slow for a true "brain dump." You lose thoughts waiting for your pen to catch up, and you end up filtering yourself because you're secretly worried someone might find your notebook. We needed to build a tool that prioritized speed and absolute privacy, allowing you to type as fast as you think, without holding back, while using AI to actually help you make sense of the mess..

Final Tech Stack:

While Emergent handles the heavy lifting via natural language prompts, understanding the underlying tech stack remains valuable:

• Frontend: React, Tailwind CSS, Framer Motion (for animations), Shadcn/ui, Recharts

• Backend: FastAPI (Python) with Async support

• Database: MongoDB

• AI Integration: OpenAI GPT 5.1 (via Emergent LLM Key), LiteLLM

• Authentication: Google OAuth via Emergent

• Design: Custom "Glassmorphism" styling with "Doto" font

Problem Statement and Proposed Solution

Our Vision

We’ve all been there: your mind is running a mile a minute, tangled up in half-formed thoughts and unresolved moods, but you stare at a blank page or screen and the words just won't come out. Trying to capture the chaos by hand is too slow, and paper diaries offer zero feedback on the mess you just wrote. We wanted a tool that establishes the non-negotiable habit of the daily brain dump, answering the essential question: "How do I clear this mental clutter instantly, achieve absolute, uncensored honesty, and make this one corner of my day completely, fiercely mine?

Problems with existing whiteboarding apps:

• Handwriting is too slow for a genuine brain dump; thoughts are lost and filtered.

• Fear of discovery causes self-censorship, blocking raw honesty.

• Paper is passive; it offers zero analysis or feedback on your mental state.

• Habit relies on pure willpower, leading to quick failure and broken streaks.

The Proposed Solution

A secure digital vault for the daily brain dump, removing the friction of paper and guaranteeing absolute privacy. We then integrated an intelligent AI mentor and gamification to provide actionable insights and ensure the habit sticks effortlessly.

Key elements defined early:

• Styling: "Glassmorphic & Warm" aesthetic (amber/orange gradients, soft blur effects, custom Doto font) to create a premium, comforting journaling space that encourages daily reflection

• Architecture: Full-Stack PWA (FastAPI + React + MongoDB) with offline-capable journaling to ensure private, fast access without complex native app deployment.

• Discovery: AI-Powered Contextual Mentor "Silvia" (conversational, date-specific insights) to help users uncover patterns and gain self-awareness through thoughtful, open-ended dialogue.

• Interaction: Minimalistic circular widgets (voice-to-text, image upload) with hover tooltips and floating chat interface for distraction-free, thumb-friendly journaling.

• Proof: 42-Badge Gamification System with visual progression trees and streak tracking to motivate consistent journaling habits and celebrate milestones.

Well, with that, we can begin to understand the process behind vibe-coding our way to the final app as shown below :)

Step 0: Prerequisites

What We Had

An Emergent environment with React, FastAPI, and MongoDB initialized, and an empty text box to put in your first, detailed prompt!

What Was Needed

Before asking the AI to build anything, we needed to lock down the core "experience" of the app to ensure it wouldn't just feel like another generic journaling website.

Architecture Strategy: Agreement on a "Full-Stack PWA" (FastAPI + React + MongoDB on Emergent) to avoid App Store friction while maintaining native-like performance.

Design Language: A "Glassmorphic & Warm" aesthetic (amber gradients #FEF3C7 → #FED7AA with backdrop-blur(16-24px)) to create a premium, cozy sanctuary rather than clinical note-taking.

Typography: Selection of Doto (Google Font, weights 100-900) for consistent brand identity across all UI elements, modern, approachable, and distinctive.

Auth Strategy: Use Emergent-Managed Google OAuth (session cookies + localStorage fallback) to simplify authentication without custom OAuth flows or token management.

AI Integration: Commitment to OpenAI GPT-5.1 via Emergent LLM Key for conversational insights, sentiment analysis, and YouTube recommendations without separate API key management.

Gamification Philosophy: Agreement on 42-badge system across 6 categories with visual progression trees using iconoir-react to motivate through meaningful milestones, not daily nudges.

After confirming these, we were ready to send the initial prompt into Emergent.

Step 1: Initial Prompt and Requirement Gathering

Our First Message

I want to build an online private journal named Kimic.

It creates space for you to brain-dump your thoughts and get some clarity in a world where we have almost no private space to think and reflect anymore. It encourages you to pour three pages of raw thoughts every day, and turns them into analytics, streaks, badges, and now things like AI prompts and reporting tools that reflect your own thoughts to you in often revealing and helpful ways

Agent’s Clarification Questions:

I'll help you build Kimic, your online private journal! Before diving into planning and implementation, let me clarify a few key details:

1. AI Integration - Which provider would you prefer? a. OpenAI GPT-5.1 latest model b. Google Gemini 2.5 Flash c. Claude Sonnet latest

2. AI Features - What should the AI do with journal entries? a. Generate daily summaries/insights b. Provide reflective prompts based on past entries c. Mood/sentiment analysis d. All of the above

3. "Three pages" format - How should this work? a. Literal page count (word/character limit per page) b. Freeform writing with suggested minimum length c. Structured sections (e.g., gratitude, reflection, goals)

4. Authentication approach? a. Emergent-based Google social login (quick setup) b. JWT-based custom auth (email/password)

5. Should I use the Emergent LLM key for AI features? (This is a universal key that works with OpenAI, Gemini, and Claude - no need to provide your own API keys)

Our Answers

• Use Emergent's LLM key.

• All of the above.

• I think we should stick to freeform writing but we should also keep structured sections optional for users.

• Set up an emergent based google social login.

  
  

Step 2: UI and Design Improvements

Our Request

primary: "#F59E0B"           // amber-500
primaryDark: "#B45309"       // amber-700
amber50: "#FFFBEB"
amber100: "#FEF3C7"
amber200: "#FDE68A"
amber900: "#78350F"
orange50: "#FFF7ED"
orange500: "#F97316"
white: "#FFFFFF"
gray400: "#9CA3AF"
gray600: "#4B5563"
red600: "#DC2626"
green600: "#16A34A"

glassmorphism:
glass: "rgba(255, 251, 235, 0.6) + backdrop-blur(16px)"
glassIntense: "rgba(255, 251, 235, 0.9) + backdrop-blur(24px)"

radii:
base: "8px"
large: "12px"
xlarge: "16px"
full: "9999px"

shadows:
soft: "0 4px 6px rgba(0,0,0,0.1)"
large: "0 20px 25px rgba(0,0,0,0.1)"

Use the shadcn library and framer motion to make the UX feel great

Agent’s Interpretation

• Implemented Glassmorphic cards with backdrop filter: blur.

• Added 3D floating elements using Framer Motion to create depth.

Step 3: Youtube API Integration

1) Go to Google Cloud Console

• Navigate to: https://console.cloud.google.com/

• Sign in with your Google account

2) Create a New Project

• Click the project dropdown at the top (next to "Google Cloud")

• Click "New Project"

• Enter project name: Kimic-Journal (or your preferred name)

• Click "Create"

• Wait for the project to be created (~10 seconds)

• Select your new project from the dropdown

  
  

  

3) Enable YouTube Data API v3

• In the left sidebar, go to "APIs & Services" → "Library"

• In the search bar, type: YouTube Data API v3

• Click on "YouTube Data API v3" from the results

• Click the blue "Enable" button

• Wait for the API to be enabled (~5 seconds)

  
  

  

4) Create API Credentials

• After enabling, click "Create Credentials" button (top right)

• Or go to: "APIs & Services" → "Credentials" (left sidebar)

• Click "+ Create Credentials" → "API Key"

• A popup will show your new API key (starts with AIza...)

• Copy the API key immediately and save it somewhere safe

  
  

  

Important Notes

Quota Limits:

• Free tier: 10,000 units per day

• Each search costs: ~100 units

• Limit: ~100 searches per day

• Quota resets: Midnight Pacific Time

Quota Exceeded?

• Error message: "You have exceeded your quota"

• Solution: Wait until midnight PST or request quota increase

• Alternative: Create a new project with fresh quota

Cost:

• First 10,000 units/day: FREE

• Beyond that: Minimal cost (~$0.01 per 1,000 units)

• Enable billing in Google Cloud to increase limits

Step 4: Troubleshooting: A Pro Tip

Our Report

Before heading to the console tab to debug your app, its advisable to just take a screenshot of the issue(s) and describe it in simple, pointed language. For example, here is the error we reported to the agent:

Agent’s Fix

• Switched from UTC to Local Date Strings.

• Implemented a utility function: getLocalDateString() to ensure the backend receives the date exactly as the user sees it.

Step 5: Youtube Recommendations threshold limit

Our Request

Youtube recommendations are only loading  after either a big paragraph or some writing has been journaled.
Reduce the threshold

Agent’s Fix

• Lowered threshold to 5 words (~1 line) in `/app/frontend/src/pages/WriteEntry.jsx`

Step 6: Adding more features

Our Request

1. Add an optional section in the writing section where users can attach their images of the day or something they want to put in the journal. you can put it as a widget at the bottom right corner of the writing text box where users can attach it.
2. While viewing the calendar along with the written journal for that day, it should display the images attached for that day.Something like a scrapbook for that user

Agent’s Reply

• Implemented an Image Upload Widget in Write Entry with a 5MB file size limit per image.

• Integrated a Scrapbook- type Display in calendar.

Our 2nd Request

Make the AI Insights section feel more like a conversational pit rather than a simple interface with prompts.

Users should be able to chat with it and ask journal-specific questions for that day—almost like talking to an AI mentor. They can select any date, and the mentor adapts its responses based on the journal entry from that day

Agent’s Reply

• A full conversational AI mentor with real-time chat, message history, and interactive responses to user questions.

• Context-aware journaling support where the mentor adapts to any journal entry the user selects through a date picker.

Common Issues

During testing we faced some issues:

Badge Tooltip Cut-Off

• Problem: Tooltips for locked badges were cut off at screen edges, making descriptions unreadable.

• Fix: Replaced CSS hover tooltips with Shadcn's <Tooltip> component that intelligently repositions based on viewport boundaries.

Total Entries Counter Inflation

• Problem: Entry counter increased every time user clicked "Save," even when editing the same day's entry, inflating the total artificially.

• Fix: Added is_new_entry flag to backend logic; only increment total_entries when inserting a new document, not updating existing ones.

YouTube Section Disappearing

• Problem: Video recommendations section would appear briefly during loading, then completely disappear after API response confusing users.

• Fix: Never set videoRecommendations to empty array []; instead return state objects like [{ error: "fetch_failed" }] or [{ no_problems: true }] to maintain section visibility with helpful messages.

A recap: Troubleshooting your app

• Describe what you see

• Take a screenshot

• Open browser console and check for red errors

• Share both with the agent

• Iterate until resolved

Deploying Your App

Preview Your App

Use the Preview feature in Emergent and test the following:

• ✅ Badge Tooltip Positioning: Are badge tooltips in the progression tree fully visible and not cut off at screen edges when hovering over badges?

• ✅ Browser Permissions: Does the browser prompt for microphone access gracefully when clicking voice-to-text, and does recording start immediately after approval?

• ✅ Calendar Date Consistency: Does a journal entry saved for today's date appear on the correct day in the calendar view (not off by one day due to timezone)?

• ✅ AI Chat Flow: When chatting with Silvia, do messages auto-scroll to the bottom, and can you switch dates to discuss different journal entries seamlessly?

Fix Any Issues

Send findings to the agent for quick iteration.

Deploy the Application

Click Deploy, wait for Emergent to finalize the hosting and use the final production URL to share the app with others!

If you still have issues, consider reading our How-To Guide on Deployment on Emergent.

Wrapping Up

You now have a fully functional AI-powered digital journal which replaces the passive nature of paper with an intelligent AI mentor, and a deep 42-badge gamification system to provide feedback, untangle mental clutter, and effortlessly make the habit stick.

Try out our finished version over at https://thoughtscribe-1.emergent.host/

Features:

• Glassmorphic Experience: Warm amber/orange gradients with frosted glass effects (backdrop-blur) and custom Doto font create a premium, sanctuary-like feel that elevates journaling beyond basic note-taking.
  
  

• AI Mentor "Silvia": Conversational AI that asks open-ended, reflective questions tailored to specific journal entries, helping users discover insights rather than prescribing solutions.

• Effortless Capture: Minimalistic circular widgets (voice-to-text + image upload) with hover tooltips allow seamless content creation without breaking the writing flow.
  
  

• 42-Badge Gamification: Visual progression trees across 6 categories (Streak, Words, Depth, Consistency, Reflection, Gratitude) motivate consistent journaling through meaningful milestones, not just daily nudges.
  
  

• Smart Recommendations: AI-powered YouTube video suggestions based on detected challenges in journal entries or manual search fallback when API quotas are exceeded.
  
  

• Timezone-Aware Architecture: Local date handling ensures entries always appear on the correct calendar day regardless of user timezone.

Possible Upgrades:

• PWA Support: Add manifest.json and Service Workers so users can install Kimic to their home screen and receive push notifications for streak reminders or daily reflection prompts.

• Export & Backup: Implement PDF export of journal entries by date range, or automatic cloud backup to Google Drive/Dropbox for peace of mind.

• Mood Tracking Dashboard: Expand analytics with dedicated mood visualization (emotion wheel, sentiment heatmaps) and correlations with weather, sleep, or activity data.

• Anonymous badge leaderboards or "journaling circles" where users can share reflections publicly while keeping personal entries private.

If you've tried this app out, tweet at us on X or reach out on Discord and we'll give you access to more fun, behind the scenes apps and games that we've built!