Weatherless Wardrobe
A playful outfit planner that builds a weekly “closet calendar” without using real weather: you tag clothing items by warmth, formality, and vibe, then the app generates balanced daily outfit suggestions based on your constraints (e.g., avoid repeating shoes, rotate colors, include 1 “statement” piece per week). Users can drag-and-drop items into days, lock certain picks, and re-roll the rest; everything is organized into clear components (Closet Manager, Tag Editor, Outfit Generator, Week Calendar) and saved in localStorage.
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 && npm i @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-label @radix-ui/react-popover @radix-ui/react-select @radix-ui/react-slot @radix-ui/react-tabs @radix-ui/react-toast && npx shadcn@latest init && npx shadcn@latest add button card badge input label textarea select tabs dialog dropdown-menu popover toast separator
by system
Configure src/index.css with Tailwind directives and set a basic app background/text theme.
by system
Create src/types.ts with ClothingItem, Tags, Outfit, DayPlan, WeekPlan, and Constraint types.
by system
Create src/data/sampleCloset.ts exporting a small starter list of ClothingItem objects.
by system
Create src/lib/storage.ts with load/save utilities and versioned keys for closet and week plan.
by system
Create src/hooks/useWardrobeState.ts to own closet/weekPlan state with localStorage persistence.
by system
Create src/lib/generator.ts implementing a deterministic outfit suggestion function from closet + constraints.
by system
Create src/lib/constraints.ts defining default rules like no-repeat shoes, color rotation, and weekly statement count.
by system
Add src/lib/reroll.ts to regenerate only non-locked slots for a given day/week.
by system
Create src/components/AppShell.tsx with header, nav tabs, and responsive content container.
by system
Create src/pages/ClosetPage.tsx to render closet list and an add-item entry point.
by system
Create src/pages/CalendarPage.tsx to render the week calendar and day outfit cards.
by system
Create src/pages/GeneratorPage.tsx to run full-week generation and show summary of rules applied.
by system
Create src/pages/SettingsPage.tsx for editing global constraints and clearing localStorage data.
by system
Update src/App.tsx to mount AppShell and switch between pages via shadcn Tabs.
by system
Create src/components/closet/ClothingItemCard.tsx to display item name, category, and key tags.
by system
Create src/components/closet/ClosetList.tsx to render a filterable list of ClothingItemCard items.
by system
Create src/components/closet/AddItemDialog.tsx with a form to add a new ClothingItem.
by system
Create src/components/closet/EditItemDialog.tsx to update or delete an existing ClothingItem.
by system
Create src/components/tags/TagEditor.tsx for warmth/formality/vibe/color/statement tag editing.
by system
Create src/components/tags/TagChips.tsx to render compact badges for an item's tags.
by system
Create src/components/closet/ClosetFiltersBar.tsx for filtering by category, warmth, formality, vibe, and color.
by system
Create src/components/calendar/WeekCalendar.tsx to render a 7-day grid with day columns.
by system
Create src/components/calendar/DayOutfitCard.tsx to show selected items per slot and reroll/lock controls.
by system
Create src/components/calendar/OutfitSlotRow.tsx to render one slot (top/bottom/shoes/etc.) with lock toggle.
by system
Create src/components/calendar/DragDropLayer.tsx implementing HTML5 drag-and-drop to move items into slots/days.
by system
Create src/components/calendar/RerollDayButton.tsx to trigger reroll of unlocked slots for a single day.
by system
Create src/components/generator/GenerateWeekButton.tsx to generate a fresh week plan from current closet.
by system
Create src/components/settings/ConstraintsForm.tsx to edit rule toggles/limits like statement-per-week and no-repeat shoes.
by system
Create src/components/system/AppToaster.tsx and use toasts for save/generate/reroll validation feedback.
by system