project-d4a3c576

As a user I want to be able to use the frontend Landing page that features the Interactive Canvas design concept — dynamic floating images, cursor-reactive animations, time-based background themes, micro-interactions, and CTAs for Login and Signup. Implement based on the existing Landing (v2) JSX design. Page links to: Login, Gallery (Guest browse), Signup.

As a user I want to be able to use the frontend Login page to sign in with email/password. Implement based on the existing Login (v2) JSX design. Page includes form validation, show/hide password, error states, and links to Signup. On success navigates to Gallery (Registered User) or Dashboard (Admin).

As a user I want to be able to use the frontend Signup page to create a new account. Implement based on the existing Signup (v2) JSX design. Includes full name, email, password with strength indicator, confirm password, terms checkbox, language preference toggle (AR/EN), UAE data compliance note. On success navigates to Gallery.

As a user I want to be able to use the frontend Gallery page to browse public and personal images. Implement based on the existing Gallery (v2) JSX design. Includes GalleryHero banner, GalleryToolbar (view toggle, sort, tabs: All/Trending/New/My Gallery), FilterSidebar (search, category, color, date, likes), GalleryGrid (uniform/masonry modes, hover overlays, like/view/edit actions, staggered animations, skeleton loaders), PaginationBar, GuestUpsell banner, UploadPromptBanner. Page links to: Image Detail, Upload, Landing.

As a user I want to be able to use the backend API for login — POST /auth/login endpoint accepting email and password, returning JWT access and refresh tokens. Includes role-based claims (admin/user/guest) for routing to correct pages post-login.

As a user I want to be able to use the frontend Image Detail page to view a full image with metadata, uploader info, like/comment interactions, and related images. Implement based on the existing Image (v2) JSX design. Accessible from Gallery grid card click. Links back to Gallery and to Editor (for owners).

As a user I want to be able to use the frontend Upload page to add new images to the platform. Implement based on the existing Upload (v2) JSX design. Includes drag-and-drop upload zone, file validation, title/tags/category fields, privacy toggle, progress indicator. On success navigates to Editor. Only accessible to Registered Users.

As an admin I want to be able to use the frontend Dashboard page to view platform analytics including user stats, upload counts, and engagement metrics. Implement based on the existing Dashboard (v2) JSX design. Includes TopBar with breadcrumb, AdminSidebar navigation, analytics charts, and summary KPI cards. Links to Users management and Content moderation pages.

As a user I want to be able to use the backend API to upload images — POST /images/upload endpoint accepting multipart form data (image file, title, tags, category, privacy). Validates file type/size, stores file in object storage, saves metadata to MySQL, returns image ID and URL.

As an admin I want to be able to use the backend API for user management — GET /admin/users with search/filter/pagination; GET /admin/users/{id} for full profile; PUT /admin/users/{id} to update account details and role; DELETE /admin/users/{id} or PATCH to suspend/activate accounts.

As a user I want to be able to switch between Arabic and English languages across all frontend pages. Implement i18n using react-i18next with translation files for both languages. Support RTL layout for Arabic. Language preference saved to user profile (authenticated) or localStorage (guest). Applied on Landing, Login, Signup, Gallery, and Editor pages.

As a user I want to be able to use the frontend Editor page to customize uploaded images with filters, text overlays, color adjustments, and cropping tools. Implement based on the existing Editor (v2) JSX design. Accessible after upload or from image detail (owner only). On save navigates to Gallery (My Gallery view).

As an admin I want to be able to use the frontend Content Moderation page to review, approve, or reject user-uploaded images. Implement based on the existing Content (v2) JSX design. Includes ContentPageHeader, ModerationStatsBar (pending/approved/rejected/total), ContentFilterToolbar, UploadsTable with status badges and action buttons, BulkActionBar, ContentDetailPanel (slide-in), and PaginationBar.

As an admin I want to be able to use the frontend Users Management page to view, edit, and manage registered user accounts. Implement based on the existing Users (v2) JSX design. Includes user list/table with search and filters, edit account panel, role management, and account status controls. Accessible from Dashboard sidebar.

As a user I want to be able to use the backend API to fetch gallery images — GET /images endpoint with query params for pagination, sorting (latest/most liked/most viewed), filtering (category, color, date range, likes range, search term). Returns paginated list of public images with uploader info, like/view counts.

As a user I want to be able to use the backend API to save customized image edits — PUT /images/{id}/edit endpoint accepting edited image data (applied filters, text overlays, color adjustments, crop parameters). Saves new version to storage, updates metadata record, returns updated image URL.

As a user I want to be able to use the backend API for image detail and interactions — GET /images/{id} returns full image metadata; POST /images/{id}/like toggles like for authenticated user; GET /images/{id}/related returns similar images. Supports view count increment on fetch.

As an admin I want to be able to use the backend API for content moderation — GET /admin/uploads with filters (status, date, uploader, search); PATCH /admin/uploads/{id}/status to approve/reject/flag with optional moderation note; POST /admin/uploads/bulk-action for batch operations. Returns paginated uploads with full metadata.

As a user I want to be able to use the platform with assistive technologies — audit and fix all pages for WCAG 2.1 compliance: proper ARIA labels, keyboard navigation, focus management, color contrast ratios (deep blue #003366 on white meets AA), screen reader support, and skip-to-content links. Verify TrustBar SSL/UAE/WCAG badges are accurate.

As an admin I want to be able to use the backend API for dashboard analytics — GET /admin/analytics returning KPIs: total users, new registrations (period), total uploads, pending moderation count, approved/rejected counts, top liked images, engagement trends. Aggregated from MySQL with caching.