DocClinic - Homeopathy Clinic Website

A comprehensive web application for Dr. Rajesh Sharma's homeopathic clinic, featuring online appointment booking, patient management, and automated email notifications.

🌟 Features

Frontend (React)

Responsive Design: Mobile-first approach with tablet and desktop optimization
Google OAuth Integration: Secure authentication using Google Sign-In
Appointment Booking: Online booking system with time slot management
Interactive UI Components:
- Hero section with modern design
- About doctor section with testimonials
- FAQ system with categorized questions
- Contact forms and information
- Live chatbot for basic queries

Backend (Node.js + Express)

RESTful API: Clean API endpoints for all functionality
Email Service: Automated email notifications using Gmail SMTP
JWT Authentication: Secure user sessions
Database: File-based JSON storage for appointments and users
Appointment Management: CRUD operations with status tracking

Key Functionality

Email Notifications:
- Clinic receives appointment requests with confirm/reject buttons
- Patients receive booking confirmations and status updates
- Professional email templates with clinic branding
Appointment Status Management: Pending → Confirmed/Rejected → Completed
Guest Booking: Non-registered users can book appointments
Real-time Validation: Form validation and error handling

🚀 Quick Start

Prerequisites

Node.js (v14 or higher)
Gmail account with App Password
Google OAuth credentials

Installation

Clone the repository
```
git clone <your-repo-url>
cd doclinic
```

Install Dependencies

# Frontend dependencies
npm install

# Backend dependencies
cd backend
npm install

Environment Setup

Create backend/.env file:

PORT=5000
JWT_SECRET=your_jwt_secret_key
BASE_URL=http://localhost:5000

# Google OAuth
GOOGLE_CLIENT_ID=your_google_client_id

# Gmail Configuration
GMAIL_USER=your_gmail@gmail.com
GMAIL_APP_PASSWORD=your_app_password
CLINIC_EMAIL=clinic_email@gmail.com

Start the Application

# Terminal 1 - Backend
cd backend
npm start

# Terminal 2 - Frontend  
npm start

Access the Application
- Frontend: http://localhost:3000
- Backend API: http://localhost:5000

📧 Email Configuration

Gmail Setup

Enable 2-Factor Authentication on your Gmail account
Generate an App Password:
- Go to Google Account Settings > Security
- Select "2-Step Verification" > "App Passwords"
- Generate password for "Mail" application
Use the generated 16-character password in GMAIL_APP_PASSWORD

Google OAuth Setup

Go to Google Cloud Console
Create a new project or select existing
Enable Google+ API
Create OAuth 2.0 credentials
Add your domain to authorized origins
Copy Client ID to environment variables

📁 Project Structure

doclinic/
├── public/                 # Static assets
├── src/                    # React frontend source
│   ├── components/         # Reusable components
│   ├── pages/             # Page components
│   └── config.js          # Frontend configuration
├── backend/               # Node.js backend
│   ├── data/             # JSON database files
│   ├── routes/           # API route handlers
│   ├── utils/            # Utility functions
│   └── server.js         # Express server entry
└── build/                # Production build output

🛠️ API Endpoints

Authentication

POST /api/auth/google - Google OAuth login
POST /api/auth/register - User registration
GET /api/auth/profile - Get user profile

Appointments

GET /api/appointments - Get user appointments
POST /api/appointments/book - Book appointment (authenticated)
POST /api/appointments/book-guest - Book appointment (guest)
GET /api/appointments/confirm/:token - Confirm appointment
GET /api/appointments/reject/:token - Reject appointment

📱 Responsive Design

The application is fully responsive with breakpoints:

Mobile: ≤ 768px
Tablet: 769px - 1024px
Desktop: ≥ 1025px

🎨 Design Features

Color Scheme: Red (#c41e3a) primary with white/gray accents
Typography: Modern font stack with proper hierarchy
Components: Card-based layouts with subtle shadows
Animations: Smooth transitions and hover effects
Accessibility: ARIA labels and keyboard navigation support

📧 Email Templates

Professional email templates include:

Clinic Notifications: Appointment requests with action buttons
Patient Confirmations: Booking acknowledgments
Status Updates: Appointment confirmations/rejections
Responsive Design: Email templates work across all clients

🔒 Security Features

JWT token-based authentication
Google OAuth integration
Input validation and sanitization
CORS configuration
Environment variable protection

🚀 Deployment

Frontend Deployment (Netlify/Vercel)

Build the project: npm run build
Deploy the build folder
Configure environment variables

Backend Deployment (Render/Heroku)

Deploy from GitHub repository
Set environment variables
Ensure PORT is configured for the hosting service

📊 Database Schema

Users

{
  "id": "uuid",
  "name": "string",
  "email": "string", 
  "phone": "string",
  "picture": "url",
  "googleId": "string",
  "createdAt": "datetime"
}

Appointments

{
  "id": "uuid",
  "confirmationToken": "uuid",
  "userId": "uuid",
  "patientName": "string",
  "patientEmail": "string", 
  "patientPhone": "string",
  "appointmentDate": "date",
  "appointmentTime": "time",
  "healthConcern": "string",
  "symptoms": "string",
  "additionalNotes": "string",
  "preferredDoctor": "string",
  "status": "pending|confirmed|rejected|cancelled|completed",
  "createdAt": "datetime"
}

🤝 Contributing

Fork the repository
Create a feature branch
Make your changes
Test thoroughly
Submit a pull request

📄 License

This project is licensed under the MIT License.

👨‍⚕️ About Dr. Rajesh Sharma

Dr. Rajesh Sharma is a qualified homeopathic physician with 29+ years of experience, specializing in classical homeopathy and holistic treatment approaches. The clinic is located in New Delhi, India.

Contact Information:

📱 Phone: +91 98765 43210, +91 97654 32109
📍 Address: 215 Medic Avenue, New Delhi - 110015, India
📧 Email: dr.rajeshsharma@gmail.com

For support or questions, please contact the development team or create an issue in the repository.

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
backend		backend
public		public
src		src
.env.example		.env.example
.gitignore		.gitignore
DEPLOYMENT.md		DEPLOYMENT.md
GOOGLE_OAUTH_SETUP.md		GOOGLE_OAUTH_SETUP.md
LICENSE		LICENSE
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json

Folders and files

Latest commit

History

Repository files navigation

DocClinic - Homeopathy Clinic Website

🌟 Features

Frontend (React)

Backend (Node.js + Express)

Key Functionality

🚀 Quick Start

Prerequisites

Installation

📧 Email Configuration

Gmail Setup

Google OAuth Setup

📁 Project Structure

🛠️ API Endpoints

Authentication

Appointments

📱 Responsive Design

🎨 Design Features

📧 Email Templates

🔒 Security Features

🚀 Deployment

Frontend Deployment (Netlify/Vercel)

Backend Deployment (Render/Heroku)

📊 Database Schema

Users

Appointments

🤝 Contributing

📄 License

👨‍⚕️ About Dr. Rajesh Sharma

Analyzing the Bundle Size

Making a Progressive Web App

Advanced Configuration

Deployment

npm run build fails to minify

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

`npm run build` fails to minify