Skip to content

Latest commit

 

History

History
224 lines (161 loc) · 8.23 KB

File metadata and controls

224 lines (161 loc) · 8.23 KB

BragDoc - Product Specification

Overview

A local-first daily journaling app for developers to track career progress through quick captures and structured end-of-day reflections. The app prioritizes the quality of reflection prompts as the core experience, with a GitHub-style heatmap as the visual anchor.


Core Mental Model

Two modes of interaction within a single day:

  1. Quick Capture (throughout the day): Frictionless, single-field text input. Log wins, learnings, and moments as they happen. These become "seeds" that surface during the EOD reflection to jog memory and enrich answers.

  2. End-of-Day Reflection (ritual): 5 fixed questions that force meaningful introspection. Quick captures from the day appear as context/prompts alongside each relevant question.


The 5 Reflection Questions (Fixed Set)

These are the heart of the app. Every day, same questions:

# Question Area Purpose
1 What did I build, fix, or ship today? Technical wins Concrete accomplishments
2 What did I learn or get better at? Growth & learning Skill progression
3 How did I help someone or impact the team/product? Collaboration & impact Visibility of soft skills
4 What challenged me, and how did I handle it? Blockers & challenges Resilience patterns
5 What would I do differently? Retrospective Self-improvement loops

Not every question needs an answer every day. Empty answers are fine -- some days you only ship, some days you only learn.


Data Model

QuickCapture

{
  id: string (uuid)
  text: string
  category?: CategoryType        // optional predefined category
  tags?: string[]                 // optional free-form tags
  createdAt: ISO8601 timestamp
  date: YYYY-MM-DD               // the "day" this belongs to
  linkedToReflection: boolean     // was this pulled into the EOD reflection?
}

DailyReflection

{
  id: string (uuid)
  date: YYYY-MM-DD               // one per day, unique key
  answers: {
    technicalWins: string
    growthLearning: string
    collaborationImpact: string
    blockersChallenge: string
    retrospective: string
  }
  linkedCaptures: string[]        // ids of quick captures pulled in
  createdAt: ISO8601 timestamp
  updatedAt: ISO8601 timestamp
}

Predefined Categories

Feature | Bug Fix | Refactor | Learning | Collaboration | DevOps | Code Review | Documentation | Other

Free-form Tags

User-defined strings. Examples: #react, #project-x, #mentoring, #performance. Auto-suggested from previously used tags.


Pages & Navigation

Single-page app feel. Minimal navigation.

1. Home / Dashboard

The main (and possibly only) view. Top-to-bottom layout:

Hero: Heatmap

  • GitHub-style contribution calendar (trailing 365 days)
  • Binary intensity: green = logged something (capture or reflection), empty = nothing
  • Clicking a day navigates to that day's entry
  • Current streak counter displayed subtly nearby

Below Heatmap: Today's Section

  • If no reflection for today: Show quick capture input + "Start reflection" CTA
  • If reflection exists: Show completed reflection with edit capability

Below Today: Entry Timeline

  • Reverse-chronological list of past entries
  • Each entry card shows: date, filled question count (e.g. "3/5"), snippet of first answer, tags
  • Expandable to see full reflection + linked captures

2. Entry View (Day Detail)

Reached by clicking a day on heatmap or timeline:

  • Full reflection with all 5 answers
  • Linked quick captures shown as context
  • Category badges + tags
  • Edit capability

3. Reflection Flow

Step-by-step guided flow (not a giant form):

  1. Show today's quick captures as context ("Here's what you captured today:")
  2. Present each question one at a time
  3. For each question, relevant quick captures appear as suggestions/seeds
  4. User can pull captures into their answer or write fresh
  5. Category + tags step at the end (optional)
  6. Submit saves all at once

Key UX detail: The flow should feel like a conversation, not a form. One question at a time, with smooth transitions.


Search & Filter

Accessible from the timeline/dashboard:

  • Text search: Full-text across all answers and captures
  • Category filter: Dropdown/chips for predefined categories
  • Tag filter: Select from used tags
  • Date range: From/to picker
  • Question filter: Show only entries where a specific question was answered (e.g. "show me all my retrospectives")

Export

JSON Backup/Import

  • "Export all data" button in settings/menu
  • Downloads complete JSON dump of all captures + reflections
  • "Import data" to restore from JSON file
  • Merge strategy on import: skip duplicates by id

Self-Review Document Export

  • Select a date range
  • Generates a Markdown document grouped by reflection area:
    • Section per question type (all "Technical Wins" together, etc.)
    • Chronologically ordered within each section
    • Tags/categories included as metadata
  • Copy to clipboard or download as .md

Tech Stack

Layer Choice Rationale
Framework Next.js 16 (App Router) Already set up
UI shadcn/ui + Tailwind v4 Vercel-style aesthetic, accessible, composable
Storage IndexedDB (via Dexie.js) Local-first, structured queries, large capacity
State React state + Dexie live queries Simple, no external state management
Heatmap Custom component (CSS Grid) Full control over styling, no heavy lib
Search Dexie full-text or client-side filter Sufficient for local data volumes
Export Native Blob/download API No server needed

UI Style Guide

  • Aesthetic: Vercel/shadcn -- clean, minimal, lots of whitespace
  • Colors: Neutral grays + single accent color (green for heatmap, or branded)
  • Typography: Geist Sans (already configured) for UI, Geist Mono for code snippets
  • Dark mode: Supported via CSS prefers-color-scheme (already in globals.css)
  • Motion: Subtle transitions between reflection steps. No flashy animations.
  • Density: Comfortable spacing. This is a reflective tool, not a dense dashboard.

V1 Scope

Must Have

  • Quick capture (single text field, instant save)
  • End-of-day reflection flow (5 questions, step-by-step)
  • Quick captures as seeds in reflection flow
  • Heatmap hero (binary, 365 days, clickable)
  • Entry timeline (reverse-chronological, expandable cards)
  • Day detail view (full reflection + captures)
  • Predefined categories + free-form tags
  • Text search + category/tag filtering
  • JSON export/import
  • Self-review Markdown export (date range, grouped by question)
  • Local storage (IndexedDB via Dexie)
  • Dark mode support
  • Responsive (works on mobile for quick captures)

Not V1

  • Cloud sync / multi-device
  • Authentication
  • AI-generated summaries
  • Notifications / reminders
  • Multiple export templates (manager-facing, resume)
  • Streak gamification beyond counter
  • Team/shared features

Key Design Decisions & Rationale

  1. Fixed questions over customizable: Builds habit through consistency. Removes decision fatigue. The 5 questions cover execution, growth, collaboration, resilience, and self-improvement -- comprehensive enough for any developer day.

  2. Quick captures as seeds, not separate: Captures are means to better reflections, not standalone entries. This creates a natural flow from scattered notes to structured thinking.

  3. Binary heatmap over intensity: Simplifies the daily goal to "did I log anything?" Removes pressure to write long entries. A quick capture counts. This lowers the barrier to maintaining the habit.

  4. Local-first with manual backup: Maximum privacy for career-sensitive data. No auth complexity. JSON export provides the safety net. Trade-off: single device only, accepted for V1.

  5. Step-by-step reflection over form: A form with 5 textareas feels like homework. One question at a time feels like a conversation. This is the make-or-break UX decision.

  6. Self-review export grouped by question, not by date: When prepping for a performance review, you want to see "all my technical wins from Q3" not "everything I did on March 15th". Grouping by question area makes the export immediately useful.