Submitted By:
MUHAMMAD WALEED ZAIB
MOHSIN ALI
Registration No:
FA22-BCS-149
FA22-BCS-179
Submitted To:
MAM RISMSHA NAHEED
Subject:
MOBILE APPLICATION DEVELOPMENT
Doctor Appointment App Report
Project Overview
The Doctor Appointment App is a Flutter-based mobile application designed to
streamline healthcare services by enabling patients to book appointments with
doctors and allowing doctors to manage their schedules. The app integrates Firebase
for authentication and data storage, Cloudinary for image uploads, and uses the GetX
package for state management and navigation. It supports two primary user roles:
Patient and Doctor, each with tailored functionalities.
Features
1. Authentication
Login: Users authenticate using email and password. A specific doctor account
(waleed@gmail.com) is reserved for doctor access.
Sign Up: Patients can create accounts with email, password, and confirmation.
The app assigns a "patient" role in Firestore and sets the display name.
Password Reset: Users can request a password reset email for account recovery.
Role-Based Access: The app directs users to appropriate interfaces based on their
role (PatientPage for patients, DoctorPage for doctors using waleed@gmail.com).
2. Patient Features
Doctor Search: Patients can search doctors by name or category, with results
displayed in a list view.
Doctor Details: Displays comprehensive doctor information, including name,
category, hospital, address, contact number, and an "About" section.
Appointment Booking: Patients book appointments by entering their name,
mobile number, and description, with appointments saved as "pending."
View Appointments: Patients can view their appointments, including doctor name,
status, and description, with an option to delete appointments.
3. Doctor Features
Doctor Management: Doctors can add, edit, or delete profiles, including details
like name, category, hospital, address, contact number, and an optional
Cloudinary-uploaded image.
Appointment Management: Doctors can view appointments, confirm pending
ones, update statuses (e.g., confirmed, cancelled), or delete appointments.
4. General Features
Onboarding Screen: A three-page carousel introduces the app, allowing users to
select their role (Doctor or Patient).
Real-Time Data: Firestore streams provide real-time updates for doctor lists and
appointments.
Responsive UI: Consistent color scheme (e.g., 0xFF2A7A6A for green) and
Material Design components ensure a polished user experience.
Architecture and Technologies
Architecture
The app follows the MVVM (Model-View-ViewModel) pattern with GetX for state
management:
Models: Doctor and Appointment classes define data structures with toMap and
fromMap methods for Firestore serialization.
Views: Flutter widgets (PatientPage, DoctorPage, LoginPage, etc.) handle UI
rendering.
ViewModels: GetX controllers (LoginViewModel, PatientPageViewModel, etc.)
manage business logic and state using reactive variables (Rx).
Repositories: AuthRepository, DoctorsRepository, AppointmentsRepository, and
MediaRepository abstract data operations for Firebase and Cloudinary.
Technologies
Flutter: Cross-platform framework for UI development.
Firebase:
Authentication: Manages login, signup, and password reset.
Firestore: Stores doctor profiles, appointments, and user roles.
Cloudinary: Handles image uploads for doctor profiles.
GetX: Facilitates dependency injection, navigation, and state management.
Image Picker: Enables gallery-based image selection for doctor profiles.
File Structure and Key Components
Data Layer
AuthRepository.dart: Handles Firebase Authentication operations (login, signup,
password reset).
DoctorsRepository.dart: Manages CRUD operations for doctor profiles in
Firestore.
AppointmentsRepository.dart: Controls appointment data, including adding,
updating, deleting, and streaming.
MediaRepository.dart: Manages image uploads to Cloudinary.
Models:
Doctor.dart: Defines doctor attributes (e.g., name, category, image).
patient.dart: Defines appointment attributes (e.g., patientId, doctorId, status).
UI Layer
OnboardingScreen.dart: Introduces the app with a role-selection carousel.
Login.dart: Provides a login interface with email/password fields and password
visibility toggle.
SignUp.dart: Enables patient account creation with a terms agreement checkbox.
Forget_Password.dart: Implements password reset with a clean UI.
PatientPage.dart: Displays a searchable doctor list with navigation to details or
appointments.
DoctorDetailsPage.dart: Shows doctor information and a booking button.
BookAppointmentPage.dart: Form for booking appointments with selected
doctors.
PatientAppointmentsPage.dart: Lists patient appointments with delete
functionality.
DoctorPage.dart: Displays doctor profiles with add/edit/delete options.
AddDoctor.dart: Form for adding or editing doctor profiles, including image
upload.
DoctorAppointmentsPage.dart: Lists doctor appointments with
confirm/update/delete options.
ViewModels
LoginViewModel.dart: Manages login logic with role-based navigation (e.g.,
waleed@gmail.com to DoctorPage).
SignUpViewModel.dart: Handles signup with validation and role assignment.
ResetPasswordViewModel.dart: Controls password reset operations.
PatientPageViewModel.dart: Manages doctor search and navigation for patients.
DoctorPageViewModel.dart: Handles doctor list display and navigation.
AddDoctorViewModel.dart: Manages adding/editing doctor profiles with image
upload.
DoctorAppointmentsViewModel.dart: Controls doctor appointment management.
DoctorDetailsViewModel.dart: Manages doctor details display.
Utilities
AppColors.dart: Defines color constants for theming.
DotIndicator.dart: Reusable widget for onboarding page indicators.
OnboardingButtons.dart: Role-selection buttons for the onboarding screen.
OnboardingContent.dart: Displays onboarding images and descriptions.
Entry Point
main.dart: Initializes Firebase, registers repositories with GetX, and sets up the
app’s theme and routes using GetMaterialApp.
Key Functionalities
Authentication Flow
Users start at OnboardingScreen, choosing Doctor or Patient roles.
The login screen (LoginPage) authenticates via AuthRepository.
Doctors use waleed@gmail.com and 123456 to access DoctorPage.
Patients sign up (SignUpPage) or log in, navigating to PatientPage.
Password reset is handled via ResetPasswordPage.
Doctor Management
Doctors add/edit profiles via AddDoctor, with image uploads to Cloudinary.
Profiles are stored in Firestore’s doctors collection, with real-time updates via
streams.
Delete and edit options are available on DoctorPage.
Appointment Management
Patients book appointments via BookAppointmentPage, stored in Firestore’s
appointments collection.
Doctors manage appointments (DoctorAppointmentsPage), confirming or
updating statuses.
Patients view/delete appointments (PatientAppointmentsPage).
Search and Navigation
Patients search doctors by name/category (PatientPageViewModel).
GetX’s named routes with bindings ensure smooth navigation and ViewModel
initialization.
Implementation Details
Security
API Keys: Cloudinary credentials in MediaRepository.dart are hardcoded and
should be secured in production (e.g., environment variables).
Role-Based Access: Restricts doctor signup, allowing only waleed@gmail.com for
doctor access.
Validation: ViewModels enforce input validation (e.g., email format, password
length).
State Management
GetX’s Rx variables enable real-time UI updates for loading, errors, and data.
Firestore streams ensure real-time doctor and appointment updates.
UI/UX
Consistent color scheme (0xFF2A7A6A) and Material Design components.
Responsive layouts with SafeArea and SingleChildScrollView.
User feedback via Get.snackbar for errors and successes.
Limitations and Potential Improvements
DateTime Handling: The Appointment model’s empty dateTime field should be
replaced with proper scheduling.
Role Management: Hardcoded doctor credentials (waleed@gmail.com) should be
replaced with a robust role-based system.
Security: Secure Cloudinary API keys using environment variables.
Error Handling: Enhance with more specific error messages and retry options.
Testing: Add unit and widget tests for reliability.
Localization: Support multiple languages for accessibility.
Notifications: Implement push notifications for appointment updates.
Conclusion
The Doctor Appointment App offers a streamlined solution for healthcare
appointment management, with distinct patient and doctor functionalities. Built with
Flutter, Firebase, Cloudinary, and GetX, it provides a responsive, real-time experience.
Future enhancements could include improved scheduling, enhanced security, and
additional features like notifications.
