Authentication & Authorization

• Clerk-based authentication
• Role-based access control (Admin, Doctor, Staff, Patient)
• Secure session management

Additional Features

• AI-powered chatbot for patient queries
• Real-time updates via Supabase subscriptions
• Responsive design for all devices
• PWA support for mobile installation
• SEO optimized

🛠️ Tech Stack

Frontend

• React 18.3.1 - UI framework
• TypeScript - Type safety
• Vite - Build tool and dev server
• Tailwind CSS - Styling
• Shadcn UI - Component library
• React Router - Routing
• React Query - Data fetching and caching
• Framer Motion - Animations
• React Three Fiber - 3D graphics

Backend

• Supabase - Backend as a Service
  • PostgreSQL database
  • Real-time subscriptions
  • Row Level Security (RLS)
  • Edge Functions
  • Authentication

Additional Tools

• Clerk - Authentication provider
• jsPDF - PDF generation
• Lucide React - Icons
• date-fns - Date manipulation
• Recharts - Data visualization

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v18 or higher) - Download
• npm or bun - Package manager
• Git - Version control
• Supabase Account - Sign up
• Clerk Account - Sign up

🚀 Getting Started

1. Clone the Repository

git clone https://github.com/HardikQuantumCybernetic/hardik-dental.git
cd hardik-dental

2. Install Dependencies

Using npm:

npm install

Using bun:

bun install

3. Set Up Supabase

Create a Supabase Project

1. Go to Supabase Dashboard
2. Click "New Project"
3. Fill in project details:
   • Project name: hardik-dental
   • Database password: (choose a strong password)
   • Region: (choose closest to your users)
4. Click "Create new project"
5. Wait for the project to be provisioned

Get Supabase Credentials

1. Go to Project Settings → API
2. Copy the following:
   • Project URL (e.g., https://xxxxx.supabase.co)
   • Anon/Public Key (starts with eyJ...)

Update Supabase Client Configuration

Open src/integrations/supabase/client.ts and update the credentials:

const SUPABASE_URL = "YOUR_SUPABASE_PROJECT_URL";
const SUPABASE_PUBLISHABLE_KEY = "YOUR_SUPABASE_ANON_KEY";

4. Set Up Database Schema

Run Database Migrations

1. Install Supabase CLI:

npm install -g supabase

2. Login to Supabase:

supabase login

3. Link your project:

supabase link --project-ref YOUR_PROJECT_REF

4. Push the database schema:

supabase db push

Alternatively, you can manually run the SQL migrations from docs/supabase-schema.sql:

1. Go to Supabase Dashboard → SQL Editor
2. Copy the contents of docs/supabase-schema.sql
3. Paste and execute the SQL

Verify Database Setup

The database includes these tables:

• patients - Patient information
• appointments - Appointment scheduling
• doctors - Doctor profiles
• services - Available services
• patient_services - Patient treatment tracking
• patient_financials - Financial records
• feedback - Patient feedback and messages
• treatments - Treatment records
• user_roles - Role-based access control

5. Set Up Clerk Authentication

1. Go to Clerk Dashboard
2. Create a new application
3. Get your Publishable Key from API Keys section
4. Update src/main.tsx:

const PUBLISHABLE_KEY = 'YOUR_CLERK_PUBLISHABLE_KEY';

5. Configure authentication providers in Clerk:

   • Enable Email/Password
   • Enable OAuth providers (optional): Google, GitHub, etc.

6. Set up redirect URLs in Clerk:

   • Add your development URL: http://localhost:8080
   • Add your production URL after deployment

6. Configure Environment (Optional)

For Supabase Edge Functions, you may need to set up secrets:

supabase secrets set OPENAI_API_KEY=your_key_here
supabase secrets set CLERK_SECRET_KEY=your_key_here

7. Run the Development Server

npm run dev

The application will be available at http://localhost:8080

🏗️ Building for Production

Build the Application

npm run build

This creates an optimized production build in the dist directory.

Preview Production Build

npm run preview

🌐 Deployment Options

Option 1: Netlify (Recommended)

1. Install Netlify CLI:

npm install -g netlify-cli

2. Login to Netlify:

netlify login

3. Initialize Netlify:

netlify init

4. Configure Build Settings:

   • Build command: npm run build
   • Publish directory: dist

5. Deploy:

netlify deploy --prod

6. Configure Environment Variables:
   • Go to Netlify Dashboard → Site Settings → Environment Variables
   • Add your Clerk Publishable Key (if needed in build process)

Option 2: Vercel

1. Install Vercel CLI:

npm install -g vercel

2. Deploy:

vercel

3. Configure Project:

   • Framework Preset: Vite
   • Build Command: npm run build
   • Output Directory: dist

4. Set Environment Variables:

   • Go to Vercel Dashboard → Project Settings → Environment Variables
   • Add required variables

Option 3: GitHub Pages

1. Install gh-pages:

npm install --save-dev gh-pages

2. Add to package.json:

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d dist"
}

3. Update vite.config.ts (set base path):

export default defineConfig({
  base: '/hardik-dental/',
  // ... other config
});

4. Deploy:

npm run deploy

Option 4: Docker Deployment

1. Create Dockerfile:

FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY netlify.toml /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

2. Build Docker Image:

docker build -t hardik-dental .

3. Run Container:

docker run -p 80:80 hardik-dental

Option 5: Traditional Web Hosting

1. Build the project: npm run build
2. Upload the contents of the dist folder to your web host
3. Configure your web server to:
   • Serve index.html for all routes (SPA routing)
   • Enable HTTPS
   • Set proper cache headers

Example Apache .htaccess:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Example Nginx configuration:

server {
  listen 80;
  server_name yourdomain.com;
  root /var/www/hardik-dental;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

🔒 Security Setup

Supabase Row Level Security (RLS)

The project includes RLS policies for data security. Ensure they're enabled:

1. Go to Supabase Dashboard → Authentication → Policies
2. Verify all tables have RLS enabled
3. Review and adjust policies as needed

Setting Up Admin Access

The admin panel uses Supabase authentication with role-based access control. Follow these steps to create an admin account:

Step 1: Create an Admin User in Supabase

1. Go to Supabase Dashboard
2. Navigate to Authentication → Users
3. Click Add User (or Invite User)
4. Fill in the admin credentials:
   • Email: Enter the admin email address (e.g., admin@yourdomain.com)
   • Password: Enter a strong password
   • Auto Confirm User: Toggle ON (optional, but recommended for testing)
5. Click Create User or Send Invitation
6. Copy the User ID (UUID) - you'll need this in the next step

Step 2: Assign Admin Role

1. Go to SQL Editor in your Supabase Dashboard
2. Run the following SQL query to grant admin access:

-- Replace 'YOUR_USER_ID_HERE' with the actual user ID copied from Step 1
INSERT INTO user_roles (user_id, role)
VALUES ('YOUR_USER_ID_HERE', 'admin');

Example:

INSERT INTO user_roles (user_id, role)
VALUES ('a1b2c3d4-e5f6-7890-abcd-ef1234567890', 'admin');

3. Execute the query

Step 3: Access the Admin Panel

1. Navigate to your application's admin login page (e.g., https://yourdomain.com/admin)
2. Sign in using the admin credentials you created in Step 1
3. You should now have full access to the admin dashboard

Verifying Admin Access

To verify an admin user exists, run:

SELECT ur.*, au.email 
FROM user_roles ur
JOIN auth.users au ON ur.user_id = au.id
WHERE ur.role = 'admin';

Removing Admin Access

To revoke admin access:

DELETE FROM user_roles 
WHERE user_id = 'USER_ID_HERE' AND role = 'admin';

Security Best Practices

• Use strong, unique passwords for admin accounts
• Limit the number of admin users
• Regularly audit admin access using the verification query
• Enable Multi-Factor Authentication (MFA) in Supabase for admin accounts
• Never share admin credentials

API Security Features

The application implements production-grade API security:

1. Rate Limiting

All API endpoints are protected with rate limiting to prevent abuse:

• Default: 100 requests per minute per user
• Configurable via environment variables:
  • RATE_LIMIT_MAX_REQUESTS: Maximum requests per window (default: 100)
  • RATE_LIMIT_WINDOW_MS: Time window in milliseconds (default: 60000)
• Response Headers: Includes X-RateLimit-Limit, X-RateLimit-Remaining, X-RateLimit-Reset
• HTTP 429: Returned when limit exceeded with Retry-After header

2. Authentication & Authorization

• JWT Verification: All protected endpoints require valid JWT tokens
• Token Validation: Tokens are verified against Supabase Auth on eve