Skip to content

ainobin/tdec-protfolio-deploy

BranchesTags

Repository files navigation

Trishal Diagnostic & Eye Care Center (TDECC)

A modern, full-stack web application built with Next.js for Trishal Diagnostic & Eye Care Center in Mymensingh, Bangladesh. This production-grade healthcare platform provides comprehensive information about doctors, services, and facilities with a powerful admin dashboard for content management.

Next.js TypeScript MongoDB Tailwind CSS

📑 Table of Contents

🚀 Quick Start

# Clone the repository
git clone <repository-url>
cd trishal-decc

# Install dependencies
npm install

# Set up environment variables (see .env.example)
cp .env.example .env
# Edit .env with your credentials

# Run development server
npm run dev

# Open http://localhost:3000

🏥 Project Overview

Trishal DECC is a bilingual (English & Bengali) healthcare platform featuring:

  • Public Website: Information about doctors, services, gallery, and contact details
  • Admin Dashboard: Complete CMS for managing all dynamic content (doctors, services, gallery, ads)
  • REST API: Clean backend architecture with MongoDB integration
  • JWT Authentication: Secure admin access with token-based authentication
  • Media Management: ImageKit CDN integration for optimized image and video delivery
  • Ad Management System: Time-based ad popup system with scheduling capabilities
  • Responsive Design: Mobile-first approach with modern UI/UX

🛠️ Tech Stack

Frontend

  • Next.js 16.1.6 - React framework with App Router
  • React 19.2.3 - UI library
  • TypeScript - Type-safe development
  • Tailwind CSS 4 - Utility-first CSS framework
  • React Context API - Global state management
  • Noto Serif Bengali Font - Bengali typography support

Backend

  • Next.js API Routes - Serverless API endpoints
  • MongoDB 6.12.0 - NoSQL database (MongoDB Atlas)
  • Jose 5.10.0 - JWT authentication library
  • Mongoose-like Models - Clean database abstraction layer

Media & CDN

  • ImageKit 6.0.0 - Image/video CDN with optimization and transformation

Development Tools

  • ESLint 9 - Code linting and quality
  • PostCSS 4 - CSS processing
  • Turbopack - Next-generation bundler (development mode)

✨ Key Features

Public Website

  • Bilingual Interface: Complete English and Bengali language support
  • Responsive Design: Mobile-first design that works on all devices
  • Hero Section: Eye-catching homepage with call-to-action
  • Info Cards: Quick access to key information
  • Services Showcase: Display all eye care services offered
  • Doctor Profiles: View detailed doctor information with photos and schedules
  • Gallery: Image and video gallery with category filtering
  • Contact Section: Contact information and location details
  • Ad Popup System: Time-based promotional popup on homepage

Admin Dashboard

  • Secure Authentication: JWT-based login system
  • Dashboard Overview: Statistics cards showing total counts
  • Quick Actions: Easy navigation to management pages
  • Doctors Management: Full CRUD operations for doctor profiles
  • Services Management: Add, edit, and delete services
  • Gallery Management: Upload and manage images/videos
  • Ads Management: Create and schedule time-based advertisements
  • File Upload: Drag-and-drop file upload with ImageKit integration
  • Bilingual Content: Manage content in both languages simultaneously

Technical Features

  • RESTful API: Clean API architecture with proper status codes
  • Context API: Global state management for auth and data
  • Model Layer: Clean separation of business logic and data access
  • JWT Authentication: Token-based auth with 24h expiry
  • Input Validation: Server-side validation for all inputs
  • Error Handling: Comprehensive error handling across all layers
  • TypeScript: Full type safety throughout the application
  • ImageKit CDN: Fast, optimized media delivery
  • MongoDB Atlas: Cloud-based database with proper indexing

📄 Page Structure

Public Pages

  • / - Homepage with all sections
  • /about - About the clinic
  • /doctors - Full doctors listing
  • /services - All services offered
  • /gallery - Complete gallery with filters

Admin Pages

  • /admin/login - Admin login page
  • /admin - Dashboard with statistics
  • /admin/doctors - Doctor management interface
  • /admin/services - Services management
  • /admin/gallery - Gallery management
  • /admin/ads - Advertisement management
  • /admin/settings - Settings (placeholder)

📁 Project Structure

trishal-decc/
├── src/
│   ├── app/                      # Next.js App Router
│   │   ├── api/                  # API routes (controllers)
│   │   │   ├── admin/           # Admin authentication
│   │   │   │   └── login/       # Login endpoint
│   │   │   ├── doctors/         # Doctors CRUD API
│   │   │   ├── services/        # Services CRUD API
│   │   │   ├── gallery/         # Gallery CRUD API
│   │   │   ├── ads/             # Ads CRUD API
│   │   │   │   └── active/      # Active ads endpoint
│   │   │   ├── upload/          # File upload to ImageKit
│   │   │   └── imagekit-auth/   # ImageKit auth params
│   │   ├── admin/               # Admin dashboard pages
│   │   │   ├── doctors/         # Doctors management
│   │   │   ├── services/        # Services management
│   │   │   ├── gallery/         # Gallery management
│   │   │   ├── ads/             # Ads management
│   │   │   ├── settings/        # Settings page
│   │   │   └── login/           # Login page
│   │   ├── doctors/             # Public doctors page
│   │   ├── services/            # Public services page
│   │   ├── gallery/             # Public gallery page
│   │   ├── about/               # About page
│   │   ├── globals.css          # Global styles
│   │   ├── layout.tsx           # Root layout
│   │   └── page.tsx             # Homepage
│   ├── components/              # React components
│   │   ├── Hero.tsx             # Homepage hero section
│   │   ├── InfoCards.tsx        # Info cards section
│   │   ├── Services.tsx         # Services showcase
│   │   ├── About.tsx            # About section
│   │   ├── Doctors.tsx          # Doctors section
│   │   ├── Gallery.tsx          # Gallery section
│   │   ├── Contact.tsx          # Contact section
│   │   ├── AdPopup.tsx          # Ad popup component
│   │   ├── Navbar.tsx           # Navigation bar
│   │   ├── TopBar.tsx           # Top bar
│   │   ├── Footer.tsx           # Footer
│   │   ├── admin/               # Admin-specific components
│   │   │   ├── Header.tsx       # Admin header
│   │   │   ├── Sidebar.tsx      # Admin sidebar
│   │   │   ├── StatCard.tsx     # Statistics card
│   │   │   ├── Table.tsx        # Data table
│   │   │   ├── Modal.tsx        # Modal dialog
│   │   │   └── FileUpload.tsx   # File upload component
│   │   └── gallery/             # Gallery components
│   │       ├── GalleryGrid.tsx  # Gallery grid layout
│   │       ├── GalleryItem.tsx  # Gallery item card
│   │       └── GalleryFilters.tsx # Gallery filters
│   ├── context/                 # React Context providers
│   │   ├── AuthContext.tsx      # Authentication state
│   │   └── DataContext.tsx      # Data management (CRUD operations)
│   ├── lib/                     # Core utilities
│   │   ├── mongodb.ts           # MongoDB connection
│   │   ├── imagekit.ts          # ImageKit configuration
│   │   ├── auth.ts              # Auth utilities (JWT)
│   │   └── middleware.ts        # API middleware
│   ├── models/                  # Database models (MVC pattern)
│   │   ├── Doctor.ts            # Doctor model with CRUD
│   │   ├── Service.ts           # Service model with CRUD
│   │   ├── Gallery.ts           # Gallery model with CRUD
│   │   ├── Ad.ts                # Ad model with time-based logic
│   │   └── index.ts             # Models export
│   └── types/                   # TypeScript types
│       ├── index.ts             # Core interfaces
│       └── dto.ts               # Data Transfer Objects
├── public/                      # Static assets
│   └── images/                  # Images and media
│       ├── doctors/             # Doctor profile images
│       └── logo/                # Logo files
├── .env                         # Environment variables (not in git)
├── .env.example                 # Environment variables template
├── .gitignore                   # Git ignore rules
├── next.config.mjs              # Next.js configuration
├── tailwind.config.ts           # Tailwind configuration
├── tsconfig.json                # TypeScript configuration
├── package.json                 # Dependencies and scripts
└── README.md                    # This file

🚀 Getting Started

Prerequisites

  • Node.js 18.x or higher
  • npm or yarn
  • MongoDB Atlas account (or local MongoDB instance)

Installation

  1. Clone the repository

    git clone <repository-url>
cd trishal-decc

  2. Install dependencies

    npm install
# or
yarn install

  3. Set up environment variables

    Create a .env file in the root directory:

    # MongoDB Configuration
MONGODB_URI=your_mongodb_connection_string
MONGODB_DB_NAME=tdecc

# Admin Credentials
ADMIN_USERNAME=admin
ADMIN_PASSWORD=your_secure_password

# JWT Secret (generate a strong random string: openssl rand -base64 32)
JWT_SECRET=your_jwt_secret_key

# ImageKit Configuration (Get from https://imagekit.io/dashboard/developer/api-keys)
IMAGEKIT_PUBLIC_KEY=your_imagekit_public_key
IMAGEKIT_PRIVATE_KEY=your_imagekit_private_key
IMAGEKIT_URL_ENDPOINT=https://ik.imagekit.io/your_imagekit_id

    Important Security Notes:

    • Never commit .env file to version control
    • Use strong passwords and secrets in production
    • Generate JWT_SECRET using: openssl rand -base64 32
    • Keep ImageKit private key secure (server-side only)
    • Rotate secrets regularly

  4. Run the development server

    npm run dev
# or
yarn dev

  5. Open your browser

🔑 Environment Variables

Variable Description Required Example
MONGODB_URI MongoDB connection string Yes mongodb+srv://user:pass@...
MONGODB_DB_NAME Database name Yes tdecc
ADMIN_USERNAME Admin login username Yes admin
ADMIN_PASSWORD Admin login password Yes SecurePassword123!
JWT_SECRET Secret key for JWT token generation Yes random-32-char-string
IMAGEKIT_PUBLIC_KEY ImageKit public key Yes public_xxx...
IMAGEKIT_PRIVATE_KEY ImageKit private key (server-only) Yes private_xxx...
IMAGEKIT_URL_ENDPOINT ImageKit CDN endpoint Yes https://ik.imagekit.io/your_id

📸 ImageKit Media Management

This application uses ImageKit as a CDN for all media assets (doctor images, gallery photos/videos, ad images). ImageKit provides:

  • ✅ Fast CDN delivery - Global edge network
  • ✅ Automatic optimization - Image compression and format conversion
  • ✅ Responsive images - Automatic resizing
  • ✅ Video support - Video hosting and thumbnails
  • ✅ Secure uploads - Server-side authentication

Setting Up ImageKit

  1. Create an ImageKit account at https://imagekit.io

  2. Get your credentials from the Developer API Keys page:

    • Public Key
    • Private Key
    • URL Endpoint

  3. Add credentials to .env file (see Environment Variables section)

  4. Organize your media in folders:

    • /doctors - Doctor profile images
    • /gallery - Gallery images and videos
    • /gallery/thumbnails - Video thumbnails
    • /ads - Advertisement images

Using the Admin Dashboard for Uploads

  1. Navigate to the admin section:

    • Doctors: /admin/doctors - Upload doctor profile images
    • Gallery: /admin/gallery - Upload gallery images/videos
    • Ads: /admin/ads - Upload ad images

  2. Upload workflow:

    • Click "+ Add" button (Doctor/Gallery/Ad)
    • Use the file upload component to select your image/video
    • File is automatically uploaded to ImageKit CDN
    • ImageKit URL is saved in MongoDB
    • Preview appears instantly

  3. File specifications:

    • Max size: 50MB per file
    • Supported formats:
      • Images: JPEG, JPG, PNG, GIF, WEBP
      • Videos: MP4, WEBM, OGG

ImageKit URL Structure

All media URLs follow this pattern:

https://ik.imagekit.io/your_id/folder/filename.ext

Example:

https://ik.imagekit.io/tdecc/doctors/dr-ahmed-1234567890.jpg

📢 Advertisement Management System

The platform includes a sophisticated ad management system with time-based scheduling:

Features

  • Time-Based Scheduling: Ads automatically display based on start/end times (UTC)
  • Multiple Ad Types: Support for image ads and text ads
  • Popup Display: Ads appear in a modal popup on the homepage
  • Auto-Activation: Only active ads (within time range) are shown
  • ImageKit Integration: Ad images hosted on CDN

How It Works

  1. Creating Ads (/admin/ads):

    • Choose ad type (image or text)
    • Upload image (for image ads) or enter text content
    • Set start and end date/time (UTC-based)
    • Ad is automatically scheduled

  2. Ad Activation:

    • System checks current UTC time
    • Only ads where startTime <= now <= endTime are displayed
    • Multiple active ads can be shown in sequence

  3. Frontend Display:

    • <AdPopup /> component on homepage
    • Fetches active ads from /api/ads/active
    • Shows ads in a dismissible modal
    • User can close and won't see again in same session

API Endpoints

// Get currently active ads
GET /api/ads/active
Response: { success: true, data: Ad[] }

// Admin endpoints (protected)
GET /api/ads         // All ads
POST /api/ads        // Create ad
PUT /api/ads         // Update ad
DELETE /api/ads?id   // Delete ad

Image Optimization

ImageKit automatically optimizes images. You can add URL parameters for transformations:

// Resize to 400x400
https://ik.imagekit.io/your_id/image.jpg?tr=w-400,h-400

// Quality 80%, auto format
https://ik.imagekit.io/your_id/image.jpg?tr=q-80,f-auto

// Crop and resize
https://ik.imagekit.io/your_id/image.jpg?tr=w-400,h-400,c-at_max

Frontend Implementation

The application uses Next.js <Image> component with ImageKit URLs:

<Image
  src="https://ik.imagekit.io/your_id/doctors/dr-ahmed.jpg"
  alt="Doctor Ahmed"
  width={400}
  height={400}
  className="rounded-lg"
/>

🔐 Admin Access

Login

  • Navigate to /admin/login
  • Use credentials from .env file
  • JWT token stored in localStorage (24h expiry)
  • Automatic redirect to dashboard after successful login

Admin Features

  • Dashboard: Overview statistics with quick actions
  • Doctors Management: Add, edit, delete doctor profiles with image uploads
  • Services Management: Manage eye care services in both languages
  • Gallery Management: Upload and organize images/videos with ImageKit CDN
  • Ads Management: Create and schedule time-based popup advertisements
  • Media Upload: Drag-and-drop file upload with real-time preview
  • Bilingual Support: Manage content in both English and Bengali

Admin Routes

  • /admin - Dashboard with statistics
  • /admin/doctors - Doctors CRUD interface
  • /admin/services - Services CRUD interface
  • /admin/gallery - Gallery management
  • /admin/ads - Advertisement management
  • /admin/settings - Settings page (placeholder)

🏗️ Architecture

Clean Architecture Pattern

This project follows a clean, layered architecture inspired by MVC principles, adapted for Next.js:

┌─────────────────────────────────────────┐
│          Presentation Layer             │
│  (Components, Pages, UI)                │
└──────────────┬──────────────────────────┘
               │
┌──────────────▼──────────────────────────┐
│          API Layer (Controllers)        │
│  (API Routes in app/api/)               │
└──────────────┬──────────────────────────┘
               │
┌──────────────▼──────────────────────────┐
│          Business Logic Layer           │
│  (Models in src/models/)                │
└──────────────┬──────────────────────────┘
               │
┌──────────────▼──────────────────────────┐
│          Data Access Layer              │
│  (MongoDB Connection)                   │
└─────────────────────────────────────────┘

Key Design Principles

  1. Separation of Concerns: Each layer has a single responsibility
  2. DRY (Don't Repeat Yourself): Reusable models and utilities
  3. Type Safety: Comprehensive TypeScript types and DTOs
  4. API-First: Frontend consumes backend APIs (no hardcoded data)
  5. Security: JWT authentication, protected routes, validation

Models Layer

The src/models/ directory contains database access logic:

  • DoctorModel: CRUD operations for doctors with validation
  • ServiceModel: CRUD operations for services
  • GalleryModel: CRUD operations for gallery items
  • AdModel: CRUD operations for ads with time-based activation logic

Each model includes:

  • Data validation
  • Business logic
  • Database queries (find, create, update, delete)
  • Error handling
  • Auto-incrementing IDs (for doctors/services)
  • UUID generation (for gallery/ads)

API Routes

All API routes follow RESTful conventions:

Doctors API:

GET    /api/doctors     - Retrieve all doctors
POST   /api/doctors     - Create new doctor (protected)
PUT    /api/doctors     - Update doctor (protected)
DELETE /api/doctors?id  - Delete doctor (protected)

Services API:

GET    /api/services    - Retrieve all services
POST   /api/services    - Create new service (protected)
PUT    /api/services    - Update service (protected)
DELETE /api/services?id - Delete service (protected)

Gallery API:

GET    /api/gallery?type=[image|video|all] - Retrieve gallery items (filtered)
POST   /api/gallery     - Create new gallery item (protected)
PUT    /api/gallery     - Update gallery item (protected)
DELETE /api/gallery?id  - Delete gallery item (protected)

Ads API:

GET    /api/ads/active  - Get currently active ads (based on UTC time)
GET    /api/ads         - Retrieve all ads (protected)
POST   /api/ads         - Create new ad (protected)
PUT    /api/ads         - Update ad (protected)
DELETE /api/ads?id      - Delete ad (protected)

Authentication API:

POST   /api/admin/login - Admin login (returns JWT token)

Media Upload Endpoints

POST   /api/upload           - Upload file to ImageKit (protected)
GET    /api/imagekit-auth    - Get ImageKit auth params (protected)

Upload Request:

POST /api/upload
Authorization: Bearer <jwt_token>
Content-Type: multipart/form-data

FormData:
  file: <binary>
  folder: "doctors" | "gallery" | "gallery/thumbnails"

Upload Response:

{
  "success": true,
  "data": {
    "url": "https://ik.imagekit.io/your_id/doctors/image.jpg",
    "fileId": "xyz123",
    "fileName": "image.jpg",
    "fileType": "image/jpeg"
  }
}

🔧 Development

Available Scripts

Development Mode

npm run dev
# Starts Next.js development server on http://localhost:3000
# Features hot module replacement and Turbopack bundler

Production Build

npm run build
# Creates an optimized production build
# Runs TypeScript type checking
# Optimizes all assets and pages

Production Server

npm start
# Starts the production server (requires build first)
# Runs on port 3000 by default

Linting

npm run lint
# Runs ESLint to check code quality
# Checks for common errors and style issues

Type Checking

npx tsc --noEmit
# Runs TypeScript compiler without generating files
# Useful for catching type errors

Development Workflow

  1. Start development server: npm run dev
  2. Make changes to components, pages, or API routes
  3. Test in browser - changes auto-reload
  4. Run linting to check code quality
  5. Test API endpoints using browser or Postman
  6. Build for production before deployment

Common Development Tasks

Adding a New Public Page

  1. Create file in src/app/your-page/page.tsx
  2. Add navigation link in Navbar.tsx
  3. Style using Tailwind CSS classes

Adding a New API Endpoint

  1. Create route file in src/app/api/your-endpoint/route.ts
  2. Implement GET/POST/PUT/DELETE handlers
  3. Use models for database operations
  4. Add authentication middleware if needed

Adding a New Model

  1. Create model file in src/models/YourModel.ts
  2. Define interface in src/types/index.ts
  3. Implement CRUD operations
  4. Export from src/models/index.ts

Managing Environment Variables

  1. Never commit .env file
  2. Update .env.example when adding new variables
  3. Document all variables in README

📊 Database Schema

Doctors Collection

{
  id: number,
  name: string,
  nameBn: string,
  specialization: string,
  specializationBn: string,
  qualification: string,
  experience: string,
  experienceBn: string,
  image: string,           // ImageKit URL
  schedule: string,
  scheduleBn: string
}

Services Collection

{
  id: number,
  title: string,
  titleBn: string,
  description: string,
  descriptionBn: string,
  icon: string
}

Gallery Collection

{
  id: string,
  type: 'image' | 'video',
  src: string,              // ImageKit URL
  thumbnail?: string,       // ImageKit URL for video thumbnails
  title?: string,
  titleBn?: string,
  createdAt: Date | string
}

Ads Collection

{
  id: string,
  type: 'image' | 'text',
  imageUrl?: string,        // ImageKit URL (for image ads)
  textContent?: string,     // Text content (for text ads)
  startTime: Date | string, // UTC timestamp
  endTime: Date | string,   // UTC timestamp
  createdAt: Date | string
}

� Troubleshooting

Common Issues and Solutions

MongoDB Connection Errors

Error: MongoServerError: bad auth

Solution:

  • Verify MONGODB_URI is correct in .env
  • Check username and password in connection string
  • Ensure IP address is whitelisted in MongoDB Atlas

JWT Token Issues

Error: Invalid token or Unauthorized

Solution:

  • Check JWT_SECRET is set in .env
  • Clear localStorage and login again
  • Token expires after 24 hours - re-login required

ImageKit Upload Failures

Error: Authentication failed

Solution:

  • Verify all three ImageKit credentials in .env
  • Check ImageKit account is active
  • Ensure private key is server-side only (never in client)

Build Errors

Type error: Cannot find module...

Solution:

  • Run npm install to ensure all dependencies are installed
  • Check import paths are correct
  • Restart TypeScript server in VS Code

Development Server Issues

Port 3000 already in use

Solution:

  • Kill the process using port 3000
  • Or use different port: npm run dev -- -p 3001

Ads Not Showing

Solution:

  • Check start/end times are in UTC
  • Verify ad is active in /admin/ads
  • Check browser console for API errors
  • Clear browser cache and reload

Environment Variables Checklist

  • MONGODB_URI - Valid connection string
  • MONGODB_DB_NAME - Database name (e.g., "tdecc")
  • ADMIN_USERNAME - Admin login username
  • ADMIN_PASSWORD - Secure password
  • JWT_SECRET - Random 32+ character string
  • IMAGEKIT_PUBLIC_KEY - From ImageKit dashboard
  • IMAGEKIT_PRIVATE_KEY - From ImageKit dashboard (keep secret!)
  • IMAGEKIT_URL_ENDPOINT - Your ImageKit URL

�🚀 Deployment

Recommended Platforms

  • Vercel (recommended for Next.js)
  • Netlify
  • AWS Amplify
  • DigitalOcean App Platform
  • Railway

Deployment Steps

  1. Set up ImageKit (if not already done)

    • Create ImageKit account
    • Configure folders: /doctors, /gallery, /ads
    • Note your credentials for deployment

  2. Build the project

    npm run build

  3. Configure environment variables in your hosting platform

    • Add all variables from .env.example
    • Ensure ImageKit credentials are correct
    • Use strong passwords and secrets

  4. Deploy

    • Connect your Git repository
    • Configure build settings:
      • Build Command: npm run build
      • Output Directory: .next
      • Node Version: 18.x or higher

  5. Verify deployment

    • Test all public pages
    • Test admin login and authentication
    • Test CRUD operations for all entities
    • Check MongoDB connection
    • Verify ImageKit uploads work
    • Test ad popup functionality

Environment Variables in Production

Ensure all environment variables are set in your hosting platform's settings. Never commit secrets to Git.

ImageKit Production Setup

  1. Enable ImageKit optimizations in production:

    • Auto WebP conversion
    • Quality auto-adjustment
    • Lazy loading

  2. Set up CDN caching for optimal performance

  3. Configure ImageKit security:

    • Restrict API access by IP (optional)
    • Set up webhooks for monitoring
    • Review usage limits and quotas

🔒 Security Best Practices

✅ Implemented:

  • JWT authentication for all admin routes
  • Token-based authorization (24h expiry)
  • Protected API endpoints with middleware
  • Input validation in model layer
  • Environment variable configuration
  • Secure password storage (configured in .env)
  • CORS protection (Next.js default)
  • Server-side only operations for sensitive data

⚠️ Production Recommendations:

  • Use HTTPS only (enforced by hosting platform)
  • Implement rate limiting on API routes
  • Add CSRF protection for forms
  • Enable MongoDB IP whitelist
  • Regular security audits
  • Keep dependencies updated (npm audit)
  • Use secrets manager (AWS Secrets Manager, Azure Key Vault)
  • Implement request logging and monitoring
  • Add brute force protection on login
  • Consider adding 2FA for admin access

🧪 Testing Recommendations

While tests are not included in the current version, consider adding:

  • Unit Tests: Test models and utilities
  • Integration Tests: Test API routes
  • E2E Tests: Test user flows with Playwright or Cypress
  • Type Tests: Ensure TypeScript coverage

📝 API Documentation

Public Endpoints

GET /api/doctors

Returns all doctors sorted by ID.

Response:

{
  "success": true,
  "data": [
    {
      "id": 1,
      "name": "Dr. Ahmed Hassan",
      "nameBn": "ডাঃ আহমেদ হাসান",
      "specialization": "Ophthalmologist",
      "specializationBn": "চক্ষু বিশেষজ্ঞ",
      "qualification": "MBBS, MS (Ophthalmology)",
      "experience": "15+ years",
      "experienceBn": "১৫+ বছর",
      "image": "https://ik.imagekit.io/your_id/doctors/dr-ahmed.jpg",
      "schedule": "Mon-Sat: 9 AM - 5 PM",
      "scheduleBn": "সোম-শনি: সকাল ৯টা - বিকাল ৫টা"
    }
  ]
}

GET /api/services

Returns all services sorted by ID.

Response:

{
  "success": true,
  "data": [
    {
      "id": 1,
      "title": "Cataract Surgery",
      "titleBn": "ছানি অপারেশন",
      "description": "Advanced cataract surgery with intraocular lens implantation",
      "descriptionBn": "উন্নত ছানি অপারেশন",
      "icon": "👁️"
    }
  ]
}

GET /api/gallery?type=[image|video|all]

Returns gallery items, optionally filtered by type.

Parameters:

  • type (optional): image, video, or all (default: all)

Response:

{
  "success": true,
  "data": [
    {
      "id": "abc123",
      "type": "image",
      "src": "https://ik.imagekit.io/your_id/gallery/image1.jpg",
      "title": "Eye Examination Room",
      "titleBn": "চোখ পরীক্ষা কক্ষ",
      "createdAt": "2026-02-10T10:00:00.000Z"
    }
  ]
}

GET /api/ads/active

Returns currently active ads based on UTC time.

Response:

{
  "success": true,
  "data": [
    {
      "id": "ad123",
      "type": "image",
      "imageUrl": "https://ik.imagekit.io/your_id/ads/promo.jpg",
      "startTime": "2026-02-01T00:00:00.000Z",
      "endTime": "2026-02-28T23:59:59.000Z",
      "createdAt": "2026-02-01T08:00:00.000Z"
    }
  ]
}

Protected Endpoints (Require JWT)

All POST, PUT, DELETE operations require:

  • Header: Authorization: Bearer <jwt_token>

POST /api/admin/login

Admin login endpoint.

Request Body:

{
  "username": "admin",
  "password": "your_password"
}

Response:

{
  "success": true,
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
  "message": "Login successful"
}

POST /api/doctors

Create a new doctor (requires authentication).

Headers:

Authorization: Bearer <jwt_token>
Content-Type: application/json

Request Body:

{
  "name": "Dr. Sarah Khan",
  "nameBn": "ডাঃ সারাহ খান",
  "specialization": "Pediatric Ophthalmologist",
  "specializationBn": "শিশু চক্ষু বিশেষজ্ঞ",
  "qualification": "MBBS, DCH, FCPS (Ophthalmology)",
  "experience": "10+ years",
  "experienceBn": "১০+ বছর",
  "image": "https://ik.imagekit.io/your_id/doctors/dr-sarah.jpg",
  "schedule": "Sun-Thu: 10 AM - 4 PM",
  "scheduleBn": "রবি-বৃহস্পতি: সকাল ১০টা - বিকাল ৪টা"
}

Response:

{
  "success": true,
  "message": "Doctor created successfully"
}

PUT /api/doctors

Update an existing doctor.

Request Body:

{
  "id": 1,
  "name": "Dr. Ahmed Hassan (Updated)",
  ...
}

DELETE /api/doctors?id=1

Delete a doctor by ID.

Response:

{
  "success": true,
  "message": "Doctor deleted successfully"
}

Similar patterns apply for:

  • /api/services - Services CRUD operations
  • /api/gallery - Gallery CRUD operations
  • /api/ads - Ads CRUD operations

POST /api/upload

Upload file to ImageKit (requires authentication).

Headers:

Authorization: Bearer <jwt_token>
Content-Type: multipart/form-data

Form Data:

file: <binary>
folder: "doctors" | "gallery" | "gallery/thumbnails" | "ads"

Response:

{
  "success": true,
  "data": {
    "url": "https://ik.imagekit.io/your_id/doctors/image-123.jpg",
    "fileId": "xyz123",
    "fileName": "image-123.jpg",
    "fileType": "image/jpeg"
  }
}

🎯 Future Enhancements

Potential features and improvements for future versions:

Features

  • Online appointment booking system
  • Patient portal for medical records
  • Multi-language support (add more languages)
  • Blog/news section for health articles
  • Telemedicine integration
  • SMS/email notifications
  • Payment gateway integration
  • Patient testimonials and reviews
  • Live chat support
  • Mobile app (React Native)

Technical Improvements

  • Unit and integration tests
  • End-to-end testing with Cypress/Playwright
  • Performance monitoring (Sentry, LogRocket)
  • Analytics integration (Google Analytics, Plausible)
  • SEO optimization and sitemap generation
  • PWA capabilities (offline support)
  • API rate limiting
  • Admin activity logging
  • Automated backups
  • CI/CD pipeline (GitHub Actions)

UI/UX Enhancements

  • Dark mode support
  • Animation and transitions
  • Advanced gallery features (zoom, slideshow)
  • Doctor search and filtering
  • Print-friendly pages
  • Accessibility improvements (WCAG compliance)

🤝 Contributing

This is a production project. Contact the maintainer for contribution guidelines.

📄 License

Proprietary - All rights reserved by Trishal Diagnostic & Eye Care Center

👥 Contact

Trishal Diagnostic & Eye Care Center

  • Location: Trishal Sadar, Mymensingh, Bangladesh
  • Phone: [Contact Numbers]
  • Email: info@trishaldecc.com

🙏 Acknowledgments

  • Next.js Team - For the excellent React framework with App Router
  • MongoDB - For reliable cloud database hosting
  • ImageKit - For powerful CDN and media optimization
  • Tailwind CSS - For the utility-first CSS framework
  • Vercel - For Next.js development and hosting platform
  • TypeScript Team - For bringing type safety to JavaScript

Production Ready ✅ | Last Updated: February 2026

About

tdec-protfolio-deploy.vercel.app

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages