proud-project

As a user I want to see the MOODSCAPE landing page so that I get a compelling first impression of the app. Implement the Landing page based on the existing JSX design (Landing v2). The page introduces the brand, tagline, and entry point into the Today tab mood selection experience. Includes hero section, editorial typography, and navigation to Today and Closet tabs.

As a user I want the backend to serve curated outfit suggestions per mood so that the frontend can fetch dynamic outfit data. Implement a FastAPI endpoint GET /api/outfits?mood={mood} that returns an array of 4 outfit objects, each with: id, mood, occasion, color_palette (4 hex values), pieces (list of 6-8 strings), and created_at. Outfit data is seeded per mood in MySQL. Includes Alembic migration for the outfits table.

As a user I want to use the Today tab so that I can select one of six moods (Calm, Bold, Tender, Sharp, Playful, Invisible) and be taken to the mood canvas experience. Implement the Today page with a 2x3 grid (desktop) / 1x6 stack (mobile) of mood option buttons. On selection, trigger MoodCanvas animation and scroll to outfit suggestions. Includes editorial design styling per the MOODSCAPE design system.

As a user I want my saved looks to be persisted server-side so that my Closet is available beyond localStorage. Implement FastAPI endpoints: POST /api/closet/save (save a look tied to user session) and GET /api/closet (retrieve all saved looks for a session). Includes Alembic migration for the saved_looks table with fields: id, session_id, outfit_id, mood, saved_at.

As a user I want to see the Interactive Mood Canvas animate when I select a mood so that I experience a visually immersive fashion editorial moment. Implement the MoodCanvas page based on the existing JSX design (MoodCanvas v2). Includes: 60vh animated canvas with mood-triggered gradient transitions (800ms), CSS keyframe animations per mood essence (calm: gentle waves, bold: sharp angles, tender: blooming circles, sharp: geometric lines, playful: bouncing orbs, invisible: transparent ripples), and mood color swatches in corner.

As a user I want the backend to track my mood selections and compute stats so that I can see how many looks I've saved, moods I've tracked, and my top mood. Implement FastAPI endpoints: POST /api/mood/log (log a mood selection with timestamp), GET /api/stats (return looks_saved, moods_tracked, top_mood), and GET /api/mood/history (return full mood log sorted by date desc, newest first). Includes Alembic migration for mood_history table.

As a user I want to browse four curated outfit suggestions for my selected mood so that I can explore looks with color palettes, piece lists, and occasion tags. Implement the Outfits page based on the existing JSX design (Outfits v1). Includes: 4-column grid (desktop) / 2-col (tablet) / 1-col (mobile), staggered fade-in scroll animation, color palette swatches (2x2 grid), occasion badge in sunset coral, outfit piece list in muted gray, and 'Save Look' CTA button. Outfit data is curated per mood and stored in local state.

As a user I want to save any outfit suggestion to my Closet by clicking 'Save Look' so that my favorite looks persist across sessions. Implement localStorage-backed save logic: when 'Save Look' is clicked on an outfit card, serialize the outfit object (palette, pieces, occasion, mood, timestamp) and append to a localStorage key. Saved state should reflect immediately in UI (button toggles to 'Saved'). This shared state/utility layer supports both the Outfits page and Closet page.

As a user I want to view my Closet tab so that I can see all my saved looks, three fashion stats, and a full mood history log. Implement the Closet page based on the existing JSX design (Closet v1). Includes: saved looks thumbnail grid (120x150px cards, mood color swatch overlay), three stat cards (Looks Saved, Moods Tracked, Top Mood) in Cormorant Garamond, mood history timeline/table (sortable by date, alternating row backgrounds on desktop / card stack on mobile), and 'View Full Closet' CTA. All data read from localStorage.

As a user I want the frontend to seamlessly use backend APIs so that my outfit suggestions, saved looks, and mood history are all dynamically served and persisted. Replace localStorage-only state with API calls: fetch outfits from GET /api/outfits, post saves to POST /api/closet/save, fetch closet from GET /api/closet, log moods to POST /api/mood/log, and fetch stats/history from GET /api/stats and GET /api/mood/history. Maintain localStorage as offline fallback.