{"id":28859618,"url":"https://github.com/telmedsphere/frontend","last_synced_at":"2026-04-10T04:46:52.431Z","repository":{"id":295870543,"uuid":"991516391","full_name":"TelMedSphere/frontend","owner":"TelMedSphere","description":"Frontend of telemedicine healthcare platform for doctors \u0026 patients","archived":false,"fork":false,"pushed_at":"2025-06-11T13:55:16.000Z","size":19818,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-20T04:01:49.384Z","etag":null,"topics":["docker","framer-motion","jitsi","jspdf","material-ui","react-toastify","reactjs","stripe","tailwindcss","vercel","vite"],"latest_commit_sha":null,"homepage":"https://pratik0112-telmedsphere.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TelMedSphere.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING_GUIDELINES.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-27T18:39:11.000Z","updated_at":"2025-06-11T13:55:20.000Z","dependencies_parsed_at":"2025-05-27T20:33:33.037Z","dependency_job_id":null,"html_url":"https://github.com/TelMedSphere/frontend","commit_stats":null,"previous_names":["telmedsphere/frontend"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/TelMedSphere/frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TelMedSphere%2Ffrontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TelMedSphere%2Ffrontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TelMedSphere%2Ffrontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TelMedSphere%2Ffrontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TelMedSphere","download_url":"https://codeload.github.com/TelMedSphere/frontend/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TelMedSphere%2Ffrontend/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260878242,"owners_count":23075955,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["docker","framer-motion","jitsi","jspdf","material-ui","react-toastify","reactjs","stripe","tailwindcss","vercel","vite"],"created_at":"2025-06-20T04:01:26.919Z","updated_at":"2025-12-30T20:06:45.828Z","avatar_url":"https://github.com/TelMedSphere.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":" # \u003cp align=\"center\"\u003e💖TelMedSphere Frontend\u003c/p\u003e\n\n\u003cdiv id=\"top\"\u003e\u003c/div\u003e\n\n\u003ch2\u003e🧾 Table of Contents\u003c/h2\u003e\n\n [📌 Introduction](#introduction).\u003cbr\u003e\n [💡 Features](#features).\u003cbr\u003e\n [🚀 Technology Stack](#technology-stack).\u003cbr\u003e\n [🏗️ Project Structure](#project-structure).\u003cbr\u003e\n [⭐ Overview](#overview).\u003cbr\u003e\n [💥 Getting Started](#getting-started).\u003cbr\u003e\n [🐳 Docker Setup](#docker-setup).\u003cbr\u003e\n [🔌 Environment Variables](#environment-variables).\u003cbr\u003e\n\u003c!-- --------------------------------------------------------------------------------------------------------------------------------------------------------- --\u003e\n\n\u003ch2\u003e📌Introduction\u003c/h2\u003e\n\nTelMedSphere'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.\n\n\u003ch2\u003e💡Features\u003c/h2\u003e\n\n🚨 For Patients:\u003cbr\u003e\n - Book Video Calls: Easily schedule video consultations with doctors.\n - Share Feedback: Rate and review the doctor after your consultation.\n - Manage Your Profile: Update and view your personal details.\n - View Past Records: Check previous orders and prescriptions in one place.\n - Easy Payments: Use the wallet feature powered by Stripe for secure payments.\n \n🚨 For Doctors:\u003cbr\u003e\n - Set Up Your Profile: Add information about yourself and your services.\n - Manage Availability: Set your working hours for consultations.\n - Join Video Calls: Connect with patients at the scheduled time.\n - Write Prescriptions: Share prescriptions directly with patients after the consultation.\n - Queue System: Organize appointments efficiently with a smart queue feature.\n\n\u003c!-- --------------------------------------------------------------------------------------------------------------------------------------------------------- --\u003e\n\n\u003ch2\u003e🚀Technology Stack\u003c/h2\u003e\n\n\u003cp\u003e\n  \u003ca href=\"https://www.w3schools.com/html/\"\u003e \u003cimg src=\"https://img.icons8.com/?size=64\u0026id=20909\u0026format=png\" alt=\"HTML\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.w3schools.com/css/\"\u003e \u003cimg src=\"https://img.icons8.com/?size=64\u0026id=21278\u0026format=png\" alt=\"CSS\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.w3schools.com/js/\"\u003e \u003cimg src=\"https://img.icons8.com/?size=64\u0026id=108784\u0026format=png\" alt=\"JS\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.w3schools.com/REACT/DEFAULT.ASP\"\u003e \u003cimg src=\"https://img.icons8.com/?size=64\u0026id=NfbyHexzVEDk\u0026format=png\" alt=\"React\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n🚨 **Core Framework**: ReactJS \u003cbr\u003e\n🚨 **Build Tool**: Vite \u003cbr\u003e\n🚨 **Styling**: TailwindCSS \u003cbr\u003e\n🚨 **State Management**: React Context API \u003cbr\u003e\n🚨 **Routing**: React Router DOM \u003cbr\u003e\n🚨 **UI Components**: Material UI \u003cbr\u003e\n🚨 **Video Conferencing**: Jitsi \u003cbr\u003e\n🚨 **PDF Generation**: jsPDF \u003cbr\u003e\n🚨 **Animations**: Framer Motion \u003cbr\u003e\n🚨 **Notifications**: React-Toastify \u003cbr\u003e\n🚨 **Payment Processing**: Stripe \u003cbr\u003e\n🚨 **Containerization**: Docker \u003cbr\u003e\n🚨 **Deployment**: Vercel \u003cbr\u003e\n\n\u003c!-- --------------------------------------------------------------------------------------------------------------------------------------------------------- --\u003e\n\n\u003ch2\u003e🏗️Project Structure\u003c/h2\u003e\n\n```\nfrontend/\n├── public/               # Static assets\n├── src/\n│   ├── assets/           # Images and static resources\n│   ├── components/       # Reusable UI components\n│   │   ├── cart/         # Shopping cart components\n│   │   ├── common/       # Shared components (header, footer, etc.)\n│   │   ├── diseasePrediction/ # Disease prediction feature components\n│   │   ├── facts/        # Health facts components\n│   │   ├── form/         # Form components\n│   │   ├── landingPage/  # Landing page specific components\n│   │   ├── medicines/    # Medicine related components\n│   │   ├── numberedCard/ # Numbered card components\n│   │   ├── orders/       # Order management components\n│   │   ├── pdfgenerator/ # PDF generation components\n│   │   └── resetPassword/ # Password reset components\n│   ├── contexts/         # React context providers\n│   │   ├── cart/         # Cart context\n│   │   ├── common/       # Shared contexts\n│   │   ├── DarkMode/     # Theme context\n│   │   └── filters/      # Filter contexts\n│   ├── data/             # Static data and mock data\n│   ├── hooks/            # Custom React hooks\n│   ├── pages/            # Application pages\n│   ├── routes/           # Route configurations\n│   ├── App.jsx           # Main application component\n│   ├── firebase.js       # Firebase configuration\n│   ├── httpClient.js     # HTTP client for API calls\n│   └── index.jsx         # Application entry point\n├── .env.example          # Environment variables example\n├── package.json          # Project dependencies and scripts\n├── tailwind.config.js    # Tailwind CSS configuration\n└── vite.config.js        # Vite configuration\n```\n\n\u003c!-- --------------------------------------------------------------------------------------------------------------------------------------------------------- --\u003e\n\n\u003ch2\u003e⭐Overview\u003c/h2\u003e\n\n\u003ch1 align=\"center\"\u003e \u003ca href=\"https://pratik0112-telmedsphere.vercel.app/\"\u003e Live Project Demo ↗️\u003c/a\u003e\u003c/h1\u003e\n\n![](https://github.com/PratikMane0112/TelMedSphere/blob/master/Overview/1.png)\n\n\u003ch3 align=\"right\"\u003e\u003ca href=\"#top\"\u003e⬆️\u003c/a\u003e\u003c/h3\u003e\n\n\u003c!-- --------------------------------------------------------------------------------------------------------------------------------------------------------- --\u003e\n\u003ch2\u003e💥Getting Started\u003c/h2\u003e\n\n- Fork this Repository.\n- Clone the forked repository in your local system.\n  \n```bash\ngit clone https://github.com/TelMedSphere/frontend.git\n```\n\n\u003ch2\u003e💻Local Setup\u003c/h2\u003e\n\nFollow these steps to set up the frontend locally:\n  \n```bash\n# Navigate to frontend directory\ncd TelMedSphere/frontend\n\n# Install all npm packages for react frontend\n# Use `npm ci` to avoid changing package-lock.json after every install\nnpm ci\n\n# Set up environment variables\ncp .env.example .env\n# (For Windows) copy .env.example .env\n\n# Start the development server \nnpm run dev\n```\n\nOnce the development server is running, you can access the application at `http://localhost:3000` by default.\n\n\u003ch3\u003e📝Available Scripts\u003c/h3\u003e\n\nIn the project directory, you can run:\n\n- `npm run dev`: Runs the app in development mode\n- `npm run build`: Builds the app for production\n- `npm start`: Previews the production build locally\n\u003c!-- --------------------------------------------------------------------------------------------------------------------------------------------------------- --\u003e\n\n## How to Get `.env` File Variables\n\nRefer to the [EnvVarSetUpGuideline.md](.github/EnvVarSetUpGuideline.md) for detailed steps on setting up the `.env` files for both the frontend and backend.\n\n\n\u003ch3 align=\"right\"\u003e\u003ca href=\"#top\"\u003e⬆️\u003c/a\u003e\u003c/h3\u003e\n\n\u003c!-- --------------------------------------------------------------------------------------------------------------------------------------------------------- --\u003e\n\u003ch2\u003e🐳Docker Setup\u003c/h2\u003e\n\nDocker provides an easier way to set up and run the frontend with all its dependencies.\n\n### Prerequisites\n- Docker [installed](https://www.docker.com/products/docker-desktop/) on your system\n- Environment variables ready for configuration\n\n### Steps to Run with Docker\n\n1. Clone the repository as described above\n2. Navigate to the frontend directory:\n   ```bash\n   cd TelMedSphere/frontend\n   ```\n\n3. Build and run the Docker container:\n   ```bash\n   docker build -t telmedsphere-frontend .\n   docker run -p 3000:3000 telmedsphere-frontend\n   ```\n\nThe frontend application will be available at:\n- http://localhost:3000\n\n### Using Docker Compose (Frontend only)\n\nYou can also use a simple Docker Compose setup for just the frontend:\n\n```bash\n# Create a docker-compose.yml file in the frontend directory with:\n# ---\n# version: '3'\n# services:\n#   frontend:\n#     build: .\n#     ports:\n#       - \"3000:3000\"\n# ---\n\n# Then run:\ndocker-compose up --build\n```\n\n### Stopping the Container\n```bash\n# If using docker run\ndocker stop \u003ccontainer-id\u003e\n\n# If using docker-compose\ndocker-compose down\n```\n\n\u003ch3 align=\"right\"\u003e\u003ca href=\"#top\"\u003e⬆️\u003c/a\u003e\u003c/h3\u003e\n\n\u003c!-- --------------------------------------------------------------------------------------------------------------------------------------------------------- --\u003e\n\n\u003ch2\u003e🔌Environment Variables\u003c/h2\u003e\n\nThe 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`):\n\n```\n# Stripe Secret Key\nVITE_PUBLICATION_KEY=your_stripe_secret_key\n\n# Jitsi Key\nVITE_JAAS_APP_ID=your_jitsi_meet_key\n\n# API Key for chatbot\nVITE_API_KEY = 'your_api_key'\n\n# Render URL For Model\nVITE_MODEL_URL='your_model_hostname'\n\n# Firebase Authentication Keys\nVITE_FIREBASE_API_KEY=your-api-key\nVITE_FIREBASE_AUTH_DOMAIN=your-auth-domain\nVITE_FIREBASE_PROJECT_ID=your-project-id\nVITE_FIREBASE_STORAGE_BUCKET=your-storage-bucket\nVITE_FIREBASE_MESSAGING_SENDER_ID=your-messaging-sender-id\nVITE_FIREBASE_APP_ID=your-app-id\nVITE_FIREBASE_MEASUREMENT_ID=your-measurement-id\n\n```\n\nFor detailed instructions on obtaining these values, refer to the [EnvVarSetUpGuideline.md](.github/EnvVarSetUpGuideline.md) file.\n\u003ch3 align=\"right\"\u003e\u003ca href=\"#top\"\u003e⬆️\u003c/a\u003e\u003c/h3\u003e\n\n\u003c!-- --------------------------------------------------------------------------------------------------------------------------------------------------------- --\u003e\n\n\u003ch2\u003e🖥️ Key Features Implementation\u003c/h2\u003e\n\n### 1. User Authentication\n- User registration and login\n- Password reset functionality\n- Profile management\n- Role-based access control (patient/doctor)\n\n### 2. Video Consultation\n- Real-time video calls using Jitsi\n- Appointment scheduling and management\n- Doctor availability calendar\n\n### 3. Medical Records Management\n- Patient history viewing\n- Prescription generation and downloading\n- Health records storage and retrieval\n\n### 4. Payment Integration\n- Wallet system using Stripe\n- Payment history tracking\n- Secure payment processing\n\n### 5. Medicine Marketplace\n- Browse and search medicines\n- Shopping cart functionality\n- Order tracking\n- Review and rating system\n\n### 6. Disease Prediction\n- Symptom-based disease prediction\n- Health recommendations\n\n### 7. UI/UX Features\n- Responsive design for all devices\n- Dark/Light mode toggle\n- Accessibility features\n- Intuitive navigation\n\n\u003ch2\u003e⚡Project Admin and Collaborators\u003c/h2\u003e\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\n\u003ca href=\"https://github.com/PratikMane0112\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/153143167?v=4\" height=\"140px\" width=\"140px\" alt=\"Pratik Mane\"\u003e\u003c/a\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003ePratik Mane \u003cbr\u003e (Project Admin)\u003c/b\u003e\u003c/sub\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\n\u003ca href=\"https://github.com/HarshwardhanPatil07\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/126240589?v=4\" height=\"140px\" width=\"140px\" alt=\"Pratik Mane\"\u003e\u003c/a\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003eHarshwardhan Patil \u003cbr\u003e (KWoC Mentor) \u003c/b\u003e\u003c/sub\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\n\u003ca href=\"https://github.com/AdityaBavadekar\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/64344960?v=4\" height=\"140px\" width=\"140px\" alt=\"Pratik Mane\"\u003e\u003c/a\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003eAditya Bavadekar \u003cbr\u003e (SWoC Mentor)\u003c/b\u003e\u003c/sub\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\n\u003ca href=\"https://github.com/RajKhanke\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/137288727?v=4\" height=\"140px\" width=\"140px\" alt=\"Raj Khanke\"\u003e\u003c/a\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003eRaj Khanke \u003cbr\u003e (DWoC Mentor) \u003c/b\u003e\u003c/sub\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- --------------------------------------------------------------------------------------------------------------------------------------------------------- --\u003e\n\n\u003ch2\u003e🫂Project Contributors\u003c/h2\u003e\n\n\u003ca href=\"https://github.com/PratikMane0112/TelMedSphere/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=PratikMane0112/TelMedSphere\u0026cache_burst=1\" /\u003e\n\u003c/a\u003e\n\n\u003ch2\u003e\u003ca href=\"https://discord.gg/qsdDRKak28\"\u003eJoin Discord Server↗️\u003c/a\u003e\u003c/h2\u003e\n\n\u003c!-- --------------------------------------------------------------------------------------------------------------------------------------------------------- --\u003e\n\n\u003ch2\u003e🧾License\u003c/h2\u003e\n\nThis project is licensed under the Apache License 2.0. See the [LICENSE](https://github.com/PratikMane0112/TelMedSphere/blob/master/LICENSE) file for more details.\n  \n```\n Copyright 2025 Pratik Mane\n\n Licensed under the Apache License, Version 2.0 (the \"License\");\n you may not use this file except in compliance with the License.\n You may obtain a copy of the License at\n\n     http://www.apache.org/licenses/LICENSE-2.0\n\n Unless required by applicable law or agreed to in writing, software\n distributed under the License is distributed on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n See the License for the specific language governing permissions and\n limitations under the License.\n```\n\n\u003ch3 align=\"center\"\u003e\n  \u003ca href=\"#top\"\u003e⬆️ Back to top\u003c/a\u003e\n\u003c/h3\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftelmedsphere%2Ffrontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftelmedsphere%2Ffrontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftelmedsphere%2Ffrontend/lists"}