Franklin Perfect Day Timeline App Development

This skill guides development of "Franklin: Perfect Day" - a luxurious, minimal timeline app for tracking daily blocks against an ideal "Perfect Day" template.

Project Overview

Franklin Perfect Day is a daily planning app inspired by Benjamin Franklin's structured approach to time management. Users create a "Perfect Day" template and track their actual daily blocks against this ideal schedule.

Core Features

Timeline Interface

Daily Metrics

Database Schema (Supabase)

Implement these 5 core tables:

1. **profiles** - User profiles linked to auth.users

2. **perfect_day_templates** - User's ideal day template

3. **perfect_day_blocks** - Template blocks (reusable time slots)

4. **day_plans** - Daily metrics and targets (one per date/user)

5. **day_blocks** - Actual daily blocks (cloned from template, then editable)

Data Flow Implementation

Day Initialization

```typescript

// On first load of new day:

1. Check for existing day_plan by (user_id, date)

2. If none exists, create day_plan

3. Clone perfect_day_blocks into day_blocks

4. Preserve: block_type, start_time, end_time, title, sort_index

```

Real-time Updates

Design System

Color Palette

Block Type Colors

UI Principles

Component Architecture

Key Components

```

<AppShell>

├─ <Header />

├─ <PerfectDayBar /> // Collapsible template view

└─ <Timeline />

└─ <TimelineBlock /> // Expandable for tasks/notes

```

Essential Types

```typescript

type BlockType = "F" | "P" | "K" | "A" | "C" | "L" | "M";

interface DayBlock {

id: string;

block_type: BlockType;

start_time: string; // "04:20"

end_time: string; // "06:00"

title: string;

tasks: { id: string; text: string; done: boolean }[];

notes?: string;

metrics?: { [key: string]: number | string };

}

```

Implementation Guidelines

Supabase Integration

Timeline Layout

Development Commands

```bash

Setup

npm install

cp .env.local.example .env.local

Add Supabase URL and anon key to .env.local

Run development

npm run dev # http://localhost:5173

Production build

npm run build

npm run preview

```

Project Structure

```

src/

├── components/

│ ├── Auth/ # Authentication components

│ ├── Timeline/ # Timeline and block components

│ ├── Header.tsx

│ └── PerfectDayBar.tsx

├── hooks/

│ ├── usePerfectDayTemplate.ts

│ └── useDayPlan.ts

├── lib/

│ └── supabase.ts

├── types/

│ └── database.ts

└── utils/

├── blockStyles.ts

└── timeFormat.ts

```

Key Implementation Notes