misty-app

As a user, I want the app to reflect the sakura-inspired visual identity so that the experience feels cohesive and immersive. Implement the global theme (color palette: #F8F3F8 background, #FFB7C5 accent, #4A4A4A text, #FFFFFF surface, #D1D1D1 muted), typography, spacing, and layout structure across all pages based on the mock-design pages. Remove any scaffold pages that are not part of the misty-app flow (login, signup, welcome, dashboard, ai-assistant, settings). Ensure the shared layout, navigation shell, and design tokens are in place before any page-specific work begins.

As a user, I want to land on an interactive sakura map homepage so that I can immediately start exploring sakura locations without any login. Implement the Home (v2) design page which features the live interactive map of Japan with animated sakura pins, a watercolor-style background that shifts based on time of day, and a 'Trending Sakura Spots' section at the bottom. Entry point into the app; links to the Map browsing experience. Reference the existing Home (v2) JSX design for implementation.

As a user, I want to use the backend API to fetch all sakura pin locations so that the map displays accurate and up-to-date data. Implement FastAPI endpoints: GET /locations (list all pins with coordinates, name, bloom status, rating summary), GET /locations/{id} (single pin detail). Uses MySQL/MariaDB for relational location data. Supports filtering by region and bloom status for tourist flow.

As a user, I want to post and read real-time comments on sakura pins anonymously so that the community can share live updates. Implement FastAPI endpoints: GET /locations/{id}/comments (paginated comment list), POST /locations/{id}/comments (anonymous comment submission). Store in MongoDB. Include WebSocket or polling support for real-time comment updates on the Pin Detail page.

As a user, I want the app to use AI to intelligently determine and update sakura bloom statuses so that the status information is accurate and timely. Integrate GPT model via Litellm/Langchain to analyse community photo uploads and comments and infer bloom status updates. Expose an internal API endpoint that the backend can call to trigger AI-based status re-evaluation for a pin after new photos or comments are submitted.

As a user, I want to rate sakura locations anonymously so that the community can identify the best spots. Implement FastAPI endpoints: GET /locations/{id}/ratings (aggregate rating and count), POST /locations/{id}/ratings (anonymous rating submission, 1–5 scale). Store in MySQL. Include basic anti-spam (rate limiting per IP) to prevent abuse without requiring authentication.

As a user, I want the Pin Detail page to load and submit real data so that I can view photos, comments, and ratings, and contribute my own. Integrate the Pin Detail frontend page with the Photos, Comments, and Ratings APIs. Implement real-time comment refresh (polling or WebSocket), photo upload flow, anonymous rating submission, and optimistic UI updates.

As a user, I want sakura pins to visually animate based on their bloom status so that the map feels alive and engaging. Implement petal-growth animations as status changes from small flower → big flower → full bloom, falling petal effect when bloom period ends, and micro-interaction hover states on pins showing preview cards. Animations should be performant and mobile-friendly.

As a user, I want to upload and view photos for sakura pins anonymously so that I can share and browse community content. Implement FastAPI endpoints: GET /locations/{id}/photos (list photos), POST /locations/{id}/photos (anonymous photo upload). Store photo metadata and binary in MongoDB. Handle file size limits and basic content type validation.

As a user, I want the backend to track and serve real-time sakura bloom statuses so that pins on the map reflect the current bloom stage. Implement FastAPI endpoints: GET /locations/{id}/status (current bloom status), PATCH /locations/{id}/status (update bloom status). Status enum: small_flower, big_flower, full_bloom, ended. Include timestamp of last update for real-time accuracy.

As a platform operator, I want anonymous photo and comment contributions to be automatically moderated so that the community experience remains safe and relevant. Implement an AI-powered moderation pipeline using GPT via Litellm to flag inappropriate photos and comments before they are published. Integrate with the Photos and Comments POST endpoints as a middleware step.