Skinnovate

Skin intelligence.
Doctor precision.

A full-stack dermatology platform where patients upload skin images, a trained AI model returns an instant preliminary diagnosis, and certified dermatologists validate, prescribe, and manage care — all in one connected workflow.

Frontend
React handles all user interaction — dashboards, forms, navigation, and role-based views
Backend
Flask manages all business logic, API requests, authentication, and workflows
AI Module
A trained Keras model processes uploaded skin images and returns a condition prediction with a confidence score
Database
PostgreSQL stores all users, medical records, appointments, treatments, and AI results

End-to-end platform flow

Public
Register & Login
Patient
Upload skin photo
AI Model
Predict condition + confidence
Doctor
Review & validate
Doctor
Notes, prescriptions & treatment
Patient
Track records & appointments
Admin
Monitor & manage platform

Public

Pre-login

01

Landing Page

The first page any visitor sees. It explains what the platform does and gives two clear paths — sign up or sign in.

The page states the platform's purpose: upload a skin image, get an AI diagnosis, and connect with a certified dermatologist, all in one place
Start Free Analysis takes new visitors to the registration page; Sign in takes returning users to login — both are accessible from the navigation bar and the centre of the page
Leads to →Registration or Login — after which the system routes each user to the correct dashboard based on their role
Landing Page Landing

02

Login

Registered users sign in with their email and password. After login, the system reads the user's role from the token and sends them to the right dashboard automatically — no manual redirect.

Password field has a show/hide toggle
A demo credentials panel at the bottom of the card shows three clickable rows — Patient, Doctor, Admin — that auto-fill the form with one click, so the platform can be explored immediately without creating an account
If the access token expires during a session, it is refreshed silently in the background — the user is never logged out unexpectedly
Leads to →Patient → Patient Dashboard · Doctor → Doctor Dashboard · Admin → Admin Dashboard
Login Login

Patient

Role

03

Patient Dashboard

The first thing a patient sees after logging in. It gives a summary of everything happening in their account — AI results, upcoming visits, active treatments, and loyalty points — without having to open any other page.

Four stat cards at the top: number of AI analyses submitted, total appointments, active treatments, and loyalty points accumulated (patients earn +5 points per analysis submitted)
Recent Analyses section shows the latest AI results — each entry includes the condition name, confidence percentage, severity level, submission date, and whether a doctor has reviewed it yet. A delete button is available on each entry
Upcoming Appointments section lists the next scheduled visits with date, time, visit type, and reason
Manage appointments link at the bottom of that section opens the full appointments page
Connects to →The analysis review status updates the moment a doctor validates or modifies a result; appointment cards reflect any changes made by the doctor in their schedule
Patient Dashboard Patient Dashboard

04

AI Skin Analysis

Patients upload a photo of the affected skin area and receive an instant AI-generated result. No appointment is needed to get a first assessment — the result is available within seconds of uploading.

Images can be dragged and dropped into the upload zone or selected through the file picker. JPG, PNG, and WebP are accepted up to 16 MB
The image is processed on the server using the same steps that were used during model training: resized to 224×224, sharpened with an unsharp mask, contrast-enhanced with CLAHE, then normalised
The result shows the predicted condition (Acne, Eczema, Milia, or Rosacea), a confidence percentage, a severity level, and a recommendation to consult a doctor if confidence falls below 70%
All previous analyses are listed on the right side of the page — each entry shows the uploaded image thumbnail, predicted condition, confidence, severity, review status, and a delete button
Connects to →Every submitted analysis appears immediately in the doctor's Patient Queue as a case awaiting review
AI Skin Analysis AI Analysis

05

Appointments

Patients book clinic visits with available dermatologists and can see the full history of their appointments in one place — from first request through to completion or cancellation.

The list can be filtered by status: All, Scheduled, Requested, Completed, or Cancelled
Each appointment shows the date, time, visit type (In Person or Video), reason for the visit, the assigned doctor's name, and the current status. Emergency appointments are labelled in red
The Book Appointment button opens a scheduling form that only shows doctors with available slots for the chosen date and time
Appointments can be cancelled directly from this page as long as they have not yet started
Connects to →Booked appointments appear in the doctor's Schedule; emergency appointments carry an Urgent badge on the doctor's side automatically
Appointments Appointments

06

Health Records — Medical Notes

Every consultation note written by the patient's dermatologist is stored here and can be read at any time. The patient cannot edit these — they are written exclusively by the doctor.

The page has two tabs — Medical Notes and Prescriptions — with a live count in each tab label showing how many records exist
Each note shows the date it was written and the doctor's full text — including specific clinical instructions, for example: morning — gentle cleansing / night — 4% benzoyl peroxide foaming cleanser
Written by →The doctor writes these notes from the Medical Note panel on the Review Diagnosis page — they appear here immediately after saving
Medical Notes Records · Notes

07

Health Records — Prescriptions

Electronic prescriptions issued by the dermatologist are stored in the second tab of the Health Records page, alongside the consultation notes.

Each prescription shows the issue date, medication name (e.g. Azelaic Acid 10%, Retinol, Avene Cicalfate), administration route (topical), status badge, the treatment it belongs to, and any usage notes such as night only
When the doctor marks a treatment as completed or cancelled, its linked prescriptions are automatically removed from this active view
Written by →Prescriptions are issued by the doctor from the Treatment Plan panel on the Review Diagnosis page
Prescriptions Records · Prescriptions

08

Treatment Plans

Patients can see every treatment the doctor has prescribed — what it is, when it started, how to use it, and whether it is still active.

Treatments can be filtered by Active, Completed, or All
Each treatment card shows the name (e.g. Azelaic Acid 10%, Salicylic Acid 2%), type (Topical), status, start date, and any usage instructions — for example use morning and night or night only
When a doctor marks a treatment as completed or cancelled, the card moves out of the Active filter and its linked prescriptions are removed from the Prescriptions tab accordingly
The doctor can also log progress notes on a treatment over time — these are visible within the treatment detail and document how the patient is responding at each stage
Created by →The doctor creates treatment plans from the Review Diagnosis page — each plan is linked to the specific AI diagnosis that prompted it
Treatment Plans Treatments

Dermatologist

Role

09

Doctor Dashboard

The first page a doctor sees after logging in. It shows their full current workload — how many AI results are waiting to be reviewed, what appointments are coming up, and how many validations have been completed so far.

Four stat cards: Pending Reviews (cases waiting for the doctor's validation), Today's Appointments, Total Validated (completed reviews), and Upcoming appointments
The Pending Reviews section lists each unvalidated case with the condition name, confidence score, severity level, and date. Cases where the AI was not confident enough also show a Consultation recommended warning
A Review button on each case links directly to the full Review Diagnosis page for that patient
The Upcoming Appointments section shows the next scheduled visit with the patient name, appointment type, date, reason, and an emergency indicator if one was flagged
Connects to →Pending reviews feed into the Patient Queue and the Review Diagnosis page; upcoming appointments link to the full Schedule view
Doctor Dashboard Doctor Dashboard

10

Patient Queue

A full-page grid of every AI analysis waiting for the doctor's review. Each card shows enough information to decide which case to open first without having to click into each one.

Each card shows the condition the AI predicted, the severity level, the patient's name, the confidence percentage, the submission date, and the current status
Cases where the AI confidence was low show a Consultation required label — these should be reviewed first as they carry more clinical uncertainty
The queue can be filtered into Pending, Validated, and All — giving a clear picture of remaining workload vs. completed reviews
Review & Validate on any card opens the full Review Diagnosis page for that specific case
Where these come from →Every card here was created when a patient submitted a photo on the AI Analysis page
Patient Queue Patient Queue

11

Review Diagnosis

The most important page in the platform. The doctor reviews the uploaded image alongside the AI result, decides whether to confirm or correct the diagnosis, writes a consultation note, and creates a treatment plan — all without leaving the page.

The left panel shows the original uploaded image at full size, with the patient's name and the exact date and time the photo was submitted
Below the image, the AI result is displayed — predicted condition, confidence score, severity badge, and a progress bar showing confidence level visually
The right panel has a diagnosis dropdown where the doctor selects the correct condition and saves it as the official clinical result — overriding the AI if needed
The Medical Note panel lets the doctor write consultation notes that go directly into the patient's Health Records
The Treatment Plan panel creates a new treatment linked to this diagnosis. If the patient already has an active treatment, it is shown here too — with Mark Completed and Cancel Treatment buttons — so the doctor can manage it without switching pages
Connects to →Saving the diagnosis updates the patient's analysis status to Doctor validated; the medical note appears in Health Records; the treatment plan appears in the patient's Treatments page
Review Diagnosis Review Diagnosis

12

My Schedule

A chronological list of all appointments grouped by date. The doctor manages their day from here — accepting new requests, starting consultations, and marking them done as they go.

Appointments are grouped by date with a count badge per day showing how many are scheduled
Each entry shows the time, patient name, visit type, reason for the visit, and the current status. Emergency appointments are highlighted with an Urgent badge in red
Three appointment states are visible at once: Completed (past visits), Scheduled with a Start button (confirmed upcoming), and Requested with an Accept button (awaiting the doctor's confirmation)
The visit reason — for example AI follow-up: Acne or eczema worsening — is shown directly on each card, giving clinical context without having to open the patient record
Each status change made here is reflected immediately on the patient's Appointments page
Connects to →Status updates here are reflected live on the patient's Appointments page — the same record seen from both sides
My Schedule Schedule

Admin

Role

13

Admin Dashboard

A platform-wide overview for the admin. It shows the current state of the system at a glance and surfaces anything that needs attention — unconfirmed appointments, pending validations — without having to dig through sub-pages.

Four stat cards: Total Patients, Total Appointments, AI Analyses submitted, and Pending Validations — the validations card is highlighted in a different colour to flag that doctor review is still needed
An alert banner at the top of the page shows the number of appointments still waiting for confirmation, with a Review button that links directly to those records
The Pending Appointments list shows every unconfirmed booking — patient name, date, time, type, reason, and status
Quick Actions on the right side give one-click access to Manage Patients, Manage Doctors, and All Users
Connects to →The Pending Validations count is the same queue the doctor works through — the admin monitors the number; the doctor resolves each case
Admin Dashboard Admin Dashboard

14

User Management

A full list of every registered user on the platform. The admin can search, filter by role, and activate or deactivate any account.

The search bar filters the table by name or email in real time — no page reload needed
Role filters at the top right narrow the list to Patients, Doctors, Admins, or All
Each row shows the user's name, email, role badge, join date, active status, and a Deactivate button
Deactivating an account prevents that user from logging in immediately. The button changes to Activate so the account can be reinstated at any time
This applies to all roles equally — deactivating a dermatologist also removes them from the available doctors list when patients book appointments
Downstream effect →Deactivating a doctor prevents login, blocks new validation assignments, and removes them from the appointment booking flow for patients
User Management User Management

Medical Disclaimer

The AI model is designed to support — not replace — a qualified dermatologist. All results are returned with a confidence score and are intended as a preliminary indicator only. They do not constitute a professional medical diagnosis or treatment recommendation. Every AI result must be reviewed and validated by a licensed dermatologist before any clinical action is taken.