autumn-mediscan

byRehan

Build a complete, production-ready web application called "MediScan" — an AI-powered healthcare assistant. The application must include frontend, backend, authentication, and AI integration. ──────────────────────────── 🧠 CORE FEATURES: 1. User Authentication - Email + password signup/login - Secure authentication system - Session management (JWT or Firebase Auth) - Basic user profile (name, email) 2. AI Symptom Checker - Input: user enters symptoms (text) - AI processes input and returns: - Possible conditions - Confidence level - Recommended action - Use AI API (OpenAI or similar) 3. AI Scan Analysis (Basic Version) - User uploads image - Backend processes image - Return mock or AI-based analysis result: - "Possible skin issue" - Confidence % - (If real AI not available, simulate logic) 4. Dashboard (After Login) - Welcome message with user name - Buttons: - Check Symptoms - Upload Scan - Show history (optional basic version) ──────────────────────────── 💻 FRONTEND REQUIREMENTS: - Framework: React (with Vite or Next.js) - Styling: Tailwind CSS - UI Style: - Premium, minimal, futuristic - Glassmorphism + clean layout - Pages: - Homepage - Login / Signup - Dashboard - Symptom Checker - Scan Upload Page - Must be: - Mobile-first - Fully responsive - Clean component structure ──────────────────────────── ⚙️ BACKEND REQUIREMENTS: - Node.js + Express - REST API structure Endpoints: - POST /auth/signup - POST /auth/login - POST /symptoms/analyze - POST /scan/upload - Use JWT authentication middleware ──────────────────────────── 🗄️ DATABASE: - MongoDB (Mongoose) - Store: - Users (name, email, password hash) - Basic history (symptoms, results) ──────────────────────────── 🤖 AI INTEGRATION: - Use OpenAI API (or similar) - For symptom checker: Send user symptoms → return structured response: { condition: "", confidence: "", advice: "" } - Ensure response is clean and readable ──────────────────────────── 🔐 SECURITY: - Hash passwords (bcrypt) - Protect routes with JWT - Validate inputs ──────────────────────────── ⚡ UX + UI DETAILS: - Smooth navigation - Loading states (spinners or skeletons) - Error handling (invalid login, API errors) - Success messages ──────────────────────────── 📦 PROJECT STRUCTURE: - /client (React frontend) - /server (Node backend) Include: - Clean folder structure - Reusable components - Environment variables (.env) ──────────────────────────── 🚀 DEPLOYMENT (OPTIONAL BUT PREFERRED): - Frontend: Vercel - Backend: Render / Railway - Database: MongoDB Atlas ──────────────────────────── 🧪 BONUS (IF POSSIBLE): - Add Google login - Add simple scan history - Add logout functionality ──────────────────────────── 🎯 FINAL GOAL: The app must be: - Fully functional - Clean UI - Secure authentication - Working AI responses - Ready to demo as a startup MVP ──────────────────────────── 🔁 FINAL INSTRUCTION: If any part is incomplete, continue building until the app is fully functional. Avoid placeholders unless necessary. Prefer working logic over mock

No preview

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document

System Requirements Document (SRD)

Project Name: autumn-mediscan

1. Introduction

autumn-mediscan is an AI-powered healthcare assistant designed to provide actionable advice based on user symptoms and scan analysis. The application aims to deliver a futuristic, user-friendly experience while maintaining legal safety and trustworthiness. Developed for Rehan in India, the project focuses on creating a production-ready web application with robust AI integration, secure authentication, and a clean, responsive UI.

2. System Overview

The autumn-mediscan system will consist of the following components:

  • Frontend: A React-based web application with a premium, futuristic design inspired by glassmorphism.
  • Backend: A secure, scalable Node.js server with REST API endpoints for authentication, AI processing, and user data management.
  • AI Integration: AI-powered symptom checker and scan analysis tools providing actionable advice with confidence levels and medical disclaimers.
  • Database: MongoDB for storing user profiles, history, and application data.
  • Deployment: Hosted on Vercel (frontend) and Render/Railway (backend), with MongoDB Atlas for database management.
Page 1 of 7

3. Functional Requirements

User Authentication

  • As a User, I should be able to sign up using my email and password.
  • As a User, I should be able to log in securely using my email and password.
  • As a User, I should be able to manage my session securely using JWT.
  • As a User, I should be able to view and edit my profile (name, email).

AI Symptom Checker

  • As a User, I should be able to input my symptoms and receive actionable advice.
  • As a User, I should see confidence levels (Low/Medium/High) for the AI's analysis.
  • As a User, I should see a medical disclaimer with the AI's advice.

AI Scan Analysis

  • As a User, I should be able to upload an image for analysis.
  • As a User, I should receive actionable advice based on the scan analysis.
  • As a User, I should see confidence levels for the AI's scan analysis.
  • As a User, I should see a medical disclaimer with the scan analysis results.
Page 2 of 7

Dashboard

  • As a User, I should see a personalized welcome message on the dashboard.
  • As a User, I should be able to access buttons for symptom checking and scan uploading.
  • As a User, I should be able to view my history of symptoms and scan results.

4. User Personas

Admin

  • Manages system configurations and monitors application performance.

Registered User

  • Accesses all features, including symptom checker, scan analysis, and history tracking.

Guest User

  • Limited access to features (e.g., symptom checker without history tracking).
Page 3 of 7

5. Visuals Colors and Theme

Inspired by the provided reference images, the color palette for autumn-mediscan is as follows:

  • Background: #1E1E2F (Deep Charcoal)
  • Surface: #2A2A3E (Muted Slate)
  • Text: #FFFFFF (Pure White)
  • Accent: #FF6F61 (Warm Coral)
  • Muted Tones: #A3A3B3 (Soft Gray)

6. Signature Design Concept

Interactive Glassmorphism Dashboard

The homepage and dashboard will feature a glassmorphism design with semi-transparent panels floating over a dynamic background. The background will subtly shift colors based on the time of day (e.g., warm tones in the morning, cool tones at night).

Page 4 of 7

Key Features:

  • Dynamic Background: A living gradient that transitions smoothly throughout the day.
  • Interactive Panels: Panels will have a frosted glass effect with soft shadows and rounded corners.
  • Micro-Interactions: Buttons and icons will respond with smooth animations (e.g., hover effects, ripple animations).
  • AI Results Display: Results will appear in animated cards that slide into view, with confidence levels displayed as color-coded badges (e.g., green for high confidence, yellow for medium).
  • History Timeline: A vertical timeline with interactive nodes for past entries, allowing users to click and view details.

7. Non-Functional Requirements

  • Performance: The application must load within 3 seconds on average.
  • Scalability: Backend must support up to 10,000 concurrent users.
  • Security: All sensitive data must be encrypted, and routes must be protected with JWT.
  • Accessibility: The UI must meet WCAG 2.1 AA standards.

8. Tech Stack

Frontend

  • React (with Vite or Next.js)
  • Tailwind CSS
Page 5 of 7

Backend

  • Node.js
  • Express

Database

  • MongoDB (Mongoose)

AI Models

  • OpenAI GPT 5.4 for symptom analysis
  • Google Nano Banana for image analysis

Tools

  • Docker and Docker Compose for local orchestration
  • Kubernetes for server-side orchestration

9. Assumptions and Constraints

  • AI models will provide actionable advice but will not replace professional medical consultation.
  • The application will initially target users in India, with localization for English.
  • Deployment will prioritize cost-effective solutions (e.g., Render, Railway).
Page 6 of 7

10. Glossary

  • Glassmorphism: A design trend featuring semi-transparent elements with frosted glass effects.
  • JWT: JSON Web Token, used for secure session management.
  • WCAG: Web Content Accessibility Guidelines, ensuring accessibility for users with disabilities.
  • AI Symptom Checker: A tool that analyzes user symptoms and provides actionable advice.
  • AI Scan Analysis: A tool that processes uploaded images to provide health-related insights.
Page 7 of 7

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

No user flows yet.

The User Flow Agent will generate per-persona navigation diagrams after SRD updates.

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

No user flows yet.

The User Flow Agent will generate per-persona navigation diagrams after SRD updates.