As an admin I want to be able to use the backend API to manage portfolio projects (create, update, delete) and as a user to retrieve them. Implement FastAPI endpoints: GET /portfolio (list projects with category filter), GET /portfolio/{id} (project detail), POST /portfolio (admin: create), PATCH /portfolio/{id} (admin: update), DELETE /portfolio/{id} (admin: delete). Support image URL storage and project metadata (title, category, location, description, year, area sqft, budget range).
As a user I want to be able to use the backend API to create, retrieve, update, and cancel consultation bookings. Implement FastAPI endpoints: POST /bookings (create booking), GET /bookings (list all, admin), GET /bookings/{id} (detail), PATCH /bookings/{id} (update/cancel), GET /availability (available time slots), POST /availability (admin: add/edit slots). Include input validation with Pydantic and MySQL persistence via Alembic migrations.
As a user I want to be able to use the backend API to retrieve service descriptions and as an admin to manage them. Implement FastAPI endpoints: GET /services (list all services), GET /services/{id} (service detail), POST /services (admin: create), PATCH /services/{id} (admin: update), DELETE /services/{id} (admin: delete). Service model includes title, category (residential/commercial/consultation), description, deliverables list, and pricing. Apply Pydantic validation and Alembic migrations.
As a user I want to be able to use a frontend that matches the wild-luxury brand identity. Implement the global color palette (#F5F5F5, #EAE0D5, #2C2C2C, #C19A6B, #AFAFAF), typography (Cormorant Garamond / Playfair Display), shared CSS variables/design tokens, and global layout structure. Remove any scaffold pages not required by the SRD (e.g. generic welcome, signup). Ensure base layout components (NavBar shell, Footer shell) are in place. This task must be completed before any page-level UI tasks begin.
As a user I want to be able to use the Home page to explore the wild-luxury studio, its services, and portfolio highlights. Implement the full Home page based on the existing Home (v2) JSX design including: NavBar, Hero section (cinematic full-viewport with parallax), StudioIntro, InteractiveShowcase (3D room with hotspots), ServicesOverview, PortfolioTeaser, ProcessTimeline, Testimonials carousel, BookingCTA, InstagramFeed strip, and Footer. The page should navigate to /Services, /Portfolio, /Booking, and /Login.
As a user I want to be able to use the Portfolio page to browse past residential and commercial interior design projects. Implement the full Portfolio page based on the existing Portfolio (v2) JSX design with PortfolioHero (cinematic 100vh hero), FilterBar (sticky category tabs: ALL / RESIDENTIAL / COMMERCIAL / HOSPITALITY / RETAIL), ProjectGrid (masonry/editorial 3-column grid with hover overlays), FeaturedCaseStudy editorial spotlight, ProcessStrip, TestimonialsCarousel, AwardsCredentials strip, and ConsultationCTA. Links from Home (PortfolioTeaser) and Services flow here.
As a user I want to be able to use the backend API to securely process consultation booking payments via Stripe. Implement FastAPI endpoints: POST /payments/create-intent (create Stripe PaymentIntent), POST /payments/confirm (confirm payment, update booking status), GET /payments (admin: list transactions), GET /payments/{id} (transaction detail), POST /payments/{id}/refund (admin: issue refund). Ensure PCI DSS compliance by never storing raw card data; use Stripe tokens only.
As a user I want to be able to use the Login page to sign in as a homeowner, business owner, or admin. Implement the Login page based on the existing Login (v2) JSX design with email/password fields, a gold-accented submit button, and post-login routing: clients are redirected to Home or Booking flow, admins to the Dashboard. Apply the wild-luxury theme (luxury serif typography, warm beige surface, gold accents). Integrate with existing authentication backend.
As a user I want to be able to use the Services page to view detailed descriptions of Residential Design, Commercial Design, and Consultation & Planning offerings. Implement the full Services page based on the existing Services (v2) JSX design with luxury card layouts per service tier, deliverables lists, ProcessTimeline section, ServiceComparison tiers (Essence / Prestige / Bespoke), MaterialsAndFinishes swatch gallery, and a 'Book a Consultation' CTA linking to /Booking. Both Homeowners and Business Owners flow into this page from Home.
As an admin I want to be able to use the Dashboard overview page to get a high-level view of bookings, payments, and portfolio activity. Implement the admin Dashboard page based on the existing Dashboard (v2) JSX design with: TopBar, Sidebar navigation, WelcomeBanner, StatsOverview cards (total bookings, revenue, upcoming consultations, active portfolio items), BookingsTable, PortfolioManager, PaymentsPanel, CalendarWidget, and Footer. This is the landing page post-login for admins.
As a user I want to be able to use the Booking page to schedule a consultation, select a time slot, and enter personal or corporate details before payment. Implement the multi-step Booking page based on the existing Booking (v2) JSX design: Step 1 – service selection, Step 2 – calendar/time slot picker, Step 3 – contact/corporate details form, Step 4 – payment (Stripe integration). Both Homeowners and Business Owners flow into this page from Services or Home CTA. Apply wild-luxury theme with gold accent progress steps.
As an admin I want to be able to use the Payments page to view and manage all payment transactions from client consultations. Implement the admin Payments page based on the existing Payments (v2) JSX design with a transaction table (Transaction ID, Client, Service, Date, Amount, Method, Status), filter by date range and status, export to CSV, inline accordion row detail expansion, refund action, and summary stats strip (Total Revenue, Successful Payments, Refunds Issued). Flows from Dashboard in the admin user journey.
As a user I want to be able to use the Confirmation page to view a summary of my booked consultation after successful payment. Implement the Confirmation page based on the existing Confirmation (v2) JSX design displaying booking reference number, selected time slot, service type, client name, and an 'Add to Calendar' button. Include a warm gold success indicator and a link back to Home. This is the final step in both Homeowner and Business Owner flows.
As an admin I want to be able to use the Bookings page to view, edit, and manage all consultation appointments and available time slots. Implement the admin Bookings page based on the existing Bookings (v2) JSX design with a searchable/filterable table of all bookings, status badges (confirmed, pending, cancelled), ability to edit or cancel appointments, and a time slot availability manager (calendar view). Flows from Dashboard in the admin user journey.

No comments yet. Be the first!