lunardevs4/e-pharmacy-frontend
Domain:
healthcaredigital infrastructureRecord type:
software
Creator:
lun
Host:
Transforming medicine accessibility in Rwanda by connecting patients with pharmacies and providing a smarter way to find essential medications.
# ePharmacy Rwanda — Frontend
A multi-role digital pharmacy platform built for the Rwandan healthcare ecosystem. It connects patients, pharmacies, insurance providers, government regulators, and system administrators through a single, role-aware web application.
> **Current state:** The data layer is fully mock (localStorage-based) and structured to mirror the NestJS backend API. Switching to live API calls requires updating the service files to use the configured Axios client.
---
## Tech Stack
| Concern | Library |
|---|---|
| Framework | React 18 |
| Language | TypeScript 5.6 |
| Build | Vite 5 |
| Styling | Tailwind CSS 3.4 (custom `health.*` and `pharmacy.*` color tokens) |
| Routing | React Router DOM 6 |
| State management | Zustand 5 |
| Server state / caching | TanStack React Query 5 |
| Forms | React Hook Form 7 + Zod 4 |
| HTTP client | Axios 1.x |
| Charts | Chart.js 4 + react-chartjs-2 |
| Icons | Lucide React |
---
## Getting Started
### Prerequisites
- Node.js 18+
- npm or yarn
### Install
```bash
npm install
```
### Environment
Create a `.env` file at the project root:
```env
VITE_API_URL=api.epharmacy.gov.rw
```
If `VITE_API_URL` is not set, the Axios client defaults to `api.epharmacy.gov.rw`.
### Run
```bash
# Development server (hot reload)
npm run dev
# Production build
npm run build
# Preview production build locally
npm run preview
# Lint
npm run lint
```
---
## Project Structure
```
src/
├── api/ # Axios instance with auth + refresh token interceptors
├── assets/ # Static images
├── components/
│ ├── common/ # Shared brand components (LogoBrand)
│ ├── patient/ # Patient-specific components (MedicineCard, MedicineSearchBar, PrescriptionUploader, ConfirmationDialog, etc.)
│ └── ui/ # Generic UI primitives (Button, Card, Badge, Table, StatCard, AlertBadges)
├── config/
│ └── insurance-rates.ts # Coverage rate constants per ins …