As a user, I want to create a new account so I can start using mammoth-app. Implement the Signup page based on the existing JSX design (v2) with two steps: (1) account creation form (name, email), (2) encrypted password setup with strength indicator and confirmation field. On completion, navigate to /Login. Follows Digital Vault theme with vault-unlock micro-interaction on form submit. Includes link back to /Login for existing users.
As a user, I want to see the Digital Vault landing page so I understand mammoth-app's value proposition. Implement the Landing page based on the existing JSX design (v2). Includes: NavBar with frosted glass, Hero with animated vault door SVG, TrustBadges strip, FeatureHighlights 3-column cards, HowItWorks timeline, SecurityDeepDive two-column, Testimonials carousel, FAQ accordion, CallToAction section, and Footer. Links navigate to /Login and /Signup. Animated data-stream canvas background at ~0.04 opacity.
As a user, I want my account to be accessible only on one device at a time so unauthorized concurrent access is prevented. Implement session token invalidation logic in the backend: on new login, revoke all existing sessions for that user. Store active session tokens with device fingerprint in MySQL. Return 401 on stale tokens. Integrate with the Login API flow.
As a user, I want to sign in to my account securely so I can access my encrypted messages. Implement the Login page based on the existing JSX design (v2) with email/password form, password visibility toggle, encrypted vault aesthetic (consistent with Landing theme), and error state handling. On successful login, navigate to /Inbox. Includes a link to /Signup for new users. Follows the Digital Vault design style with accent blue glow on interactive elements.
As a user, I want to experience a consistent Digital Vault visual theme across all pages. Set up global CSS variables and theme tokens: Background #F3F4F6, Surface #FFFFFF, Text #1F2937, Accent #2563EB, Muted #9CA3AF. Configure Inter font family, base typography scale, reusable button/card/input component styles, and remove or repurpose scaffold pages that are not part of the mammoth-app flow (welcome page, dashboard/overview, dashboard/ai-assistant, dashboard/settings). This task must be completed before all page implementation tasks.
As a user, I want the backend to serve my conversation list so the Inbox page can display all my chats. Implement FastAPI endpoints: GET /api/conversations (list all conversations for authenticated user with last message and timestamp). Enforce single-device session policy. Integrate with MySQL via Alembic migrations for conversations and participants tables.
As a user, I want the backend to securely handle password changes so my account remains protected. Implement FastAPI endpoint: PUT /api/users/password (verify current password hash, validate new password, store new bcrypt hash). Enforce single active session invalidation on password change. Follows GDPR compliance — no plaintext password logging.
As a user, I want to update my account password on the Profile page so I can maintain account security. Implement the Profile page based on the existing JSX design (v2) with current password verification, new password input with confirmation, and success/error feedback. Follows Digital Vault theme. Navigate back to /Inbox on save. No ability to change username or add profile picture per SRD simplicity constraint.
As a user, I want the backend to store and retrieve encrypted messages so my conversations are always private and intact. Implement FastAPI endpoints: GET /api/conversations/{id}/messages (paginated, with timestamps) and POST /api/conversations/{id}/messages (send new encrypted text message). Enforce no-delete policy at API level — DELETE endpoints must not exist. Store messages with E2E encryption and Unix timestamps in MySQL.
As a user, I want to view all my conversations in an inbox so I can select and continue chats. Implement the Inbox page based on the existing JSX design (v2) listing all active chats with contact name, last message preview, and timestamp. No delete option exposed per SRD constraints. Tapping a chat navigates to /Chat. A Profile link navigates to /Profile. Uses Surface white card style with blue accent, consistent with mammoth-app theme.
As a user, I want all my messages to be end-to-end encrypted so no third party — including the server — can read them. Implement client-side encryption/decryption logic using AES-256-GCM with ECDH key exchange. Keys are derived from user credentials and never sent to the server. Integrate encryption into the Chat page send/receive flow and ensure the Messaging API stores only ciphertext.
As a user, I want to read and send encrypted text messages in a conversation so I can communicate privately. Implement the Chat page based on the existing JSX design (v2) with: ConversationSidebar (300px fixed panel with conversation list, search, active state, unread badges, mobile drawer), ChatHeader (contact name, E2E encrypted label, shield icon), MessageThread (scrollable bubble view with timestamps, outgoing blue right-aligned, incoming white left-aligned, date separators, lock icon on each bubble), EncryptionStatusBar (slim persistent bar), and MessageInputBar (pill input, send button with pulse animation). No delete button or media upload options. Real-time or polling-based message updates. Navigate back to /Inbox.

No comments yet. Be the first!