A comprehensive Next.js web application for AI-powered mouth cancer detection and screening. Users can upload mouth images and biopsy samples, complete medical questionnaires, and receive AI-driven risk assessments with personalized recommendations.

• Features
• Tech Stack
• Project Structure
• Getting Started
• Environment Variables
• Pages & Routes
• Core Functionality
• Database Schema
• Scripts
• Learn More

• Passwordless OTP Authentication - Secure email-based OTP verification
• Session Management - HTTP-only cookies for secure session storage
• User Registration & Login - Seamless onboarding experience

1. Mouth Image Analysis - Upload oral cavity images for AI visual analysis
2. Biopsy Image Analysis - Upload histopathological biopsy images for tissue classification
3. Medical Questionnaire - Comprehensive 20+ risk factor assessment including:
   • Demographics (age, gender, country)
   • Risk factors (tobacco, alcohol, HPV, betel quid usage)
   • Symptoms (oral lesions, bleeding, white patches)
   • Medical history (family history, immune system status)
   • Cancer staging data (tumor size, stage)

• User Dashboard - Overview with stats, charts, and recent uploads
• Storage Usage Charts - Visual representation using Recharts
• Test History - View all previous screening results
• Detailed Reports - Comprehensive test results with recommendations

• Context-Aware Responses - Analyzes user's test results for personalized answers
• Quick Question Prompts - Pre-built queries for common medical questions
• Real-time API Status - Connection status indicator
• Markdown Support - Rich formatted AI responses
• Fallback Responses - Local responses when API unavailable

• File Upload - Drag & drop with React Dropzone
• Sorting & Filtering - Multiple sort options (date, name, size)
• File Actions - Rename, share, download, delete functionality
• PDF Generation - Export test results using jsPDF

• Profile Management - Update name and email
• Avatar Upload - Cloudinary-powered image hosting
• Account Settings - Manage personal information

• Contact Form - Send messages to support team
• Email Notifications - Nodemailer integration with Gmail SMTP
• Message Tracking - Status updates (pending/in-progress/completed)

• Admin Dashboard - Overview statistics and metrics
• User Management - View and delete user accounts
• Message Management - Handle support requests with status updates
• Activity Monitoring - Track recent users and tests

• Mobile-First Approach - Optimized for all screen sizes
• Adaptive Navigation - Sidebar + mobile hamburger menu
• Touch-Friendly UI - Optimized for touch interactions

frontend/
├── app/                        # Next.js App Router
│   ├── globals.css             # Global styles
│   ├── layout.js               # Root layout
│   ├── page.js                 # Landing page
│   ├── not-found.js            # 404 page
│   ├── (API)/                  # API Routes
│   │   └── api/
│   │       ├── contact/        # Email contact API
│   │       └── predict/        # AI prediction proxy
│   ├── (auth)/                 # Authentication pages
│   │   ├── layout.js           # Auth layout
│   │   ├── loading.js          # Auth loading state
│   │   ├── login/              # Login page
│   │   └── sign-up/            # Registration page
│   ├── (root)/                 # Main user dashboard
│   │   └── dashboard/
│   │       ├── layout.js       # Dashboard layout
│   │       ├── page.js         # Main dashboard
│   │       ├── chatbot/        # AI assistant
│   │       ├── contact/        # Contact form
│   │       ├── documents/      # Test results
│   │       │   └── [id]/       # Individual result
│   │       ├── settings/       # User settings
│   │       └── test/           # Cancer screening
│   └── admin/                  # Admin panel
│       ├── layout.js           # Admin layout
│       ├── page.js             # Admin dashboard
│       ├── messages/           # Message management
│       └── users/              # User management
├── components/                 # React components
│   ├── ui/                     # Radix UI components
│   ├── testComponents/         # Test step components
│   ├── ActionDropdown.js       # File actions menu
│   ├── Authform.js             # Auth forms
│   ├── Card.js                 # File display card
│   ├── Chart.js                # Storage chart
│   ├── Chatbot.js              # AI chatbot
│   ├── ContactUs.js            # Contact form
│   ├── FileUploader.js         # Drag & drop upload
│   ├── header.js               # Search header
│   ├── Home.js                 # Landing page
│   ├── mobileNavigation.js     # Mobile nav
│   ├── OTPmodal.js             # OTP verification
│   ├── Settings.js             # Profile settings
│   ├── sideBar.js              # Navigation sidebar
│   └── ...
├── lib/                        # Utilities & actions
│   ├── utils.js                # Helper functions
│   ├── actions/                # Server actions
│   │   ├── adminActions.js     # Admin operations
│   │   ├── fileActions.js      # File CRUD
│   │   ├── messageActions.js   # Contact messages
│   │   └── userActions.js      # Authentication
│   └── appwrite/               # Appwrite configuration
│       ├── config.js           # Client config
│       └── index.js            # Server config
├── constants/                  # App constants
│   ├── index.js                # Nav items, sort options
│   └── userinfo.js             # User data
├── hooks/                      # Custom React hooks
│   └── use-toast.js            # Toast hook
├── public/                     # Static assets
│   └── assets/
│       ├── icons/              # SVG icons
│       └── images/             # Images
└── styles/                     # CSS modules
    └── Contact.module.css

• Node.js 18+ installed
• npm, yarn, pnpm, or bun package manager
• Appwrite instance (cloud or self-hosted)
• FastAPI backend for AI predictions (optional for testing)

1. Clone the repository

   git clone <repository-url>
   cd frontend

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Set up environment variables

   Create a .env.local file in the root directory (see Environment Variables)

4. Run the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev
   # or
   bun dev

5. Open the application

   Navigate to http://localhost:3000 in your browser

Create a .env.local file with the following variables:

# Appwrite Configuration
NEXT_PUBLIC_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
NEXT_PUBLIC_APPWRITE_PROJECT=your_project_id
NEXT_PUBLIC_APPWRITE_DATABASE=your_database_id
NEXT_PUBLIC_APPWRITE_USERS_COLLECTION=your_users_collection_id
NEXT_PUBLIC_APPWRITE_FILES_COLLECTION=your_files_collection_id
NEXT_PUBLIC_APPWRITE_MESSAGES_COLLECTION=your_messages_collection_id
NEXT_PUBLIC_APPWRITE_BUCKET=your_bucket_id
NEXT_APPWRITE_KEY=your_api_key

# External AI API
NEXT_PUBLIC_API_URL=http://127.0.0.1:8000

# Email Configuration (Nodemailer)
SENDER=[email protected]
PASSWORD=your_app_password
TO=[email protected]

1. User enters email → OTP sent via Appwrite
2. User enters 6-digit OTP → Session verified
3. Session stored in HTTP-only cookie (appwrite-session)
4. Protected routes check session validity

1. Step 1: Upload mouth image → AI returns prediction + confidence
2. Step 2: Upload biopsy image → AI classifies tissue
3. Step 3: Complete questionnaire → AI calculates risk level
4. Results: Combined analysis with recommendations

# Start development server with hot reload
npm run dev

# Build for production
npm run build

# Start production server
npm run start

# Run ESLint for code quality
npm run lint

• HTTP-only Session Cookies - Prevents XSS attacks
• Server-side Auth Checks - Route protection on server
• Admin Route Protection - Role-based access control
• Secure File URLs - Signed URLs for file access
• OTP Authentication - Passwordless security

• Poppins Font - Clean, modern typography
• Custom Brand Colors - Defined in Tailwind config
• Smooth Animations - Framer Motion transitions
• Toast Notifications - Real-time user feedback
• Loading States - Skeleton loaders and spinners
• Error Handling - Graceful error messages

To learn more about the technologies used:

• Next.js Documentation - Next.js features and API
• React Documentation - React library
• Tailwind CSS - Utility-first CSS
• Appwrite Documentation - Backend services
• Radix UI - UI primitives
• React Hook Form - Form handling

The easiest way to deploy this Next.js app is using Vercel:

1. Push your code to a Git repository
2. Import the project to Vercel
3. Configure environment variables
4. Deploy!

Check out the Next.js deployment documentation for more details.

This project is private and proprietary.

Built with ❤️ using Next.js and AI