# Hospital Management System (HMS) - MERN Stack This is a premium, full-featured Hospital Management System (HMS) built on the **MERN Stack** (MongoDB, Express, React, Node.js) featuring a modern, custom **Sky Blue Glassmorphism UI**. ## Project Structure ``` hms/ ├── backend/ # Express.js backend api service │ ├── src/ # API source code (routes, controllers, database models) │ ├── data/ # Local JSON fallback files (automatically initialized) │ ├── package.json │ └── render.yaml # Render deployment blueprint └── frontend/ # React SPA frontend application ├── src/ # Views, styles, assets ├── package.json └── vercel.json # Vercel deployment rewrite rules ``` --- ## Local Development (Quickstart) The backend features an **automatic offline database fallback**. If no `MONGODB_URI` environment variable is defined, it runs using local JSON files in `backend/data/`. This lets you compile and run the entire full-stack application immediately **without needing MongoDB installed on your computer**. ### 1. Start Backend API Open a terminal in the `backend` folder: ```bash cd backend npm install npm start ``` *The server will start on `http://localhost:5000` and automatically populate seed credentials.* ### 2. Start Frontend App Open a separate terminal in the `frontend` folder: ```bash cd frontend npm install npm run dev ``` *The web app will run on `http://localhost:5173`. Open it in your browser!* ### 3. Log In (Demo Credentials) You can select quick-login buttons on the login screen or enter manually: - **Administrator**: `admin` / `password123` - **Doctor**: `doctor` / `password123` - **Nurse**: `nurse` / `password123` - **Receptionist**: `receptionist` / `password123` - **Pharmacist**: `pharmacist` / `password123` - **Laboratory Staff**: `labstaff` / `password123` - **Accountant**: `accountant` / `password123` --- ## Production Deployment & Hosting Guide Here is how you can host the application on **Render** (backend) and **Vercel** (frontend). ### 1. Backend on Render 1. Push this repository to your GitHub. 2. Log in to [Render](https://render.com/). 3. Click **New** -> **Blueprint**. 4. Link your GitHub repository. 5. Render will automatically parse the `backend/render.yaml` configuration and list the service. 6. During setup, configure your environment variables: - `MONGODB_URI`: Your connection string from [MongoDB Atlas](https://www.mongodb.com/cloud/atlas). 7. Once successfully deployed, Render will provide your live API endpoint (e.g., `https://hms-api-service.onrender.com`). ### 2. Frontend on Vercel 1. Log in to [Vercel](https://vercel.com/). 2. Click **Add New** -> **Project**. 3. Import your GitHub repository. 4. Select the `frontend` directory as the root. 5. In the **Environment Variables** section, add: - `VITE_API_URL` = `https://your-render-backend-url.onrender.com/api` 6. Click **Deploy**. 7. Vercel will build the React bundle and host it on a fast global CDN, serving the app on a free `vercel.app` domain. # Hospitalms