Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alekrish-12/clinic-appointment-system
The Clinic Appointment System is a web application designed to facilitate the process of scheduling and managing clinic appointments efficiently. It caters to both patients and clinic staff, providing intuitive interfaces for seamless interaction.
https://github.com/alekrish-12/clinic-appointment-system
bootstrap css favicon gitbash gitignore html javascript json-server manifest-json npm-module npm-package package package-lock reactjs visual-studio-code
Last synced: about 1 month ago
JSON representation
The Clinic Appointment System is a web application designed to facilitate the process of scheduling and managing clinic appointments efficiently. It caters to both patients and clinic staff, providing intuitive interfaces for seamless interaction.
- Host: GitHub
- URL: https://github.com/alekrish-12/clinic-appointment-system
- Owner: Alekrish-12
- Created: 2024-06-25T16:17:40.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-06-26T14:00:26.000Z (6 months ago)
- Last Synced: 2024-06-26T18:25:12.257Z (6 months ago)
- Topics: bootstrap, css, favicon, gitbash, gitignore, html, javascript, json-server, manifest-json, npm-module, npm-package, package, package-lock, reactjs, visual-studio-code
- Language: JavaScript
- Homepage: https://github.com/Alekrish-12/Clinic-Appointment-System
- Size: 110 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Clinic-Appointment-System
The Clinic Appointment System is a web application designed to streamline the process of booking and managing clinic appointments for patients and clinic administrators.
#Table of Contents
Features
Technologies Used
Setup Instructions
Usage
Screenshots
Contributing
License
---
## Functionalities Implemented
### User Authentication
- **Signup and Login:**
- Implemented a signup form for new users with validation.
- Login functionality to authenticate users based on stored credentials.
- **Email Notification:**
- Automatically sends an email to newly registered users upon successful signup.
- The email includes the username (registered email) and a default password (`Change@123`).
### Patient Dashboard
- **Home Page:**
- Displays summary information after login:
- Total number of bookings.
- Next appointment date and details.
### Navigation and Menu
- **Toggle Button Menu:**
- Displays menu options for easy navigation:
- Book Appointment: Allows patients to schedule new appointments.
- My Appointments: Displays a list of current and past appointments.
- Logout: Logs out the current user from the system.
### Appointment Management
- **Book Appointment:**
- Allows patients to book appointments with their preferred doctor.
- Captures details such as appointment date, time, doctor selection, and purpose of visit.
- **My Appointments:**
- Provides a grid view to patients listing their appointments:
- Appointment date and time.
- Doctor's name.
- Purpose of visit.
### Clinic Staff Features
- **View Appointments:**
- Clinic staff can view all patient appointments.
- Includes filters for date and doctor to facilitate appointment management.
### Responsive Design
- **Responsive Layout:**
- Ensures the application is usable across various devices (desktop, tablet, mobile).
- Utilizes Bootstrap for responsive styling and layout management.
### Error Handling and Validation
- **Form Validation:**
- Implements front-end validation for signup and appointment booking forms to ensure data integrity.
- Displays error messages for invalid inputs to enhance user experience.
### Additional Features
- **Logout Functionality:**
- Enables users (patients and clinic staff) to log out securely from the system.
- Clears session data to protect user privacy.
---
To run your Clinic Appointment System, which is a React application with JSON Server serving `userdata.json` and `appointments.json`, follow these steps:
### Prerequisites
Make sure you have Node.js and npm (Node Package Manager) installed on your machine.
### Setup Instructions
1. **Clone the Repository**
Clone your Clinic Appointment System repository from your Git provider (e.g., GitHub, GitLab):
3. **Install Dependencies**
Inside the project directory, install the required dependencies using npm: npm install
5. **Start JSON Server**
You need to start JSON Server for both `userdata.json` and `appointments.json` concurrently. Update your `package.json` with the following scripts:
"scripts": {
"start": "concurrently \"json-server --watch public/data/userdata.json --port 3001\" \"json-server --watch public/data/appointments.json --port 3002\"",
"start:app": "react-scripts start",
"start:server": "npm run start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
6. **Start the Application**
Run the following command to start both JSON Server instances and the React application: npm start.
This command will execute the `start` script defined in `package.json`, which concurrently starts two instances of `json-server` (one for `userdata.json` and one for `appointments.json`) and your React application.
8. **Access the Application**
Once the application is successfully started, you can access it in your web browser .
### Notes:
- **JSON Server Ports:**
- `userdata.json` will be served at http://localhost:4000/users
- `appointments.json` will be served at http://localhost:4001/appointments
- **Concurrent Execution:**
- The `concurrently` package allows running multiple commands concurrently in the same terminal window. It ensures both JSON Server instances and the React application are started together.
- **Development vs Production:**
- These instructions are tailored for development. For production deployment, you would typically build the React application (`npm run build`) and serve the static files using a web server like Nginx or Apache.
By following these steps, you should be able to run your Clinic Appointment System locally, interact with the application, and utilize the functionalities such as booking appointments, viewing appointments, and managing user profiles effectively. Adjust the setup according to your specific project structure and requirements as needed.
--------------------
#Website login
In conclusion, the Clinic Appointment System is designed to provide a streamlined experience for managing clinic appointments, catering to both patients and clinic staff. This README serves as a guide to understand the setup, functionalities, and usage of the application.
### Key Highlights
- **User Authentication:** Implemented secure login and signup functionalities with email notifications upon registration.
- **Appointment Management:** Patients can easily book appointments with their preferred doctors, while clinic staff can manage appointments efficiently through filtering options.
- **Dashboard and Navigation:** The application features a user-friendly dashboard displaying important information such as total bookings and upcoming appointments. Navigation is facilitated through a toggle button menu for intuitive access to different functionalities.
- **Responsive Design:** Utilizes responsive design principles to ensure compatibility across various devices, enhancing accessibility and user experience.
- **Error Handling and Validation:** Incorporates robust error handling and form validation to maintain data integrity and provide seamless interaction.
### Getting Started
To run the Clinic Appointment System locally:
1. Clone the repository and navigate to the project directory.
2. Install dependencies using npm.
3. Start both JSON Server instances (`userdata.json` and `appointments.json`) and the React application concurrently with `npm start`.
4. Access the application via `http://localhost:3000` in your web browser.
### Contributing
Contributions to the Clinic Appointment System are welcome! Fork the repository, make improvements, and submit pull requests for review. Ensure adherence to coding standards, thorough testing, and documentation updates as necessary.
### License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.
Thank you for using and contributing to the Clinic Appointment System!