CareXpert is a full-featured healthcare platform that connects patients with doctors through appointment booking, real-time chat, video consultations, prescription management, and more. This repository contains the frontend client built with React and TypeScript.
- Tech Stack
- Features
- Prerequisites
- Installation
- Environment Variables
- Running the Project
- Available Scripts
- Folder Structure
- Contributing
- License
| Category | Technology |
|---|---|
| Framework | React 18 + TypeScript |
| Build Tool | Vite 5 |
| Styling | Tailwind CSS 3 |
| UI Components | shadcn/ui (Radix UI + Tailwind) |
| Routing | React Router v6 |
| State Management | Zustand |
| Forms | React Hook Form + Zod |
| HTTP Client | Axios |
| Real-time | Socket.IO Client |
| Video Calls | VideoSDK |
| Charts | Recharts |
| Animations | Framer Motion |
| Icons | Lucide React |
| Package Manager | pnpm |
- Patient & Doctor Dashboards — Role-based views with relevant stats and actions
- Appointment Booking — Search doctors, view profiles, and book appointments
- Real-time Chat — Instant messaging between patients and doctors via Socket.IO
- Video Consultations — In-browser video calls powered by VideoSDK
- Prescription Management — View and manage prescriptions
- Notifications — Real-time notification system
- Report Uploads — Patients can upload medical reports
- Pharmacy — Browse pharmacy information
- Admin Panel — Administrative controls for platform management
- Dark / Light Theme — Toggle between themes with persistent preference
- Responsive Design — Mobile-friendly layout across all pages
Make sure the following are installed on your machine:
- Node.js — v18 or later → Download
- Package manager —
pnpm(recommended) ornpm
Use pnpm as the default for contributors (this project is primarily maintained with pnpm-lock.yaml).
npm is also supported, but avoid mixing package managers in the same branch/PR to prevent lockfile churn.
Install pnpm globally (if you choose pnpm):
npm install -g pnpm-
Clone the repository
git clone https://github.com/<your-org>/CareXpert_frontend.git cd CareXpert_frontend
-
Install dependencies
Option A — Recommended (
pnpm)pnpm install
Option B — Alternative (
npm)npm install
The app requires a few environment variables to connect to the backend API and socket server.
Create a .env file in the project root manually (next to package.json).
Then fill in the following values:
| Variable | Description | Example |
|---|---|---|
VITE_BASE_URL |
Base URL of the backend API server | http://localhost:5000 |
VITE_SOCKET_URL |
URL of the Socket.IO server | http://localhost:5000 |
.env
VITE_BASE_URL=http://localhost:5000
VITE_SOCKET_URL=http://localhost:5000Important: Never commit your
.envfile. It is (and should be) listed in.gitignore. If you need actual credentials for development, contact the project maintainers privately.
Start the development server:
pnpm devor
npm run devThe app will be available at http://localhost:5173 (default Vite port).
Build for production:
pnpm buildor
npm run buildPreview production build locally:
pnpm previewor
npm run preview| Purpose | pnpm command | npm command |
|---|---|---|
| Start dev server | pnpm dev |
npm run dev |
| Production build | pnpm build |
npm run build |
| Preview build | pnpm preview |
npm run preview |
| Lint code | pnpm lint |
npm run lint |
CareXpert_frontend/
├── public/ # Static assets served as-is
├── src/
│ ├── components/ # Reusable React components
│ │ ├── ui/ # shadcn/ui primitives (Button, Card, Dialog, etc.)
│ │ ├── navbar.tsx # Top navigation bar
│ │ ├── sidebar.tsx # Dashboard sidebar navigation
│ │ ├── footer.tsx # Site footer
│ │ ├── layout.tsx # Public page layout (navbar + footer)
│ │ ├── DashboardLayout.tsx # Authenticated layout (sidebar + content)
│ │ ├── ai-chat-box.tsx # AI-powered chat box component
│ │ ├── VideoCall.tsx # Video call component (VideoSDK)
│ │ ├── theme-provider.tsx # Theme context provider
│ │ └── theme-toggle.tsx # Dark/light mode toggle
│ ├── context/ # React context providers
│ │ ├── auth-context.tsx # Authentication context & provider
│ │ └── theme-context.tsx# Theme context & provider
│ ├── lib/ # Utility functions
│ │ └── utils.ts # Helper utilities (cn, etc.)
│ ├── pages/ # Page-level components (one per route)
│ │ ├── auth/ # Authentication pages (Login, Signup)
│ │ ├── HomePage.tsx # Landing page
│ │ ├── PatientDashboard.tsx # Patient dashboard
│ │ ├── DoctorDashboard.tsx # Doctor dashboard
│ │ ├── ChatPage.tsx # Real-time messaging
│ │ ├── DoctorsPage.tsx # Doctor listing & search
│ │ ├── BookAppointmentPage.tsx # Appointment booking
│ │ ├── AdminPage.tsx # Admin panel
│ │ └── ... # Other pages
│ ├── sockets/ # Socket.IO client setup & event handlers
│ │ └── socket.ts # Socket connection & messaging functions
│ ├── store/ # Zustand state stores
│ │ └── authstore.ts # Authentication store
│ ├── App.tsx # Root component (providers + router)
│ ├── routes.tsx # All route definitions
│ ├── main.tsx # Application entry point
│ ├── globals.css # Global styles & Tailwind directives
│ └── vite-env.d.ts # Vite/TypeScript env type declarations
├── styles/
│ └── globals.css # Additional global styles
├── components.json # shadcn/ui configuration
├── tailwind.config.ts # Tailwind CSS configuration
├── vite.config.ts # Vite configuration
├── tsconfig.json # TypeScript configuration
├── postcss.config.mjs # PostCSS configuration
├── package.json # Dependencies & scripts
└── pnpm-lock.yaml # Lockfile for reproducible installs
We welcome contributions! Please read our Contributing Guide and Code of Conduct before getting started.
Quick summary:
- Check for existing issues or create a new one
- Wait for a maintainer to assign the issue to you
- Fork the repo and create a feature branch from
main - Make your changes and test locally
- Submit a pull request with a clear description and your team number
For detailed rules and guidelines, see CONTRIBUTING.md.
This project is part of the GDG CHARUSAT Open Source Contri Sprintathon. Please refer to the repository for licensing details.