LBH Educate - Phase 1 Planning

Photo-centric child development journal with AI-powered analysis and progress tracking.

Project Overview

We are building a photo-centric child development journal that uses AI to automatically tag, categorize, and track progress across multiple developmental pathways. The app analyzes photos to identify behaviors, milestones, and growth patterns, generating insights and progress reports for parents. The intent is to make journaling and progress reporting as easy as taking a photo, for busy home-educating parents.

IMPORTANT: Documentation should not repeat itself and should avoid referencing code where possible or things which are likely to be highly dynamic at this early stage.

Quick Start

Local Development

npm install
npm run build
npm run dev

Visit http://localhost:8080

Project Structure

/ (root)
├── .claude/                       # Claude Code commands
│   └── commands/                 # Agent automation scripts
├── planning/                      # Phase 1 working files
│   ├── docs/                     # Planning documentation
│   │   ├── global/              # Cross-phase docs
│   │   ├── phase-1/             # Phase 1 MVC planning
│   │   └── archive/             # Brainstorming archives
│   ├── workflows/                # Visual workflow diagrams
│   └── resources/                # Skills/behaviors CSV data
├── middleware.js                 # Vercel Edge Middleware (password protection)
├── build.js                      # Build script (reads from planning/)
├── package.json                  # Dependencies
├── vercel.json                   # Vercel config
├── CLAUDE.md                     # Project instructions for Claude
├── README.md                     # This file
└── public/                       # Generated static site (after build, gitignored)

Documentation Index

Global Documentation

Cross-phase documentation and reference materials:

• planning/docs/global/10-Project-Specification.md - High-level project overview, tech stack, and early decisions
• planning/docs/global/90-CSS-Reference.md - Design system and CSS architecture reference

Phase 1 - Brainstorming & Planning

The planning/docs/phase-1/ folder contains living documents that capture the MVC (Model-View-Controller) planning during our brainstorming phase:

• planning/docs/phase-1/01-User-Experience.md - User interactions and flows
• planning/docs/phase-1/02-Database-Model.md - Data entities and relationships
• planning/docs/phase-1/03-Frontend-Components.md - Visual UI elements
• planning/docs/phase-1/04-Controller-Scripts.md - Business logic functions
• planning/docs/phase-1/05-Questions.md - Unresolved questions
• planning/docs/phase-1/06-Vercel-Setup.md - Deployment configuration and setup

These documents are updated after each brainstorming prompt and continuously refined as the project vision becomes clearer.

Features

• 📊 Interactive workflow diagrams
• 📚 Readable markdown documentation
• 🔒 Password-protected access (Vercel deployment)
• 🚀 Auto-deploy from GitHub
• 📱 Mobile-responsive design

Deployment

Live Site

✅ Currently deployed and operational via Vercel

• Auto-deploy from GitHub main branch
• Password-protected access (HTTP Basic Auth)
• Rebuilds automatically on every push (~30 seconds)
• Accessible to team members with password

Architecture

The deployment uses a static site generator that:

1. Reads markdown from planning/docs/phase-1/
2. Converts to styled HTML pages
3. Serves workflow diagrams from planning/workflows/
4. Protects access via Vercel Edge Middleware

For Team Members

Both you and your collaborators can:

• Make changes to planning docs and workflows
• Commit and push to main branch
• See changes live within 30-60 seconds

Technical Details

For complete deployment documentation including:

• Build process and architecture
• Password protection mechanism
• Troubleshooting guide
• Collaboration workflow

See planning/docs/phase-1/06-Vercel-Setup.md