Cancer Reports Management System
A secure, role-based medical portal for Khaled Al-Hassan Cancer Hospital — enabling staff to manage research reports, categories, and events with granular access control.
Year
2026
Role
Full-Stack Developer
Platform
Web
Status
In Progress
Stack
Technologies used
| Technology | Category | Purpose |
|---|
| Next.js | Framework | App Router with Server Components and Server Actions for full-stack SSR |
| TypeScript | Language | Type safety across the entire frontend and backend codebase |
| GSAP | UI/UX | Cinematic page transition animations and scroll-based effects |
| Prisma | Database | ORM for MongoDB with type-safe queries and schema migrations |
| MongoDB | Database | NoSQL database for all application data |
| jose | Auth | JWT signing, verification, and session management |
| crypto | Auth | scrypt-based password hashing with per-user salts |
| UploadThing | Cloud | Managed file upload service for images, PDFs, and Office documents |
| react-hook-form | Frontend | Performant form state management with minimal re-renders |
| Zod | Backend | Schema validation for all form inputs and API payloads |
| big-calendar | Frontend | Full calendar UI for event scheduling and display |
| date-fns | Tools | Date manipulation and formatting for events and timestamps |
| quill-new | Frontend | Rich text editor for report content authoring |
| Zustand | Frontend | Lightweight global state management (sidebar, UI toggles) |
| clsx | Tools | Conditional className composition utility |
| PostCSS | Tools | CSS processing pipeline for Tailwind |
| next-themes | UI/UX | System-aware dark/light mode switching |
What was built
Key features
Granular role-based access control with four permission tiers — Super Admin, Admin, CRUD, and View-only — scoped per report category.
Full report lifecycle management supporting draft and published states, with thumbnail uploads and multi-format file attachments (PDF, Word, Excel, PowerPoint).
Category-based report organization with main image support and safeguards preventing deletion of non-empty categories.
Interactive event calendar (react-big-calendar) for scheduling and tracking medical meetings, with duration validation and creator-level edit controls.
Real-time notification system that alerts admins on report changes and all users on new events, with an unread badge and 20-item notification feed.
Secure JWT authentication with scrypt password hashing, server-side session validation, and per-route authorization checks.
Fully Arabic (RTL) interface with dark mode support, GSAP page transitions, and responsive Tailwind CSS layouts.
More work
Related projects
M1720 – Shop Center
A production-grade multi-vendor e-commerce platform with real-time chat, AI-powered recommendations, Stripe payments, and a full microservices backend — all in one Nx monorepo.
Hirfa Barber — حِرفة
A cinematic, bilingual luxury barbershop website for a 15-year-old Bethlehem institution — built with animated page transitions, scroll-driven storytelling, and a full AR/EN experience.
Super Al-Balad
Bilingual Arabic/English grocery e-commerce platform with a full admin CMS, real-time order notifications, and RTL-first design — built for conversion and speed. Year: 2025