OralVis - Dental Screening Report Application 🦷

OralVis is a full-stack MERN application designed for dental health screening. It provides a seamless platform for patients to upload images of their teeth and for administrators to review, annotate, and generate detailed PDF reports. All media is securely stored and managed using Cloudinary.

---

## Live Demo

https://www.loom.com/share/4dedd9d310014b94a806cec79f54d48a?sid=362c3367-cb8c-4da1-b0ad-f1d09557f517

---

## Key Features

• Role-Based Authentication: Secure login and registration for two distinct user roles: Patient and Admin.
• Patient Portal: Patients can create an account, upload a teeth photo, and add relevant details like their name and notes. They can also view their submission history and download completed reports.
• Admin Dashboard: Admins have a comprehensive dashboard to view and manage all patient submissions.
• Image Annotation Canvas: A powerful, in-browser tool for admins to annotate patient images with various shapes (rectangles, circles, arrows, freehand drawing) and colors to mark specific dental issues.
• PDF Report Generation: Admins can automatically generate professional, single-page PDF reports that include patient details, the annotated image, and notes.
• Cloud Storage: All user-uploaded images, annotated images, and generated PDF reports are stored securely and efficiently in the cloud using Cloudinary.

---

## Screenshots

All the POSTMAN end point testings are in public/

---

## Tech Stack

• Frontend: React, TypeScript, Vite, Tailwind CSS, react-konva
• Backend: Node.js, Express, TypeScript
• Database: MongoDB with Mongoose
• Authentication: JSON Web Tokens (JWT)
• File Storage: Cloudinary

---

## Getting Started

Follow these instructions to set up and run the project on your local machine.

### Prerequisites

• Node.js (v18 or later)
• npm / yarn
• MongoDB (local instance or a cloud service like MongoDB Atlas)
• A Cloudinary account (Alternate to S3)

### Backend Setup

1. Navigate to the backend directory:

   cd backend

2. Install dependencies:

   npm install

3. Create an environment file: Create a .env file in the backend directory and add the following variables. Replace the placeholder values with your own.

   PORT=5001
   MONGO_URI=your_mongodb_connection_string
   JWT_SECRET=your_super_secret_jwt_key
   CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
   CLOUDINARY_API_KEY=your_cloudinary_api_key
   CLOUDINARY_API_SECRET=your_cloudinary_api_secret

4. Run the backend server:

   npm run dev

   The server will be running on http://localhost:5001.

### Frontend Setup

1. Navigate to the frontend directory:

   cd frontend

2. Install dependencies:

   npm install

3. Run the frontend application:

   npm run dev

   The application will be available at http://localhost:5173 (or another port specified by Vite).

---

## API Endpoints

The backend exposes the following REST API endpoints.

HTTP Method	Endpoint	Description	Access Control
POST	/api/auth/register	Register a new user (patient)	Public
POST	/api/auth/login	Log in a user	Public
POST	/api/auth/logout	Log out a user	Authenticated
POST	/api/submissions	Patient creates a new submission	Patient
GET	/api/submissions	Patient gets their own submissions	Patient
GET	/api/submissions/admin	Admin gets all submissions	Admin
PUT	/api/submissions/annotate/:id	Admin saves annotations for a submission	Admin
POST	/api/submissions/report/:id	Admin generates a PDF report	Admin

---

## Test Credentials

You can use the following credentials to test the application:

• Admin Account:

  • Email: admin@123.com
  • Password: adminpass123

• Patient Account:

  • Email: patient@123.com
  • Password: patientpass123