As a user I want to be able to use a frontend that matches the mock-design pages exactly. Implement global theme tokens (Topaz Yellow #FFC87C, Midnight Blue #003366, Coral Pink #FF6F61, Soft White #F8F8F8), typography (Inter font family), CSS custom properties, shared layout components (TopBar, Sidebar, Footer shells), and global animation utilities. Remove any scaffold pages not present in the design pages list. This task must be completed before any individual page implementation begins.
As a guest I want to be able to use the frontend Landing page that matches the existing v2 JSX design exactly. Implement the Gemstone Universe homepage with the interactive rotating topaz gemstone, facet click/hover shimmer interactions, pulsing animation, twinkling star background, and smooth section transitions. Sections include hero, About teaser, Features teaser, login/signup CTAs. Links to: Login page, Signup page, About page, Features page. References the existing Landing (v2) design.
As a guest I want to be able to use the frontend Signup page that matches the existing v2 JSX design exactly. Implement the account creation form with name, email, password, confirm-password fields, role selection (User/Guest), validation, Topaz Yellow submit button, and a link back to Login. On success, routes to Dashboard overview. References the existing Signup (v2) design.
As a user I want to be able to use the frontend Login page that matches the existing v2 JSX design exactly. Implement the sign-in form with email/password fields, Topaz Yellow CTA button, frosted-glass card surface, error states, and links to Signup. On success, routes Admin to Dashboard (admin stats view) and User to Dashboard (overview view). References the existing Login (v2) design.
As a guest or user I want to be able to use the frontend Features page that matches the existing v2 JSX design exactly. Implement the feature showcase with gemstone-facet-inspired cards, animated hover effects, platform capability highlights, and CTAs linking to Signup (for guests) or Dashboard (for logged-in users). References the existing Features (v2) design.
As a guest I want to be able to use the frontend About page that matches the existing v2 JSX design exactly. Implement the informational page describing the topaz-girl platform, gemstone brand identity, team/project info sections, animated gemstone accent, and navigation back to Landing and Features. References the existing About (v2) design.
As a user I want to be able to use backend API for authentication — register, login (JWT), logout, refresh token, and password reset endpoints using FastAPI. Supports all three personas (User, Admin, Guest). Connects to MySQL/MariaDB via Alembic-managed schema. Secures routes with role-based access control.
As a user or admin I want to be able to use the frontend Dashboard page that matches the existing v2 JSX design exactly. Implement the overview stats strip, recent activity feed, quick-action cards, sidebar navigation, and TopBar. For admin: links to Users and Content management. For user: links to Features, Profile, and Settings. Includes frosted-glass surface cards and gemstone-accent data visualizations. References the existing Dashboard (v2) design.
As an admin I want to be able to use the frontend Users management page that matches the existing v2 JSX design exactly. Implement the PageHeader, UserStatsStrip (4 stat cards), UserFiltersBar (search, role/status/date filters, view toggle, active chips, mobile bottom sheet), UserTable (sortable columns, role/status badges, row actions, pagination), UserDetailDrawer (slide-in profile + moderation history), and BulkActionsBar. References the existing Users (v2) design.
As an admin I want to be able to use the frontend Content management page that matches the existing v2 JSX design exactly. Implement the ContentTopBar, ContentSidebar, ContentBreadcrumb, ContentToolbar, ContentPostGrid (3-col card grid, status badges, pagination), ContentEditor (WYSIWYG-style, SEO panel, publish actions), ContentMediaLibrary (dropzone, masonry grid), and ContentActivityFeed. Links from Dashboard. References the existing Content (v2) design.
As a user I want to be able to use the frontend Profile page that matches the existing v2 JSX design exactly. Implement the profile hero (avatar, name, role badge), activity stats strip, editable profile form (name, email, bio, avatar upload), and navigation back to Dashboard. Links: Dashboard → Profile → Edit Profile. References the existing Profile (v2) design.
As a user or admin I want to be able to use backend API for dashboard statistics — aggregate endpoints returning total users, active today count, pending moderation count, new-this-week count with trend indicators, and recent activity feed. Supports the Dashboard page data requirements.
As a user I want to be able to use the frontend Settings page that matches the existing v2 JSX design exactly. Implement preference panels for account settings, notification preferences, localization defaults (US timezone, currency), privacy controls, and a save/reset action bar. Links from Dashboard. References the existing Settings (v2) design.
As an admin I want to be able to use backend API for user management — list users with filters (role, status, join date, search), get user detail, update user, suspend/activate account, delete user, and bulk actions. Returns paginated results. Supports the Users page data requirements.
As an admin I want to be able to use backend API for content management — CRUD for posts (create, read, update, delete, duplicate), status transitions (draft/published/scheduled), tag and category management, media upload and retrieval, and activity/audit log endpoints. Supports the Content page data requirements.
As a user I want to be able to use backend API for profile and settings — get/update profile (name, email, bio, avatar), update notification preferences, update localization settings (timezone, currency), and retrieve user activity stats. Supports the Profile and Settings page data requirements.
No comments yet. Be the first!