Clinic-Hospital-Admin-Panel-React-FastAPI-Full-Stack-App

 

Clinic/Hospital Admin Panel: A full-stack administrative dashboard developed using React.js and FastAPI, enabling administrators to securely log in and manage data efficiently. The project features a modern, responsive interface with a Python-based backend for data processing.

Here, we can implement JWT-based authentication to protect sensitive data such as patient information. For example, unauthorized users cannot access the patients’ database. Doctors are allowed to access only their own patients’ data, such as appointment dates and medical history submitted by patients during the appointment booking process.

Additional security measures can be added, such as mobile OTP and email OTP verification, to prevent fake or unauthorized appointments. CAPTCHA validation can also be implemented to reduce spam and prevent unusual load on the server.

Frontend: React.js

Frontend Code

import { useState, useEffect } from 'react'; function PatientForm() { const [formData, setFormData] = useState({ name: '', date_of_birth: '', gender: '', medical_history: '', doctor_id: '', room_id: '', admission_date: '' }); const [doctors, setDoctors] = useState([]); const [rooms, setRooms] = useState([]); useEffect(() => { fetch('http://127.0.0.1:8000/doctors/').then(res => res.json()).then(setDoctors); fetch('http://127.0.0.1:8000/rooms/').then(res => res.json()).then(setRooms); }, []); const handleChange = e => { setFormData(prev => ({ ...prev, [e.target.name]: e.target.value })); }; const handleSubmit = async e => { e.preventDefault(); const res = await fetch('http://127.0.0.1:8000/patients/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(formData) }); if (res.ok) { alert('Patient added'); setFormData({}); } else { alert('Error adding patient'); } }; return ( <form onSubmit={handleSubmit}> <h2>Add Patient</h2> <input name="name" placeholder="Name" value={formData.name} onChange={handleChange} required /> <input name="date_of_birth" type="date" value={formData.date_of_birth} onChange={handleChange} /> <input name="gender" placeholder="Gender" value={formData.gender} onChange={handleChange} /> <textarea name="medical_history" placeholder="Medical History" value={formData.medical_history} onChange={handleChange} /> <input name="admission_date" type="date" value={formData.admission_date} onChange={handleChange} /> <select name="doctor_id" value={formData.doctor_id} onChange={handleChange}> <option value="">Assign Doctor</option> {doctors.map(doc => ( <option key={doc.id} value={doc.id}>{doc.name}</option> ))} </select> <select name="room_id" value={formData.room_id} onChange={handleChange}> <option value="">Assign Room</option> {rooms.map(room => ( <option key={room.id} value={room.id}>{room.room_number}</option> ))} </select> <button type="submit">Add Patient</button> </form> ); } export default PatientForm;

 

Connecting the Frontend to the Backend

To connect the frontend to the backend, you will make API calls from the client-side (frontend) code. The backend (FastAPI) will process these requests on the server-side, validating the username and password against the credentials stored in a database. If the credentials match, the user will be authenticated.

Once the user is logged in, the client browser stores a JWT token in localStorage. This token helps keep the user signed in and allows for continuous communication with the backend whenever authentication is required.

Backend Code

from fastapi import FastAPI, Depends, HTTPException from fastapi.middleware.cors import CORSMiddleware from sqlalchemy.orm import Session from typing import List from . import crud, models, schemas from .database import SessionLocal, engine models.Base.metadata.create_all(bind=engine) app = FastAPI() # CORS for frontend app.add_middleware( CORSMiddleware, allow_origins=["http://localhost:5173"], # Use your domain in production allow_credentials=True, allow_methods=["*"], allow_headers=["*"], ) def get_db(): db = SessionLocal() try: yield db finally: db.close() @app.post("/doctors/", response_model=schemas.Doctor) def create_doctor(doctor: schemas.DoctorCreate, db: Session = Depends(get_db)): return crud.create_doctor(db=db, doctor=doctor) @app.get("/doctors/", response_model=List[schemas.Doctor]) def read_doctors(skip: int = 0, limit: int = 100, db: Session = Depends(get_db)): return crud.get_doctors(db, skip=skip, limit=limit) @app.get("/doctors/{doctor_id}", response_model=schemas.Doctor) def read_doctor(doctor_id: int, db: Session = Depends(get_db)): db_doctor = crud.get_doctor(db, doctor_id=doctor_id) if db_doctor is None: raise HTTPException(status_code=404, detail="Doctor not found") return db_doctor @app.post("/rooms/", response_model=schemas.Room) def create_room(room: schemas.RoomCreate, db: Session = Depends(get_db)): return crud.create_room(db=db, room=room) @app.get("/rooms/", response_model=List[schemas.Room]) def read_rooms(skip: int = 0, limit: int = 100, db: Session = Depends(get_db)): return crud.get_rooms(db, skip=skip, limit=limit) @app.get("/rooms/{room_id}", response_model=schemas.Room) def read_room(room_id: int, db: Session = Depends(get_db)): db_room = crud.get_room(db, room_id=room_id) if db_room is None: raise HTTPException(status_code=404, detail="Room not found") return db_room @app.post("/patients/", response_model=schemas.Patient) def create_patient(patient: schemas.PatientCreate, db: Session = Depends(get_db)): return crud.create_patient(db=db, patient=patient) @app.get("/patients/", response_model=List[schemas.Patient]) def read_patients(skip: int = 0, limit: int = 100, db: Session = Depends(get_db)): return crud.get_patients(db, skip=skip, limit=limit) @app.get("/patients/{patient_id}", response_model=schemas.Patient) def read_patient(patient_id: int, db: Session = Depends(get_db)): db_patient = crud.get_patient(db, patient_id=patient_id) if db_patient is None: raise HTTPException(status_code=404, detail="Patient not found") return db_patient @app.post("/visits/", response_model=schemas.Visit) def create_visit(visit: schemas.VisitCreate, db: Session = Depends(get_db)): return crud.create_visit(db=db, visit=visit) @app.get("/visits/", response_model=List[schemas.Visit]) def read_visits(skip: int = 0, limit: int = 100, db: Session = Depends(get_db)): return crud.get_visits(db, skip=skip, limit=limit) @app.get("/visits/{visit_id}", response_model=schemas.Visit) def read_visit(visit_id: int, db: Session = Depends(get_db)): db_visit = crud.get_visit(db, visit_id=visit_id) if db_visit is None: raise HTTPException(status_code=404, detail="Visit not found") return db_visit @app.post("/medications/", response_model=schemas.Medication) def create_medication(medication: schemas.MedicationCreate, db: Session = Depends(get_db)): return crud.create_medication(db=db, medication=medication) @app.get("/medications/", response_model=List[schemas.Medication]) def read_medications(skip: int = 0, limit: int = 100, db: Session = Depends(get_db)): return crud.get_medications(db, skip=skip, limit=limit) @app.get("/medications/{medication_id}", response_model=schemas.Medication) def read_medication(medication_id: int, db: Session = Depends(get_db)): db_medication = crud.get_medication(db, medication_id=medication_id) if db_medication is None: raise HTTPException(status_code=404, detail="Medication not found") return db_medication
Visit Github
Visit Updated Code

Further Reading

1.  Build a Student Management System with FastAPI and React