RedScan

byNaresh Boya

You are an expert senior mobile engineer and backend architect. We are building an MVP for a phone + test strip blood analyzer. The user puts a drop of blood on a disposable paper test strip; the mobile app uses the phone camera to read the strip and show: Blood group (ABO + Rh) Hemoglobin estimate (anemia screening) Basic explanations and disclaimers Your task: design and implement a production-ready MVP with: React Native mobile app (TypeScript preferred). Custom Node.js backend (Express or Fastify) with REST API. Clean architecture, good UX, and clear code that can be extended later. Product requirements Platforms: Start with Android; code should be easy to run on iOS later. Stack: React Native (TypeScript) + Node.js (TypeScript) backend. Core user flows: Onboarding & Auth Simple sign-up / login using email/password (JWT-based auth). Basic profile screen: name, age, sex (optional), saved to backend users table. Show a clear consent & disclaimer screen: “This app is a screening tool, not a substitute for lab tests or medical advice.” Home Big “Start Test” button. List of past tests (date, blood group, Hb value). Test Wizard Multi-step guided flow: “Prepare” – safety and preparation instructions (handwash, clean surface, good light). “Prick & Apply” – diagram/instructions to prick finger and apply 1 drop of blood to the strip’s sample zone. “Wait” – show a countdown timer (e.g., 5 minutes). “Capture” – open camera with: An overlay frame to align the test strip. Real-time lighting check (warn if too dark or too bright). Button to capture image. “Processing” – show spinner while image is uploaded and analyzed. After processing, navigate to Results screen. Results Display: Blood group: large text (e.g., “B+”). Hemoglobin: numeric value with unit (e.g., “11.2 g/dL”) and status: “Low / Normal / High”. Short, plain-language explanation of what the result means. Clear disclaimer: “Not for making treatment or transfusion decisions without confirmation from a certified lab.” Button: “Save & Continue”. History List of previous tests with date/time, blood group, Hb. Tap to view full result details. Option to export as PDF (simple layout: user name, date, results, disclaimers). Option to share PDF via WhatsApp/Email (using React Native share APIs). Education / Info 2–3 static screens: “What is blood group?” “What is hemoglobin and anemia?” “Safety & disclaimers.” Content can be hardcoded or fetched from backend content endpoint. Data model (backend, e.g., PostgreSQL or MongoDB): users table/collection: id (UUID or auto-inc) name (string) age (int, optional) sex (string, optional) email (string, unique) password_hash (string) created_at (timestamp) tests table/collection: id user_id (FK) timestamp (timestamp) blood_group (string, e.g., “B+”) hemoglobin_gdl (numeric/double) hemoglobin_status (string: “low” | “normal” | “high”) image_url (string, optional, link to object storage) confidence_scores (JSON: { "bloodGroup": 0.96, "hemoglobin": 0.89 }) device_info (JSON: model, OS version, app version) calibrations table/collection: id version (int) params_json (JSON) – calibration parameters for Hb and blood group logic. content table/collection (optional): id, title, body, updated_at. Backend API design (Node.js + Express/Fastify): Use TypeScript, structured with routers/controllers/services. Auth: POST /auth/signup – email, password, name → create user, return JWT. POST /auth/login – email, password → return JWT. Protected routes use Authorization: Bearer <token> header. Users: GET /users/me – get current user profile. PUT /users/me – update profile (name, age, sex). Tests: GET /tests – list current user’s tests (paginated). GET /tests/:id – get details of a specific test. POST /tests – create test record (called after analysis). Analysis: POST /analyze – multipart form upload: image (file) deviceInfo (JSON string) Returns: ```json { "bloodGroup": "B+", "hemoglobinGdl": 11.2, "hemoglobinStatus": "low", "confidenceScores": { "bloodGroup": 0.96, "hemoglobin": 0.89 } } ``` Content: GET /content – list education articles (id, title). GET /content/:id – get full article. Calibration: GET /calibrations/latest – return latest calibration params for the app. Image handling: Mobile app captures image and uploads it directly to POST /analyze as multipart/form-data. Backend: Saves image temporarily, runs (or calls) analysis logic, then: Optionally stores image in object storage (e.g., S3-compatible) and saves image_url in tests. For MVP, analysis can be a placeholder function that returns deterministic/mock results based on simple rules, but must be structured so real image-processing/ML can be plugged in later. Mobile app (React Native) requirements: Use TypeScript. State management: React Query (for server state) + Zustand or Context for global UI state (your choice, but keep it simple and consistent). Navigation: React Navigation (stack + bottom tabs). Key libraries: @react-navigation/native, @react-navigation/stack react-native-camera or expo-camera (if using Expo) axios or fetch wrapper for API calls react-native-fs or equivalent for local file handling react-native-share for sharing PDFs react-native-pdf / expo-pdf or a simple HTML-to-PDF approach for PDF export Implement: Auth screens (login/signup). Home screen with test list and “Start Test” button. Test wizard screens (steps, camera, overlay, timer). Results screen bound to analysis API response. History list and detail screen. Education/info screens. Basic settings screen (logout, app version, links to privacy policy & terms). Image capture & preprocessing (mobile): Show live camera preview with: An overlay rectangle to guide strip alignment. Simple brightness estimation from preview frames; if too low/high, show a warning (“Too dark – add more light” / “Too bright – reduce glare”). Allow retaking the image if the user is not satisfied. Compress image reasonably (e.g., JPEG, max width ~1280–1920) before upload to reduce bandwidth. UI/UX guidelines: Clean, medical/health feel: white background, primary color (e.g., blue/teal), large readable fonts. Clear icons and simple language; avoid jargon. All medical claims must be accompanied by disclaimers. Support at least English; structure code so additional languages can be added later (i18n-ready). Architecture & code quality: Mobile: Feature-based folder structure (e.g., features/auth, features/test, features/history, features/education). Separate: UI components Screens API services Types/models Backend: Clear separation: routes, controllers, services, models, middlewares. Use environment variables for DB connection, JWT secret, storage config. Basic input validation (e.g., using zod or joi). Basic error handling middleware (standard error responses). Write: Clear comments for non-trivial logic. User-friendly error messages on mobile for network failures, camera errors, analysis failures. Include: A simple onboarding/tutorial overlay the first time the user opens the app. Security & privacy: Passwords stored as hashes (e.g., bcrypt). JWT-based auth with reasonable expiry. Ensure users can only access their own tests and profile. Add a basic privacy policy screen (text can be placeholder). Do not log sensitive health data in plain text logs. Deliverables from you: Proposed folder structure for: React Native app. Node.js backend. Key code files: Mobile: App.tsx (root, navigation setup, theme). Auth screens (LoginScreen.tsx, SignupScreen.tsx). Home screen (HomeScreen.tsx). Test wizard screens (TestPrepareScreen.tsx, TestCaptureScreen.tsx, etc.). Results screen (ResultsScreen.tsx). History list & detail screens. Education screens. Services: api.ts (base client, interceptors for auth). authApi.ts, testApi.ts, contentApi.ts. pdfService.ts (generate or prepare PDF content). Models/types: User, TestResult, CalibrationParams, API response types. Backend: src/index.ts (Express/Fastify app setup). Route files: auth.routes.ts, test.routes.ts, analyze.routes.ts, content.routes.ts, calibration.routes.ts. Controller/service files for each route group. DB models/schemas (e.g., using Prisma, Sequelize, or Mongoose). Auth middleware (JWT verification). Placeholder analyze.service.ts with a function that: Takes image buffer/path. Returns mock analysis result in the required JSON shape. Example database schema (SQL or Mongoose schemas) for users, tests, calibrations, content. Example environment variables list for backend (.env.example). Short README for: How to install and run the backend locally. How to install and run the mobile app locally. How to configure API base URL in the app. Prioritize: A working, end-to-end flow from login → test → result → history. Clean, understandable code over clever optimizations. Clear separation between UI and backend logic so the analysis implementation can be swapped later (e.g., from simple mock to real image-processing/ML service). Assume this is an MVP that will be tested with real users and real strips in a pilot, so code quality and clarity matter, but we don’t need enterprise-scale complexity yet.

LandingEducationProfileContentHomeTestWizardUsersAdminDashboardHistorySignupResultsCalibrationsLogin
Landing

Comments (0)

No comments yet. Be the first!

Project Tasks

106
#1

Database Models & Migrations

Backlog

Design and implement database models and migrations for users, tests, calibrations, and content.

AI 70%
Human 30%
High Priority
2 days
Data Engineer
#8

Implement CTASection for Landing Page

Backlog

As a frontend developer, implement the CTASection for the Landing page. This section includes a motion-enhanced call-to-action with animations using the 'motion' library. It features a title, subtitle, and two action buttons linking to the Signup and Education pages. Ensure the animations for opacity and vertical movement are smooth and responsive. This section is accessible to General Users. Page access: General User only.

AI 90%
Human 10%
High Priority
1 day
Frontend Developer
#9

Implement FeaturesSection for Landing Page

Backlog

As a frontend developer, implement the FeaturesSection for the Landing page. This section displays a grid of feature cards with icons, titles, and descriptions. Each card uses motion animations for entry effects. Ensure the animations are staggered for a dynamic appearance. This section is accessible to General Users. Page access: General User only.

AI 90%
Human 10%
High Priority
1.5 days
Frontend Developer
#10

Implement Footer for Landing Page

Backlog

As a frontend developer, implement the Footer for the Landing page. This section includes brand information, navigation links, and a disclaimer. Ensure the links are conditionally displayed based on user access context. This component may already exist from previous pages. Page access: General User only.

AI 85%
Human 15%
Medium Priority
0.5 days
Frontend Developer
#11

Implement HeroSection for Landing Page

Backlog

As a frontend developer, implement the HeroSection for the Landing page. This section features complex animations using the 'motion' library, including looping animations and responsive design considerations. It introduces the product with a dynamic title and visual effects. This section is accessible to General Users. Page access: General User only.

AI 95%
Human 5%
High Priority
2 days
Frontend Developer
#12

Implement HowItWorksSection for Landing Page

Backlog

As a frontend developer, implement the HowItWorksSection for the Landing page. This section outlines the steps for using the product with motion-enhanced step cards. Each step card includes a number, title, and description, with animations for entry effects. This section is accessible to General Users. Page access: General User only.

AI 90%
Human 10%
High Priority
1.5 days
Frontend Developer
#13

Implement Navbar for Landing Page

Backlog

As a frontend developer, implement the Navbar for the Landing page. This component includes a logo, navigation links, and a responsive burger menu for mobile views. Ensure the links are conditionally displayed based on user access context. This component may already exist from previous pages. Page access: General User only.

AI 85%
Human 15%
Medium Priority
0.5 days
Frontend Developer
#19

Implement HomeHeroAnimation for Home Page

Backlog

As a frontend developer, implement the HomeHeroAnimation section using React and motion library. This section includes a complex SVG animation with parallax effects and tooltips that appear on mouse hover. The animation involves multiple layers with different scroll-based transformations and opacity animations. Ensure the tooltip follows the mouse cursor and displays relevant information. This section is accessible to General Users only. Page access: General User only.

AI 90%
Human 10%
High Priority
2 days
Frontend Developer
#20

Implement HomeHeroHeader for Home Page

Backlog

As a frontend developer, implement the HomeHeroHeader section which greets the user with a personalized message using motion animations. The header includes staggered animations for the greeting words and a pulsing badge indicating the user is logged in. This section is accessible to General Users only. Page access: General User only.

AI 85%
Human 15%
Medium Priority
1 day
Frontend Developer
#21

Implement HomeHeroActions for Home Page

Backlog

As a frontend developer, implement the HomeHeroActions section which provides interactive buttons for starting a new test and viewing educational guides. The buttons feature hover and tap animations using motion library. Ensure the links are conditionally shown based on user access. This section is accessible to General Users only. Page access: General User only.

AI 85%
Human 15%
Medium Priority
1 day
Frontend Developer
#22

Implement HomeQuickActions for Home Page

Backlog

As a frontend developer, implement the HomeQuickActions section which displays a grid of action cards for quick navigation. Each card includes an icon, title, description, and a link. The cards have hover animations that include rotation and shadow effects. This section is accessible to General Users only. Page access: General User only.

AI 85%
Human 15%
Medium Priority
1 day
Frontend Developer
#23

Implement HomeRecentTests for Home Page

Backlog

As a frontend developer, implement the HomeRecentTests section which lists recent blood tests with details such as date, blood group, and hemoglobin levels. Each test row includes animations for entry and accent lines. Ensure links to detailed results are functional. This section is accessible to General Users only. Page access: General User only.

AI 90%
Human 10%
Medium Priority
1.5 days
Frontend Developer
#24

Implement HomeEducationPreview for Home Page

Backlog

As a frontend developer, implement the HomeEducationPreview section which showcases educational articles with icons, titles, and summaries. Each article card includes hover animations and links to full articles. This section is accessible to General Users only. Page access: General User only.

AI 90%
Human 10%
Medium Priority
1.5 days
Frontend Developer
#25

Implement HomeStatsBanner for Home Page

Backlog

As a frontend developer, implement the HomeStatsBanner section which displays key health metrics with animated count-up effects. The section includes a refresh button that simulates data loading with state transitions. This section is accessible to General Users only. Page access: General User only.

AI 90%
Human 10%
High Priority
2 days
Frontend Developer
#44

Implement UsersPageHeader for Users Page

Backlog

As a frontend developer, implement the UsersPageHeader section which includes a title 'Manage Users', a subtitle displaying the total number of users, and two buttons for 'Add User' and 'Export'. The 'Add User' button triggers the onAddUser function, and the 'Export' button triggers the onExport function. This section is accessible by Admin ONLY. Page access: Admin only.

AI 90%
Human 10%
High Priority
0.5 days
Frontend Developer
#45

Implement UsersSearchInput for Users Page

Backlog

As a frontend developer, implement the UsersSearchInput section which includes a search input field with a placeholder 'Search by name or email...' and an SVG icon. The input field uses the query state and triggers the onChange function on input change. This section is accessible by Admin ONLY. Page access: Admin only.

AI 90%
Human 10%
Medium Priority
0.5 days
Frontend Developer
#46

Implement UsersFilters for Users Page

Backlog

As a frontend developer, implement the UsersFilters section which includes dropdowns for filtering by 'Status' and 'Sort by', date inputs for 'Registration Date', and a 'Clear all filters' button. The filters use the filters state and trigger the onFilterChange and onClear functions. This section is accessible by Admin ONLY. Page access: Admin only.

AI 85%
Human 15%
Medium Priority
1 day
Frontend Developer
#47

Implement UsersTableContainer for Users Page

Backlog

As a frontend developer, implement the UsersTableContainer section which displays a table of users with columns for User ID, Name, Email, Phone, Status, Registration Date, Last Login, and Actions. It includes checkboxes for selecting users, sorting functionality, and an ActionMenu component for user actions. This section is accessible by Admin ONLY. Page access: Admin only.

AI 80%
Human 20%
High Priority
2 days
Frontend Developer
#48

Implement UsersPagination for Users Page

Backlog

As a frontend developer, implement the UsersPagination section which includes pagination controls to navigate through pages of users. It displays the current range of users being viewed and allows changing the page size. This section is accessible by Admin ONLY. Page access: Admin only.

AI 85%
Human 15%
Medium Priority
1 day
Frontend Developer
#49

Implement CalibrationsPageHeader for Calibrations Page

Backlog

As a frontend developer, implement the CalibrationsPageHeader section which includes a breadcrumb navigation linking to the Admin Dashboard and a title with a description. This section is accessible only to Admin users and should conditionally render based on user role. Page access: Admin only.

AI 90%
Human 10%
High Priority
0.5 days
Frontend Developer
#55

Implement ContentSearchBar for Content Page

Backlog

As a frontend developer, implement the ContentSearchBar section for the Content page, which is accessible by Admin ONLY. This section includes a search input field with a clear button and an icon. The input field uses a state hook to manage the search term and triggers the onSearch callback when the Enter key is pressed or the clear button is clicked. Ensure the component is styled according to the provided CSS and is accessible with appropriate aria-labels. Page access: Admin only.

AI 90%
Human 10%
High Priority
1 day
Frontend Developer
#56

Implement ContentArticleGrid for Content Page

Backlog

As a frontend developer, implement the ContentArticleGrid section for the Content page, which is accessible by Admin ONLY. This section displays a grid of article cards, each showing a title, excerpt, category, read time, and date. The cards are clickable, triggering a console log to simulate navigation to article details. Ensure the grid layout is responsive and styled according to the provided CSS, with each card's background color set dynamically based on the article data. Page access: Admin only.

AI 90%
Human 10%
High Priority
1.5 days
Frontend Developer
#58

Implement ResultsBloodGroup for Results

Backlog

As a frontend developer, implement the ResultsBloodGroup section which displays the user's blood group in a styled badge format. This section is accessible by General Users only and should be implemented independently of other sections. Page access: General User only.

AI 90%
Human 10%
Medium Priority
0.5 days
Frontend Developer
#59

Implement ResultsHemoglobin for Results

Backlog

As a frontend developer, implement the ResultsHemoglobin section which displays the user's hemoglobin level with units. This section is accessible by General Users only and should be implemented independently of other sections. Page access: General User only.

AI 90%
Human 10%
Medium Priority
0.5 days
Frontend Developer
#60

Implement ResultsMetadataSection for Results

Backlog

As a frontend developer, implement the ResultsMetadataSection which displays metadata about the test such as Test ID, Collection Date & Time, Strip Lot Number, and Analysis Method. This section is accessible by General Users only and should be implemented independently of other sections. Page access: General User only.

AI 90%
Human 10%
Medium Priority
1 day
Frontend Developer
#61

Implement ResultsDisclaimer for Results

Backlog

As a frontend developer, implement the ResultsDisclaimer section which provides important information about the test results. It includes an SVG icon, a disclaimer message, and a link to educational content. This section is accessible by General Users only and should be implemented independently of other sections. Page access: General User only.

AI 90%
Human 10%
Medium Priority
1 day
Frontend Developer
#62

Implement ResultsSaveAction for Results

Backlog

As a frontend developer, implement the ResultsSaveAction section which provides a button for users to save their test results. This section is accessible by General Users only and should be implemented independently of other sections. Page access: General User only.

AI 90%
Human 10%
Low Priority
0.5 days
Frontend Developer
#63

Implement ResultsExportActions for Results

Backlog

As a frontend developer, implement the ResultsExportActions section which provides buttons for exporting results as PDF and sharing them. This section is accessible by General Users only and should be implemented independently of other sections. Page access: General User only.

AI 90%
Human 10%
Medium Priority
0.5 days
Frontend Developer
#64

Implement ResultsNewTestAction for Results

Backlog

As a frontend developer, implement the ResultsNewTestAction section which provides a button for users to start a new test. This section is accessible by General Users only and should be implemented independently of other sections. Page access: General User only.

AI 90%
Human 10%
Low Priority
0.5 days
Frontend Developer
#68

Create Privacy Policy Screen

Backlog

As a UI/UX Designer, design a privacy policy screen that outlines data usage, retention, and user rights. Ensure the screen is accessible from the settings menu.

AI 20%
Human 80%
Low Priority
0.5 days
UI/UX Designer
#71

Finalize Data Models

Backlog

As a Data Engineer, finalize the data models for users, tests, calibrations, and content, ensuring alignment with the ER diagram and project requirements.

AI 80%
Human 20%
High Priority
1.5 days
Data Engineer
#76

Implement Footer for Landing Page

Backlog

As a frontend developer, implement the Footer for the Landing Page. This section includes multiple columns with links to various pages such as About Us, Careers, and Privacy Policy. Ensure the footer is styled according to the provided CSS and that all links are functional. This page is accessible by General Users only. Page access: General User only.

AI 85%
Human 15%
Medium Priority
0.5 days
Frontend Developer
#77

Implement Navbar for Landing Page

Backlog

As a frontend developer, implement the Navbar for the Landing Page. This section includes a brand logo and a navigation link to the Signup page. Ensure the navbar is styled according to the provided CSS and that the navigation link is functional. This page is accessible by General Users only. Page access: General User only.

AI 85%
Human 15%
Medium Priority
0.5 days
Frontend Developer
#81

Implement HomeHeroAnimation for Home

Backlog

As a frontend developer, implement the HomeHeroAnimation section for the Home page. This section includes a complex animated SVG with parallax effects and interactive tooltips. It uses motion/react for animations and state management with useState and useRef hooks. Ensure the animations are smooth and responsive, and the tooltips display correctly on hover. Page access: General User only.

AI 90%
Human 10%
High Priority
2 days
Frontend Developer
#88

Implement CalibrationsPageHeader for Calibrations

Backlog

As a frontend developer, implement the CalibrationsPageHeader section which includes a breadcrumb navigation linking to the Admin Dashboard and a title with a description. This section is accessible only by Admins and should ensure that the breadcrumb link is conditionally shown based on user access. Page access: Admin only.

AI 90%
Human 10%
High Priority
0.5 days
Frontend Developer
#94

Implement ContentSearchBar for Content

Backlog

As a frontend developer, implement the ContentSearchBar section for the Content page, which is accessible by Admin ONLY. This section includes a search input field with a clear button and an icon. The search input uses a state hook to manage the search term and triggers the onSearch callback when the Enter key is pressed. Ensure the component is styled according to the provided CSS and is accessible with appropriate aria-labels. Page access: Admin only.

AI 90%
Human 10%
High Priority
1 day
Frontend Developer
#95

Implement ContentArticleGrid for Content

Backlog

As a frontend developer, implement the ContentArticleGrid section for the Content page, which is accessible by Admin ONLY. This section displays a grid of articles with clickable cards. Each card shows the article's title, excerpt, category, read time, and date. The card's background color is dynamically set based on the article's data. Implement the handleCardClick function to log navigation actions. Ensure the component is styled according to the provided CSS. Page access: Admin only.

AI 90%
Human 10%
High Priority
1.5 days
Frontend Developer
#96

Implement HistoryHeader for History

Completed in 1h 18m 21s
Done

As a frontend developer, implement the HistoryHeader section for the History page. This section includes a header with the title 'Test History' and a subtitle 'View all your past blood tests'. It also features a button labeled 'Start New Test' with a '+' icon, which triggers the 'onStartNewTest' function when clicked. This page is accessible by General Users only. Page access: General User only.

Task Progress
100%
StagingCompleted
AI 90%
Human 10%
High Priority
0.5 days
Frontend Developer
#98

Design Data Models

Backlog

As a Data Engineer, design and implement database models and migrations for users, tests, calibrations, and content. Ensure alignment with the ER diagram and project requirements.

AI 0%
Human 100%
High Priority
2 days
Data Engineer
#2

API Endpoints Development

Backlog

Develop REST API endpoints for authentication, user management, test records, analysis, and content retrieval.

Depends on:#1
Waiting for dependencies
AI 60%
Human 40%
High Priority
3 days
Backend Developer
#14

Implement Navbar for Signup Page

Backlog

As a frontend developer, implement the Navbar section for the Signup page. This component includes a logo, a burger menu for mobile view, and navigation links to Home, Education, Login, and Signup pages. The Navbar should toggle open/close state using a useState hook. Ensure that links to restricted pages are conditionally shown based on user persona. This component may already exist from the Landing page. Page access: General User only.

Depends on:#8
Waiting for dependencies
AI 90%
Human 10%
High Priority
1 day
Frontend Developer
#26

Implement TestWizardHeader for TestWizard

Backlog

As a frontend developer, implement the TestWizardHeader section which displays the current step title and subtitle based on the step index. It includes a back button with an SVG icon for navigation. This section is accessible by General Users only and should depend on the Home page's HomeHeroAnimation task for consistency in navigation components. Page access: General User only.

Depends on:#19
Waiting for dependencies
AI 90%
Human 10%
High Priority
0.5 days
Frontend Developer
#33

Implement EducationHeader for Education Page

Backlog

As a frontend developer, implement the EducationHeader section for the Education page. This section includes a title 'Health Education', a subtitle, and a search form for educational articles. The form uses a handleSearch function to log the search query. Ensure the search input and button are accessible with appropriate aria-labels. This page is accessible by General Users only. Page access: General User only.

Depends on:#19
Waiting for dependencies
AI 90%
Human 10%
High Priority
1 day
Frontend Developer
#35

Implement ProfilePageHeader for Profile

Backlog

As a frontend developer, implement the ProfilePageHeader section which includes breadcrumb navigation, a title, subtitle, and a back button. The breadcrumb uses SVG for the arrow icon, and the back button triggers window.history.back() on click. This section is accessible by General Users only and should include conditional navigation links based on persona access. Ensure it depends on the Home page task ID for page-level dependency. Page access: General User only.

Depends on:#19
Waiting for dependencies
AI 90%
Human 10%
High Priority
0.5 days
Frontend Developer
#50

Implement CalibrationsTabNav for Calibrations Page

Backlog

As a frontend developer, implement the CalibrationsTabNav section which provides tab navigation for 'Parameters', 'History', and 'Settings'. This component should handle tab changes via the onTabChange prop and highlight the active tab. This section is accessible only to Admin users. Page access: Admin only.

Depends on:#49
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
0.5 days
Frontend Developer
#51

Implement CalibrationParametersForm for Calibrations Page

Backlog

As a frontend developer, implement the CalibrationParametersForm section which includes sliders for adjusting blood type and hemoglobin parameters, and a dropdown for control mode. This form uses React state to manage parameter values and is accessible only to Admin users. Page access: Admin only.

Depends on:#49
Waiting for dependencies
AI 85%
Human 15%
High Priority
1.5 days
Frontend Developer
#53

Implement CalibrationHistoryTable for Calibrations Page

Backlog

As a frontend developer, implement the CalibrationHistoryTable section which displays a paginated table of calibration changes with rollback functionality. This section uses mock data and is accessible only to Admin users. Page access: Admin only.

Depends on:#49
Waiting for dependencies
AI 80%
Human 20%
High Priority
2 days
Frontend Developer
#67

Implement Data Retention Policy

Backlog

As a Backend Developer, implement a data retention policy for test records and user data, ensuring compliance with privacy standards and efficient database management.

Depends on:#1
Waiting for dependencies
AI 40%
Human 60%
Medium Priority
1.5 days
Backend Developer
#72

Develop API Services

Backlog

As a Backend Developer, develop API services for user management, test records, analysis, and content retrieval, ensuring they adhere to the RESTful principles and project requirements.

Depends on:#71
Waiting for dependencies
AI 70%
Human 30%
High Priority
2 days
Backend Developer
#73

Implement Auth & RBAC

Backlog

As a Backend Developer, implement authentication and role-based access control using JWTs, ensuring secure access for Admin and General User personas.

Depends on:#71
Waiting for dependencies
AI 75%
Human 25%
High Priority
1.5 days
Backend Developer
#74

Create Image Analysis Placeholder

Backlog

As a Backend Developer, create a placeholder service for image analysis that returns mock results, structured for future integration with real image-processing/ML.

Depends on:#71
Waiting for dependencies
AI 80%
Human 20%
Medium Priority
1 day
Backend Developer
#78

Implement SignupFormHeader for Signup

Backlog

As a frontend developer, implement the SignupFormHeader section which includes a header element with a title 'Create Your Account' and a subtitle 'Join RedScan to start analyzing your blood samples'. This section is accessible by General Users only and should ensure the header styling is consistent with the rest of the application. This component may already exist from a previous page. Page access: General User only.

Depends on:#76
Waiting for dependencies
AI 90%
Human 10%
High Priority
0.5 days
Frontend Developer
#82

Implement HomeHeroHeader for Home

Backlog

As a frontend developer, implement the HomeHeroHeader section for the Home page. This section displays a personalized greeting using motion/react for staggered animations of text and a pulsing badge indicating the user is logged in. Ensure the animations are smooth and the greeting dynamically includes the user's name. Page access: General User only.

Depends on:#81
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
1 day
Frontend Developer
#83

Implement HomeHeroActions for Home

Backlog

As a frontend developer, implement the HomeHeroActions section for the Home page. This section includes interactive buttons with hover and tap animations using motion/react. The primary button links to the TestWizard page, and the secondary button links to the Education page. Ensure the animations are responsive and the links are conditionally shown based on user access. Page access: General User only.

Depends on:#81
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
1 day
Frontend Developer
#84

Implement HomeQuickActions for Home

Backlog

As a frontend developer, implement the HomeQuickActions section for the Home page. This section features a grid of action cards with hover animations and links to various pages like TestWizard, History, and Education. Ensure the animations are smooth and the links are conditionally shown based on user access. Page access: General User only.

Depends on:#81
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
1.5 days
Frontend Developer
#85

Implement HomeRecentTests for Home

Backlog

As a frontend developer, implement the HomeRecentTests section for the Home page. This section displays a list of recent blood tests with animated rows using motion/react. Each row includes test details and a link to view more information. Ensure the animations are smooth and the data is displayed correctly. Page access: General User only.

Depends on:#81
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
1.5 days
Frontend Developer
#86

Implement HomeEducationPreview for Home

Backlog

As a frontend developer, implement the HomeEducationPreview section for the Home page. This section displays a preview of educational articles with animated cards using motion/react. Each card includes an article summary and a link to read more. Ensure the animations are smooth and the content is displayed correctly. Page access: General User only.

Depends on:#81
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
1.5 days
Frontend Developer
#87

Implement HomeStatsBanner for Home

Backlog

As a frontend developer, implement the HomeStatsBanner section for the Home page. This section includes animated metrics using motion/react, with a refresh button to simulate data loading. Ensure the animations are smooth and the metrics update correctly on refresh. Page access: General User only.

Depends on:#81
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
1.5 days
Frontend Developer
#89

Implement CalibrationsTabNav for Calibrations

Backlog

As a frontend developer, implement the CalibrationsTabNav section which provides tab navigation for 'Parameters', 'History', and 'Settings'. This component should handle active tab state and trigger onTabChange events. Ensure that the navigation is accessible only by Admins. Page access: Admin only.

Depends on:#88
Waiting for dependencies
AI 85%
Human 15%
Medium Priority
1 day
Frontend Developer
#90

Implement CalibrationParametersForm for Calibrations

Backlog

As a frontend developer, implement the CalibrationParametersForm section which includes sliders for blood type and hemoglobin parameters, and a dropdown for control mode. This form should manage state using React hooks and is accessible only by Admins. Page access: Admin only.

Depends on:#88
Waiting for dependencies
AI 90%
Human 10%
High Priority
1.5 days
Frontend Developer
#92

Implement CalibrationHistoryTable for Calibrations

Backlog

As a frontend developer, implement the CalibrationHistoryTable section which displays a paginated table of calibration changes with rollback functionality. This section should manage pagination state and is accessible only by Admins. Page access: Admin only.

Depends on:#88
Waiting for dependencies
AI 90%
Human 10%
High Priority
2 days
Frontend Developer
#97

Develop API Endpoints

Backlog

As a Backend Developer, develop REST API endpoints for user authentication, test records, analysis, and content retrieval. Ensure endpoints are secure and follow RESTful principles.

Depends on:#1
Waiting for dependencies
AI 0%
Human 100%
High Priority
3 days
Backend Developer
#3

Authentication & RBAC

Backlog

Implement JWT-based authentication and role-based access control for Admin and General User personas.

Depends on:#2
Waiting for dependencies
AI 65%
Human 35%
High Priority
2 days
Backend Developer
#4

Image Analysis Service

Backlog

Create a placeholder image analysis service for processing test strip images and returning mock results.

Depends on:#2
Waiting for dependencies
AI 60%
Human 40%
Medium Priority
2 days
Backend Developer
#5

API Client Service Layer

Backlog

Develop a service layer in the mobile app for API communication, including auth, test, and content services.

Depends on:#2
Waiting for dependencies
AI 70%
Human 30%
Medium Priority
1.5 days
Frontend Developer
#15

Implement SignupFormHeader for Signup Page

Backlog

As a frontend developer, implement the SignupFormHeader section for the Signup page. This component displays a title 'Create Your Account' and a subtitle encouraging users to join RedScan. Ensure the styling matches the design specifications. Page access: General User only.

Depends on:#14
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
0.5 days
Frontend Developer
#16

Implement SignupFormFields for Signup Page

Backlog

As a frontend developer, implement the SignupFormFields section for the Signup page. This component includes input fields for email, password, and confirm password, with validation error messages. It also features a password strength indicator that changes color based on the strength score. Ensure the component handles state changes and error displays correctly. Page access: General User only.

Depends on:#14
Waiting for dependencies
AI 85%
Human 15%
High Priority
1.5 days
Frontend Developer
#17

Implement SignupFormSubmit for Signup Page

Backlog

As a frontend developer, implement the SignupFormSubmit section for the Signup page. This component includes a checkbox for agreeing to terms, with error handling, and a submit button that shows a loading state when clicked. Ensure the button is disabled during loading and that the terms checkbox state is managed correctly. Page access: General User only.

Depends on:#14
Waiting for dependencies
AI 90%
Human 10%
High Priority
1 day
Frontend Developer
#18

Implement Footer for Signup Page

Backlog

As a frontend developer, implement the Footer section for the Signup page. This component includes brand information, navigation links, and disclaimers. Ensure the links are conditionally shown based on user persona. This component may already exist from the Landing page. Page access: General User only.

Depends on:#14
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
0.5 days
Frontend Developer
#27

Implement TestWizardProgressBar for TestWizard

Backlog

As a frontend developer, implement the TestWizardProgressBar section which visually represents the user's progress through the wizard steps. It uses an ordered list to display step labels and icons, with active and completed states. This section is accessible by General Users only. Page access: General User only.

Depends on:#26
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
0.5 days
Frontend Developer
#28

Implement TestWizardPrepareStep for TestWizard

Backlog

As a frontend developer, implement the TestWizardPrepareStep section which includes a checklist for preparing the test strip. It uses state to manage checklist item completion and provides visual feedback with SVG icons. This section is accessible by General Users only. Page access: General User only.

Depends on:#26
Waiting for dependencies
AI 85%
Human 15%
Medium Priority
1 day
Frontend Developer
#29

Implement TestWizardCaptureStep for TestWizard

Backlog

As a frontend developer, implement the TestWizardCaptureStep section which manages a countdown for capturing an image of the test strip. It uses state and refs to handle countdown logic and visual feedback. This section is accessible by General Users only. Page access: General User only.

Depends on:#26
Waiting for dependencies
AI 85%
Human 15%
High Priority
1.5 days
Frontend Developer
#30

Implement TestWizardProcessingStep for TestWizard

Backlog

As a frontend developer, implement the TestWizardProcessingStep section which simulates processing progress with a visual progress bar and spinner. It uses state and refs to manage progress updates. This section is accessible by General Users only. Page access: General User only.

Depends on:#26
Waiting for dependencies
AI 85%
Human 15%
Medium Priority
1 day
Frontend Developer
#31

Implement TestWizardResultsStep for TestWizard

Backlog

As a frontend developer, implement the TestWizardResultsStep section which displays the test results using animations for a smooth reveal. It uses the motion library for animations and is accessible by General Users only. Page access: General User only.

Depends on:#26
Waiting for dependencies
AI 85%
Human 15%
High Priority
1.5 days
Frontend Developer
#32

Implement TestWizardControls for TestWizard

Backlog

As a frontend developer, implement the TestWizardControls section which provides navigation buttons for each step of the wizard. It conditionally renders buttons based on the current step and handles actions like 'Next', 'Back', 'Take Photo', and 'Save'. This section is accessible by General Users only. Page access: General User only.

Depends on:#26
Waiting for dependencies
AI 85%
Human 15%
Medium Priority
1 day
Frontend Developer
#34

Implement EducationGrid for Education Page

Backlog

As a frontend developer, implement the EducationGrid section for the Education page. This section displays a grid of educational articles, each with a category badge, title, excerpt, read time, and a 'Read More' link. The articles are mapped from a predefined array and styled with CSS. This page is accessible by General Users only. Page access: General User only.

Depends on:#33
Waiting for dependencies
AI 90%
Human 10%
High Priority
1.5 days
Frontend Developer
#36

Implement ProfileBasicInfo for Profile

Backlog

As a frontend developer, implement the ProfileBasicInfo section which allows users to view and edit their basic information such as first name, last name, and email. It includes an avatar area with a file input for changing the profile photo, and an edit toggle button to switch between view and edit modes. This section is accessible by General Users only. Page access: General User only.

Depends on:#35
Waiting for dependencies
AI 90%
Human 10%
High Priority
1.5 days
Frontend Developer
#37

Implement ProfilePhone for Profile

Backlog

As a frontend developer, implement the ProfilePhone section which allows users to edit their phone number. It includes input validation to ensure the phone number is complete and displays a validation message if not. This section is accessible by General Users only. Page access: General User only.

Depends on:#35
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
1 day
Frontend Developer
#38

Implement ProfileAddress for Profile

Backlog

As a frontend developer, implement the ProfileAddress section which allows users to input their street address. The address field is optional, and a hint is provided to inform users they can leave it blank. This section is accessible by General Users only. Page access: General User only.

Depends on:#35
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
0.5 days
Frontend Developer
#39

Implement ProfileContactMethod for Profile

Backlog

As a frontend developer, implement the ProfileContactMethod section which allows users to select their preferred contact method from a dropdown menu. The current selection is displayed below the dropdown. This section is accessible by General Users only. Page access: General User only.

Depends on:#35
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
0.5 days
Frontend Developer
#40

Implement ProfileHealthInfo for Profile

Backlog

As a frontend developer, implement the ProfileHealthInfo section which displays the user's blood group and hemoglobin reference. It includes a tooltip with additional information and a textarea for private health notes. This section is accessible by General Users only. Page access: General User only.

Depends on:#35
Waiting for dependencies
AI 90%
Human 10%
High Priority
1.5 days
Frontend Developer
#41

Implement ProfilePreferences for Profile

Backlog

As a frontend developer, implement the ProfilePreferences section which allows users to toggle settings for email notifications, push notifications, data sharing consent, and theme preference. The theme toggle includes a disabled button for dark mode. This section is accessible by General Users only. Page access: General User only.

Depends on:#35
Waiting for dependencies
AI 90%
Human 10%
High Priority
1.5 days
Frontend Developer
#42

Implement ProfileSaveActions for Profile

Backlog

As a frontend developer, implement the ProfileSaveActions section which includes save and cancel buttons. The buttons are only enabled when there are unsaved changes, and a success message is displayed upon successful save. This section is accessible by General Users only. Page access: General User only.

Depends on:#35
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
0.5 days
Frontend Developer
#43

Implement ProfileDangerZone for Profile

Backlog

As a frontend developer, implement the ProfileDangerZone section which includes sign out and delete account actions. The delete account action requires confirmation with a warning message. This section is accessible by General Users only. Page access: General User only.

Depends on:#35
Waiting for dependencies
AI 90%
Human 10%
High Priority
1 day
Frontend Developer
#52

Implement CalibrationParametersActions for Calibrations Page

Backlog

As a frontend developer, implement the CalibrationParametersActions section which includes buttons for saving changes and resetting parameters to defaults. It should display feedback messages and manage unsaved changes state. This section is accessible only to Admin users. Page access: Admin only.

Depends on:#51
Waiting for dependencies
AI 85%
Human 15%
Medium Priority
1 day
Frontend Developer
#54

Implement CalibrationHistoryFilters for Calibrations Page

Backlog

As a frontend developer, implement the CalibrationHistoryFilters section which provides filter controls for date range, admin user, and parameter. It should manage filter state and trigger filter application. This section is accessible only to Admin users. Page access: Admin only.

Depends on:#53
Waiting for dependencies
AI 85%
Human 15%
Medium Priority
1 day
Frontend Developer
#57

Implement ResultsHeader for Results

Backlog

As a frontend developer, implement the ResultsHeader section which displays the test results header with a title, timestamp, and a completion badge. This section is accessible by General Users only and must include the dependency on the TestWizard page. Ensure the timestamp and badge are styled according to the design. Page access: General User only.

Depends on:#26
Waiting for dependencies
AI 90%
Human 10%
High Priority
0.5 days
Frontend Developer
#75

Develop Integration Tests

Backlog

As a QA Engineer, develop integration tests for critical workflows including user authentication, test creation, and result retrieval.

Depends on:#73#72
Waiting for dependencies
AI 70%
Human 30%
High Priority
1.5 days
QA Engineer
#79

Implement SignupFormFields for Signup

Backlog

As a frontend developer, implement the SignupFormFields section which includes input fields for email, password, and confirm password. This section features dynamic error messages and a password strength indicator that changes color based on the strength score. Ensure the fields are styled according to the design and are accessible by General Users only. Page access: General User only.

Depends on:#78
Waiting for dependencies
AI 90%
Human 10%
High Priority
1.5 days
Frontend Developer
#80

Implement SignupFormSubmit for Signup

Backlog

As a frontend developer, implement the SignupFormSubmit section which includes a checkbox for agreeing to terms and a submit button. The button should display a loading state with a spinner when the form is being submitted. Ensure the section is styled correctly and is accessible by General Users only. Page access: General User only.

Depends on:#78
Waiting for dependencies
AI 90%
Human 10%
High Priority
1 day
Frontend Developer
#91

Implement CalibrationParametersActions for Calibrations

Backlog

As a frontend developer, implement the CalibrationParametersActions section which includes buttons for saving changes and resetting to defaults. It should display feedback messages and manage unsaved state. This section is accessible only by Admins. Page access: Admin only.

Depends on:#90
Waiting for dependencies
AI 85%
Human 15%
Medium Priority
1 day
Frontend Developer
#93

Implement CalibrationHistoryFilters for Calibrations

Backlog

As a frontend developer, implement the CalibrationHistoryFilters section which allows filtering of the calibration history by date, admin user, and parameter. This section should manage filter state and trigger filter application. It is accessible only by Admins. Page access: Admin only.

Depends on:#92
Waiting for dependencies
AI 85%
Human 15%
Medium Priority
1 day
Frontend Developer
#102

Integrate History Backend and Frontend

Backlog

As a Tech Lead, verify the end-to-end integration between the History frontend implementation and the History backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

Depends on:#96#74
Waiting for dependencies
AI 20%
Human 80%
Medium Priority
1.5 days
Tech Lead
#103

API Integration Tests

Backlog

As a QA Engineer, develop integration tests for the API endpoints covering user authentication, test records, analysis, and content retrieval. Ensure all endpoints are tested for expected responses and error handling.

Depends on:#1#2
Waiting for dependencies
AI 0%
Human 100%
High Priority
3 days
QA Engineer
#6

QA Integration Tests

Backlog

Develop integration tests for critical workflows including user authentication, test creation, and result retrieval.

Depends on:#3#2
Waiting for dependencies
AI 50%
Human 50%
Medium Priority
2 days
QA Engineer
#7

Deployment & CI/CD Setup

Completed in 18m 38s
Done

Set up CI/CD pipelines and deployment scripts for the backend and mobile app, ensuring environment-specific configurations.

Depends on:#2#5
Waiting for dependencies
Task Progress
100%
StagingCompleted
AI 55%
Human 45%
High Priority
3 days
DevOps Engineer
#65

Implement HistoryHeader for History Page

Backlog

As a frontend developer, implement the HistoryHeader section for the History page. This section includes a header with the title 'Test History' and a subtitle 'View all your past blood tests'. It also features a button labeled 'Start New Test' with an icon, which triggers the onStartNewTest function when clicked. This page is accessible by General Users only. Page access: General User only.

Depends on:#57
Waiting for dependencies
AI 90%
Human 10%
High Priority
1 day
Frontend Developer
#66

Integrate API and Frontend

Backlog

As a Tech Lead, verify the end-to-end integration between the frontend implementation and the backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

Depends on:#31#2
Waiting for dependencies
AI 50%
Human 50%
Medium Priority
2 days
Tech Lead
#69

Develop Auth Middleware

Backlog

As a Backend Developer, create middleware for JWT verification to protect API routes and ensure only authenticated users can access their data.

Depends on:#3
Waiting for dependencies
AI 30%
Human 70%
High Priority
1 day
Backend Developer
#99

Integrate Landing Page

Backlog

As a Tech Lead, verify the end-to-end integration between the Landing page frontend implementation and the backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

Depends on:#5#97
Waiting for dependencies
AI 0%
Human 100%
Medium Priority
1.5 days
Tech Lead
#100

Integrate TestWizard Backend and Frontend

Backlog

As a Tech Lead, verify the end-to-end integration between the TestWizard frontend implementation and the TestWizard backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

Depends on:#74#29
Waiting for dependencies
AI 20%
Human 80%
Medium Priority
1.5 days
Tech Lead
#101

Integrate Results Backend and Frontend

Backlog

As a Tech Lead, verify the end-to-end integration between the Results frontend implementation and the Results backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

Depends on:#57#74
Waiting for dependencies
AI 20%
Human 80%
Medium Priority
1.5 days
Tech Lead
#104

Auth Route Guards

Backlog

As a Full Stack Developer, implement route guards for the mobile app to ensure that only authenticated users can access restricted pages. Use JWTs to verify user roles and permissions.

Depends on:#3
Waiting for dependencies
AI 0%
Human 100%
High Priority
1.5 days
Full Stack Developer
#106

AI Integration Placeholder

Backlog

As a Backend Developer, create a placeholder for AI integration in the backend to simulate future AI-based analysis features. Ensure the architecture supports easy integration of real AI models.

Depends on:#4
Waiting for dependencies
AI 0%
Human 100%
Low Priority
2 days
Backend Developer
#70

Develop E2E Tests

Backlog

As a QA Engineer, develop end-to-end tests for critical user flows including onboarding, test creation, result viewing, and history export.

Depends on:#6
Waiting for dependencies
AI 60%
Human 40%
High Priority
2.5 days
QA Engineer
#105

E2E Test Education Flow

Backlog

As a QA Engineer, develop end-to-end tests for the education content access flow, ensuring users can navigate to the education section, select topics, and read articles without issues.

Depends on:#70
Waiting for dependencies
AI 0%
Human 100%
Medium Priority
1 day
QA Engineer
Landing design preview
Login: Sign In
AdminDashboard: View Overview
AdminDashboard: Manage Users
Users: View User Details
AdminDashboard: Manage Calibrations
Calibrations: Update Parameters
AdminDashboard: Manage Content
Content: Edit Article
AdminDashboard: View App Settings
Landing design preview
Login: Sign In
AdminDashboard: View Overview
AdminDashboard: Manage Users
Users: View User Details
AdminDashboard: Manage Calibrations
Calibrations: Update Parameters
AdminDashboard: Manage Content
Content: Edit Article
AdminDashboard: View App Settings