🌍 Relief Platform – Humanitarian Project Management System I developed Relief Platform, a comprehensive web application designed to streamline the management of humanitarian relief efforts — connecting organizations, projects, reports, and field teams through a unified, secure, and scalable digital interface. Built with Next.js 15, React 19, and Turbopack, this platform empowers NGOs and aid coordinators to track projects, manage users, visualize data on interactive maps, and generate real-time reports — all within a bilingual (Arabic/English), RTL-ready, and role-based access-controlled environment. 🫂 Designed for real-world impact — where every feature supports faster response, better coordination, and transparent accountability. 🚀 Key Features & My Role 🔹 Bilingual & RTL Support Implemented full Arabic (RTL) + English (LTR) localization using next-intl, ensuring accessibility for regional teams. Every layout adapts seamlessly to right-to-left reading patterns — critical for usability in Arabic-speaking regions. 🔹 Role-Based Access Control (RBAC) Designed a granular permissions system allowing admins, managers, and field officers to see only what they need. Used custom hooks like usePermissions() and useRole() to gate UI elements and API access securely. 🔹 Interactive Geolocation Maps Integrated Leaflet and React Leaflet to display project locations, relief zones, and organization coverage areas on dynamic, zoomable maps — helping decision-makers visualize impact geographically. 🔹 Project & Organization Management Built full CRUD systems for: Relief projects (status, budget, timeline) Partner organizations User invitations & roles All backed by type-safe APIs and form validation via Zod + React Hook Form. 🔹 Dashboard Analytics & Reporting Created a powerful analytics dashboard using Recharts to visualize KPIs like: Projects completed Budget utilization Regional coverage With real-time updates powered by TanStack Query. 🔹 File Uploads & Document Management Enabled drag-and-drop file uploads using react-dropzone, allowing users to attach reports, images, and documents directly to projects and user profiles. 🔹 Drag-and-Drop Interfaces Used @dnd-kit to build intuitive interfaces for sorting project lists, organizing sectors, and managing team assignments — improving workflow efficiency. 🔹 Type-Safe Data Flow Architected a clean, maintainable API layer: Services organized by domain (auth, projects, reports) Axios instances with interceptors Full TypeScript types and Zod schemas Server Actions secured via next-safe-action 🔹 High-Performance Architecture Leveraged Next.js App Router with Server Components and Turbopack for: Fast builds ⚡ Reduced client bundle size Optimized SSR/CSR balance SEO-friendly static generation 🔹 Toast Notifications & UX Polish Enhanced user feedback with Sonner for success/error messages, and used Radix UI primitives for accessible dialogs, dropdowns, and alerts. 💼 Skills Demonstrated Modern Frontend Engineering ⚛️ Built with Next.js 15 + React 19, leveraging Turbopack, Server Components, and Server Actions for peak performance and DX. UI/UX with Accessibility First ♿ Used Radix UI for fully accessible, keyboard-navigable components and ensured RTL support across layouts. State & Data Management 🔁 Combined TanStack Query for server-state sync and Zustand for lightweight client state — minimizing complexity while maximizing responsiveness. Form Handling & Validation ✅ Integrated React Hook Form + Zod for performant, type-safe forms with instant feedback and error recovery. Authentication & Security 🔐 Implemented secure login and session management with NextAuth.js, including role-based redirection and protected routes. Internationalization (i18n) 🌐 Full next-intl integration with namespace-based JSON files (messages/ar.json, dashboard/en.json) for scalable translation management. Developer Experience & Tooling 🛠️ Enforced code quality with ESLint, Prettier, Husky, and Commitlint. Used pnpm workspaces for future monorepo scalability. Architecture & Scalability 🏗️ Clean separation: api/services, components/ui, schemas, hooks — ready for enterprise growth and team collaboration. 🏁 Conclusion The Relief Platform is more than a dashboard — it’s a mission-critical tool built to support humanitarian work with precision, security, and empathy. This project showcases my ability to build complex, real-world applications that blend cutting-edge technology with deep human needs — from interactive maps to secure RBAC, real-time dashboards to seamless bilingual UX. Every line of code was written with clarity, maintainability, and impact in mind — because when lives depend on software, excellence isn’t optional. 💼❤️