zen-app

As a frontend developer, I want to implement the Communities page based on the existing JSX design (Communities v2) so that users can browse, join, and participate in interest-based communities. The page includes: a NavBar, a hero/banner with featured communities, a grid of community cards (icon, name, member count, category badge, Join button with ripple), a search/filter bar (by interest category), and a My Communities sidebar section. Clicking a community card opens the community detail view. Mobile: full-width single-column card list.

As a frontend developer, I want to implement the News page based on the existing JSX design (News v2) so that users and guests can browse and interact with the news feed. The page features: a sticky NavBar, a hero banner with trending topics, a filterable post feed (tab bar: Trending, Latest, Following), post cards with glassmorphism surfaces (avatar, content, image, like/comment/share reactions with ripple), an infinite scroll or Load More mechanism, and a right sidebar with community suggestions. Mobile: single-column full-width feed.

As a backend developer, I want to implement real-time messaging endpoints and WebSocket support (GET /chats, GET /chats/{id}/messages, POST /chats/{id}/messages, WS /chats/{id}/stream) so that users can send and receive one-to-one messages in real time. Include message pagination, read receipts, typing indicators, and end-to-end encryption as required by the SRD. Store messages in MySQL with Alembic migrations.

As a frontend developer, I want to implement the Dashboard page based on the existing JSX design (Dashboard v2) so that admins can view a system overview. The page includes: a sticky TopBar (logo, global search, notification bell, admin avatar dropdown), a fixed Sidebar (admin profile mini-card, nav links with active state, system status indicator), and a main content area with stat cards (Total Users, Active Today, Suspended, New This Week), charts/graphs for activity over time, recent reports list, and quick action buttons. Mobile: sidebar becomes off-canvas drawer.

As a backend developer, I want to implement admin management endpoints (GET /admin/users, PUT /admin/users/{id}, POST /admin/users/{id}/suspend, POST /admin/users/{id}/activate, GET /admin/stats, GET /admin/reports, DELETE /admin/posts/{id}) so that admins can manage user accounts, view system statistics, and moderate content. Include role-based authorization middleware to restrict access to Admin role only.

As a frontend developer, I want to implement the Home page based on the existing JSX design (Home v2) so that registered users can view their personalized feed after login. The page features a sticky NavBar with logo, nav links, notification bell, and avatar dropdown; a hero/welcome banner; a news feed section with post cards (glassmorphism surface, avatar, content, reactions); community highlights; and a floating action button. Links to: Chat, Profile, News, Communities. Mobile-first responsive layout.

As a backend developer, I want to implement signaling endpoints for voice and video calls (POST /calls/initiate, POST /calls/{id}/answer, POST /calls/{id}/end, WS /calls/{id}/signal) using WebRTC signaling so that users can make peer-to-peer voice and video calls. Include call state management, call duration tracking, and AST-localized call logs.

As a backend developer, I want to implement community endpoints (GET /communities, POST /communities, GET /communities/{id}, PUT /communities/{id}, POST /communities/{id}/join, DELETE /communities/{id}/leave, GET /communities/{id}/posts, POST /communities/{id}/posts) so that users can browse, join, and participate in interest-based communities. Include member count, category filtering, and moderation support for admins.

As a frontend developer, I want to implement the Login page based on the existing JSX design (Login v2) so that registered users and admins can sign in. The page includes a glassmorphism login card (max-width 440px), animated background, email/phone input with floating label, password input with show/hide toggle, Forgot Password link, Sign In CTA with loading state, social login row (Google/Apple), and a link to Signup. On mobile the card goes full-width. Navigation: on success → Home (user) or Dashboard (admin).

As a frontend developer, I want to implement the Profile page based on the existing JSX design (Profile v2) so that users can view and edit their profile. The page includes: ProfileHeader (cover photo, avatar with Vibrant Green ring, display name, bio, Edit Profile / Share Profile buttons), ProfileStats bar (Posts, Followers, Following, Communities with count-up animation), a two-column layout with AboutCard (location, joined date, website, timezone, interests tag cloud), CommunitiesCard (list of community memberships with hover glow), MediaGrid (3x3 photo thumbnails), and ActivityFeed (Posts/Replies/Liked tabs with post cards). Mobile: single-column stacked layout.

As a frontend developer, I want to implement the Chat page based on the existing JSX design (Chat v2) so that users can send and receive one-to-one messages. The page includes: a sidebar conversation list (search bar, user avatars, last message preview, unread badge), a main chat area (sticky header with contact name/status/call icons, message bubbles with timestamps, glassmorphism surfaces for sent/received, typing indicator), and a message input bar (emoji, attachment, voice note, send button with ripple). Links to: Call page (voice/video icons). Mobile: sidebar becomes full-screen list, chat area full-screen on conversation open.

As a backend developer, I want to implement news feed endpoints (GET /feed, GET /feed/trending, POST /posts, PUT /posts/{id}, DELETE /posts/{id}, POST /posts/{id}/like, POST /posts/{id}/comment) so that users can browse, create, and interact with news feed posts. Include pagination, filtering by trending/latest/following, and media attachment support.

As a frontend developer, I want to implement the Signup page based on the existing JSX design (Signup v2) so that new users can create an account. The page includes full-name, email, phone, password, confirm-password fields with floating labels, interest selection chips, Terms agreement checkbox, Create Account CTA, social signup options, and a link back to Login. On success navigates to Home feed. Mobile-responsive with full-width card.

As a backend developer, I want to implement FastAPI profile endpoints (GET /users/{id}, PUT /users/{id}, GET /users/{id}/stats, GET /users/{id}/posts, GET /users/{id}/media) so that users can create, view, and edit their profiles. Include fields for display name, bio, location, website, timezone (AST), interests, and profile photo. Integrate Google Nano Banana AI for avatar generation (POST /users/{id}/generate-avatar).

As a frontend developer, I want to implement the Call page based on the existing JSX design (Call v2) so that users can make voice and video calls. The page includes: full-screen call view with animated background glow, remote video feed (or avatar for voice calls), local video pip, call duration timer, contact name and status, and a bottom control bar (mute, camera toggle, speaker, end call — all with ripple effects and animated states). Transitions in from Chat page. Mobile-optimized full-screen layout.

As a frontend developer, I want to implement the Landing page based on the existing JSX design (Landing v2) so that guests can view the app's value proposition, preview the news feed, navigate to communities, and access Login or Signup. The page should feature the animated navy-to-midnight gradient background, floating interactive panels with 3D carousel effect, micro-interactions (ripple, bounce, glow), and parallax scrolling as described in the SRD. Links to: Login page, Signup page, News preview, Communities.

As a frontend developer, I want to connect the News feed page to the backend feed API so that users can browse real posts (trending, latest, following), like, comment, share, and create new posts with media attachments. Implement infinite scroll pagination.

As a frontend developer, I want to connect the Call interface page to the WebRTC signaling API and WebSocket so that users can initiate, answer, and end real voice and video calls with proper UI state transitions (ringing, connected, ended).

As a backend developer, I want to implement push notification support (FCM for Android, APNs for iOS) so that users receive real-time notifications for new messages, missed calls, community activity, and news interactions. Include animated Vibrant Green badge UI updates on the NavBar notification bell.

As a frontend developer, I want to implement the Users page based on the existing JSX design (Users v2) so that admins can manage all registered accounts. The page includes: TopBar and Sidebar (shared with Dashboard), a PageHeader with breadcrumb and Add User / Export CSV actions, a UserStatsBar (4 stat cards), a UserTableToolbar (search/filter, bulk actions), a full UserTable (checkbox, avatar+name+email, role badge, status badge, join date, last active, action buttons — view/edit/suspend; inline row expansion with bio, communities, recent activity), an EditUserModal (glassmorphism overlay, form fields, AI avatar regeneration), and TablePagination. Mobile: table becomes card-list layout.

As a frontend developer, I want to connect the Admin Dashboard page to the backend admin stats API (GET /admin/stats, GET /admin/reports) so that real system metrics, user counts, activity charts, and recent reports are displayed with live data.

As an AI engineer, I want to integrate GPT 5.2 via Litellm and Langchain into the chat system so that users receive AI-powered smart reply suggestions and the app can provide contextual responses. Implement POST /ai/suggest-reply endpoint that takes conversation context and returns suggested replies. Use Langchain for prompt chaining and Litellm for LLM routing.

As an AI engineer, I want to integrate Google Nano Banana into the user profile service so that users can generate personalized AI profile images. Implement POST /users/{id}/generate-avatar endpoint that accepts a text prompt or user interests and returns a generated image URL. Include rate limiting and moderation filters.

As a frontend developer, I want to connect the Communities page to the backend communities API so that users can browse real communities, join/leave, view community posts, and participate in discussions. Admins see moderation actions inline.

As a frontend developer, I want to wire up the Login and Signup pages to the backend authentication API (POST /auth/login, POST /auth/signup) so that real JWT tokens are issued, stored securely, and used for authenticated requests. Implement token refresh logic, protected route guards (redirect to Login if unauthenticated), and role-based routing (Admin → Dashboard, User → Home).

As a frontend developer, I want to connect the Profile page to the backend profile API (GET /users/{id}, PUT /users/{id}, GET /users/{id}/stats, GET /users/{id}/posts, GET /users/{id}/media, POST /users/{id}/generate-avatar) so that real user data is displayed and editable, with AI avatar generation integrated into the edit flow.

As a frontend developer, I want to connect the Chat page to the backend messaging API and WebSocket stream so that users can send and receive real-time messages, see typing indicators, read receipts, and conversation history. Integrate AI smart reply suggestions from the GPT assistant endpoint.

As a frontend developer, I want to implement Arabic (RTL) localization across all pages so that Qatar users can use the app in Arabic. Include i18n setup, RTL layout mirroring, Arabic font support, AST timezone display, and QAR currency formatting where applicable.

As a frontend developer, I want to connect the Admin Users page to the backend admin user management API so that admins can view, search, filter, edit, suspend, and activate real user accounts. The EditUserModal should save changes via PUT /admin/users/{id} and the AI avatar regeneration should call the generate-avatar endpoint.