| 1 | # Medora Frontend
|
|---|
| 2 |
|
|---|
| 3 | A modern React-based frontend for the Medora Medical Records Management System.
|
|---|
| 4 |
|
|---|
| 5 | ## Features
|
|---|
| 6 |
|
|---|
| 7 | - **Patient Management**: Create, view, and manage patient information
|
|---|
| 8 | - **Doctor Management**: Manage doctor profiles and specializations
|
|---|
| 9 | - **Appointments**: Schedule and manage medical appointments
|
|---|
| 10 | - **Medical Records**: Access and search patient medical records
|
|---|
| 11 | - **Billing**: Manage billing records and payment status
|
|---|
| 12 | - **Responsive Design**: Works seamlessly on desktop and mobile devices
|
|---|
| 13 |
|
|---|
| 14 | ## Prerequisites
|
|---|
| 15 |
|
|---|
| 16 | - Node.js (v14 or higher)
|
|---|
| 17 | - npm or yarn
|
|---|
| 18 |
|
|---|
| 19 | ## Installation
|
|---|
| 20 |
|
|---|
| 21 | 1. Navigate to the frontend directory:
|
|---|
| 22 | ```bash
|
|---|
| 23 | cd frontend
|
|---|
| 24 | ```
|
|---|
| 25 |
|
|---|
| 26 | 2. Install dependencies:
|
|---|
| 27 | ```bash
|
|---|
| 28 | npm install
|
|---|
| 29 | ```
|
|---|
| 30 |
|
|---|
| 31 | 3. Create a `.env` file in the frontend directory:
|
|---|
| 32 | ```
|
|---|
| 33 | REACT_APP_API_URL=http://localhost:8080/api
|
|---|
| 34 | ```
|
|---|
| 35 |
|
|---|
| 36 | ## Running the Application
|
|---|
| 37 |
|
|---|
| 38 | Start the development server:
|
|---|
| 39 | ```bash
|
|---|
| 40 | npm start
|
|---|
| 41 | ```
|
|---|
| 42 |
|
|---|
| 43 | The application will open at `http://localhost:3000`
|
|---|
| 44 |
|
|---|
| 45 | ## Building for Production
|
|---|
| 46 |
|
|---|
| 47 | ```bash
|
|---|
| 48 | npm run build
|
|---|
| 49 | ```
|
|---|
| 50 |
|
|---|
| 51 | This creates a production-ready build in the `build` directory.
|
|---|
| 52 |
|
|---|
| 53 | ## Project Structure
|
|---|
| 54 |
|
|---|
| 55 | ```
|
|---|
| 56 | frontend/
|
|---|
| 57 | ├── public/ # Static assets
|
|---|
| 58 | ├── src/
|
|---|
| 59 | │ ├── components/ # Reusable React components
|
|---|
| 60 | │ ├── pages/ # Page components
|
|---|
| 61 | │ │ ├── patients/
|
|---|
| 62 | │ │ ├── doctors/
|
|---|
| 63 | │ │ ├── appointments/
|
|---|
| 64 | │ │ ├── medical-records/
|
|---|
| 65 | │ │ └── billing/
|
|---|
| 66 | │ ├── services/ # API service modules
|
|---|
| 67 | │ ├── App.js # Main app component
|
|---|
| 68 | │ ├── index.js # React entry point
|
|---|
| 69 | │ └── index.css # Global styles
|
|---|
| 70 | ├── package.json
|
|---|
| 71 | └── tailwind.config.js # Tailwind CSS configuration
|
|---|
| 72 | ```
|
|---|
| 73 |
|
|---|
| 74 | ## API Endpoints
|
|---|
| 75 |
|
|---|
| 76 | The frontend communicates with the backend API at:
|
|---|
| 77 | - Base URL: `http://localhost:8080/api`
|
|---|
| 78 |
|
|---|
| 79 | Ensure the backend server is running before starting the frontend.
|
|---|
| 80 |
|
|---|
| 81 | ## Technologies Used
|
|---|
| 82 |
|
|---|
| 83 | - **React 18**: UI library
|
|---|
| 84 | - **React Router 6**: Client-side routing
|
|---|
| 85 | - **Axios**: HTTP client
|
|---|
| 86 | - **Tailwind CSS**: Utility-first CSS framework
|
|---|
| 87 |
|
|---|
| 88 | ## License
|
|---|
| 89 |
|
|---|
| 90 | This project is part of the Medora Medical Records Management System.
|
|---|
