Mood Garden
A playful mood journal where each daily entry grows a tiny plant: pick a mood, add a short note, and the app generates a simple “plant card” with colors and leaf shapes based on your selection. Browse a calendar or timeline to revisit past days, filter by mood, and watch your garden grid fill up over time. Everything runs client-side with localStorage, including customizable mood labels, gentle reminders, and an export/import button for backup.
Create src/types.ts with Mood, Entry, Settings, and ExportPayload TypeScript types.
by system
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 content paths and add @tailwind directives in src/index.css.
by system
Create src/App.tsx with a simple shell (header, main, footer) and placeholder routes.
by system
Add React Router in src/main.tsx and define basic routes (Garden, Add Entry, Settings).
by system
Create src/lib/storage.ts with get/set helpers and versioned keys.
by system
Create src/hooks/useEntries.ts for CRUD operations backed by localStorage.
by system
Create src/hooks/useSettings.ts to load/save mood labels, reminders, and preferences.
by system
Add default mood definitions in src/lib/defaultMoods.ts.
by system
Create src/lib/plantGen.ts to map mood + optional variance into colors and leaf shapes.
by system
Create src/components/PlantCard.tsx to render a generated plant with mood label and date.
by system
Create src/components/LeafIcon.tsx that renders a few leaf variants by name.
by system
Create src/components/MoodPicker.tsx for selecting a mood using shadcn/ui controls.
by system
Create src/components/NoteField.tsx as a small textarea with character limit display.
by system
Create src/pages/AddEntryPage.tsx with date selection, mood picker, note field, and preview.
by system
Wire AddEntryPage save button to create/update an entry via useEntries.
by system
Create src/components/EditEntryDialog.tsx to edit mood/note for an existing entry.
by system
Create src/components/DeleteEntryDialog.tsx to confirm and remove an entry.
by system
Create src/pages/GardenPage.tsx that displays entries as a responsive grid of PlantCards.
by system
Create src/pages/TimelinePage.tsx to list entries chronologically with PlantCard rows.
by system
Create src/components/CalendarView.tsx showing month days with indicators for entries.
by system
Add mood filter controls to GardenPage and filter visible entries.
by system
Create src/components/MoodFilterChips.tsx to toggle selected moods.
by system
Create src/components/EntryDetailsDrawer.tsx to view a day's entry and actions.
by system
Create src/pages/SettingsPage.tsx with sections for moods, reminders, and backup.
by system
Create src/components/MoodEditor.tsx to add/rename/recolor moods and persist in settings.
by system
Create src/components/ReminderSettings.tsx for enabling/disabling gentle reminder options.
by system
Create src/lib/reminders.ts to schedule in-app reminder checks using timers and settings.
by system
Create src/components/ExportButton.tsx to download a JSON backup of entries/settings.
by system
Create src/components/ImportButton.tsx to upload/validate JSON and restore entries/settings.
by system