Hospital Management Application using MERN Stack

// server.js

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const bodyParser = require('body-parser');
const patientsRouter = require('./routes/patients');
const doctorsRouter = require('./routes/doctors');
const appoinmentsRouter = require('./routes/appointments')
const app = express();
const PORT = process.env.PORT || 5000;

app.use(cors());
app.use(bodyParser.json());

// Connect to MongoDB
mongoose.connect(
    'mongodb://localhost:27017/hospital',
    {
        useNewUrlParser: true,
        useUnifiedTopology: true
    });
const connection = mongoose.connection;
connection.once('open', () => {
    console.log('MongoDB database connection established successfully');
});

app.use('/patients', patientsRouter);
app.use('/doctors', doctorsRouter);
app.use('/appointments', appoinmentsRouter)

app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

// routes/appointments.js

const express = require('express');
const router = express.Router();
const Appointment =
    require('../models/Appointment');

// Get all appointments
router.route('/').get((req, res) => {
    Appointment.find()
        .then(appointments =>
            res.json(appointments))
        .catch(err =>
            res.status(400).json('Error: ' + err));
});

// Add new appointment
router.route('/add').post((req, res) => {
    const { patientName, doctorName, date } = req.body;
    const newAppointment =
        new Appointment({ patientName, doctorName, date });

    newAppointment.save()
        .then(savedAppointment => res.json(savedAppointment))
        .catch(err => res.status(400).json('Error: ' + err));
});

// Update appointment data
router.route('/update/:id').post((req, res) => {
    Appointment.findById(req.params.id)
        .then(appointment => {
            appointment.patientName =
                req.body.patientName;
            appointment.doctorName =
                req.body.doctorName;
            appointment.date =
                req.body.date;

            appointment.save()
                .then(
                    () =>
                        res.json('Appointment updated!'))
                .catch(
                    err => res.status(400)
                        .json('Error: ' + err));
        })
        .catch(
            err => res.status(400)
                .json('Error: ' + err));
});

// Delete appointment
router.route('/delete/:id')
    .delete((req, res) => {
        Appointment.findByIdAndDelete(req.params.id)
            .then(
                () => res
                    .json('Appointment deleted.'))
            .catch(
                err => res
                    .status(400).json('Error: ' + err));
    });

module.exports = router;

// routes/doctors.js

const express = require('express');
const router = express.Router();
const Doctor = require('../models/Doctor');

// Get all doctors
router.route('/').get((req, res) => {
    Doctor.find()
        .then(doctors =>
            res.json(doctors))
        .catch(err =>
            res.status(400)
                .json('Error: ' + err));
});

// Add new doctor
router.route('/add')
    .post((req, res) => {
        const { name, specialty } = req.body;

        const newDoctor =
            new Doctor({ name, specialty });

        newDoctor.save()
            // Return the savedDoctor object
            .then(savedDoctor =>
                res.json(savedDoctor))
            .catch(
                err =>
                    res.status(400)
                        .json('Error: ' + err));
    });


// Update doctor data
router.route('/update/:id')
    .post((req, res) => {
        Doctor.findById(req.params.id)
            .then(doctor => {
                if (!doctor) {
                    return res.status(404)
                        .json('Doctor not found');
                }

                doctor.name = req.body.name;
                doctor.specialty = req.body.specialty;

                doctor.save()
                    .then(() => res.json('Doctor updated!'))
                    .catch(err => res.status(400)
                        .json('Error: ' + err));
            })
            .catch(err => res.status(400)
                .json('Error: ' + err));
    });

// Delete doctor by ID
router.route('/delete/:id').delete((req, res) => {
    Doctor.findByIdAndDelete(req.params.id)
        .then(doctor => {
            if (!doctor) {
                return res.status(404)
                    .json('Doctor not found');
            }
            res.json('Doctor deleted!');
        })
        .catch(err => res.status(400)
            .json('Error: ' + err));
});

module.exports = router;

// routes/patients.js

const express = require('express');
const router = express.Router();
const Patient = require('../models/Patient');

// Get all patients
router.route('/').get((req, res) => {
    Patient.find()
        .then(patients =>
            res.json(patients))
        .catch(err =>
            res.status(400)
                .json('Error: ' + err));
});

// Add new patient
router.route('/add')
    .post((req, res) => {
        const { name, age, gender } = req.body;

        const newPatient =
            new Patient({ name, age, gender });

        newPatient.save()
            .then(savedPatient =>
                res.json(savedPatient))
            .catch(err => res.status(400)
                .json('Error: ' + err));
    });

// Update patient data
router.route('/update/:id')
    .post((req, res) => {
        console.log('hihhhhiuhiihihiuhiuh');

        Patient.findById(req.params.id)
            .then(patient => {
                if (!patient) {
                    return res.status(404)
                        .json('Patient not found');
                }

                patient.name = req.body.name;
                patient.age = req.body.age;
                patient.gender = req.body.gender;

                patient.save()
                    .then(() => res.json('Patient updated!'))
                    .catch(err => res.status(400)
                        .json('Error: ' + err));
            })
            .catch(err => res.status(400)
                .json('Error: ' + err));
    });

// Delete patient by ID
router.route('/delete/:id')
    .delete((req, res) => {
        Patient.findByIdAndDelete(req.params.id)
            .then(patient => {
                if (!patient) {
                    return res.status(404)
                        .json('Patient not found');
                }
                res.json('Patient deleted!');
            })
            .catch(err => res.status(400)
                .json('Error: ' + err));
    });

module.exports = router;

// models/Appointment.js

const mongoose = require('mongoose');
const Schema = mongoose.Schema;
const appointmentSchema = new Schema({
    patientName: { type: String, required: true },
    doctorName: { type: String, required: true },
    date: { type: Date, required: true },
    // Add more fields as needed
});

const Appointment =
    mongoose.model('Appointment', appointmentSchema);

module.exports = Appointment;

// models/Doctor.js

const mongoose = require('mongoose');
const Schema = mongoose.Schema;
const doctorSchema = new Schema({
    name: { type: String, required: true },
    specialty: { type: String, required: true },
    // Add more fields as needed
});

const Doctor =
    mongoose.model('Doctor', doctorSchema);

module.exports = Doctor;

// models/Patient.js

const mongoose = require('mongoose');
const Schema = mongoose.Schema;
const patientSchema = new Schema({
    name: { type: String, required: true },
    age: { type: Number, required: true },
    gender: { type: String, required: true },
    // Add more fields as needed
});
const Patient = mongoose.model('Patient', patientSchema);
module.exports = Patient;

//App.js
import React from 'react';
import {
    BrowserRouter as Router,
    Routes, Route,
    Link, useNavigate
} from 'react-router-dom';
import Appointments
    from './components/Appointments';
import Doctors from './components/Doctors';
import Patients from './components/Patients';
import './App.css'

const App = () => {
    const isLinkActive =
        (path) =>
            window.location.pathname === path;
    return (
        <Router>
            <div className="container">
                <h1 style={{ color: "green" }}>
                    GFG- Hospital Managment App
                </h1>
                <nav>
                    <ul>
                        <li className={
                            isLinkActive('/appointments')
                                ? 'active' : ''}>
                            <Link to="/appointments">
                                Appointments
                            </Link>
                        </li>
                        <li className={
                            isLinkActive('/doctors') ?
                                'active' : ''}>
                            <Link to="/doctors">
                                Doctors
                            </Link>
                        </li>
                        <li className={
                            isLinkActive('/patients') ?
                                'active' : ''}>
                            <Link to="/patients">
                                Patients
                            </Link>
                        </li>
                    </ul>
                </nav>

                <Routes>
                    <Route path="/appointments"
                        element={<Appointments />} />
                    <Route path="/"
                        element={<Appointments />} />
                    <Route path="/doctors"
                        element={<Doctors />} />
                    <Route path="/patients"
                        element={<Patients />} />
                </Routes>
            </div>
        </Router>
    );
}

export default App;

//Appointments.js
import React,
{
    useState,
    useEffect
} from 'react';
import axios from 'axios';
import AppointmentCard
    from './AppointmentCard';
import './Appointment.css'

const Appointments = () => {
    const [appointments, setAppointments] = useState([]);
    const [newAppointment, setNewAppointment] =
        useState(
            {
                patientName: '',
                doctorName: '', date: ''
            });
    const [selectedAppointment, setSelectedAppointment] = useState(null);
    const [isEditMode, setIsEditMode] = useState(false);


    useEffect(() => {
        axios
            .get(
'http://localhost:5000/appointments')
            .then(
                response =>
                    setAppointments(response.data))
            .catch(
                error =>
                    console.error('Error fetching appointments:', error)
            );
    }, []);

    const handleAddAppointment =
        (e) => {
            e.preventDefault();

            axios
                .post(
'http://localhost:5000/appointments/add', newAppointment)
                .then(response => {
                    console.log(response.data);
                    setAppointments(
                        [
                            ...appointments,
                            response.data]);
                    setNewAppointment(
                        {
                            patientName: '',
                            doctorName: '', date: ''
                        });
                })
                .catch(error =>
                    console.error('Error adding appointment:', error));
        };

    const handleUpdateAppointment =
        (id, e) => {
            e.preventDefault();
            axios
                .post(
`http://localhost:5000/appointments/update/${id}`, selectedAppointment)
                .then(response => {
                    console.log(response.data);
                    const updateApp = {
                        ...selectedAppointment,
                        _id: id
                    };
                    setAppointments(
                        appointments.map(
                            appointment =>
                            (appointment._id === id
                                ? updateApp :
                                appointment)
                        ));
                    setSelectedAppointment(null);
                    setIsEditMode(false); // Switch back to Add mode
                })
                .catch(
                    error =>
                        console.error('Error updating appointment:', error));
        };

    const handleDeleteAppointment =
        (id) => {
            axios
                .delete(
`http://localhost:5000/appointments/delete/${id}`)
                .then(response => {
                    console.log(response.data);
                    setAppointments(
                        appointments.filter(
                            appointment =>
                                appointment._id !== id)
                    );
                })
                .catch(error =>
                    console.error('Error deleting appointment:', error));
        };

    const handleEditAppointment =
        (appointment) => {
            setSelectedAppointment(appointment);
            setIsEditMode(true); // Switch to Edit mode
        };

    return (
        <div className='flex-row' style={{ width: "100%" }}>
            <div className='flex-column'>
                <div className='add-form'>
                    <h4>
                        {
                            isEditMode ?
                                'Edit Appointment' :
                                'Add New Appointment'
                        }
                    </h4>
                    <form className="appointment-form"
                        onSubmit={
                            isEditMode ?
                                (e) =>
                                    handleUpdateAppointment(selectedAppointment._id, e) :
                                handleAddAppointment
                        }>
                        <label>Patient Name:</label>
                        <input type="text"
                            value={
                                isEditMode ?
                                    selectedAppointment.patientName :
                                    newAppointment.patientName
                            }
                            onChange={
                                (e) =>
                                    isEditMode ?
                                        setSelectedAppointment(
                                            {
                                                ...selectedAppointment,
                                                patientName: e.target.value
                                            }) :
                                        setNewAppointment(
                                            {
                                                ...newAppointment,
                                                patientName: e.target.value
                                            })} />
                        <label>Doctor Name:</label>
                        <input type="text"
                            value={
                                isEditMode ?
                                    selectedAppointment.doctorName :
                                    newAppointment.doctorName
                            }
                            onChange={
                                (e) =>
                                    isEditMode ?
                                        setSelectedAppointment(
                                            {
                                                ...selectedAppointment,
                                                doctorName: e.target.value
                                            }) :
                                        setNewAppointment(
                                            {
                                                ...newAppointment,
                                                doctorName: e.target.value
                                            })} />
                        <label>Date:</label>
                        <input type="date"
                            value={
                                isEditMode ?
                                    selectedAppointment.date :
                                    newAppointment.date
                            }
                            onChange={
                                (e) =>
                                    isEditMode ?
                                        setSelectedAppointment(
                                            {
                                                ...selectedAppointment,
                                                date: e.target.value
                                            }) :
                                        setNewAppointment(
                                            {
                                                ...newAppointment,
                                                date: e.target.value
                                            })} />
                        <button type="submit">
                            {
                                isEditMode ?
                                    'Update Appointment' :
                                    'Add Appointment'
                            }
                        </button>
                    </form>
                </div>
            </div>
            <div className='appointments'>
                <h3>Appointments
                    (
                    {
                        appointments.length
                    })
                </h3>
                <div className="appointment-list">
                    {appointments.map(appointment => (
                        <AppointmentCard
                            key={appointment._id}
                            appointment={appointment}
                            onEdit={handleEditAppointment}
                            onDelete={handleDeleteAppointment}
                        />
                    ))}
                </div>
            </div>
        </div>
    );
};

export default Appointments;

// src/components/AppointmentCard.js

import React from 'react';

const AppointmentCard =
    (
        {
            appointment,
            onEdit,
            onDelete
        }
    ) => {
        return (
            <div
                className="appointment-card">
                <p>
                    <span>
                        Patient:
                    </span>
                    {appointment.patientName}
                </p>
                <p>
                    <span>
                        Doctor:
                    </span>
                    {appointment.doctorName}</p>
                <p>
                    <span>
                        Date:
                    </span>
                    {
                        new Date(appointment.date)
                            .toLocaleDateString()
                    }
                </p>
                <div className='btn-container'>
                    <button onClick={
                        () =>
                            onEdit(appointment)
                    }>
                        Edit
                    </button>
                    <button onClick={
                        () =>
                            onDelete(appointment._id)
                    }>
                        Delete
                    </button>
                </div>

            </div>
        );
    };

export default AppointmentCard;

//Doctors.js
import React,
{
    useState,
    useEffect
} from 'react';
import axios from 'axios';
import DoctorCard from './DoctorCard';
import './Doctors.css'

const Doctors = () => {
    const [doctors, setDoctors] = useState([]);
    const [newDoctor, setNewDoctor] =
        useState(
            {
                name: '',
                specialty: ''
            });
    const [selectedDoctor, setSelectedDoctor] = useState(null);
    const [isEditMode, setIsEditMode] = useState(false);


    useEffect(
        () => {
            axios
                .get('http://localhost:5000/doctors')
                .then(
                    response =>
                        setDoctors(response.data))
                .catch(
                    error =>
                        console.error('Error fetching doctors:', error)
                );
        }, []);

    const handleAddDoctor =
        (e) => {
            e.preventDefault();
            axios
                .post(
'http://localhost:5000/doctors/add', newDoctor)
                .then(
                    response => {
                        console.log("doc", response.data);
                        setDoctors(
                            [
                                ...doctors,
                                response.data
                            ]
                        );
                        setNewDoctor(
                            {
                                name: '',
                                specialty: ''
                            });
                    })
                .catch(
                    error =>
                        console.error('Error adding doctor:', error));
        };

    const handleUpdateDoctor =
        (id, e) => {
            e.preventDefault();
            axios
                .post(
`http://localhost:5000/doctors/update/${id}`, selectedDoctor)
                .then(response => {
                    const updateDoc = {
                        ...selectedDoctor,
                        _id: id
                    };

                    console.log('update doc', updateDoc);

                    setDoctors(
                        doctors.map(
                            doctor =>
                                (doctor._id === id ? updateDoc : doctor)));

                    setSelectedDoctor(null);
                    setIsEditMode(false); // Switch back to Add mode
                })
                .catch(
                    error =>
                        console.error('Error updating doctor:', error));
        };

    const handleDeleteDoctor = (id) => {
        axios.delete(
`http://localhost:5000/doctors/delete/${id}`)
            .then(response => {
                console.log(response.data);
                setDoctors(
                    doctors
                        .filter(doctor => doctor._id !== id)
                );
            })
            .catch(
                error =>
                    console.error('Error deleting doctor:', error));
    };

    const handleEditDoctor =
        (doctor) => {
            setSelectedDoctor(doctor);
            setIsEditMode(true); // Switch to Edit mode
        };

    return (
        <div className='main-doc-container  '>
            <div className='form-sections  '>
                <h4>
                    {
                        isEditMode ?
                            'Edit Doctor' :
                            'Add New Doctor'
                    }
                </h4>
                <form
                    onSubmit={
                        isEditMode ?
                            (e) =>
                                handleUpdateDoctor(selectedDoctor._id, e) :
                            handleAddDoctor}>
                    <label>Name: </label>
                    <input
                        type="text"
                        value={
                            isEditMode ?
                                selectedDoctor.name :
                                newDoctor.name
                        }
                        onChange={
                            (e) =>
                                isEditMode ?
                                    setSelectedDoctor(
                                        {
                                            ...selectedDoctor,
                                            name: e.target.value
                                        }) :
                                    setNewDoctor(
                                        {
                                            ...newDoctor,
                                            name: e.target.value
                                        })} />
                    <br />
                    <label>Specialty: </label>
                    <input type="text"
                        value=
                        {
                            isEditMode ?
                                selectedDoctor.specialty :
                                newDoctor.specialty
                        }
                        onChange={
                            (e) =>
                                isEditMode ?
                                    setSelectedDoctor(
                                        {
                                            ...selectedDoctor,
                                            specialty: e.target.value
                                        }
                                    ) :
                                    setNewDoctor(
                                        {
                                            ...newDoctor,
                                            specialty: e.target.value
                                        }
                                    )} />
                    <br />
                    <button type="submit">
                        {
                            isEditMode ?
                                'Update Doctor' :
                                'Add Doctor'
                        }</button>
                </form>
            </div>
            <div className='doctors-section  '>
                <h3>Doctors({doctors.length}) </h3>
                <div className="doctor-list">
                    {doctors.map(doctor => (
                        <DoctorCard
                            key={doctor._id}
                            doctor={doctor}
                            onEdit={handleEditDoctor}
                            onDelete={handleDeleteDoctor}
                        />
                    ))}
                </div>
            </div>

        </div>
    );
};

export default Doctors;

// src/components/DoctorCard.js

import React from 'react';

const DoctorCard =
    (
        {
            doctor, onEdit,
            onDelete
        }
    ) => {
        return (
            <div className="doctor-card">
                <p>
                    {doctor.name} -
                    {doctor.specialty}
                </p>
                <div className='btn-container'>
                    <button onClick={
                        () =>
                            onEdit(doctor)
                    }>
                        Edit
                    </button>
                    <button onClick={
                        () =>
                            onDelete(doctor._id)
                    }>
                        Delete
                    </button>
                </div>
            </div>
        );
    };

export default DoctorCard;

// src/components/Patients.js

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import './Patients.css';
import PatientCard from './PatientCard';

const Patients = () => {
    const [patients, setPatients] = useState([]);
    const [newPatient, setNewPatient] =
        useState({ name: '', age: '', gender: '' });
    const [selectedPatient, setSelectedPatient] = useState(null);
    const [isEditMode, setIsEditMode] = useState(false);


    useEffect(
        () => {
            axios.get('http://localhost:5000/patients')
                .then(response => setPatients(response.data))
                .catch(error =>
                    console.error('Error fetching patients:', error));
        }, []);


    const handleAddPatient =
        (e) => {
            e.preventDefault();

            axios.post(
'http://localhost:5000/patients/add', newPatient)
                .then(response => {
                    console.log(response.data);
                    setPatients([...patients, response.data]);
                    setNewPatient({ name: '', age: '', gender: '' });
                })
                .catch(error =>
                    console.error('Error adding patient:', error));
        };

    const handleUpdatePatient =
        (id, e) => {
            e.preventDefault();

            axios.post(
`http://localhost:5000/patients/update/${id}`, selectedPatient)
                .then(response => {
                    const updatePat = {
                        ...selectedPatient,
                        _id: id
                    };

                    console.log('update patient', updatePat);

                    setPatients(
                        patients.map(
                            patient =>
                            (patient._id === id
                                ? updatePat : patient)));

                    setSelectedPatient(null);
                    setIsEditMode(false); // Switch back to Add mode
                })
                .catch(
                    error =>
                        console.error('Error updating patient:', error));
        };

    const handleDeletePatient =
        (id) => {
            axios.delete(
`http://localhost:5000/patients/delete/${id}`)
                .then(response => {
                    console.log(response.data);
                    setSelectedPatient(null);
                    setPatients(
                        patients.filter(
                            patient => patient._id !== id));
                })
                .catch(
                    error =>
                        console.error('Error deleting patient:', error));
        };

    const handleEditPatient =
        (patient) => {
            setSelectedPatient(patient);
            setIsEditMode(true); // Switch to Edit mode
        };

    return (
        <div className='patient-main  '>
            <div className='form-sections  '>
                <h4>
                    {
                        isEditMode ?
                            'Edit Patient' :
                            'Add New Patient'
                    }
                </h4>
                <form onSubmit=
                    {
                        isEditMode ?
                            (e) =>
                                handleUpdatePatient(selectedPatient._id, e) :
                            handleAddPatient}>
                    <label>Name: </label>
                    <input type="text"
                        value={
                            isEditMode ?
                                selectedPatient.name :
                                newPatient.name
                        }
                        onChange={
                            (e) =>
                                isEditMode
                                    ? setSelectedPatient(
                                        {
                                            ...selectedPatient,
                                            name: e.target.value
                                        }) :
                                    setNewPatient(
                                        {
                                            ...newPatient,
                                            name: e.target.value
                                        }
                                    )} />
                    <br />
                    <label>Age: </label>
                    <input type="text"
                        value=
                        {
                            isEditMode ?
                                selectedPatient.age : newPatient.age
                        }
                        onChange={
                            (e) =>
                                isEditMode ?
                                    setSelectedPatient(
                                        {
                                            ...selectedPatient,
                                            age: e.target.value
                                        }) :
                                    setNewPatient(
                                        {
                                            ...newPatient,
                                            age: e.target.value
                                        }
                                    )} />
                    <br />
                    <label>Gender: </label>
                    <input type="text"
                        value=
                        {
                            isEditMode ?
                                selectedPatient.gender :
                                newPatient.gender
                        } onChange={
                            (e) =>
                                isEditMode ?
                                    setSelectedPatient(
                                        {
                                            ...selectedPatient,
                                            gender: e.target.value
                                        }) :
                                    setNewPatient(
                                        {
                                            ...newPatient,
                                            gender: e.target.value
                                        })} />
                    <br />
                    <button type="submit">
                        {
                            isEditMode ?
                                'Update Patient' :
                                'Add Patient'
                        }
                    </button>
                </form>
            </div>

            <div className='patients-section  '>
                <h3 style={{ textAlign: "center" }}>
                    Patients
                    ({patients.length})
                </h3>

                <div className="patient-list">
                    {patients.map(patient => (
                        <PatientCard
                            key={patient._id}
                            patient={patient}
                            onEdit={handleEditPatient}
                            onDelete={handleDeletePatient}
                        />
                    ))}
                </div>
            </div>
        </div>
    );
};

export default Patients;