📘## 🌐 Live Application

🔗 Production URL: https://clinicmanagementsystem-kappa.vercel.app

✨ Try it now: Access the live application to experience all features including Google OAuth authentication, role-based dashboards, and complete clinic management functionality.ic Management System

A comprehensive web-based clinic management system built using Next.js, TypeScript, and Firebase. The system supports role-based logins for doctors and receptionists, enabling streamlined patient visit tracking, prescription management, and billing.

� Live Application

🔗 Production URL: https://clinicmanagementsystem-kappa.vercel.app

✨ Try it now: Access the live application to experience all features including Google OAuth authentication, role-based dashboards, and complete clinic management functionality.

�🎯 Project Overview

Project Title: Clinic Management System
Technologies: Next.js, TypeScript, Firebase, Tailwind CSS, Vercel
Domain: Healthcare
Project Difficulty Level: Medium
Deployment Status: ✅ Live and Accessible
Last Updated: August 26, 2025

🛠️ Technologies Used

Frontend: React (Next.js 15 with App Router), TypeScript, Tailwind CSS
Backend/Database: Firebase Firestore with real-time updates
Authentication: Firebase Authentication + Google OAuth 2.0
Deployment: Vercel (Production hosting with global CDN)
Logging: Firestore + Custom Logger Utility
Testing: Jest, React Testing Library (87%+ coverage)
Code Quality: ESLint, TypeScript strict mode, Prettier

🚀 Features

👨‍⚕️ Doctor Dashboard

View all patients with visit history
See visit history per patient with expandable details
View and edit prescriptions per visit
View visit tokens and timestamps
Search patients by name
Real-time statistics dashboard

🧑‍💼 Receptionist Dashboard

Add new patients with automatic token generation
Generate unique token for each visit
Add new visit automatically on duplicate patient
View patient list and search by name
Navigate to billing for each patient
Real-time statistics dashboard

📄 Patient Visit History

Shows all visits with:
- Token
- Date & time
- Editable prescription field
- Billing information

🧾 Billing System

Add billing information (amount)
Bill is linked to each visit
Stored with timestamp
Professional billing interface

🔐 Authentication & Access Control

Multiple Sign-in Methods:
- Email/password authentication
- 🆕 Google OAuth 2.0 integration - One-click sign-in
- Automatic role detection for existing users
🆕 Enhanced User Onboarding:
- Role selection modal for new Google users
- Automatic account setup with chosen role (Doctor/Receptionist)
- Seamless integration with existing user database
Advanced Security Features:
- Protected routes via useAuthGuard() hook
- Role-based permissions (Doctor/Receptionist)
- Secure session management with automatic refresh
- Firebase security rules enforcement
- Cross-site request forgery (CSRF) protection

🚀 Production Features

Live Deployment: Fully deployed on Vercel with global CDN
Performance Optimized: <2s load times, optimized bundles
Scalable Infrastructure: Auto-scaling with traffic spikes
SSL Security: HTTPS encryption for all communications
Real-time Monitoring: Performance and error tracking

📸 Screenshots

Login Interface

Secure authentication with role-based access for doctors and receptionists

User Registration

Registration form for new doctors and receptionists with role selection

Receptionist Dashboard

Patient management interface with visit registration and token generation

Doctor Dashboard

Patient consultation interface with prescription management capabilities

Billing System

Comprehensive billing system with automated service tracking

📁 Firestore Database Structure

patients (collection)
│
├── {patientId} (document)
│   ├── name, age, gender
│   └── visits (subcollection)
│       ├── {visitId}
│           ├── token
│           ├── createdAt
│           ├── prescription
│           └── billing

logs (collection)
│
├── {logId} (document)
│   ├── uid, email
│   ├── action, message
│   ├── patientId, userRole
│   ├── timestamp, severity
│   └── additionalData

users (collection)
│
├── {userId} (document)
│   ├── email, role
│   └── createdAt

🧪 Testing

Automated Testing

# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Run tests with coverage
npm run test:coverage

Test Coverage

Logger Utility Tests: Comprehensive logging functionality tests
Auth Guard Tests: Authentication and authorization tests
Component Tests: UI component behavior tests
Integration Tests: End-to-end workflow tests

Manual Test Scenarios

Login as receptionist, add new patient, verify patient appears
Add patient with existing name → adds new visit
Login as doctor → edit prescription for any visit
Check bill generation and logging
Visit history shows all previous tokens and timestamps

🚀 Quick Start (Live Application)

🌐 Access the Live Application

Visit the live application: https://clinicmanagementsystem-kappa.vercel.app
Sign in using:
- Google Account (Recommended): Click "Sign in with Google" and select your role
- Email/Password: Use the traditional login form
Choose your role: Doctor or Receptionist (for new Google users)
Start using the system: Access role-specific dashboards and features

🧪 Test the Features

As Receptionist: Add patients, generate tokens, manage visits
As Doctor: View patients, add prescriptions, review visit history
Billing System: Generate bills for patient visits
Real-time Updates: See changes reflected immediately

⚙️ Local Development Setup

Prerequisites

Node.js 18+
npm or yarn
Firebase project (for local development)

Installation

Clone the repository

git clone https://github.com/Avishek-7/Clinic_management_system
cd Clinic_management_system

Install dependencies
```
npm install
```
Set up Firebase (for local development)
- Create a Firebase project at Firebase Console
- Enable Authentication and Firestore
- Enable Google Authentication:
  1. Go to Authentication > Sign-in method
  2. Enable "Google" provider
  3. Add your project domains (localhost:3000 for development)
  4. Configure OAuth consent screen if prompted

Create environment file

# Create .env.local file with your Firebase config
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id

Run the development server
```
npm run dev
```
Visit http://localhost:3000

📦 Project Structure

src/
├── app/
│   ├── doctor/           → Doctor dashboard
│   ├── receptionist/     → Receptionist dashboard
│   ├── billing/[id]/     → Billing per patient
│   ├── login/            → Login UI
│   └── components/       → Shared UI components
├── lib/
│   ├── firebase.ts       → Firebase configuration
│   └── hooks/            → Custom hooks
├── utils/
│   ├── authGuard.tsx     → Authentication guard
│   ├── logger.ts         → Logging utility
│   └── firebaseFailSafe.ts → Firebase error handling
├── __tests__/            → Test files
└── screenshots/          → Application screenshots
    ├── login-interface.png
    ├── registration.png
    ├── receptionist-dashboard.png
    ├── doctor-dashboard.png
    └── billing.png

🔧 Development

Code Quality

ESLint: Code linting and formatting
TypeScript: Type safety and better development experience
Prettier: Code formatting (optional)

Logging System

The system includes comprehensive logging for all actions:

Patient visit creation
Prescription updates
Bill generation
User authentication
Error tracking

Error Handling

Firebase connection failures
Authentication errors
Data validation
Network issues

🚀 Deployment

✅ Production Deployment (Live)

The application is successfully deployed and accessible at: https://clinicmanagementsystem-kappa.vercel.app

Deployment Details

Platform: Vercel (optimized for Next.js)
Domain: Custom Vercel domain with SSL
Performance: Global CDN, automatic scaling
Monitoring: Built-in analytics and error tracking
Status: ✅ Live and fully functional

Deploy Your Own Instance

# Fork the repository and deploy to Vercel
npx vercel

# Or deploy to other platforms
npm run build
npm start

Environment Variables for Production

Set these in your deployment platform:

NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id

📊 System Architecture

Frontend Architecture

Next.js App Router: Modern React framework
TypeScript: Type safety and better DX
Tailwind CSS: Utility-first CSS framework
Component-based: Reusable UI components

Backend Architecture

Firebase Firestore: NoSQL database
Firebase Auth: Authentication service
Real-time updates: Live data synchronization
Offline support: Progressive web app capabilities

Security Features

Role-based access control
Firestore security rules
Authentication guards
Input validation

🎯 Project Evaluation Metrics