🌐 Reef Damascus – Official Website for Rural Damascus Governorate A modern, accessible, and government-compliant web platform developed for Reef Damascus, the administrative body overseeing rural areas surrounding Damascus under the Ministry of Local Administration and Environment. 🏛️🌱 🌐🔗 Live Site: https://www.reefdamascus.com 📌 Project Overview: I led the full development of this responsive website to improve public access to municipal services and regional information. The platform showcases key areas such as Douma, Yabroud, Zabadani, and Al-Tall, using an interactive Syrian map UI and structured content layout. A core feature is the citizen complaint submission system 📝, enabling residents to report local issues (e.g., infrastructure damage, service gaps), with an internal admin dashboard for employees to manage, track, and resolve requests efficiently. Designed with mobile-first principles 📱, the site ensures usability across devices and serves a diverse Arabic-speaking audience with clean navigation and accessibility in mind. ⚙️ Technical Stack & Architecture: Built with a scalable Turborepo monorepo architecture, this project demonstrates advanced full-stack and frontend engineering practices: 📁 Monorepo Management: Used Turborepo to organize shared logic, enforce consistent tooling (ESLint 🛠️, Prettier ✨, TypeScript 🔤), and enable high-performance development via turbo dev and turbo build. ⚡ ⚛️ Frontend Framework: Powered by Next.js 15 with Turbopack (--turbopack) for ultra-fast local development and optimized production builds. 🚀 🧩 Shared Codebase: Created a reusable @workspace/shared package containing: UI components (Radix UI primitives, custom tables, dialogs) 🧱 Utility functions, Zod validation schemas 🔐, React hooks 🎣 Tailwind CSS configurations and global styles 🎨 🎨 Modern UI Toolkit: Radix UI for accessible, headless components (Dialogs, Dropdowns, Accordions) ✅ Tailwind CSS + tw-animate-css for utility-first styling and smooth animations 🌀 Lucide React icons 🖼️, Sonner for notifications 🔔, Vaul for mobile-friendly drawers 📦 📋 Form & Validation: Integrated React Hook Form with Zod resolvers for type-safe, performant forms — used in complaint submissions and admin workflows. ✔️ 🔐 Authentication & Security: Implemented secure user sessions using Next-Auth v5 (beta) and next-safe-action for safe server actions. 🛡️ 💻 Developer Experience: Centralized configs via @workspace/eslint-config and @workspace/typescript-config 🧰 Automated linting, formatting, and type checking across all workspaces 🔄 Custom generators (e.g., turbo gen react-component) for rapid component scaffolding 🔨 💼 Skills Demonstrated: This project reflects my expertise in: 🌐 Scalable Monorepo Architecture (Turborepo, PNPM workspaces) ⚛️ Enterprise-Grade Next.js Development (App Router, Server Components, Actions) 🎯 UI/UX for Public Services (Accessibility, RTL support, responsive design) 📦 State Management & Form Handling (React Hook Form, Zod, Server Actions) 🧱 Component Reusability & Design Systems (Shared libraries, Radix UI) ⚡ Performance & DX Optimization (Turbopack, Fast Refresh, Code Splitting) 🏁 Conclusion: The Reef Damascus website is more than a digital presence — it’s a step toward transparent, efficient governance through technology 🤝. By combining modern tooling like Turborepo 🔧 and Next.js 15 🚀 with real-world civic needs, I demonstrated how clean code 💼, thoughtful design 🎨, and scalable architecture 🏗️ can empower public institutions. 🏛️