Time Capsule Postcards
A playful micro-journal where users write “postcards to their future self,” choose a theme (gratitude, goals, memories), add a mood sticker and color palette, and schedule an unlock date. The app shows a timeline of locked/unlocked postcards, with gentle daily prompts and a “random unlocked postcard” shuffle view. Everything runs client-side with localStorage, using clear components for editor, scheduler, timeline, prompts, and postcard viewer.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i class-variance-authority clsx tailwind-merge lucide-react && npx shadcn@latest init -d
by system
Create/adjust src/index.css with Tailwind directives and a simple global background/text style.
by system
Add src/lib/types.ts defining Postcard, Theme, MoodSticker, Palette, and UnlockStatus types.
by system
Create src/lib/storage.ts for load/save postcards with basic validation and version keying.
by system
Create src/lib/dates.ts with helpers for today, formatting, and locked/unlocked computation.
by system
Create src/lib/seed.ts to generate a few sample postcards for first-run demo.
by system
Add src/hooks/usePostcards.ts to manage CRUD state synced to localStorage.
by system
Add src/hooks/useDailyPrompt.ts to pick and persist a daily prompt in localStorage.
by system
Create src/lib/prompts.ts exporting an array of gentle daily prompt strings.
by system
Update src/main.tsx to add react-router-dom BrowserRouter and render the App.
by system
Implement src/App.tsx with a header, main container, and outlet for pages.
by system
Create src/components/NavBar.tsx with links to Timeline, New, Prompts, and Shuffle.
by system
Add src/components/EmptyState.tsx for consistent empty/loading messaging.
by system
Add src/components/ThemeSelect.tsx to choose gratitude/goals/memories.
by system
Add src/components/MoodStickerPicker.tsx with a small set of selectable sticker icons.
by system
Add src/components/PalettePicker.tsx to choose from predefined color palettes.
by system
Add src/components/UnlockDatePicker.tsx for selecting an unlock date (native date input).
by system
Add src/components/PostcardEditor.tsx composing title/body inputs plus theme, sticker, palette, and unlock date.
by system
Add src/components/PostcardSaveBar.tsx with Save/Cancel buttons and minimal validation messaging.
by system
Create src/pages/NewPostcardPage.tsx to create a postcard and add it via usePostcards.
by system
Create src/pages/TimelinePage.tsx to list postcards grouped by Locked/Unlocked with counts.
by system
Add src/components/PostcardListItem.tsx showing theme, sticker, unlock date, and locked/unlocked badge.
by system
Create src/components/TimelineFilters.tsx for theme filter and status toggle.
by system
Create src/components/PostcardViewer.tsx to render postcard content with palette styling and sticker.
by system
Create src/components/LockedOverlay.tsx to hide content until unlock date with a friendly message.
by system
Create src/pages/PostcardPage.tsx to view a single postcard by id with locked/unlocked behavior.
by system
Create src/pages/PromptsPage.tsx showing today’s prompt and a quick link to create a postcard.
by system
Create src/pages/ShufflePage.tsx to pick a random unlocked postcard and show it in the viewer.
by system
Create src/components/DeletePostcardButton.tsx to remove a postcard with a confirmation dialog.
by system
Create src/components/DataPortability.tsx to export postcards to a file and import from JSON into localStorage.
by system