🌐 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. 🏛️

🌱 Agricultural Events Platform A modern, high-performance web application built with Next.js 15, designed to promote and manage agricultural events across regions. The platform emphasizes SEO, accessibility, and blazing-fast performance, serving both organizers and attendees with a seamless digital experience. ✨ Key Features & Technical Highlights 🚀 Advanced Rendering & Performance Leveraged Server-Side Rendering (SSR) for dynamic event pages, ensuring search engines receive fully rendered content for maximum SEO visibility. Implemented Incremental Static Regeneration (ISR) to pre-render static pages at build time and update them in the background — achieving the perfect balance between performance and freshness. Achieved near-perfect PageSpeed scores: Desktop: 100/100 | Mobile: 94+/100 (Lighthouse) FCP < 1.2s, LCP < 2.5s, CLS < 0.1 — exceeding Core Web Vitals standards. 🔍 Comprehensive SEO Optimization Built a dynamic sitemap (sitemap.ts) that auto-generates URLs for all events, including metadata like lastModified, images, and multi-language support. Implemented robots.txt, Open Graph tags, structured data (Schema.org), and dynamic meta tags for rich social sharing and enhanced search result snippets. Enabled PWA support via manifest.webmanifest for offline access and app-like experience. 🎨 Modern UI & Developer Experience Crafted a responsive, mobile-first interface using Tailwind CSS, Radix UI, and Vaul, with smooth animations via tw-animate-css. Built accessible forms with React Hook Form and Zod for robust, type-safe validation. Used Lucide React icons and Sonner for elegant toast notifications. ⚙️ Optimized Asset & Code Delivery Applied Next.js Image Optimization with WebP format and lazy loading to reduce bandwidth and improve LCP. Loaded custom fonts locally using next/font/local to eliminate layout shift and improve FCP. Enabled automatic code splitting and tree-shaking via Turbopack in dev and Webpack in prod for minimal bundle sizes. 🌐 Scalable Architecture Utilized Turborepo under the hood (via next dev --turbopack) for faster development builds and efficient monorepo-ready tooling. Structured the app with clean separation of concerns, reusable components, and scalable data-fetching patterns. Prepared for multi-language support with alternate URLs in sitemap and metadata. 💼 Skills Demonstrated Through this project, I showcased expertise in: Full-Stack Next.js Development (App Router, SSR, ISR) SEO-First Architecture (Sitemaps, Structured Data, Meta Tags) Performance Engineering (Core Web Vitals, Image & Font Optimization) Modern UI Libraries (Radix UI, Tailwind, Shadcn-style patterns) Type Safety & Validation (TypeScript, Zod, React Hook Form) Developer Tooling (Turbopack, ESLint, Prettier, Git) Accessibility (a11y) and Progressive Enhancement 🏁 Conclusion This project reflects my commitment to building fast, accessible, and SEO-optimized web applications using the latest web standards and modern React practices. It serves as a real-world example of how performance, design, and technical rigor can come together to create a powerful user experience.

🚗 Bazaar963 – Peer-to-Peer Vehicle Marketplace I built and maintained Bazaar963, a dynamic P2P marketplace where users can buy, sell, and discover vehicles and services across Syria — all in one seamless digital platform. 🌍💡 🌐 Multi-language from the start Fully localized in Arabic & English using next-intl, ensuring accessibility for a wide regional audience. 🔐 Secure & smooth authentication Integrated OAuth (Google, etc.) and credentials login with Next-Auth v5 (beta) and next-safe-action for safe, type-safe server operations. 📸 Rich media experience Enabled image uploads to Cloudinary with previews, optimizations, and responsive rendering — making listings more engaging and trustworthy. 🔍 Smart search & filtering Built powerful search and filter functionality using @tanstack/react-table and custom hooks, helping users find exactly what they need in seconds. 📱 Fully responsive, mobile-first UI Crafted with Next.js 15 and Tailwind CSS, the interface delivers lightning-fast performance and flawless usability across all devices — from phones to desktops. ✨ Polished user experience Notifications with sonner 🎉 Image galleries via yet-another-react-lightbox 🖼️ Smooth sliders using Embla Carousel 🎥 Dark/light mode toggle with next-themes 🌓 Accessible, customizable components from Radix UI ✅ 🧩 Modern tech stack & clean architecture Forms & Validation: React Hook Form + Zod for fast, type-safe inputs State Management: @tanstack/react-query for efficient data fetching and caching UI Utilities: clsx, class-variance-authority, tailwind-merge for scalable styling Developer Experience: TypeScript, ESLint, Prettier, and automated scripts for consistent, maintainable code 💼 What This Project Shows About My Skills 🚀 Full-Stack Next.js Mastery – From server actions to SSR/ISR, I leverage the full power of Next.js with Turbopack for rapid development. 🔐 Authentication Expertise – Secure, flexible auth flows using modern standards. 🎨 UI/UX Focus – Beautiful, accessible, and performant interfaces with attention to detail. 📊 Real-World Problem Solving – Built for actual user needs: discoverability, trust, and ease of use. ⚙️ Modern Tooling & Best Practices – Production-ready code with TypeScript, linting, and scalable component architecture. 🔗 Live at: www.bazaar963.com This project reflects my passion for building impactful, user-centered web applications using the latest in React and frontend engineering. 🚀

💸 Coponice – Deal Discovery & Redemption Platform I developed Coponice, a dynamic, user-centric platform designed to revolutionize how consumers discover and redeem deals. By connecting users with a vast network of verified merchants and exclusive offers, Coponice eliminates the hassle of coupon hunting and delivers real value at checkout. 🛒✨ 🌐 Live at: https://coponice.com 🚀 Key Features & My Role 🔹 Seamless User Experience Crafted a clean, intuitive interface using NextUI and Tailwind CSS, ensuring smooth navigation and a modern, responsive design across all devices — from mobile to desktop. 🎨📱 🔹 Advanced Search & Filtering Built powerful search functionality with dynamic filters, helping users quickly find the most relevant deals based on category, merchant, or discount type. 🔍 🔹 Personalized Discovery Designed the platform to support personalized recommendations, enhancing user engagement and retention through tailored content. 🎯 🔹 Exclusive Offers Hub Aggregated exclusive discounts not available elsewhere, turning Coponice into a go-to destination for smart shoppers. 💎 🔹 Blazing-Fast Performance Developed with Next.js for optimal speed, leveraging SSR and efficient routing to ensure fast load times and a reliable user experience. ⚡ 🔹 SEO & Social Optimization Implemented custom meta tags and dynamically generated Open Graph images for every deal page, significantly boosting: 🔎 Search engine visibility (better rankings) 📲 Social media click-through rates (rich previews on WhatsApp, Facebook, etc.) This means every shared link looks professional and attractive — no more broken or generic thumbnails! 🖼️✅ 💼 Skills Demonstrated ⚛️ Modern Frontend Development Used Next.js, React, and NextUI to build a scalable, high-performance application. 🎨 UI/UX Design & Styling Leveraged Tailwind CSS for rapid, consistent, and responsive UI development. 🔍 SEO & Growth Engineering Mastered on-page SEO, meta tag management, and dynamic OG image generation to drive organic traffic and social sharing. ⚡ Performance Optimization Focused on fast FCP, LCP, and interactivity through Next.js optimizations. 🧠 Full-Stack Thinking Structured the app for future expansion with merchant dashboards, user accounts, and analytics. _______________________ 🏁 Conclusion Coponice is more than just a deals site — it’s a growth-focused, SEO-optimized web application that bridges consumers and businesses. This project showcases my ability to build user-first platforms with strong technical foundations, where design, performance, and marketing (SEO/social) work hand-in-hand. Perfectly blending engineering precision with real-world usability — that’s what I bring to every project. 💼🚀

🎛️ Coponice Dashboard – Admin Platform for Deal Management I developed the Coponice Dashboard, a powerful administrative interface that empowers administrators to manage the entire Coponice ecosystem — a platform connecting users with verified merchants and exclusive deals. 🔐 Secure. Intuitive. Scalable. 🚀 Key Features & My Role 🔹 Offers Management Built a full-featured system to create, edit, and delete coupons, set expiration dates, and manage deal visibility — all through a clean, user-friendly interface. 🔹 System & SEO Settings Enabled admins to configure website settings and optimize SEO metadata, improving search visibility and platform control. 🔹 Modern UI with MUI Designed a sleek, responsive admin panel using React and Material UI (MUI), ensuring a consistent, accessible, and professional user experience across devices. 🖥️📱 🔹 Drag & Drop Functionality Integrated dnd-kit to support intuitive content reordering (e.g., featured deals), enhancing admin workflow efficiency. ✅ 🔹 Robust Form Handling & Validation Used Formik and Yup to streamline form logic and enforce strict validation rules, ensuring data accuracy and reducing input errors. 🔹 Predictable State Management Leveraged Redux Toolkit for centralized, maintainable state management — making complex data flows (offers, settings, user actions) reliable and debuggable. 🔹 High-Performance Development Built with Vite for blazing-fast local development, HMR (Hot Module Replacement), and optimized production builds. 💼 Technical Stack Core: React JS, TypeScript, Vite UI: Material UI (MUI), dnd-kit State: Redux Toolkit Forms & Validation: Formik, Yup API Integration: RESTful APIs for real-time data sync Architecture: Component-driven, modular, scalable 💡 Skills Demonstrated ⚛️ Full-Stack Frontend Development Built a production-ready admin interface from the ground up using modern React practices. 🧠 State & Data Management Mastered Redux Toolkit for complex state logic and Formik/Yup for robust form validation. 🎨 Admin UX Design Created an intuitive, efficient dashboard focused on usability and admin productivity. 🔐 Type Safety & Scalability Used TypeScript to ensure code reliability, maintainability, and fewer runtime errors. ⚡ Performance & DX Optimization Leveraged Vite for rapid development and faster feedback loops. _______________________ 🏁 Conclusion The Coponice Dashboard is more than a backend panel — it’s the operational heart of the platform. This project showcases my ability to build secure, scalable, and user-centric admin systems using modern tools like Redux, MUI, and Vite, while maintaining clean architecture and a focus on real-world usability. From data integrity to drag-and-drop UX, I combined technical depth with design thinking to deliver a powerful tool that drives the entire Coponice experience. 💼✨

Saleh Cars Group is a car dealership that provides a variety of services to its customers. They are an authorized distributor for many car brands, and they offer extended warranties and on-road service. They also have a variety of financing options available. ___________ Skills: - Proficient in building scalable and secure authentication systems using NextAuth.js integrated with Firebase. Skilled in leveraging Firebase's real-time database and cloud functions for robust backend development. - "I've leveraged next-intl to create fully localized Next.js applications, supporting Arabic and English. My experience includes handling complex language features such as pluralization, date and number formatting, and right-to-left text direction for Arabic." - Form Handling: React Hook Form streamlines form creation and validation, enhancing user experience and data accuracy. - Data Validation: Zod ensures data integrity through robust validation rules, preventing errors and improving data quality. - I've successfully integrated yet-another-react-lightbox into my Next.js project to create a dynamic and interactive image gallery. Key features include lazy loading, touch support, and seamless integration with Next.js's image optimization capabilities. - I have integrated jsPDF with other libraries to create interactive, multi-page PDF documents.

Edvise ME is a 100% women-owned small business dedicated to supporting organizations working to reform education and empower youth. We provide tailored services, drawing upon the expertise of our extensive network and a deep understanding of our clients' unique needs _______________________ Scalability and Maintainability: - Next.js: Leveraged Next.js's server-side rendering (SSR) capabilities for improved performance, SEO, and a better user experience. This approach also enhances scalability by allowing for efficient content delivery and improved load times. - Data Fetching Strategies: Implemented efficient data fetching strategies, such as data fetching methods within Next.js components, to optimize performance and reduce loading times, ensuring the application can handle increased traffic. - Shadcn UI: For building accessible and customizable UI components, such as buttons, dialogs, and dropdowns. - React Hook Form: For efficient form handling and validation, improving user interaction and data integrity. - Zod: For robust data validation and type safety, ensuring data consistency and preventing errors. - Next-Intl: For seamless internationalization and localization, allowing the application to be easily adapted for different regions and languages.

This project is a full-featured To-Do Website developed using a modern tech stack Key Features: Task Management: Create, edit, delete, and mark tasks as complete. Authentication: User login and registration using Clerk. Data Validation: Ensure data accuracy using Zod. Attractive UI: Design a simple and stylish UI using Shadcn UI and Tailwind CSS. TypeScript Usage: Enhance readability and maintainability using TypeScript. Powerful Database Management: Utilize Prisma to create an API for interacting with a MongoDB database. Benefits: User-Friendly: Simple and intuitive UI makes it easy to create and manage tasks. Secure: Leverage Clerk for secure user authentication. Scalable: Flexible design allows for easy addition of new features in the future. Robust: Employ TypeScript and Prisma to ensure a strong and secure Website.

This project is a Netflix-like website built using a modern tech stack ______________ Key Features: 1. User Authentication: Allows users to sign in securely using Google, GitHub, or email with NextAuth. 2. Movie Browsing: Provides a user-friendly interface to browse through a collection of movies. 3. Movie Details: Displays detailed information about a selected movie, including trailers, cast, and user reviews. 4. Favorites: Enables users to save movies to their favorites list for quick access. 5. Watchlist: Allows users to add movies to their watchlist to keep track of what they want to watch later. 6. User Management: Provides a dedicated section for users to update their account information and manage their favorites and watchlists. ___________ Benefits: 1. Rich User Experience: Offers an engaging and intuitive UI for seamless movie exploration and management. 2. Secure Authentication: Leverages NextAuth to ensure secure user authentication and authorization. 3. Scalable and Maintainable: Employs a well-structured codebase with modern technologies, facilitating future growth and maintainability. 4. Customizable Design: Utilizes Shadcn UI and Tailwind CSS to create a tailored and visually appealing UI that matches the project's branding. 5. Robust Backend: Implements Prisma and Supabase for a powerful and reliable backend infrastructure.

'Coponice' is a site that offers discounts on various products and services. Users can search for coupons and special offers from different stores and use them to get discounts when buying online. The site aims to provide opportunities for consumers to save money and get good deals when shopping online. ______________________ Robust Functionality: 1. Search and filter coupons: Quickly find specific deals based on user preferences. 2. Seamless form handling: Formik simplifies the creation of reliable forms for user interactions. 3. Data validation: Yup enforces data integrity through robust validation rules. 4. Enhanced User Experience: Modern and user-friendly interface: Material UI components ensure a clean and intuitive browsing experience. _________________________________ Scalability and Maintainability: 1. Redux for state management: Predictable data flow and centralized state facilitate future application growth. 2. Reusable components: Built-in React and Material UI components promote code reusability. 3. It is easy to use and manage website through "a control panel". 4. Optimizing web pages for maximum speed and scalability. 5. Improved work mechanisms to stay up to date with latest technologies 5. Authentication, Authorization and protected pages.

It is an e-commerce website that allows users to purchase products online. These platforms provide a convenient and easy shopping experience for users, where they can easily and quickly search for the products and services they need, and buy them with just one click. 1. an e-commerce website for selling many categories using React JS and Redux 2. Contain a home page where the products show and it has a filter to filter the products 3. Contain a cart section where the choosing product will add to the cart with full configuration control. 4. It is easy to use and manage website through a control panel. 5. Build reusable code and libraries for future use.

I have designed a training website to enhance my professional experience in the field of interface design. Through the process, I've gained valuable insights into the intricacies of user-centered design, honed my ability to create intuitive and aesthetically pleasing interfaces, and developed a keen understanding of the importance of crafting seamless user experiences. This project has been a journey of self-discovery and growth, allowing me to explore my creative potential and refine my skills as an interface designer.

I have designed a training website to enhance my professional experience in the field of interface design. Through the process, I've gained valuable insights into the intricacies of user-centered design, honed my ability to create intuitive and aesthetically pleasing interfaces, and developed a keen understanding of the importance of crafting seamless user experiences. This project has been a journey of self-discovery and growth, allowing me to explore my creative potential and refine my skills as an interface designer.

This project showcases a full-fledged e-commerce website for selling fonts, catering to designers, artists, and businesses. Built with web development tools, it offers a user-friendly experience for browsing, searching, and purchasing unique and attractive fonts. ______________ Key Features: 1. Font Browsing: Users can explore a curated collection of fonts, with filters and categories for easy search. 2. Advanced Font Search: A powerful search functionality allows users to find specific fonts based on style, keywords, or properties. 3. Font Preview: Users can preview fonts before purchasing to visualize their appearance in different contexts. 4. Dark & Light Mode: Provides users with a choice between a light or dark theme for a personalized browsing experience. (Demonstrates UI/UX design flexibility) ___________ My Skills: This project demonstrates my proficiency in: 1. Front-End Development: Building interactive and user-friendly interfaces using React JS and Tailwind CSS. 2. State Management: Utilizing Redux to manage complex application state and data flow effectively. 3. API Integration: Implementing APIs for efficient communication with external data sources. 4. Responsive Design: Creating a website that adapts seamlessly to different screen sizes and devices.

This project showcases a real estate website I designed and developed for my graduation project, achieving a high grade of 93%. It utilizes a combination of web development technologies to deliver a user-friendly and interactive experience. ____________________ Project Highlights: Interactive Map Search: Users can search for properties directly on a map, refining their search based on location and other preferences. User-Friendly Interface: A clean and modern design facilitates easy navigation and property exploration. Advanced Search Filters: Users can filter properties based on various criteria, such as price range, property type, and amenities. Informative Property Listings: Detailed property listings showcase key information and captivating visuals. Data Visualization: Charts (powered by Chart.js) can be used to display insightful data trends related to the real estate market. ___________ My Skills: This project demonstrates my capabilities in: Front-End Development: Building user interfaces using HTML5, CSS3, and JavaScript. Responsive Design: Creating websites that adapt seamlessly to various devices. Interactive Features: Implementing dynamic functionalities like map searches and filters. User Experience Design: Prioritizing usability and creating an intuitive browsing experience. Integration with Third-Party APIs: Utilizing Google Maps.