As a developer, I want to implement the global color palette, typography, and design tokens (Deep Midnight Blue #0A0A23, Dark Indigo #1C1C3A, Soft White #F5F5F5, Vibrant Coral #FF6F61, Muted Lavender Gray #6C6C8C) across all existing scaffold pages so that the app visually matches the moon-website night-sky aesthetic. Remove any pages not present in the design pages list (e.g. welcome page, dashboard/ai-assistant page). Set up CSS variables, font imports (Inter), and base layout structure. This task must be completed before all other UI tasks.
As a user, I want to use the backend auth API so I can register, log in, and log out securely. Implement FastAPI endpoints: POST /auth/register, POST /auth/login (JWT), POST /auth/logout. Include password hashing, JWT token generation, and compliance with Indian IT Act / GDPR constraints.
As a user, I want to use the report and block backend API so I can flag inappropriate users and prevent them from contacting me. Implement FastAPI endpoints: POST /users/{id}/report, POST /users/{id}/block, GET /users/blocked. Includes report reason categories, moderation queue integration, and block enforcement in pairing logic.
As a user or guest, I want to use the TextChat page so I can connect with a random stranger in real time, send/receive messages, report or block users, and skip to the next match. Implement based on the existing TextChat (v2) JSX design. Page links from: Landing (guest), Home (user). Links to: Settings (report flow). Includes chat window, message input, skip/next button, report modal, and typing indicator.
As a user, I want to use the backend random pairing API so I can be matched with a random online stranger for text or video chat. Implement FastAPI WebSocket or REST endpoints for pairing queue management: POST /chat/pair (text), POST /chat/pair (video), DELETE /chat/disconnect. Includes queue logic, session ID generation, and preference-based filtering (language/region).
As a user, I want to use the Landing page so I can explore the interactive Galaxy Map, view online users as stars, hover for brief profiles, and click 'Join the Galaxy' to register or start a guest text chat. Implement based on the existing Landing (v2) JSX design. Page links to: Login, Signup, TextChat (guest). Includes dynamic star animations, time-of-day color shifts (IST), and responsive layout.
As an admin, I want to use the Moderation page so I can view and manage reported users, review flagged chat logs, issue warnings or bans, and clear resolved reports. Implement based on the existing Moderation (v1) JSX design. Page links from: Dashboard. Links to: Users (block action). Includes reports queue, chat log viewer, action buttons (warn, ban, dismiss), and AI-assisted flagging indicators.
As an admin, I want to use the analytics backend API so I can view real-time stats on active users, total chats, engagement trends, and report volumes. Implement FastAPI endpoints: GET /admin/analytics/overview, GET /admin/analytics/chats, GET /admin/analytics/users. Includes aggregated metrics, time-series data for charts, and IST timezone support.
As a logged-in user, I want to use the Home page so I can choose between Text Chat and Video Chat modes, view my profile, and access settings. Implement based on the existing Home (v1) JSX design. Page links from: Login. Links to: TextChat, VideoChat, Settings. Includes chat mode selection cards, online user count, and personalized welcome.
As an admin, I want to use the Dashboard page so I can view analytics on user activity, monitor active chats in real time, and navigate to moderation tools. Implement based on the existing Dashboard (v1) JSX design. Page links from: Login (admin role). Links to: Moderation, Users. Includes stat cards (total users, active chats, reports), charts for engagement trends, and recent activity feed.
As an admin, I want to use the Users page so I can search, filter, view, block, and manage user accounts. Implement based on the existing Users (v2) JSX design. Page links from: Dashboard, Moderation. Includes user table with status badges (Active/Inactive/Blocked), search/filter sidebar, bulk actions toolbar, user stats overview, and pagination.
As a guest, I want to use the Signup page so I can create an account to access video chat and become part of the galaxy constellation. Implement based on the existing Signup (v2) JSX design. Includes Hero section with starfield animation, signup form (name, email, password, confirm password), language preferences (English/Hindi), security badges, benefits overview, social proof stats, and terms/privacy agreement. Page links from: Landing. Links to: VideoChat (on success).
As a registered user, I want to use the VideoChat page so I can connect with a random stranger via live video and audio, mute/unmute, skip to next match, and report users. Implement based on the existing VideoChat (v1) JSX design. Page links from: Home, Signup (on success). Links to: Settings (report flow). Includes dual video panels (local/remote), controls bar (mute, camera, skip, end), and connection status indicator.
As a user, I want to use the Login page so I can sign in to access video chat and personalized features. Implement based on the existing Login (v2) JSX design. Page links from: Landing. Links to: Home (on success), Signup. Includes email/password form, validation, error states, and glassmorphic surface styling with primary glow on focus.
As a user, I want to use the Settings page so I can set my language preference (English/Hindi), region, notification settings, and manage my account. Implement based on the existing Settings (v1) JSX design. Page links from: TextChat, VideoChat (report flow), Home. Includes language toggle, region selector, privacy controls, and save/cancel actions.
As a user, I want to use the real-time text chat backend so I can send and receive messages instantly with a paired stranger. Implement FastAPI WebSocket endpoint for bi-directional messaging: WS /chat/text/{session_id}. Includes message broadcasting, session lifecycle management, typing indicator events, and disconnect handling.
As a user, I want the Settings frontend page to save and load my language and region preferences from the backend so they are applied to my chat matching. Connect Settings (v1) page to GET /users/preferences and PUT /users/preferences. Persist language (English/Hindi), region, and notification settings. Preferences feed into the pairing API filters.
As a user, I want to use the video chat signaling backend so I can establish peer-to-peer WebRTC video/audio connections with a paired stranger. Implement FastAPI WebSocket signaling server: WS /chat/video/{session_id}. Handles SDP offer/answer exchange, ICE candidate relay, and TURN/STUN server configuration.
As an admin, I want the Dashboard frontend page to display live analytics from the backend API so I can monitor platform health and activity. Connect Dashboard (v1) page to GET /admin/analytics/overview and GET /admin/analytics/chats. Render stat cards, trend charts, and recent activity feed with real-time polling or WebSocket updates.
As an admin, I want to use the moderation backend API so I can review flagged reports, issue warnings, ban users, and dismiss false reports. Implement FastAPI endpoints: GET /admin/reports, PUT /admin/reports/{id}/resolve, POST /admin/users/{id}/ban, POST /admin/users/{id}/warn. Includes role-based access control (admin only) and AI-assisted flagging hooks.
As a user, I want the VideoChat frontend page to establish peer-to-peer WebRTC connections via the signaling backend so I can have live video and audio sessions with strangers. Wire up the VideoChat (v1) page to WS /chat/video/{session_id}, handle SDP/ICE negotiation, local/remote stream rendering, mute/camera toggle controls, and skip/end session actions.
As an admin, I want the Moderation frontend page to load reports from the backend and allow me to take actions (warn, ban, dismiss) that persist in real time. Connect Moderation (v1) page to GET /admin/reports and PUT /admin/reports/{id}/resolve and POST /admin/users/{id}/ban. Display AI flagging scores alongside manual reports.
As an admin, I want the platform to use AI-assisted content moderation so that inappropriate messages and behavior are automatically flagged before human review. Integrate LiteLLM + GPT for real-time text analysis of chat messages. Implement flagging pipeline: analyze message content, score toxicity, and push high-risk events to the moderation queue automatically.
As an admin, I want the Users management frontend page to load user data from the backend so I can search, filter, view status, and perform bulk block/unblock actions. Connect Users (v2) page to GET /admin/analytics/users and POST /admin/users/{id}/ban. Support real-time search filtering, status badge updates, and pagination.
As a user, I want the TextChat frontend page to connect to the real-time WebSocket API so I can send and receive messages, see typing indicators, and skip to the next stranger. Wire up the TextChat (v2) page to the WS /chat/text/{session_id} endpoint, pairing API, and report/block API. Handle connection states, reconnection logic, and error display.

No comments yet. Be the first!