https://github.com/prak112/symptom-checker-frontend
Frontend for ICD11-Symptom Checker app. Built using React and MaterialUI.
https://github.com/prak112/symptom-checker-frontend
front-end-development nodejs react-material-ui
Last synced: 3 months ago
JSON representation
Frontend for ICD11-Symptom Checker app. Built using React and MaterialUI.
- Host: GitHub
- URL: https://github.com/prak112/symptom-checker-frontend
- Owner: prak112
- License: mit
- Created: 2024-07-08T19:22:07.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2026-01-18T19:59:43.000Z (6 months ago)
- Last Synced: 2026-01-19T03:35:24.467Z (6 months ago)
- Topics: front-end-development, nodejs, react-material-ui
- Language: JavaScript
- Homepage:
- Size: 373 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Overview
- This repository serves as a Web Client for Symptom Checker application.
- Web Client provides a user-friendly UI for users and is responsible for :
- communication with **[Shared Backend](https://github.com/prak112/Symptom-Checker-backend)**
- authentication prompt modal to register as user or guest
- main screen with input and analysis selection for diagnosing symptoms,
- sidebar navigation with access to auth, profile, FAQs and history,
- loading screen with approximate response times,
- diagnosis screen with summarized display under symptom headings with symptom-relative scoring and redirection for further reading.
- A disclaimer is clear displayed at the footer of the application UI at all times about possible inaccuracies that could be generated.
- Prototype, plan and implementation of the Symptom Checker application are defined in the [prototype README](https://github.com/prak112/ICD11-SymptomChecker#overview)
- Tools and Technologies used :
- `react`
- `material-ui`
- `axios`
## Workflow
- Sequence Diagram rendered using *Mermaid*
- Refer [Backend Workflow](https://github.com/prak112/Symptom-Checker-backend#workflow)
```mermaid
sequenceDiagram
box Blue CLIENT
participant UI
participant FRONTEND
end
box Purple SERVER
participant BACKEND
end
UI->>+FRONTEND: User opens application
FRONTEND-->>-UI: ReactJS : render
UI->>+FRONTEND: Auth : User registers from
FRONTEND-->>-UI: React Router : render modal
alt Registration Valid
UI->>+FRONTEND: Auth: User inputs information
Note over FRONTEND: validation - PASSED
FRONTEND->>+BACKEND: Auth Service : POST /public/auth/signup
Note over BACKEND: Backend-Database validation - PASSED
BACKEND-->>-FRONTEND: Auth Controller : return User {username: '', symptom: []}
Note over FRONTEND: state success
FRONTEND-->>-UI: React Router : redirect to modal
else Frontend Validation Error
UI->>+FRONTEND: Auth: User inputs information
Note over FRONTEND: validation - FAILED
Note over FRONTEND: state error
FRONTEND-->>-UI: Alert Context : show notification banner
else Backend-Database Validation Error
UI->>+FRONTEND: Auth: User inputs information
Note over FRONTEND: validation - PASSED
FRONTEND->>+BACKEND: Auth Service : POST /public/auth/signup
Note over BACKEND: Backend-Database validation - FAILED
BACKEND-->>-FRONTEND: Auth Controller : ErrorHandler forwards response
FRONTEND-->>-UI: Alert Context : show notification banner
end
alt Valid Login
UI->>+FRONTEND: Auth : User enters login credentials
Note over FRONTEND: validation - PASSED
FRONTEND->>+BACKEND: Auth Service : POST /public/auth/login
Note over BACKEND: Backend-Database validation - PASSED
BACKEND-->>-FRONTEND: Auth Controller : sessionStorage created
'auth_token' packed in Request Header
Note over FRONTEND: state success
Note over FRONTEND: show notification banner
FRONTEND-->>-UI: User Context : User-specific session created
else Frontend Validation Error
UI->>+FRONTEND: Auth: User inputs information
Note over FRONTEND: validation - FAILED
Note over FRONTEND: state error
FRONTEND-->>-UI: Alert Context : show notification banner
else Backend-Database Validation Error
UI->>+FRONTEND: Auth: User inputs information
Note over FRONTEND: validation - PASSED
FRONTEND->>+BACKEND: Auth Service : POST /public/auth/login
Note over BACKEND: Backend-Database validation - FAILED
BACKEND-->>-FRONTEND: Auth Controller : ErrorHandler forwards response
Note over FRONTEND: state error
FRONTEND-->>-UI: Alert Context : shows notification banner
end
alt Valid Input
UI->>+FRONTEND: User : inputs symptoms in
Note over FRONTEND: validation - PASSED
FRONTEND->>+BACKEND: POST /api/protected/symptoms/general or /specific
Note over BACKEND: Validate and Sanitize User input
BACKEND-->>-FRONTEND: SymptomChecker Controller: diagnosisData {'topResult': {}, 'includedResults': {}, 'excludedResults': {}}
FRONTEND-->>-UI: : render
else No Input
UI->>+FRONTEND: User : User clicks 'Diagnose' without input
Note over FRONTEND: validation - FAILED
FRONTEND-->>-UI: prompt User to fill form
end
UI->>+FRONTEND: Auth : User logs out from
FRONTEND-->>-UI: Auth : modal asks confirmation
alt User confirms Logout
UI->>+FRONTEND: Auth : User confirms logout
FRONTEND-->>-UI: User Context : sessionStorage cleared, User redirected to
else User cancels Logout
UI->>+FRONTEND: Auth : User cancels logout
FRONTEND-->>-UI: Auth : User redirected to
end
```
# Usage
- Make sure you have `node`(v`20.11.0`) and `npm`(v`10.5.0`) installed on your machine before running these commands.
- Clone the project
```bash
git clone https://github.com/prak112/Symptom-Checker-frontend.git
```
- Install dependencies using `npm`
```bash
cd Symptom-Checker-frontend/symptom-checker-frontend
npm install
```
- Run the development server
```bash
npm run dev
```
# Credits
- **Coding Assistants** :
- GitHub Copilot
- Pieces Copilot
- **Documentation Tool** : Mermaid