The Bahri MOC & PCR Platform is built on a modern web stack optimized for server-side rendering, real-time capabilities, and rapid UI development.
Core Framework
| Technology | Version | Purpose |
|---|
| Next.js | 15.0.5 | Full-stack React framework with App Router, API routes, server actions |
| React | 19.2.1 | UI component library |
| TypeScript | ~5.6 | Type-safe JavaScript (used alongside plain JavaScript in some files) |
Database
| Technology | Version | Purpose |
|---|
| MongoDB | — | Document database (hosted remotely) |
| Mongoose | 8.8.1 | MongoDB object modeling and schema validation |
Authentication
| Technology | Version | Purpose |
|---|
| jose | — | JWT creation and verification (used in middleware and session management) |
| bcrypt | — | Password hashing for user credentials |
UI & Styling
| Technology | Purpose |
|---|
| Tailwind CSS 3.4 | Utility-first CSS framework |
| shadcn/ui | Pre-built accessible component library built on Radix UI |
| Radix UI | Headless accessible UI primitives (Dialog, Popover, Select, Accordion, etc.) |
| Ant Design 5.22 | Additional UI components (used selectively) |
| Framer Motion | Animation library for page transitions and component animations |
| Lucide React | Icon library |
| Technology | Purpose |
|---|
| React Hook Form | Form state management |
| Zod | Schema validation (used in login and form validation) |
| @hookform/resolvers | Connects Zod schemas to React Hook Form |
| TanStack React Table 8 | Headless table library for archive views |
Rich Text
| Technology | Purpose |
|---|
| TipTap | Rich text editor (used in MOC description, PCR details, and year-end review sections) |
| react-markdown | Markdown rendering for notifications and display views |
| turndown | HTML to Markdown conversion |
| remark-gfm | GitHub Flavored Markdown support |
| rehype-raw | Raw HTML in markdown support |
File Storage
| Technology | Purpose |
|---|
| Cloudinary | Image and document storage |
| next-cloudinary | Cloudinary integration for Next.js |
| AWS S3 | Additional file storage (via custom Lambda endpoint) |
Email & Notifications
| Technology | Purpose |
|---|
| AWS Lambda | Email dispatch service (forwards to AWS SES) |
| Firebase 11.2 | Real-time notification capabilities |
State Management
| Technology | Purpose |
|---|
| Zustand 5 | Lightweight state management |
React built-in (useState, useEffect) | Primary state management pattern |
PDF & Export
| Technology | Purpose |
|---|
| @react-pdf/renderer | PDF document generation |
| react-to-print | Browser print functionality for MOC tracking cards |
Charts
| Technology | Purpose |
|---|
| Recharts | Charting library for the analytics dashboard |
Utilities
| Technology | Purpose |
|---|
| axios | HTTP client (used alongside native fetch) |
| date-fns | Date formatting and manipulation |
| uuid | Unique ID generation |
| sonner | Toast notification UI |
| react-hot-toast | Additional toast notifications |