HAVENDEW - Your Personal Journaling System 🌸✨

Havendew is a beautiful personal journaling companion that quietly helps you understand yourself. Styled strictly around a dreamy Kinfolk-style scrapbook aesthetic, it helps you capture your days, understand your patterns, and grow through reflection.

---

🎨 Premium Visual Aesthetics & Coordinate System

Havendew is styled strictly around a Dreamy Alabaster Parchment & Morning-Mist coordinate system to replicate the tactile, calming experience of wellness scrapbooking:

• Morning-Mist Watercolor Background: An ethereal, calming radial wash transitioning smoothly through soft cream (#FAF6EE), blush pink (#F5EAE6), lilac lavender (#EFE8FA), and soft herbal sage mist (#E6EFEB).
• Handmade Parchment Overlays: Translucent ivory parchment card overlays (bg-white/80 border-white/60 backdrop-blur-xl) with warm periwinkle HSL soft shadows.
• Cozy Scrapbook Ornaments: Dashed multiply-blend paper tape headers, hand-drawn divider sheets, and gold starburst sparkle icons next to editorial headings.
• Editorial Typography: Spacious, readable Inter body text (14.5px with a generous 1.7 line-height for a luxury layout feel) combined with ultra-elegant Cormorant Garamond serif headers.

---

📖 The Sanctuary Modules & Core Features

1. Dashboard (Today) 🌸

• Dynamic Time-of-Day Greeting: Welcomes you with a warm greeting (Good Morning / Good Afternoon / Good Evening) customized with your displayName next to a cursive date stamp.
• Sage Current Era Affirmation Card: Resting at the absolute top of the bento grid:
  • Style: Sage card background rgba(220, 232, 218, 0.6) and border rgba(130, 170, 120, 0.25).
  • Era Title: Sourced from your latest compiled weeklyTheme -> desiredIdentity -> currentFocus -> "Builder Era".
  • Season Sentence: Fetched dynamically from your latest daily reflection gentle affirmations or invitations.
  • Bottom Day Line: Tracks streak progress simply as "Day [streak] of showing up" to act as an affirmation rather than a metric.
• Today's Chapter Hero Card: High-contrast bento card featuring a 52px prominent espresso-charcoal CTA button (Begin Reflection → or Continue Today's Chapter →) and a live writing preview snippet.
• Current Energy: Integrated MoodRail mood token selector syncing your emotional energy state.
• About You: Compound live streak count, total logged entries, and quick win logs.
• Daily Patterns: Tracking supportive habits, distractions, and daily alignment.

2. Scrapbook Daily Workspace 📖

• Writing First, AI Reflection Second: A continuous-scroll workspace that strictly keeps the post-save AI reflection layer hidden until you choose to close your daily chapter.
• Autosave Status Indicator: Dynamic Saving... or Saved ✓ debounced 2000ms status syncing to local cache.
• Daily Gratitude: Custom gratitude chip input alongside interactive preset chips. Active chips render in a list with deletable × anchors.
• Moments Worth Keeping (Keepsakes): Captures base64 memories as tilted Polaroid cards with captions, mood sticker overlays, and slight alternating rotations. Displays a warm scrapbook placeholder card when empty: "Every garden begins with a single seed. Capture a visual reminder."
• Today's Chapter Editor: Minimum 220px narrative canvas, text-decoration toolbar (Bold, Italic, Underline), and retro sticker seal stamps (🌸, ✨, 🌿, ⚡, 💛, 🦋, 🌙).
• Today's Snapshots: Micro-victories log capturing short 120-character elements (Win, Realization, Connection, Growth, Celebration).
• What I Learned: Muted gold lesson block.
• Daily Affirmations: Beautiful pink-purple cards (linear-gradient(135deg, rgba(230,210,240,0.5), rgba(245,225,230,0.5))) with hover deletion.
• Collapsible Extra Prompts: optional inquiries for Shadow work, Pattern loops, and Under the surface reflections.

3. Dynamic Post-Save Reflection Layer 🔮

• Appears with a smooth transition and scroll-focus upon saving.
• Today's Theme 🌟: Renders a large, italic, wise theme title.
• Guidance From Today 🔮: Soft borderless cream card detailing Gemini's wise, "inner-voice" re-framing.
• Tomorrow's Invitation ✨: Ambient light amber invitation card.
• Letter From Your Future Self 📜: Espresso gold-bordered parchment letter encouraging you along the way.
• Go Deeper Drawer: Collapsible analysis revealing shadow prompts, cognitive pattern tags, and growth notes.
• API Fallback Security: If the AI reflection endpoint fails or rate-limits, a premium frontend reflection fallback (REFLECTION_FALLBACK) takes over instantly, ensuring the user always sees a beautiful reflection screen.

4. Weekly Reflections Letter 🌿

• Styled as an immersive Forest Sage Ledger (Background #24352C, cards #324A3A, text #F7F4EA) that feels like a physical parchment room.
• Compiles your last 7 days of entries into a private, gentle reflection letter.
• Custom insert cards highlighting exact reflective terminology and left border colors:
  • 🌿 Growth Pattern (leafy green left border #A7D7B5)
  • 🍃 Hidden Root (amber left border #C4A882)
  • 🌾 Gentle Truth (blue left border #80A1D4)
  • 🌱 New Growth (gold left border #D4AF37)
  • ✨ Seeds For Next Week (Prompts list)
  • 🌳 This Week's Truth (Affirmation script)

5. Your Growth Timeline 🧩

• Chronologically groups and collates your entries by week Start dates.
• Calls the /era-name backend route to dynamically determine your AI Era week title (e.g. Quiet Progress).
• Displays week eras inside custom scrapbook cards with a left border of 3px #A7D7B5, connected by a dashed amber timeline line.
• Pre-fixes wins tags with ⚡ and renders dynamic, mood-aligned season sentences.

6. Visual Trajectory Analytics 📊

• Stacked Recharts metrics charts:
  1. Mood Flow (LineChart): Last 7 days mood trend lines.
  2. Journaling Rhythm (BarChart): Sage green weekly logging counts.
  3. Moments of Growth (AreaChart): Cumulative gold-glowing area chart tracking progress wins count.
  4. Dominant Moods: Custom scrapbook progress bars tracking your top primary mood anchors.
• Insufficiency Fallbacks: All charts contain intelligent demo baseline data so they never crash or throw undefined errors even on Day One.

---

📂 Tech Stack & Architecture

Frontend

• Core: React 18, Vite
• Styling: Vanilla CSS + TailwindCSS utility layout layers
• Analytics: Recharts (fully responsive canvas blocks)

Backend

• Server: Node.js, Express
• Database: Firestore (Firebase Admin SDK) + secure offline JSON fallback synchronizers
• AI Engine: Google Gemini API (Wise, therapeutic, "inner-voice" behavioral reflections)

---

⚡ Setup & Launch

1. Backend Server Setup

Navigate to the server folder, configure your environment variables, seed the initial databases, and start the gateway:

# Go to server directory
cd server

# Install dependencies
npm install

# Configure environment variables (.env)
# PORT=5000
# GEMINI_API_KEY=your_gemini_api_key

# Seed fresh 7-day high-fidelity database logs
node seed.js

# Boot server gateway
npm start

2. Frontend Client Setup

Navigate to the project root, install Vite dependencies, and boot the developmental server:

# Install dependencies
npm install

# Start Vite developmental hot-reloader
npm run dev

Open http://localhost:5173 to enter your Havendew reflections sanctuary.

Seed Login Credentials

Use the credentials seeded inside seed.js to explore full data streams immediately:

• Email: sovereign@example.com
• Password: sovereign123

---

🌸 Coordinated Color Palette Tokens

Coordinate	HEX Code	Purpose
Alabaster Cream	#FAF7F0	Handmade paper backdrop / standard container overlay
Espresso Charcoal	#362E2E	Page headers, body copy, and primary CTA buttons
Herbal Sage	#7B9675	Sage growth indicators, custom status chips, and margins
Cozy Sienna	#B39174	Leather highlights, Polaroid captions, and Shadow indicators
Ochre Gold	#C5A059	Timeline nodes, starbursts, star highlights, and headers
Lavender Mist	#E4DFE8	Dynamic subtabs overlays and prompts borders