Time Capsule Notes
A playful journaling app where you write short notes to your future self and “seal” them with a delivery date; notes stay hidden until their unlock time arrives. The app includes a simple editor, a vault view showing locked vs. unlocked capsules, and optional “mood + tag” metadata with filters and search. Everything runs client-side with localStorage, plus a countdown/timeline component so users can see what’s coming next without revealing locked content.
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
Configure Tailwind in src/index.css and ensure tailwind.config content paths include src/**/*.{ts,tsx}.
by system
Create src/App.tsx with a simple shell (header + main) using Tailwind and shadcn/ui.
by system
Install and wire react-router in src/main.tsx with routes for Editor and Vault.
by system
Add a Header component with links to /new and /vault plus a light brand title.
by system
Create src/types/capsule.ts defining Capsule, Mood, Tag, and storage schema types.
by system
Create src/lib/storage.ts with localStorage load/save helpers and versioned key.
by system
Create src/lib/capsules.ts for CRUD (create/update/delete/list) and sort by unlockAt.
by system
Create src/lib/time.ts for formatting dates and computing remaining time.
by system
Create src/hooks/useCapsules.ts to expose capsules list and CRUD methods backed by localStorage.
by system
Create src/pages/EditorPage.tsx containing the new-capsule form layout.
by system
Add a textarea (shadcn/ui) in EditorPage with character count and basic validation.
by system
Add a date/time picker input in EditorPage to set unlockAt with min-now validation.
by system
Add an optional Mood select control component used by EditorPage.
by system
Add an optional tags input (comma/enter to add, removable chips) used by EditorPage.
by system
Wire EditorPage submit to create a capsule in storage and navigate to /vault.
by system
Create src/pages/VaultPage.tsx with layout regions for filters, timeline, and capsule list.
by system
Create src/components/CapsuleList.tsx to render capsules grouped by Locked/Unlocked.
by system
Create src/components/CapsuleCard.tsx showing title snippet, unlock date, mood/tags, and lock state.
by system
Update CapsuleCard to hide note body for locked capsules while still showing countdown.
by system
Create src/lib/unlock.ts to determine locked/unlocked state based on unlockAt and now.
by system
Create src/components/Countdown.tsx that ticks every second and formats time remaining.
by system
Create src/components/NextUpTimeline.tsx listing upcoming unlocks without revealing content.
by system
Create src/components/filters/SearchBox.tsx to filter capsules by note text (unlocked only) and tags.
by system
Create src/components/filters/MoodFilter.tsx to filter capsules by selected mood.
by system
Create src/components/filters/TagFilter.tsx to filter capsules by selected tag(s).
by system
Implement filtering and sorting in VaultPage using search/mood/tag controls and unlock status.
by system
Add a delete button with confirmation dialog (shadcn/ui) on CapsuleCard for unlocked capsules.
by system
Add a small edit flow to update mood/tags on an existing capsule without changing note text.
by system
Add empty-state UI for no capsules / no results and inline validation messages in forms.
by system