📌 Introduction.
💡 Features.
🚀 Technology Stack.
🏗️ Project Structure.
⭐ Overview.
💥 Getting Started.
🐳 Docker Setup.
🔌 Environment Variables.
TelMedSphere's frontend is built with React and provides a user-friendly interface for the telemedicine platform. It offers a seamless experience for both doctors and patients, allowing them to connect through video calls, manage health records, process payments, and handle prescriptions efficiently. The interface is designed to be intuitive, responsive, and accessible on various devices.
🚨 For Patients:
- Book Video Calls: Easily schedule video consultations with doctors.
- Share Feedback: Rate and review the doctor after your consultation.
- Manage Your Profile: Update and view your personal details.
- View Past Records: Check previous orders and prescriptions in one place.
- Easy Payments: Use the wallet feature powered by Stripe for secure payments.
🚨 For Doctors:
- Set Up Your Profile: Add information about yourself and your services.
- Manage Availability: Set your working hours for consultations.
- Join Video Calls: Connect with patients at the scheduled time.
- Write Prescriptions: Share prescriptions directly with patients after the consultation.
- Queue System: Organize appointments efficiently with a smart queue feature.
🚨 Core Framework: ReactJS
🚨 Build Tool: Vite
🚨 Styling: TailwindCSS
🚨 State Management: React Context API
🚨 Routing: React Router DOM
🚨 UI Components: Material UI
🚨 Video Conferencing: Jitsi
🚨 PDF Generation: jsPDF
🚨 Animations: Framer Motion
🚨 Notifications: React-Toastify
🚨 Payment Processing: Stripe
🚨 Containerization: Docker
🚨 Deployment: Vercel
frontend/
├── public/ # Static assets
├── src/
│ ├── assets/ # Images and static resources
│ ├── components/ # Reusable UI components
│ │ ├── cart/ # Shopping cart components
│ │ ├── common/ # Shared components (header, footer, etc.)
│ │ ├── diseasePrediction/ # Disease prediction feature components
│ │ ├── facts/ # Health facts components
│ │ ├── form/ # Form components
│ │ ├── landingPage/ # Landing page specific components
│ │ ├── medicines/ # Medicine related components
│ │ ├── numberedCard/ # Numbered card components
│ │ ├── orders/ # Order management components
│ │ ├── pdfgenerator/ # PDF generation components
│ │ └── resetPassword/ # Password reset components
│ ├── contexts/ # React context providers
│ │ ├── cart/ # Cart context
│ │ ├── common/ # Shared contexts
│ │ ├── DarkMode/ # Theme context
│ │ └── filters/ # Filter contexts
│ ├── data/ # Static data and mock data
│ ├── hooks/ # Custom React hooks
│ ├── pages/ # Application pages
│ ├── routes/ # Route configurations
│ ├── App.jsx # Main application component
│ ├── firebase.js # Firebase configuration
│ ├── httpClient.js # HTTP client for API calls
│ └── index.jsx # Application entry point
├── .env.example # Environment variables example
├── package.json # Project dependencies and scripts
├── tailwind.config.js # Tailwind CSS configuration
└── vite.config.js # Vite configuration
- Fork this Repository.
- Clone the forked repository in your local system.
git clone https://github.com/TelMedSphere/frontend.gitFollow these steps to set up the frontend locally:
# Navigate to frontend directory
cd TelMedSphere/frontend
# Install all npm packages for react frontend
# Use `npm ci` to avoid changing package-lock.json after every install
npm ci
# Set up environment variables
cp .env.example .env
# (For Windows) copy .env.example .env
# Start the development server
npm run devOnce the development server is running, you can access the application at http://localhost:3000 by default.
In the project directory, you can run:
npm run dev: Runs the app in development modenpm run build: Builds the app for productionnpm start: Previews the production build locally
Refer to the EnvVarSetUpGuideline.md for detailed steps on setting up the .env files for both the frontend and backend.
Docker provides an easier way to set up and run the frontend with all its dependencies.
- Docker installed on your system
- Environment variables ready for configuration
-
Clone the repository as described above
-
Navigate to the frontend directory:
cd TelMedSphere/frontend -
Build and run the Docker container:
docker build -t telmedsphere-frontend . docker run -p 3000:3000 telmedsphere-frontend
The frontend application will be available at:
You can also use a simple Docker Compose setup for just the frontend:
# Create a docker-compose.yml file in the frontend directory with:
# ---
# version: '3'
# services:
# frontend:
# build: .
# ports:
# - "3000:3000"
# ---
# Then run:
docker-compose up --build# If using docker run
docker stop <container-id>
# If using docker-compose
docker-compose downThe frontend requires several environment variables to connect to the backend services. Create a .env file in the frontend directory with the following variables (refer to .env.example):
# Stripe Secret Key
VITE_PUBLICATION_KEY=your_stripe_secret_key
# Jitsi Key
VITE_JAAS_APP_ID=your_jitsi_meet_key
# API Key for chatbot
VITE_API_KEY = 'your_api_key'
# Render URL For Model
VITE_MODEL_URL='your_model_hostname'
# Firebase Authentication Keys
VITE_FIREBASE_API_KEY=your-api-key
VITE_FIREBASE_AUTH_DOMAIN=your-auth-domain
VITE_FIREBASE_PROJECT_ID=your-project-id
VITE_FIREBASE_STORAGE_BUCKET=your-storage-bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your-messaging-sender-id
VITE_FIREBASE_APP_ID=your-app-id
VITE_FIREBASE_MEASUREMENT_ID=your-measurement-id
For detailed instructions on obtaining these values, refer to the EnvVarSetUpGuideline.md file.
- User registration and login
- Password reset functionality
- Profile management
- Role-based access control (patient/doctor)
- Real-time video calls using Jitsi
- Appointment scheduling and management
- Doctor availability calendar
- Patient history viewing
- Prescription generation and downloading
- Health records storage and retrieval
- Wallet system using Stripe
- Payment history tracking
- Secure payment processing
- Browse and search medicines
- Shopping cart functionality
- Order tracking
- Review and rating system
- Symptom-based disease prediction
- Health recommendations
- Responsive design for all devices
- Dark/Light mode toggle
- Accessibility features
- Intuitive navigation
 Pratik Mane (Project Admin) |
 Harshwardhan Patil (KWoC Mentor) |
 Aditya Bavadekar (SWoC Mentor) |
 Raj Khanke (DWoC Mentor) |
This project is licensed under the Apache License 2.0. See the LICENSE file for more details.
Copyright 2025 Pratik Mane
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.