A comprehensive healthcare management platform facilitating online medical consultations and appointment scheduling
ZenDoc is a modern healthcare management platform that bridges the gap between healthcare providers and patients through digital transformation. The platform makes healthcare more accessible through online consultations, streamlined appointment management, and comprehensive medical record keeping.
- 🏥 Multi-Role Dashboard System - Separate interfaces for patients, doctors, admins, and super admins
- 📅 Appointment Management - Complete scheduling, booking, and management system
- 👨⚕️ Doctor Profiles & Specialties - Comprehensive doctor information with specialty categorization
- 📹 Video Consultations - Integrated video calling functionality for remote consultations
- 💳 Health Plans - Various healthcare plan options with detailed comparison features
- 👥 User Management - Complete user lifecycle management with role-based access control
- 💰 Payment Integration - Secure payment processing for consultations and services
- 📋 Medical Records - Patient history and comprehensive medical record management
- 📊 Analytics Dashboard - Detailed insights and reporting for administrators
- Next.js 15.3.5 with App Router architecture
- React 19 with TypeScript for type safety
- Material-UI (MUI) v7 as the primary component library
- Redux Toolkit with RTK Query for efficient API calls
- React Hook Form with Zod validation for robust form handling
- Redux Persist for state persistence
- TypeScript for static type checking
- ESLint for code linting
- Husky for Git hooks
- Motion for smooth animations
- Agora React UIKit for video calling functionality
- Day.js for date manipulation
- JWT Decode for authentication
- Sonner for toast notifications
zendoc-frontend/
├── src/
│ ├── app/ # Next.js App Router pages
│ │ ├── (public)/ # Public pages (landing, auth)
│ │ ├── (dashboard)/ # Protected dashboard routes
│ │ └── (profile)/ # User profile management
│ ├── components/ # Reusable UI components
│ │ ├── Dashboard/ # Dashboard-specific components
│ │ ├── Forms/ # Form components (PH-prefixed)
│ │ ├── Shared/ # Common components
│ │ └── UI/ # Feature-specific UI components
│ ├── redux/ # State management
│ │ ├── features/ # Feature-based Redux slices
│ │ └── api/ # RTK Query API definitions
│ ├── types/ # TypeScript type definitions
│ ├── utils/ # Utility functions
│ ├── services/ # API services
│ └── assets/ # Static assets
├── public/ # Public static files
└── docs/ # Documentation
- Node.js (v18 or higher)
- pnpm (recommended) or npm
- Git
-
Clone the repository
git clone https://github.com/Zihad550/zendoc-frontend.git cd zendoc-frontend -
Install dependencies
pnpm install # or npm install -
Environment Configuration
Create a
.env.localfile in the root directory:# Backend API Configuration NEXT_PUBLIC_BACKEND_API_URL=http://localhost:8000/api/v1 # Video Call Configuration NEXT_PUBLIC_VIDEO_CALL_APP_ID=your_agora_app_id # Additional environment variables as needed
-
Run the development server
pnpm dev # or npm run dev -
Open your browser
Navigate to http://localhost:3000 to see the application.
| Script | Description |
|---|---|
pnpm dev |
Start development server with Turbopack |
pnpm build |
Build the application for production |
pnpm start |
Start the production server |
pnpm lint |
Run ESLint for code linting |
pnpm type:check |
Run TypeScript type checking |
pnpm test |
Run tests in watch mode |
pnpm test:run |
Run tests once |
pnpm test:coverage |
Run tests with coverage report |
- Book and manage appointments
- View medical history and records
- Access video consultations
- Manage personal profile and preferences
- View and select health plans
- Manage appointment schedules
- Conduct video consultations
- Update profile and specialties
- View patient information
- Manage availability and time slots
- Manage doctors and their profiles
- Oversee appointment scheduling
- Manage specialties and categories
- Monitor system activities
- Generate reports and analytics
- Complete user management system
- Advanced analytics and reporting
- System configuration and settings
- Bulk operations and data management
- Security and access control
# Build the application
pnpm build
# Start production server
pnpm startEnsure all required environment variables are set in your production environment:
NEXT_PUBLIC_BACKEND_API_URL- Backend API endpointNEXT_PUBLIC_VIDEO_CALL_APP_ID- Agora video call app ID
We welcome contributions to ZenDoc! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow the existing code style and conventions
- Use TypeScript for all new code
- Write tests for new features
- Use PH-prefixed components for custom form elements
- Follow the established project structure
- Ensure all tests pass before submitting PR
- TypeScript - Strict type checking required
- Component Naming - PascalCase for components, camelCase for utilities
- File Organization - Feature-based organization
- Form Components - Use PH prefix (PHForm, PHInput, PHModal)
- State Management - Redux Toolkit with feature-based slices
- Styling - Material-UI components with theme system
This project is licensed under the MIT License - see the LICENSE file for details.
- Live Demo: https://zendoc-frontend.vercel.app
- Documentation: docs/
- Issues: GitHub Issues
For support and questions:
- Email: jehadhossain008@gmail.com
- Documentation: Check the docs/ directory
- Issues: Create an issue on GitHub
Built with ❤️ by Jehad Hossain(Zihad550)
Making healthcare accessible through technology