Time Capsule Postcards
A playful SPA where users write “postcards to future me” with a mood, a short message, and optional doodle stamp, then schedule them to be revealed on a chosen date. The app includes a postcard composer, a timeline inbox with countdowns, and a reveal view that unlocks messages only when their date arrives (all stored in localStorage). Extra polish: random postcard themes, gentle animations, and a “surprise me” prompt generator to spark ideas.
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.
by system
Configure tailwind.config.ts and src/index.css with Tailwind directives and a basic CSS reset.
by system
Add core shadcn/ui primitives (button, card, input, textarea, select, dialog, tabs, badge, tooltip) via CLI.
by system
Implement src/components/AppShell.tsx with header/nav and a centered content container.
by system
Wire react-router in src/main.tsx and define routes for Compose, Inbox, and Reveal pages.
by system
Create src/types/postcard.ts defining Postcard, Mood, Theme, and Stamp types.
by system
Implement src/lib/storage.ts for loading/saving postcards with schema-safe defaults.
by system
Create src/hooks/usePostcards.ts to add/update/delete postcards and persist to localStorage.
by system
Create src/data/themes.ts exporting a small array of postcard themes (colors/pattern tokens).
by system
Add src/lib/randomTheme.ts to pick a random theme id with deterministic fallback.
by system
Create src/data/prompts.ts with a list of “surprise me” writing prompts.
by system
Add src/lib/randomPrompt.ts to return a random prompt and avoid immediate repeats.
by system
Implement src/components/MoodSelect.tsx using shadcn Select to choose a mood.
by system
Implement src/components/RevealDateField.tsx using a native date input with validation messaging.
by system
Create src/components/StampPicker.tsx to choose an optional doodle stamp icon.
by system
Build src/components/PostcardPreview.tsx to render theme, mood, message snippet, and stamp.
by system
Implement src/pages/ComposePage.tsx with fields for mood, message, stamp, theme, and reveal date.
by system
Add save/validation behavior in ComposePage to create a Postcard via usePostcards.
by system
Add a “Surprise me” prompt button to ComposePage that inserts a generated prompt into the message.
by system
Add a “Random theme” control to ComposePage that applies a random theme to the preview.
by system
Create src/pages/InboxPage.tsx to list scheduled postcards sorted by reveal date.
by system
Implement src/lib/countdown.ts to compute human-readable time remaining until a target date.
by system
Create src/components/InboxItem.tsx showing preview, reveal date, and countdown badge.
by system
Implement src/components/UnlockStatusBadge.tsx to display whether a postcard is revealable yet.
by system
Implement src/pages/RevealPage.tsx to load a postcard by id from the route and display state.
by system
Create src/components/LockedReveal.tsx showing a lock message and countdown until unlock.
by system
Create src/components/UnlockedReveal.tsx to show the full postcard message, mood, theme, and stamp.
by system
Add src/components/DeletePostcardDialog.tsx and wire it from Inbox/Reveal for deletion confirmation.
by system
Add subtle Tailwind-based transitions (hover/enter) in PostcardPreview and page containers.
by system
Add empty-state UI components for Inbox and Reveal when there are no postcards or id not found.
by system