As a frontend developer, I want to implement the PrimePregnancy design system so that all pages reflect the exact colour palette (Deep Plum #673147, Soft Lavender #E6E6FA, Warm Peach #FFDAB9, Gentle Mint #98FF98, Light Sky Blue #87CEFA, Gold #FFD700), typography (Inter font family), spacing tokens, and global component styles (buttons, chips, cards, shadows, glassmorphism) as defined in the SRD and mock-design pages. Remove any scaffold pages not required by the user flows (e.g. generic welcome/overview pages that do not map to a designed page). This task must be completed independently before all other frontend page tasks begin.
As a user I want to be able to use the backend API for registration, login, and onboarding so that my account and due-date profile are securely persisted. Build FastAPI endpoints: POST /auth/register, POST /auth/login (JWT), POST /auth/logout, POST /onboarding/profile (due date, pregnancy week calculation). Apply GDPR-compliant data encryption and UK locale defaults.
As a user I want to be able to use the frontend Appointments page so that I can view, book, and manage my antenatal appointments with healthcare providers. Implement the Appointments page (v6) based on the existing JSX design โ upcoming appointments list, calendar view, past appointments, healthcare provider cards, and book appointment modal.
As a user I want to be able to use the frontend Library page so that I can browse, search, and save pregnancy articles and video resources relevant to my current week. Implement the Library page (v3) based on the existing JSX design โ hero search bar, category filter bar, featured article card, article grid, weekly guide strip, video resources row, saved articles widget, and newsletter signup.
As a user I want to be able to use the frontend Timeline page so that I can explore my baby's week-by-week growth interactively. Implement the Timeline page (v3) based on the existing JSX design โ scrollable 3D glowing orb timeline, week detail panel with baby size comparisons, milestone animations, floating particles, and smooth colour transitions as per the Signature Design Concept.
As a user I want to be able to use the frontend Reminders page so that I can set, view, and manage reminders for appointments, medication, hydration, and exercise. Implement the Reminders page (v3) based on the existing JSX design โ reminder list, category filters, add/edit reminder forms, status chips, and British date/time formatting (GMT).
As a user I want to be able to use the backend API for the library and tips so that I can fetch articles, video resources, and personalised weekly tips filtered by pregnancy week and category. Build FastAPI endpoints: GET /library/articles, GET /library/articles/{id}, GET /library/videos, GET /tips/daily, GET /tips/weekly/{week_number}. Support bookmarking: POST/DELETE /library/saved.
As a user I want to be able to use the backend API for the dashboard so that my progress summary, upcoming reminders, and daily tips are served in one response. Build FastAPI endpoint: GET /dashboard/summary โ returning pregnancy week, progress %, next appointment, stats (weight, hydration, symptoms), and today's tip. Support all three personas.
As a user I want to be able to use the backend API for my profile so that I can view and update personal details such as due date, weight, and symptoms. Build FastAPI endpoints: GET /profile, PATCH /profile (due date, weight, symptoms, notification preferences). Ensure GDPR-compliant data handling and encryption at rest.
As a user I want to be able to use the frontend Messaging page so that I can securely send and receive messages with my healthcare provider. Implement the Messaging page (v3) based on the existing JSX design โ conversation thread, message composer, provider list, read receipts, and Deep Plum/Lavender chat bubble styling.
As a user I want to be able to use the backend API for appointments so that I can book, view, update, and cancel antenatal appointments. Build FastAPI endpoints: GET /appointments, POST /appointments, PATCH /appointments/{id}, DELETE /appointments/{id}, GET /appointments/providers. Support British date formatting and GMT timezone.
As a user I want to be able to use the frontend Onboarding page so that I can enter my due date and pregnancy details to personalise my experience. Implement the Onboarding page (v3) based on the existing JSX design โ due date input, week calculation, profile setup steps, and navigation to the Dashboard on completion.
As a user I want to be able to use the backend API for pregnancy tracking so that my week-by-week progress, baby size data, and milestones are persisted and retrievable. Build FastAPI endpoints: GET /timeline/weeks, GET /timeline/week/{week_number} (baby size comparison, milestone notes, tips), PATCH /profile/due-date.
As a user I want to be able to use the backend API for messaging so that I can securely exchange messages with my healthcare provider. Build FastAPI endpoints: GET /messages/conversations, GET /messages/conversations/{id}, POST /messages/send, PATCH /messages/{id}/read. Apply end-to-end encryption and GDPR data retention policies.
As a healthcare provider I want to be able to use the backend API for the patient dashboard so that I can view a list of my patients and access their individual progress profiles. Build FastAPI endpoints: GET /provider/patients, GET /provider/patients/{patient_id}/profile, POST /provider/patients/{patient_id}/advice. Role-based access control to restrict provider-only endpoints.
As a user I want to be able to use the backend API for reminders so that I can create, update, delete, and retrieve reminders for appointments, medication, hydration, and exercise. Build FastAPI endpoints: GET /reminders, POST /reminders, PATCH /reminders/{id}, DELETE /reminders/{id}. Support category types and GMT-based scheduling.
As a healthcare provider I want to be able to use the frontend Patient Profile page so that I can review a patient's pregnancy progress and add advice notes. Implement the Patient Profile page (v3) based on the existing JSX design โ patient overview card, progress timeline, advice notes panel, and link through to the Messaging page.
As a user I want to be able to use the frontend Login page so that I can sign in to PrimePregnancy. Implement the Login page (v4) based on the existing JSX design โ including ambient orb background, particle field, glassmorphism form card, role selector tabs (Expecting Mum / Partner / Healthcare), email/password fields, Deep Plum branding, Soft Lavender accents, NHS badge for healthcare tab, social proof strip, 'Forgot password' link, and navigation to Onboarding or Dashboard on success. Ensure British English copy throughout.
As a user I want to be able to use the frontend Profile page so that I can view and update my personal details including due date, weight, symptoms, and preferences. Implement the Profile page (v3) based on the existing JSX design โ glassmorphism cards with backdrop-filter blur, ambient animated orb background, floating particle field, functional React state for notification toggles and form edit mode, interactive Growth Timeline section with glowing pulsing orbs (weeks 4โ40), micro-animations (card slide-up, button glow, stat card hover), hero banner with animated orbs, and updated copyright 2026. Profile card, editable fields (due date, weight, symptoms), notification preferences, connected healthcare providers, and GDPR data settings.
As a user I want to be able to use the frontend Dashboard page so that I can view my pregnancy progress, upcoming reminders, daily tips, and key stats in one place. Implement the Dashboard page (v2) based on the existing JSX design โ progress ring, stats cards, growth timeline widget, upcoming reminders, daily tip banner, quick actions, and recommended articles. Supports all three personas (Primary User, Partner, Healthcare Provider).
As a user I want to be able to use the frontend Tips page so that I can browse daily and weekly pregnancy tips personalised to my stage. Implement the Tips page (v3) based on the existing JSX design โ daily tip banner, weekly guide sections, category filters, and tip cards with Deep Plum and Warm Peach accents.
As a frontend developer I want to wire all page components to their respective backend API endpoints so that data flows correctly across the app. Set up Axios/fetch service layer, authentication token handling (JWT refresh), error boundaries, loading states, and British locale formatting (dates, currency) across all pages. Covers Dashboard, Timeline, Reminders, Library, Tips, Appointments, Profile, Messaging, and Patient Profile pages.
As a user I want to be able to use the AI API for personalised tips and responses so that I receive pregnancy advice tailored to my specific week and health profile. Integrate GPT-5.2 via LiteLLM for user-friendly tip generation and Claude for academic/detailed content. Use Langchain for prompt chaining. Expose POST /ai/tips/personalised and POST /ai/chat endpoints with LLM routing logic.

No comments yet. Be the first!