Skip to content

anoopsinghji/MediGuide_Patient_Module

Repository files navigation

๐Ÿฅ MediGuide NextGen - Patient Application

Version PWA License Status

A modern, feature-rich React application for tourists and travelers to find, consult with, and manage healthcare services in the MediGuide NextGen ecosystem.

Features โ€ข Quick Start โ€ข Installation โ€ข Architecture โ€ข Contributing


๐Ÿ“– Table of Contents


Overview

The Patient Application is a comprehensive web platform designed to empower travelers and tourists seeking healthcare services in foreign countries. It provides an intuitive interface for patients to discover qualified doctors, book appointments, conduct video consultations, and manage their healthcare journey seamlessly.

What This Application Does

  • Smart Doctor Discovery: Find doctors by specialty, location, languages, and tourist-friendliness ratings
  • Symptom Analysis: AI-assisted symptom checker to identify potential health concerns
  • Appointment Management: Book, manage, and track medical appointments
  • Video Consultations: Conduct secure video consultations with doctors using WebRTC
  • Real-time Chat: Communicate with doctors before and after consultations
  • Prescription Management: Access and manage digital prescriptions
  • Multi-language Support: Browse in 4+ languages with automatic detection
  • Progressive Web App: Works offline and installable on any device
  • Tourism Integration: Find doctors in new cities with travel-friendly options

๐ŸŽฏ Key Features

1. Intelligent Doctor Discovery

  • Advanced search and filtering by specialty, location, languages
  • Tourist-friendly doctor ratings and reviews
  • Real-time availability checking
  • Distance-based sorting with map integration
  • Verified doctor credentials and qualifications

2. Comprehensive Doctor Profiles

  • Detailed professional information
  • Patient reviews and ratings (0-5 stars)
  • Languages spoken (local and foreign)
  • Consultation fees and availability schedules
  • Hospital/clinic information with addresses
  • Specialties and years of experience

3. Smart Appointment System

  • Interactive calendar for booking
  • Support for in-person and teleconsultation options
  • Real-time appointment status tracking
  • Appointment history and management
  • Automated reminders and notifications
  • Symptom information collection
  • Health condition input before appointment

4. Video Consultation Engine

  • WebRTC peer-to-peer video and audio
  • Real-time signaling via Socket.IO
  • One-click joining from appointment details
  • Call recording capability
  • Screen sharing support
  • Network quality indicators

5. Symptom Checker

  • AI-assisted symptom analysis
  • Suggests potential health concerns
  • Doctor specialty recommendations
  • Preliminary assessment system
  • Safe and educational guidance

6. Real-time Communication

  • Instant messaging with doctors
  • Message history and conversation management
  • Socket.IO-powered real-time notifications
  • Typing indicators and read receipts
  • File sharing capabilities

7. Prescription Management

  • View all prescriptions in one place
  • Download and print prescriptions
  • Medication tracking
  • Prescription history
  • Reminder notifications

8. Multi-language Support

  • 4+ language support (English, Spanish, French, Arabic)
  • Automatic language detection
  • Professional translations
  • Dynamic language switching
  • i18next integration

9. Progressive Web App (PWA)

  • Installable on desktop and mobile
  • Works offline with cached content
  • Native app-like experience
  • Push notifications support
  • Fast loading with service workers

10. Tourism-Focused Features

  • Find doctors while traveling
  • Emergency contact information
  • Tourist-friendly consultation options
  • Travel insurance integration (prepared)
  • Location-based doctor search
  • Multiple currency support (prepared)

11. Robust Authentication & Security

  • JWT-based authentication
  • Secure token management with refresh logic
  • Email verification
  • Password reset functionality
  • Session management
  • Protected routes

12. Advanced State Management

  • Zustand for client state
  • React Query for server state
  • Optimistic updates
  • Automatic cache invalidation
  • Persistent storage

13. Responsive Design

  • Mobile-first approach
  • Desktop, tablet, and mobile optimization
  • Touch-friendly interfaces
  • Adaptive layouts
  • Accessible components (WCAG 2.1)

14. Rich User Experience

  • Smooth animations with Framer Motion
  • Toast notifications with React Hot Toast
  • Modal-based interactions
  • Form validation with React Hook Form & Zod
  • Loading states and error handling
  • Skeleton loaders

๐Ÿ› ๏ธ Tech Stack

Frontend Framework

  • React 19.2.4 - Modern UI library with hooks and concurrent features
  • TypeScript 6.0.2 - Type-safe JavaScript for robust code
  • Vite 8.0.1 - Lightning-fast build tool and dev server

Styling & UI

  • Tailwind CSS 3.4.19 - Utility-first CSS framework
  • Tailwind PostCSS 4.2.2 - Advanced CSS processing
  • Lucide React 1.7.0 - Beautiful icon library
  • Framer Motion 12.38.0 - Animation library

State Management & Data

  • Zustand 5.0.12 - Simple state management
  • TanStack React Query 5.96.1 - Server state management
  • Zod 4.3.6 - TypeScript-first schema validation

Forms & Validation

  • React Hook Form 7.72.0 - Efficient form handling
  • @hookform/resolvers 5.2.2 - Form resolver integrations

Routing & Navigation

  • React Router DOM 7.13.2 - Client-side routing

Real-time Communication

  • Socket.IO Client 4.8.3 - WebSocket communication
  • WebRTC - P2P video and audio (browser native)

Internationalization

  • i18next 26.0.4 - Internationalization framework
  • react-i18next 17.0.2 - React binding for i18next
  • i18next-http-backend 3.0.4 - Backend translation loader
  • i18next-browser-languagedetector 8.2.1 - Automatic language detection

HTTP & APIs

  • Axios 1.14.0 - HTTP client for API requests

UI Components & Alerts

  • React Hot Toast 2.6.0 - Toast notifications
  • @radix-ui/react-alert-dialog 1.1.15 - Accessible dialogs

PWA & Offline

  • vite-plugin-pwa 1.2.0 - PWA plugin for Vite
  • Service Workers - Offline support

Development Tools

  • ESLint 9.39.4 - Code linting
  • Autoprefixer 10.4.27 - CSS vendor prefixes
  • Postcss 8.5.8 - CSS processing

๐Ÿš€ Quick Start

Get the Patient Application running in 3 simple steps:

Prerequisites

  • Node.js 16.x or higher
  • npm 8.x or higher (or yarn/pnpm)
  • Backend API running at http://localhost:5000
  • MongoDB connection (for the backend)

Step 1: Navigate to Directory

cd mediaguide-nextgen/patient-app

Step 2: Install Dependencies

npm install

Step 3: Start Development Server

npm run dev

Success! ๐ŸŽ‰ The application will be available at:

  • Local: http://localhost:5173
  • Network: Check terminal for network access point

๐Ÿ“ฆ Installation

Full Setup Guide

1. Clone or Extract Repository

cd mediaguide-nextgen

2. Install Dependencies

cd patient-app
npm install

3. Configure Environment

Create a .env.local file in the patient-app directory:

# Backend API Configuration
VITE_API_BASE_URL=http://localhost:5000/api
VITE_SOCKET_URL=http://localhost:5000

# Feature Flags
VITE_ENABLE_VIDEO_CONSULTATION=true
VITE_ENABLE_CHAT=true
VITE_ENABLE_PRESCRIPTIONS=true
VITE_ENABLE_SYMPTOM_CHECKER=true
VITE_ENABLE_PWA=true

# Application Configuration
VITE_APP_NAME=MediGuide NextGen
VITE_APP_VERSION=1.0.0
VITE_DEBUG_MODE=false

# i18n Configuration
VITE_DEFAULT_LANGUAGE=en
VITE_SUPPORTED_LANGUAGES=en,es,fr,ar

# PWA Configuration
VITE_PWA_ENABLED=true
VITE_PWA_SCOPE=/

4. Ensure Backend is Running

cd ../backend
npm start

The backend should be running on http://localhost:5000

5. Start Development Server

cd ../patient-app
npm run dev

6. Access the Application

Open your browser and navigate to:

http://localhost:5173

7. Create Account & Test

  • Sign up with a test email
  • Browse doctors
  • Book an appointment
  • Try video consultation

๐Ÿ“ Project Structure

patient-app/
โ”‚
โ”œโ”€โ”€ ๐Ÿ“„ Configuration Files
โ”‚   โ”œโ”€โ”€ vite.config.js              # Vite build configuration
โ”‚   โ”œโ”€โ”€ tsconfig.json               # TypeScript configuration
โ”‚   โ”œโ”€โ”€ tailwind.config.js          # Tailwind CSS setup
โ”‚   โ”œโ”€โ”€ postcss.config.js           # PostCSS configuration
โ”‚   โ”œโ”€โ”€ eslint.config.js            # ESLint rules
โ”‚   โ”œโ”€โ”€ vite.config.ts              # Alternative Vite config
โ”‚   โ””โ”€โ”€ package.json                # Dependencies and scripts
โ”‚
โ”œโ”€โ”€ ๐Ÿ“ Public Assets
โ”‚   โ”œโ”€โ”€ icons/                      # Application icons
โ”‚   โ””โ”€โ”€ locales/                    # i18n translation files
โ”‚       โ”œโ”€โ”€ en/                     # English translations
โ”‚       โ”œโ”€โ”€ es/                     # Spanish translations
โ”‚       โ”œโ”€โ”€ fr/                     # French translations
โ”‚       โ””โ”€โ”€ ar/                     # Arabic translations
โ”‚
โ”œโ”€โ”€ ๐Ÿ“ Source Code (src/)
โ”‚   โ”œโ”€โ”€ main.tsx                    # Application entry point
โ”‚   โ”œโ”€โ”€ App.tsx                     # Root component & routing
โ”‚   โ”œโ”€โ”€ i18n.ts                     # i18n configuration
โ”‚   โ”œโ”€โ”€ index.css                   # Global styles
โ”‚   โ”‚
โ”‚   โ”œโ”€โ”€ ๐Ÿ“ components/
โ”‚   โ”‚   โ”œโ”€โ”€ Login.tsx               # Login page component
โ”‚   โ”‚   โ”œโ”€โ”€ Register.tsx            # Registration component
โ”‚   โ”‚   โ”œโ”€โ”€ Navbar.tsx              # Navigation bar
โ”‚   โ”‚   โ”œโ”€โ”€ SiteFooter.tsx          # Footer component
โ”‚   โ”‚   โ”œโ”€โ”€ LanguageSwitcher.tsx    # Language selector
โ”‚   โ”‚   โ”œโ”€โ”€ ProtectedRoute.tsx      # Route protection wrapper
โ”‚   โ”‚   โ”œโ”€โ”€ ProtectedLayout.tsx     # Protected layout
โ”‚   โ”‚   โ”œโ”€โ”€ PublicLayout.tsx        # Public layout
โ”‚   โ”‚   โ”‚
โ”‚   โ”‚   โ”œโ”€โ”€ consultation/           # Video consultation components
โ”‚   โ”‚   โ”‚   โ””โ”€โ”€ (consultation UI components)
โ”‚   โ”‚   โ”‚
โ”‚   โ”‚   โ”œโ”€โ”€ confirm/                # Confirmation components
โ”‚   โ”‚   โ”‚   โ””โ”€โ”€ ConfirmProvider.tsx
โ”‚   โ”‚   โ”‚
โ”‚   โ”‚   โ”œโ”€โ”€ illustrations/          # SVG illustrations
โ”‚   โ”‚   โ”‚
โ”‚   โ”‚   โ””โ”€โ”€ legal/                  # Legal text components
โ”‚   โ”‚
โ”‚   โ”œโ”€โ”€ ๐Ÿ“ pages/
โ”‚   โ”‚   โ”œโ”€โ”€ Home.tsx                # Homepage
โ”‚   โ”‚   โ”œโ”€โ”€ FindDoctors.tsx         # Doctor discovery
โ”‚   โ”‚   โ”œโ”€โ”€ DoctorProfile.tsx       # Doctor details
โ”‚   โ”‚   โ”œโ”€โ”€ SymptomChecker.tsx      # Symptom analysis
โ”‚   โ”‚   โ”œโ”€โ”€ MyAppointments.tsx      # Appointment management
โ”‚   โ”‚   โ”œโ”€โ”€ Chat.tsx                # Chat with doctors
โ”‚   โ”‚   โ”œโ”€โ”€ Prescriptions.tsx       # Prescription viewing
โ”‚   โ”‚   โ”œโ”€โ”€ Profile.tsx             # Patient profile
โ”‚   โ”‚   โ”œโ”€โ”€ PatientVideoConsultation.tsx  # Video consultation
โ”‚   โ”‚   โ”œโ”€โ”€ RegisterWall.tsx        # Registration incentive
โ”‚   โ”‚   โ”œโ”€โ”€ PrivacyPolicy.tsx       # Privacy policy
โ”‚   โ”‚   โ”œโ”€โ”€ TermsOfService.tsx      # Terms of service
โ”‚   โ”‚   โ”œโ”€โ”€ HelpCenter.tsx          # Help & support
โ”‚   โ”‚   โ”œโ”€โ”€ About.tsx               # About page
โ”‚   โ”‚   โ”œโ”€โ”€ Partner.tsx             # Partner program
โ”‚   โ”‚   โ”œโ”€โ”€ Careers.tsx             # Careers page
โ”‚   โ”‚   โ”œโ”€โ”€ Contact.tsx             # Contact form
โ”‚   โ”‚   โ””โ”€โ”€ InfoPage.tsx            # Dynamic info pages
โ”‚   โ”‚
โ”‚   โ”œโ”€โ”€ ๐Ÿ“ hooks/
โ”‚   โ”‚   โ””โ”€โ”€ (Custom React hooks)
โ”‚   โ”‚
โ”‚   โ”œโ”€โ”€ ๐Ÿ“ services/
โ”‚   โ”‚   โ”œโ”€โ”€ authService.ts          # Authentication API
โ”‚   โ”‚   โ”œโ”€โ”€ doctorService.ts        # Doctor API
โ”‚   โ”‚   โ”œโ”€โ”€ appointmentService.ts   # Appointment API
โ”‚   โ”‚   โ”œโ”€โ”€ chatService.ts          # Chat API
โ”‚   โ”‚   โ”œโ”€โ”€ prescriptionService.ts  # Prescription API
โ”‚   โ”‚   โ”œโ”€โ”€ reviewService.ts        # Review API
โ”‚   โ”‚   โ”œโ”€โ”€ symptomService.ts       # Symptom checker API
โ”‚   โ”‚   โ””โ”€โ”€ index.ts                # Service exports
โ”‚   โ”‚
โ”‚   โ”œโ”€โ”€ ๐Ÿ“ store/
โ”‚   โ”‚   โ”œโ”€โ”€ authStore.ts            # Auth state with Zustand
โ”‚   โ”‚   โ”œโ”€โ”€ userStore.ts            # User state
โ”‚   โ”‚   โ”œโ”€โ”€ appointmentStore.ts     # Appointment state
โ”‚   โ”‚   โ””โ”€โ”€ (Other state stores)
โ”‚   โ”‚
โ”‚   โ”œโ”€โ”€ ๐Ÿ“ config/
โ”‚   โ”‚   โ””โ”€โ”€ (Configuration files)
โ”‚   โ”‚
โ”‚   โ”œโ”€โ”€ ๐Ÿ“ models/
โ”‚   โ”‚   โ””โ”€โ”€ (TypeScript type definitions)
โ”‚   โ”‚
โ”‚   โ”œโ”€โ”€ ๐Ÿ“ utils/
โ”‚   โ”‚   โ””โ”€โ”€ (Utility functions)
โ”‚   โ”‚
โ”‚   โ””โ”€โ”€ ๐Ÿ“ assets/
โ”‚       โ””โ”€โ”€ (Images, fonts, etc.)
โ”‚
โ”œโ”€โ”€ index.html                      # HTML entry point
โ”œโ”€โ”€ .env.example                    # Environment template
โ”œโ”€โ”€ .env.local                      # Local environment (git ignored)
โ”œโ”€โ”€ .gitignore                      # Git ignore rules
โ”œโ”€โ”€ vite.config.ts                  # Additional Vite config
โ”œโ”€โ”€ REGISTER_COMPONENT.md           # Component registration guide
โ”œโ”€โ”€ README.md                       # This file
โ””โ”€โ”€ manifest.json                   # PWA manifest

๐Ÿ“œ Available Scripts

Development Commands

# Start development server with HMR
npm run dev

# Build for production
npm run build

# Preview production build locally
npm run preview

# Lint code for quality issues
npm run lint

# Lint and fix auto-fixable issues
npm run lint -- --fix

Detailed Script Information

Command Purpose Environment
npm run dev Start Vite dev server with HMR Development
npm run build Build and optimize for production Production
npm run preview Serve production build locally Testing
npm run lint Run ESLint on all files Development

โš™๏ธ Configuration

Environment Variables

Create .env.local in the project root:

# ==========================================
# API Configuration
# ==========================================
VITE_API_BASE_URL=http://localhost:5000/api
VITE_SOCKET_URL=http://localhost:5000

# ==========================================
# Feature Flags
# ==========================================
VITE_ENABLE_VIDEO_CONSULTATION=true
VITE_ENABLE_CHAT=true
VITE_ENABLE_PRESCRIPTIONS=true
VITE_ENABLE_SYMPTOM_CHECKER=true
VITE_ENABLE_PWA=true
VITE_ENABLE_REVIEWS=true
VITE_ENABLE_APPOINTMENTS=true

# ==========================================
# Application Settings
# ==========================================
VITE_APP_NAME=MediGuide NextGen - Patient
VITE_APP_VERSION=1.0.0
VITE_DEBUG_MODE=false

# ==========================================
# Internationalization
# ==========================================
VITE_DEFAULT_LANGUAGE=en
VITE_SUPPORTED_LANGUAGES=en,es,fr,ar

# ==========================================
# PWA Configuration
# ==========================================
VITE_PWA_ENABLED=true
VITE_PWA_SCOPE=/

# ==========================================
# WebRTC Configuration
# ==========================================
VITE_STUN_SERVERS=stun:stun.l.google.com:19302
VITE_ICE_SERVERS=turn:turnserver.example.com:3478

Vite Configuration

The vite.config.js includes:

  • React plugin with SWC compiler for faster builds
  • PWA plugin for service worker generation
  • Optimized bundle splitting
  • HMR enabled for development
  • Cloudflare tunnel support

Tailwind CSS

Comprehensive Tailwind configuration including:

  • Extended color palette
  • Custom responsive breakpoints
  • Animation utilities
  • Form plugin integration
  • Dark mode support

๐ŸŒ Features in Detail

Doctor Discovery System

Find Doctors By:

  • Medical specialty
  • Location/City
  • Languages spoken
  • Tourist-friendly ratings
  • Availability
  • Consultation fees
  • Verified credentials

Advanced Filtering:

  • Multi-select specialties
  • Distance-based sorting
  • Rating filters
  • Availability time slots
  • Teleconsultation availability
  • Insurance/payment acceptance

Appointment Booking Flow

  1. Select Doctor - Browse and filter doctors
  2. Choose Type - In-person or teleconsultation
  3. Select Date/Time - Pick available slots
  4. Enter Health Info - Symptoms and medical history
  5. Confirm Booking - Review and finalize
  6. Receive Confirmation - Email with details

Video Consultation Features

  • Real-time P2P communication
  • Screen sharing capability
  • Call quality monitoring
  • Prescription generation during call
  • Call recording (with consent)
  • Automatic timeout handling
  • Network quality fallback

Symptom Checker Workflow

  1. Input Symptoms - Select or type symptoms
  2. Medical History - Provide relevant information
  3. AI Analysis - System analyzes input
  4. Get Recommendations - Suggested specialists
  5. Book Appointment - Direct booking option
  6. Educational Information - Learn more details

Multi-language Architecture

Supported Languages:

  • ๐Ÿ‡ฌ๐Ÿ‡ง English (en)
  • ๐Ÿ‡ช๐Ÿ‡ธ Spanish (es)
  • ๐Ÿ‡ซ๐Ÿ‡ท French (fr)
  • ๐Ÿ‡ธ๐Ÿ‡ฆ Arabic (ar)

i18n Features:

  • Automatic browser language detection
  • Manual language switching
  • Namespace-based translations
  • Lazy loading of translation files
  • Fallback language support
  • RTL support for Arabic

๐ŸŒ API Integration

Base URL Configuration

const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:5000/api';

Key API Endpoints

Authentication

POST   /auth/login              # Patient login
POST   /auth/register           # Patient registration
POST   /auth/logout             # Logout
POST   /auth/refresh-token      # Refresh JWT token
POST   /auth/reset-password     # Password reset
GET    /auth/verify-email/:token # Email verification

Doctor Discovery

GET    /doctors                 # Get all doctors (with filters)
GET    /doctors/search          # Advanced doctor search
GET    /doctors/:id             # Get doctor details
GET    /doctors/:id/reviews     # Get doctor reviews
GET    /doctors/:id/availability # Get availability

Appointments

GET    /appointments            # Get patient's appointments
POST   /appointments            # Create appointment
GET    /appointments/:id        # Get appointment details
PUT    /appointments/:id        # Update appointment
DELETE /appointments/:id        # Cancel appointment
PUT    /appointments/:id/status # Update status

Symptom Checker

POST   /symptoms/analyze        # Analyze symptoms
GET    /symptoms/common         # Get common symptoms
GET    /symptoms/specialists    # Get recommended specialists

Chat

GET    /chat/conversations      # Get all conversations
POST   /chat/send               # Send message
GET    /chat/:conversationId    # Get messages
DELETE /chat/:messageId         # Delete message
PUT    /chat/:messageId         # Edit message

Prescriptions

GET    /prescriptions           # Get all prescriptions
GET    /prescriptions/:id       # Get prescription details
POST   /prescriptions/:id/download # Download prescription

Reviews

GET    /reviews/:doctorId       # Get doctor reviews
POST   /reviews                 # Create review
PUT    /reviews/:id             # Update review
DELETE /reviews/:id             # Delete review

User Profile

GET    /profile                 # Get patient profile
PUT    /profile                 # Update profile
POST   /profile/avatar          # Upload avatar

Axios Instance Setup

import axios from 'axios';

const API = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
});

// Add token to requests
API.interceptors.request.use((config) => {
  const token = localStorage.getItem('authToken');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// Handle token refresh
API.interceptors.response.use(
  (response) => response,
  async (error) => {
    if (error.response?.status === 401) {
      // Trigger token refresh
    }
    return Promise.reject(error);
  }
);

๐ŸŒ Internationalization (i18n)

Setup

The application uses i18next with automatic language detection and lazy loading.

Translation Files Location

public/locales/
โ”œโ”€โ”€ en/translation.json
โ”œโ”€โ”€ es/translation.json
โ”œโ”€โ”€ fr/translation.json
โ””โ”€โ”€ ar/translation.json

Using Translations in Components

import { useTranslation } from 'react-i18next';

export function MyComponent() {
  const { t, i18n } = useTranslation();

  return (
    <div>
      <h1>{t('common.welcome')}</h1>
      <button onClick={() => i18n.changeLanguage('es')}>
        {t('common.spanish')}
      </button>
    </div>
  );
}

Adding New Languages

  1. Create new translation file: public/locales/[lang]/translation.json
  2. Update VITE_SUPPORTED_LANGUAGES in .env.local
  3. Add language option to language switcher component

๐Ÿ‘จโ€๐Ÿ’ป Development Workflow

Setting Up Development Environment

1. Install Dependencies

npm install

2. Create Environment File

cp .env.example .env.local
# Edit .env.local with your configuration

3. Start Backend Services

cd ../backend
npm start

4. Start Development Server

cd ../patient-app
npm run dev

Code Quality Standards

TypeScript

  • Strict mode enabled
  • No implicit any
  • Full type coverage for APIs
  • Interfaces for all data structures

ESLint Rules

  • React hooks best practices
  • Accessibility (a11y) compliance
  • Code consistency
  • Performance warnings

Component Structure

import { FC, ReactNode } from 'react';
import { ComponentProps } from '../models';

interface Props {
  title: string;
  children: ReactNode;
  onClose?: () => void;
}

export const MyComponent: FC<Props> = ({ title, children, onClose }) => {
  return (
    <div>
      <h1>{title}</h1>
      {children}
    </div>
  );
};

Git Workflow

# Create feature branch
git checkout -b feature/feature-name

# Make commits
git add .
git commit -m "feat: description of changes"

# Push and create PR
git push origin feature/feature-name

๐Ÿ“ฒ PWA (Progressive Web App)

PWA Features Enabled

  • โœ… Installable on desktop and mobile
  • โœ… Works offline with service worker
  • โœ… Native app-like experience
  • โœ… Push notifications ready
  • โœ… Fast loading with caching
  • โœ… Responsive to all screen sizes

Installation

Desktop (Chrome/Edge)

  1. Click the install icon in the address bar
  2. Select "Install app"

Mobile (iOS Safari)

  1. Tap the Share button
  2. Select "Add to Home Screen"

Mobile (Android Chrome)

  1. Tap the menu (โ‹ฎ)
  2. Select "Install app"

Manifest Configuration

The manifest.json includes:

  • App name and description
  • Icons for different sizes
  • Display mode (standalone)
  • Theme and background colors
  • Start URL configuration

๐Ÿ”ง Troubleshooting

Common Issues and Solutions

1. Port Already in Use

# Kill process on port 5173
npx kill-port 5173

# Or specify different port
npm run dev -- --port 3000

2. Module Not Found

# Clear node_modules and reinstall
rm -r node_modules package-lock.json
npm install

3. TypeScript Errors

# Rebuild TypeScript
npx tsc --noEmit

# Check for version mismatches
npm list typescript

4. API Connection Failed

# Verify backend is running
curl http://localhost:5000/health

# Check environment variables
echo $VITE_API_BASE_URL

5. i18n Translations Not Loading

  • Verify translation files exist in public/locales/[lang]/
  • Check network tab for failed translation requests
  • Clear cache: Ctrl+Shift+Delete in browser

6. PWA Not Installing

  • Ensure HTTPS or localhost
  • Check manifest.json is valid
  • Service workers must be enabled
  • Clear browser service workers

7. Video Consultation Issues

  • Check camera/microphone permissions
  • Verify STUN/TURN configuration
  • Check browser console for WebRTC errors
  • Ensure both users are connected to internet

Debug Mode

Enable debug logging:

VITE_DEBUG_MODE=true

Then in console:

localStorage.setItem('DEBUG', 'mediaguide:*');

โšก Performance Optimization

Built-in Optimizations

  1. React Compiler - Automatic memoization
  2. Vite - Optimized module loading and code splitting
  3. React Query - Intelligent server state caching
  4. Zustand - Lightweight state management
  5. Service Workers - Static asset caching
  6. Tree Shaking - Unused code elimination

Performance Tips

  • Use React.memo for expensive components
  • Implement virtual scrolling for large lists
  • Optimize images with WebP format
  • Lazy load routes with React Router
  • Minimize re-renders with useCallback
  • Use React Query for data deduplication
  • Monitor Core Web Vitals

Building for Production

# Build optimized bundle
npm run build

# Analyze bundle size
npm run build -- --analyze

# Preview production build
npm run preview

๐Ÿค Contributing

Getting Started with Contributing

  1. Fork the Repository
  2. Create Feature Branch
    git checkout -b feature/amazing-feature
  3. Make Changes with Tests
  4. Commit with Clear Messages
    git commit -m "feat: add amazing feature"
  5. Push to Branch
    git push origin feature/amazing-feature
  6. Open Pull Request

Contribution Guidelines

  • Follow TypeScript and ESLint standards
  • Write meaningful commit messages
  • Test changes thoroughly
  • Update documentation
  • Ensure responsive design
  • Add type definitions for all code
  • Test i18n with multiple languages

Commit Message Format

feat: add new feature
fix: resolve bug
docs: update documentation
style: code formatting
refactor: code restructuring
perf: performance improvement
test: add tests
chore: maintenance tasks
i18n: translation updates

๐Ÿ“„ License

This project is part of the MediGuide NextGen healthcare platform and is licensed under the MIT License. See the LICENSE file for details.


๐Ÿ“ž Support & Contact

Getting Help

  • Documentation: Check ARCHITECTURE_GUIDE.md
  • Issues: Report bugs on GitHub Issues
  • Discussions: Join our community discussions

Project Links

  • Backend API: ../backend/
  • Doctor App: ../doctor-app/
  • Admin App: ../admin-app/
  • Documentation: ../GETTING_STARTED.md

๐ŸŽฏ Roadmap

Current Version (v1.0.0)

  • โœ… Patient authentication and profiles
  • โœ… Doctor discovery with advanced search
  • โœ… Appointment booking system
  • โœ… Video consultations
  • โœ… Real-time chat
  • โœ… Prescription management
  • โœ… Symptom checker
  • โœ… Multi-language support
  • โœ… PWA capabilities

Planned Features (v2.0.0)

  • ๐Ÿ”„ Enhanced symptom analysis with ML
  • ๐Ÿ”„ Integration with travel insurance
  • ๐Ÿ”„ Emergency contacts and SOS features
  • ๐Ÿ”„ Multi-currency support
  • ๐Ÿ”„ Appointment reminders via SMS
  • ๐Ÿ”„ Healthcare records management
  • ๐Ÿ”„ Telemedicine quality improvements
  • ๐Ÿ”„ Mobile app (iOS/Android)

๐Ÿ“Š Statistics

  • Components: 50+
  • Pages: 18+
  • TypeScript Coverage: 100%
  • Bundle Size: ~400KB (gzipped)
  • Lighthouse Score: 95+
  • Accessibility Score: A+
  • Languages Supported: 4+

Made with โค๏ธ for Travelers & Tourists Seeking Healthcare

โฌ† Back to Top

About

*A modern, feature-rich React application for tourists and travelers to find, consult with, and manage healthcare services in the MediGuide NextGen ecosystem.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages