This is a complete React.js frontend application for a Hospital Appointment Management System that allows patients to book, modify, and cancel appointments with doctors. The application includes email notifications for all patient actions.
- React 18 - Frontend framework with functional components and hooks
- React Router DOM - Client-side routing
- Tailwind CSS - Utility-first CSS framework
- Axios - HTTP client for API requests
- React Toastify - User notifications and alerts
- Context API - Global state management
src/
├── components/
│ ├── common/
│ │ ├── Header.js - Main navigation header
│ │ └── Footer.js - Application footer
│ └── patient/
│ └── PatientLogin.js - Patient login component
├── pages/
│ ├── Home.js - Landing/home page
│ ├── Register.js - Patient registration
│ ├── Login.js - Patient login
│ ├── BookAppointment.js - Appointment booking form
│ └── MyAppointments.js - View & manage appointments
├── services/
│ ├── api.js - API client and endpoints
│ └── emailService.js - Email notification service
├── contexts/
│ └── PatientContext.js - Authentication context
├── App.js - Main application component
├── index.js - React entry point
└── index.css - Global styles
- Register with patient ID, name, email, phone, address, date of birth, and gender
- Validates patient ID uniqueness
- Auto-login after successful registration
- Sends registration confirmation email
- Login using patient ID and email
- Persistent session using localStorage
- Protected routes for authenticated users
- Logout functionality
- Doctor selection with specialization display
- Real-time date picker (future dates only, up to 30 days)
- Available time slots display
- Reason for visit (optional)
- Email confirmation after booking
- View all patient appointments
- Filter/sort by status (Planifié, Confirmé, Annulé, Terminé)
- Modify upcoming appointments
- Cancel appointments
- Email notifications for updates/cancellations
- Mock email service (ready for backend integration)
- Registration welcome email
- Appointment confirmation emails
- Appointment update notifications
- Cancellation confirmations
- Install Dependencies
npm install-
Configure Backend URL The API base URL is set to
http://localhost:8080/apiinsrc/services/api.jsModify this if your backend is hosted elsewhere. -
Start Development Server
npm startThe application will open at http://localhost:3000
npm run buildCreates an optimized production build in the build folder.
POST /api/patients- Register new patientGET /api/patients/:patientId- Get patient details
GET /api/doctors- Get all doctorsGET /api/doctors/:doctorId- Get doctor details
GET /api/appointments/patient/:patientId- Get patient appointmentsGET /api/appointments/availability/:doctorId/:date- Get available slotsPOST /api/appointments- Create appointmentPUT /api/appointments/:id- Update appointmentPUT /api/appointments/:id/cancel- Cancel appointment
- Primary Color: Blue (#3b82f6)
- Secondary: Dark Blue (#1e40af)
- Light Background: #eff6ff
- Professional Healthcare Theme
- Mobile-first approach
- Tailwind CSS breakpoints
- Works on all devices
- WCAG accessibility compliant
- Home - Hero section with features and CTA
- Register - Patient registration form
- Login - Simple authentication form
- Book Appointment - Multi-step appointment booking
- My Appointments - Appointment management dashboard
- User clicks "Sign Up" on home page
- Fills registration form with personal details
- System validates form and patient ID uniqueness
- Registration successful → Auto-login → Redirect to appointments
- Confirmation email sent
- Authenticated user navigates to "Book Appointment"
- Selects doctor from dropdown
- Chooses date (tomorrow to 30 days ahead)
- Selects available time slot
- Adds reason for visit (optional)
- Confirms booking → Email notification sent
- Redirected to appointments list
- User views all appointments on dashboard
- Can edit upcoming appointments (date, time, reason)
- Can cancel appointments
- Email notifications sent for any changes
- Form validation with clear error messages
- API error handling with user-friendly notifications
- Network error handling with retry suggestions
- Loading states for async operations
- Input sanitization for security
- PatientContext - Manages authentication state
- localStorage - Persists login session
- Local State - Component-level form and data state
- No additional state management needed due to Context API
- Input validation and sanitization
- Protected routes for authenticated pages
- Secure localStorage for session persistence
- HTTPS-ready API endpoints
- XSS protection through React's built-in escaping
- React Toastify - Toast notifications
- Success messages for user actions
- Error messages with helpful guidance
- Auto-dismiss after 4 seconds
- Position: bottom-right
- Lazy loading of routes
- Optimized re-renders with React hooks
- Efficient API calls (no unnecessary requests)
- CSS minification via Tailwind
- Image optimization ready
Create a .env file if needed:
REACT_APP_API_BASE_URL=http://localhost:8080/api
- Ensure backend is running on
http://localhost:8080 - Check API base URL in
src/services/api.js - Check browser console for CORS errors
- Verify patient is logged in
- Check if patient ID in localStorage matches backend
- Ensure backend database has appointment data
- Email service is currently mocked
- Check browser console for email logs
- For production, integrate with email service (SendGrid, etc.)
- Email service backend integration
- Advanced appointment filtering/search
- Appointment reminders and notifications
- Patient profile management
- Medical history tracking
- Prescription management
- Payment integration
- Doctor ratings and reviews
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
This project is part of the Hospital Appointment Management System.
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.