Appointment Management System using React
Last Updated : 25 Jul, 2024
The Appointment Management System is a web application that allows users to schedule, manage, and view appointments. It provides an easy-to-use interface for clients to book and keep track of appointments. Below is a simplified outline for creating an Appointment Management System using React JS.
Preview of final output: Let us have a look at how the final output will look like.
Prerequisites / Technologies used:
Approach to Creating an Appointment Management System:
Users can book an appointment and view a list of all appointments. Ability to add, edit, and delete appointments. In this project, I have a state that stores appointment variables like name, date, etc., and when we update the name and date it is responsible for state management.
Steps to create the project:
Step 1: Setting Up the React App:
npx create-react-app appointment-management-system
Step 2: Navigate to the project folder using:
cd appointment-management-system
Step 3: Create a folder “Components” and add three new files in it namely AppointmentForm.js, AppointmentList.js and Calender.js.
Project Structure:
Example code:
Write the following code in respective files:
- AppointmentForm.js: Component for adding appointments. Updated to include a calendar for choosing appointment dates.
- AppointmentList.js: Component for displaying a list of appointments.
- App.js: This file imports the appointment components and exports it.
CSS /*App.css*/ * { box-sizing: border-box; } input[type=text], input[type=date], select, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; resize: vertical; } label { padding: 12px 12px 12px 0; display: inline-block; } input[type=submit] { background-color: #04AA6D; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; float: right; margin-top: 2rem; } button { background-color: #04AA6D; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; margin-top: 1rem; margin-right: 1rem; } button:hover, [type=submit]:hover { background-color: #45a049; } .container { width: 60%; margin: auto; border-radius: 5px; background-color: #f2f2f2; padding: 20px; } h1 { text-align: center; color: green; } .col-25 { float: left; width: 25%; margin-top: 6px; } .col-75 { float: left; width: 75%; margin-top: 6px; } .row::after { content: ""; display: table; clear: both; } #list { font-family: Arial, Helvetica, sans-serif; border-collapse: collapse; width: 100%; } #list td, #list th { border: 1px solid #ddd; padding: 8px; } #list tr:nth-child(even) { background-color: #f2f2f2; } #list tr:hover { background-color: #ddd; } #list th { padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: #04AA6D; color: white; } @media screen and (max-width: 600px) { .col-25, .col-75, input[type=submit] { width: 100%; margin-top: 0; } } // AppointmentForm.js import React, { useState } from "react"; const AppointmentForm = ({ addAppointment }) => { const [name, setName] = useState(""); const [date, setDate] = useState(""); const handleSubmit = (e) => { e.preventDefault(); addAppointment({ name, date }); setName(""); setDate(""); }; return ( <div class="container"> <form onSubmit={handleSubmit}> <div class="row"> <div class="col-25"> <label for="fname">Full Name</label> </div> <div class="col-75"> <input type="text" id="fname" name="firstname" placeholder="Your name.." value={name} onChange={(e) => setName(e.target.value)} /> </div> </div> <div class="row"> <div class="col-25"> <label for="fname">Appointment Date: </label> </div> <div class="col-75"> <input id="fname" name="firstname" placeholder="Your name.." type="date" value={date} onChange={(e) => setDate(e.target.value)} /> </div> </div> <div class="row"> <input type="submit" value="Add Appointment" /> </div> </form> </div> ); }; export default AppointmentForm; // AppointmentList.js import React, { useState } from "react"; const AppointmentList = ({ appointments, deleteAppointment, editAppointment, clearAppointments, }) => { const [editedIndex, setEditedIndex] = useState(null); const [editedName, setEditedName] = useState(""); const [editedDate, setEditedDate] = useState(""); const handleEdit = (index) => { setEditedIndex(index); setEditedName(appointments[index].name); setEditedDate(appointments[index].date); }; const handleSaveEdit = (index) => { editAppointment(index, editedName, editedDate); setEditedIndex(null); setEditedName(""); }; const handleCancelEdit = () => { setEditedIndex(null); setEditedName(""); }; return ( <div className="container"> <h1>Appointment List</h1> <table id="list"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Date</th> <th>Action</th> </tr> </thead> <tbody> {appointments.map((appointment, index) => ( <tr key={index}> <td>{index + 1}</td> <td> {editedIndex === index ? ( <input type="text" value={editedName} onChange={(e) => setEditedName(e.target.value) } /> ) : ( appointment.name )} </td> <td> {editedIndex === index ? ( <input type="date" value={editedDate} onChange={(e) => setEditedDate(e.target.value) } /> ) : ( appointment.date )} </td> <td> {editedIndex === index ? ( <> <button onClick={() => handleSaveEdit(index) } > Save </button> <button onClick={handleCancelEdit}> Cancel </button> </> ) : ( <> <button onClick={() => handleEdit(index)} > Edit </button> <button onClick={() => deleteAppointment(index) } > Delete </button> </> )} </td> </tr> ))} </tbody> </table> <button onClick={clearAppointments}>Clear All Appointments</button> </div> ); }; export default AppointmentList; // App.js import React, { useState } from "react"; import "./App.css"; import AppointmentForm from "./Components/AppointmentForm"; import AppointmentList from "./Components/AppointmentList"; const App = () => { const [appointments, setAppointments] = useState([]); const addAppointment = (appointment) => { setAppointments([...appointments, appointment]); }; const deleteAppointment = (index) => { const deletedAppointments = [...appointments]; deletedAppointments.splice(index, 1); setAppointments(deletedAppointments); }; const editAppointment = (index, editedName, editedDate) => { const updatedAppointments = [...appointments]; updatedAppointments[index] = { name: editedName, date: editedDate, }; setAppointments(updatedAppointments); }; const clearAppointments = () => { setAppointments([]); }; return ( <div> <h1>Appointment Management System</h1> <AppointmentForm addAppointment={addAppointment} /> <AppointmentList appointments={appointments} deleteAppointment={deleteAppointment} clearAppointments={clearAppointments} editAppointment={editAppointment} /> </div> ); }; export default App; Steps to run the application:
Step 1: Type the following command in terminal.
npm start
Step 2: Open web-browser and type the following URL
http://localhost:3000/
Output:
Similar Reads
Content Management System (CMS) using React and Express.js
This project is a Content Management System (CMS) Admin Panel developed using React for the frontend and NodeJS and ExpressJS for the backend. The Admin Panel allows administrators to manage content, including viewing and editing posts, approving pending posts, and adding new content. It features re
8 min read
Build an Event Management System Using Next.js
An Event Management System is a web application that helps users create and manage events. It typically includes features such as event creation, editing, deletion, and listing. By using Next.js, a React framework for server-rendered applications, we can use its built-in routing and server-side rend
10 min read
Build a Learning Management System Using Next.js
A Learning Management System (LMS) is a platform for delivering, tracking, and managing educational courses. In this article, we'll guide you through building a simple LMS using Next.js, covering course creation, listing, and basic management features. PrerequisitesNext.jsBootstrapNodeJSApproach to
7 min read
Document Management System with React and Express.js
This project is a Document Management System (DMS) developed with a combination of NodeJS, ExpressJS for the server side and React for the client side. The system allows users to view, add, and filter documents. The server provides a basic API to retrieve document data, while the React application o
6 min read
State Management with useState Hook in React
useState is a built-in hook that empowers functional components to manage state directly, eliminating the need for class-based components or external state management libraries for simple use cases. It provides an easy mechanism to track dynamic data within a component, enabling it to React to user
3 min read
Create a Task Manager App using React-Native
In this article, we'll walk you through the process of building a basic Task Manager app using React Native. The application enables users to effortlessly create, edit, complete/incomplete, and delete tasks, providing an uncomplicated yet impactful introduction to ReÂact Native's mobile app develop
7 min read
Event Countdown Timer Using React
Event Countdown Timer is an application where you can create an event with the name, date, and category of the event and it will create a card that will show you the remaining time of the event. After reaching that time of the day it will notify you. The application will provide the option to start,
5 min read
Hospital Management Application using MERN Stack
In the fast-paced world of healthcare, it's vital to manage hospital tasks effectively to ensure top-notch patient care. This article explores creating a strong Hospital Management App using the MERN stack – that's MongoDB, Express, React, and Node.js, breaking down the process for easier understand
15+ min read
Real Estate Management using MERN
In this article, we will guide you through the process of building a Real Estate Management Application using the MERN stack. MERN stands for MongoDB, Express, React, and Node. MongoDB will serve as our database, Express will handle the backend, React will create the frontend, and Node.js will be th
9 min read
Math Sprint Game using React
In this article, we will create a Math Sprint Game Using ReactJS. Math Sprint is a fun and challenging game where players have to solve math problems within a time limit to earn points. This game presents random math questions with four options. Players click the correct answer, and if correct, it’s
5 min read