As a developer, I want to implement the global theme, color tokens, typography, and design system from the mock-design pages so that all pages look identical to the designed mockups. This includes setting up CSS custom properties for the dark forest green color palette (primary: #2D6A4F, primary_light: #74C69D, bg: #0A1610/0F1F17, surface, text, text_muted, border), Inter font family, glassmorphism utilities, animation keyframes, and shared component primitives (buttons, badges, cards, inputs). Remove any pages not present in the design scope. This task is independent and must be completed first.
As a specialist, I want to use the frontend Portfolio page so that I can upload and manage portfolio images, create project case studies with before/after comparison sliders, add project descriptions, and tag projects. Implement based on Portfolio (v1) JSX design. Includes image gallery grid, project card editor, before/after slider component, tag management, and upload controls. Links from: Specialist Dashboard, Profile Editor.
As a guest, I want to use the frontend Signup page so that I can create an account, select my role (Client or Specialist), and complete email verification. Implement based on Signup (v2) JSX design. Includes role selection step, form fields, OAuth signup, email verification prompt, and terms acceptance. Links from: Homepage, Service Page. Links to: Login, Client Dashboard, Specialist Dashboard.
As an admin, I want to use the frontend Content Moderation page so that I can review and moderate pending profiles, reviews, and portfolio images, approve or reject content, escalate items, and manage reported content. Implement based on Content Moderation (v2) JSX design. Includes AdminTopBar, AdminSidebar, ModerationHeader, ModerationStatsBar (4 KPI cards), ModerationQueueTabs (Alle/Profielen/Reviews/Portfolio/Meldingen), ModerationItemsTable with bulk actions, ModerationDetailPanel slide-in, and BulkActionsBar. Links from: Admin Dashboard.
As a specialist, I want to use the frontend Specialist Dashboard so that I can view an overview of my earnings, pending bookings, messages, profile completeness, and quick stats. Implement based on Specialist Dashboard (v2) JSX design. Includes KPI stat cards, recent bookings list, earnings chart, pending actions panel, and navigation to sub-sections. Links from: Login. Links to: Profile Editor, Services Manager, Bookings Manager, Messages, Earnings.
As a client, I want to use the frontend Booking page so that I can complete the full booking workflow: select date/time, enter service address, add notes or photos, review order summary, and proceed to payment. Implement based on Booking (v2) JSX design. Includes multi-step form, calendar picker, address input, notes/photos upload, cost summary, deposit vs full payment toggle. Links from: Service Page. Links to: Messages, Client Dashboard.
As a guest or client, I want to use the frontend Specialist Profile page so that I can view a specialist's full profile including bio, portfolio gallery, services, reviews, ratings, availability, and save them as a favorite. Implement based on Specialist Profile (v2) JSX design. Includes cover image, avatar, stats, service listings, portfolio section, before/after slider, reviews, and booking CTA. Links from: Marketplace, Search Results. Links to: Service Page, Messages, Booking.
As an admin, I want to use the frontend User Management page so that I can view all users, approve specialist accounts, suspend or block accounts, filter by role/status, and search for specific users. Implement based on User Management (v2) JSX design. Includes data table with role/status filters, search, approve/suspend/delete actions, user detail drawer, and bulk action support. Links from: Admin Dashboard.
As an admin, I want to use the frontend Finance page so that I can view the platform's transaction overview, adjust commission rates, see payout summaries, and review financial analytics. Implement based on Finance (v2) JSX design. Includes commission rate slider with impact calculator, transaction history table, revenue breakdown chart, payout queue, and category commission overrides. Links from: Admin Dashboard.
As a guest or client, I want to use the frontend Search Results page so that I can view filtered specialist results, apply advanced filters (price range, rating, tags, service category, distance), and sort results. Implement based on Search Results (v1) JSX design. Includes results list/grid toggle, active filter chips, empty state, and loading skeleton. Links from: Marketplace, Homepage search. Links to: Specialist Profile.
As a specialist, I want to use the frontend Services Manager page so that I can add, edit, and delete my service listings including title, description, pricing model (fixed/hourly/starting from), duration, add-ons, and gallery images. Implement based on Services Manager (v2) JSX design. Includes services list with status indicators, create/edit modal form, pricing fields, gallery upload, and add-on builder. Links from: Specialist Dashboard. Links to: Service Page (preview).
As a specialist, I want to use the frontend Profile Editor page so that I can update my professional profile including photo, bio, city, service radius, years of experience, certifications, languages, and service categories. Implement based on Profile Editor (v2) JSX design. Includes tabbed form sections, image upload, availability calendar, and save/publish controls. Links from: Specialist Dashboard. Links to: Specialist Profile (preview).
As a client, I want to use the frontend Client Dashboard so that I can view my active and past bookings, access messages, manage favorites, leave reviews, and access account settings. Implement based on Client Dashboard (v2) JSX design. Includes bookings summary cards, status filters, review prompt for completed bookings, favorites grid, and quick-action shortcuts. Links from: Login. Links to: Booking, Messages, Specialist Profile.
As a guest or client, I want to use the frontend Service Page so that I can view full details of a service offering including description, pricing model, duration, add-ons, gallery, cancellation policy, and initiate a booking. Implement based on Service Page (v2) JSX design. Includes pricing breakdown, add-on selector, gallery, specialist card, and Book Now CTA. Links from: Specialist Profile. Links to: Booking, Signup.
As an admin, I want to use the frontend Admin Dashboard page so that I can view platform analytics (users, bookings, revenue, conversion rates), see KPI stat counters, review revenue charts, and navigate to all admin sub-sections. Implement based on Admin Dashboard (v1) JSX design. Includes KPI cards with count-up animation, revenue/commission area chart, recent activity feed, user management table preview, and disputes queue preview. Links from: Login. Links to: User Management, Content Moderation, Disputes, Finance.
As a guest, I want to use the frontend Homepage so that I can explore the platform, interact with the living plant wall hero, browse service categories, view featured specialists, see how it works, read testimonials, and navigate to signup or login. Implement based on the existing Homepage (v2) JSX design including: NavBar, HeroPlantWall with animated plant wall and parallax, ServiceCategoryPlants horizontal scroll, HowItWorks 3-step section, FeaturedSpecialists 3x2 grid, TrustStats counter band, Testimonials carousel, SpecialistCTA split banner, LatestPortfolioWork masonry grid, and Footer. Links to: Marketplace, Signup, Login, Specialist Profile.
As a guest or client, I want to use the frontend Marketplace page so that I can browse and discover phytodesign specialists with filters (city, distance, price, rating, category, availability, verified) and sorting options. Implement based on Marketplace (v2) JSX design. Includes specialist card grid, filter sidebar, sort controls, and pagination. Links from: Homepage, NavBar. Links to: Specialist Profile, Search Results.
As a specialist, I want to use the frontend Earnings page so that I can view my payment history, track pending payouts, see platform commission deductions, download invoices/receipts, and monitor earnings trends. Implement based on Earnings (v2) JSX design. Includes earnings chart, transactions table with filters, payout schedule, commission breakdown, and invoice download. Links from: Specialist Dashboard.
As an admin, I want to use the frontend Disputes page so that I can view all open disputes between clients and specialists, review dispute details, take resolution actions (approve refund, reject, escalate), and view resolved dispute history. Implement based on Disputes (v2) JSX design. Includes disputes list with urgency badges, detail panel with full dispute context, message thread excerpt, booking reference, and resolution action buttons. Links from: Admin Dashboard.
As a user, I want to use the frontend Login page so that I can sign in with email/password or OAuth (Google/Apple) and be redirected to my role-specific dashboard. Implement based on Login (v2) JSX design. Includes form validation, remember me, forgot password link, OAuth buttons, and role-aware redirect logic. Links from: Homepage, Signup. Links to: Client Dashboard, Specialist Dashboard, Admin Dashboard.
As a specialist, I want to use the frontend Bookings Manager page so that I can view all incoming booking requests, confirm or decline them, view booking details, and update booking statuses. Implement based on Bookings Manager (v2) JSX design. Includes bookings table with status filters (pending/confirmed/scheduled/completed/cancelled/dispute), detail drawer, action buttons (confirm/decline), and calendar view toggle. Links from: Specialist Dashboard. Links to: Messages.
As a client or specialist, I want to use the frontend Messages page so that I can send and receive real-time messages, share images/files, and view full conversation history with all my contacts. Implement based on Messages (v2) JSX design. Includes conversation list sidebar, chat window with message bubbles, file/image attachment, message input, and notification badges. Links from: Client Dashboard, Specialist Dashboard, Booking. Links to: Specialist Profile, Booking.
As a user, I want to use the backend API for authentication so that I can register, login, reset password, verify email, select role, and manage my session securely. Implement FastAPI endpoints: POST /auth/register, POST /auth/login, POST /auth/logout, POST /auth/refresh, POST /auth/forgot-password, POST /auth/reset-password, GET /auth/verify-email. Includes JWT tokens, role-based access control, OAuth integration (Google/Apple), and bcrypt password hashing. MySQL user schema.
As a specialist, I want to use the backend file upload API so that I can upload profile photos, portfolio images, and case study files that are stored securely in cloud storage and served via CDN. Implement S3-compatible cloud storage integration (AWS S3 or compatible). FastAPI endpoints: POST /upload/image, POST /upload/file with presigned URL generation. Includes file type validation, size limits, CDN URL generation, and cleanup for orphaned files.
As a user, I want the Login and Signup pages to be fully connected to the backend Auth API so that I can register, login, and be redirected to the correct dashboard based on my role. Integrate Login (v2) and Signup (v2) pages with POST /auth/login, POST /auth/register endpoints. Includes JWT token storage, role-based redirect, error handling, OAuth flow, and loading states.
As a specialist, I want to use the backend API for profile management so that I can create, update, and retrieve my professional profile including bio, location, certifications, services, and availability. FastAPI endpoints: GET/PUT /specialists/{id}, POST /specialists, GET /specialists (list with filters), GET /specialists/{id}/portfolio, PUT /specialists/{id}/availability. Includes cloud storage integration for profile photos and cover images.
As a client or specialist, I want to use the backend API for messaging so that I can send and receive real-time messages, share files/images, and retrieve conversation history. FastAPI WebSocket endpoint for real-time chat + REST endpoints: GET /conversations, GET /conversations/{id}/messages, POST /conversations/{id}/messages, POST /conversations (create new). MongoDB for message storage. Includes file/image upload to cloud storage.
As a guest or client, I want to use the backend API for search so that I can search and filter specialists by city, distance, price range, rating, service category, tags, availability, and verified status with various sort options. FastAPI endpoints: GET /search/specialists with query params for all filters and sort options. Includes geolocation distance calculation, full-text search, and filter combinations.
As a client, I want to use the backend API for bookings so that I can create a booking, select date/time, add address/notes/photos, make payment/deposit, and track booking status changes. FastAPI endpoints: GET/POST /services, GET /services/{id}, POST /bookings, GET /bookings/{id}, PUT /bookings/{id}/status, GET /bookings (list with filters). Includes booking status workflow: pending → confirmed → scheduled → in progress → completed → cancelled/dispute.
As a client or specialist, I want the Messages page to be connected to the real-time backend so that I can send and receive messages instantly with file sharing support. Connect Messages (v2) page to WebSocket /ws/chat and REST conversation endpoints. Includes real-time message delivery, connection management, typing indicators, file upload to cloud storage, and notification badge updates.
As a user, I want to use the AI assistant in the messaging system so that I get smart reply suggestions, automated support responses, and helpful prompts when composing messages. Integrate GPT-based AI (via Litellm routing) to provide: smart reply suggestions in the Messages page, automated support chatbot for common queries, and booking inquiry assistance. FastAPI endpoint: POST /ai/suggest-reply, POST /ai/support-chat. Uses Litellm for LLM routing.
As a client, I want to use the backend API for reviews so that I can leave a star rating, written feedback, and photos after a completed job, and view aggregated ratings on specialist profiles. FastAPI endpoints: POST /reviews, GET /reviews/{specialistId}, PUT /reviews/{id}/response (specialist reply), GET /reviews (admin list with moderation). Includes verified job badge logic, average rating calculation.
As a guest or client, I want the Marketplace and Search Results pages to display real data from the backend so that I can search, filter, and browse specialists with live results. Connect Marketplace (v2) and Search Results (v1) pages to GET /search/specialists. Includes filter state management, debounced search input, pagination, loading skeletons, and empty states.
As a client, I want to use the backend API for payments so that I can make secure online payments, deposits, and have the platform automatically handle escrow and commission deductions upon job completion. FastAPI endpoints: POST /payments/initiate, POST /payments/confirm, GET /payments/history, GET /specialists/{id}/earnings, POST /payouts/request. Integrates payment gateway (Stripe), escrow logic, automatic platform commission calculation, invoice generation.
As a user, I want to use the backend API for notifications so that I receive in-app and email notifications for new booking requests, confirmations, new messages, and reviews. FastAPI endpoints: GET /notifications, PUT /notifications/{id}/read, PUT /notifications/read-all. Includes email notification service (SMTP/SendGrid), in-app notification storage in MySQL, and WebSocket push for real-time in-app alerts.
As an admin, I want to use the backend API for platform management so that I can manage users, moderate content, resolve disputes, view transactions, and adjust commission rates. FastAPI endpoints: GET/PUT/DELETE /admin/users, POST /admin/users/{id}/suspend, GET /admin/content (moderation queue), PUT /admin/content/{id}/approve|reject|escalate, GET/PUT /admin/disputes, GET /admin/transactions, GET/PUT /admin/commission-settings. Role-guard middleware for admin-only access.
As a specialist, I want the Profile Editor, Services Manager, Portfolio, Bookings Manager, and Earnings pages to be connected to the backend so that I can manage my full specialist workflow. Connect Profile Editor (v2), Services Manager (v2), Portfolio (v1), Bookings Manager (v2), and Earnings (v2) pages to specialist API endpoints. Includes image upload, form validation, booking status updates, and earnings chart data.
As an admin, I want the Admin Dashboard, User Management, Content Moderation, Disputes, and Finance pages to display real platform data and execute management actions. Connect Admin Dashboard (v1), User Management (v2), Content Moderation (v2), Disputes (v2), and Finance (v2) pages to /admin/* API endpoints. Includes data tables, action buttons, modals, real-time stats, and form submissions for commission settings.
As a client, I want the Service Page, Booking Page, and payment flow to be fully connected to the backend so that I can select a service, create a booking, make a payment, and receive confirmation. Connect Service Page (v2) and Booking (v2) to POST /bookings and POST /payments/initiate. Includes Stripe payment integration, booking status polling, confirmation screen, and error handling.
No page designs yet.
The Design Agent will generate JSX pages automatically after user flows are created.
No user flows yet.
The User Flow Agent will generate per-persona navigation diagrams after SRD updates.
No comments yet. Be the first!