The React and TypeScript client for TebbiPlus, a medical appointment platform with dedicated experiences for patients, doctors, clinic administrators, and system administrators.
- Register, sign in, and maintain an authenticated session
- Browse specialties and filter doctors
- View doctor details and available appointment slots
- Book, review, and cancel appointments
- Maintain profile and medical information
- Complete and update a professional profile with image upload
- Configure specialties, fees, biography, and availability
- Review today's and upcoming appointments
- Update appointment statuses and view patient history
- View platform and clinic dashboard information
- Manage users and account status
- Manage specialties and doctor records
- Review appointments across the platform
- Role-protected routes and layouts
- Access-token injection and refresh-token request queue
- Centralized API endpoint adapters
- Redux Toolkit domain slices
- Lazy-loaded route pages
- Responsive Material UI components, data tables, forms, dialogs, and feedback states
- React 19
- TypeScript
- Vite 7
- React Router 7
- Redux Toolkit and React Redux
- Material UI and Emotion
- Axios
- Day.js
- Node.js 20+
- npm
- A running TebbiPlus API
git clone https://github.com/TabibPlus/Frontend.git
cd Frontend
npm installCreate .env.local and point the client at the backend's /api root:
VITE_API_BASE_URL=http://localhost:5000/apiWhen the variable is omitted, the client defaults to http://localhost:5000/api.
Start the development server:
npm run dev| Command | Description |
|---|---|
npm run dev |
Start the Vite development server |
npm run build |
Type-check and create a production bundle |
npm run lint |
Run ESLint |
npm run preview |
Preview the production build |
src/
├── app/ # Typed Redux hooks and store
├── components/common/ # Reusable cards, forms, tables, modals, and feedback
├── features/
│ ├── admin/ # Platform administration
│ ├── auth/ # Login, registration, route protection
│ ├── clinic/ # Clinic dashboard and doctor management
│ ├── doctor/ # Doctor profile and appointment workflows
│ ├── patient/ # Discovery, booking, appointments, profile
│ └── snackbar/ # Global feedback state
├── layouts/ # Role-specific navigation shells
├── models/ # API-facing TypeScript models
├── routes/ # Lazy-loaded route tree
├── services/api/ # Axios instances and endpoint functions
└── theme/ # Material UI theme
- Login or registration returns an access token, refresh token, and user.
- The client stores session data in local storage.
- Axios attaches the access token to API requests.
- A
401response triggers one refresh request while other failed requests wait in a queue. - Successful refresh retries the original requests; refresh failure clears the session and returns to login.
Role-aware route guards direct each account to its patient, doctor, clinic, or administrator workspace.
API calls are centralized in src/services/api/endpoints.ts. The client currently integrates these main groups:
/usersfor identity and session actions/doctorsfor profiles, specialties, discovery, and schedules/appointmentsfor booking and status management/patientsfor patient profile and history/adminfor users, specialties, appointments, and dashboard data
File uploads use a separate multipart Axios instance with the same authorization behavior.
npm run build
npm run previewConfigure VITE_API_BASE_URL in the deployment environment before building. Since this is a single-page application, configure the host to route unknown paths back to index.html.
No license file is currently included in this repository.