My Projects

• 

  Green Syria Dashboard

  Plant Stores, Volunteer and Works Management Dashboard

  • A comprehensive web-based dashboard designed to facilitate the management of environmental and volunteer related activities across various plant stores and institutions.
  • This platform empowers admins and assistant admins to efficiently oversee content, volunteers, tree assignments, and institutional collaborations while ensuring an intuitive and secure user experience.
  • The dashboard features a clean, responsive interface and role-based access control, allowing only designated users to perform sensitive actions such as editing data or viewing analytics.
  • It streamlines workflows and promotes environmental initiatives through structured management tools.

  ✨ Key Features:

  • Role-Based Access Control: Admins have full control, including access to system statistics, assistant admin management, and institution handling, while assistant admins can manage content and volunteers.
  • Content Management: Easily add, edit, or delete articles, article categories, volunteers, plant stores, and trees.
  • Tree Assignment: Assign trees to volunteers and track their contributions.
  • Request Management: View and process join requests from new users.
  • Institutional Management: Admins can add and update institutions and track associated activities.
  • Statistics Dashboard: Admin-only access to key insights and visual data for strategic decision-making.
  • Responsive Design: Optimized for desktop and mobile screens to ensure accessibility from any device.

  🛠 Tech Stack:

  • React.js: Powers the dynamic and interactive front-end interface.
  • Tailwind CSS: Enables rapid UI development with utility-first responsive design.
  • Zustand: Lightweight state management for improved scalability and performance.
  • Axios: Simplifies API requests and data fetching.
  • React Hook Form: Provides performant and accessible form handling.
  • React Router DOM: Handles smooth, single-page application routing.
  • React Icons: Enhances user experience with visually intuitive iconography.

  • Built-in React Hooks:

    useRef: For DOM access and form management.

    useState, useEffect, useMemo, useCallback: Manage lifecycle, state, and performance optimization.

  Challenges:

  • Ensuring seamless role-based access and permissions without compromising security or usability.
  • Maintaining smooth and error-free CRUD operations across a wide range of data types and user interactions.
  • Creating a responsive and visually consistent UI using Tailwind while preserving accessibility and multilingual readiness.

  Note:

  Send me a Message if you want to test the project, I will send you password and a valid email for that

• 

  Green Syria App

  Green Syria Mobile App

  • Green Syria is a role-based mobile application designed to foster environmental impact through a collaborative ecosystem involving users, volunteers, and plant stores. Built with React Native, the app streamlines the process of identifying areas in need of trees, assigning volunteers, and managing planting activities—empowering communities to actively contribute to urban greening.
  • The platform supports seamless interaction between different roles, ensuring transparency, accountability, and engagement throughout the tree planting lifecycle.

  ✨ Key Features:

  • Multi-Role System

  • User (No Login Required):

    Can submit requests for tree planting by uploading images of locations that need trees (e.g., streets, sidewalks).

    Can browse categories of articles, read environmental articles, and view statistics about trees planted, submitted works, volunteers, and plant stores.

    Can submit join requests to become a volunteer or plant store.

    Access static informational pages: About, Policy, and Terms of Use.

  • Volunteer (Login Required):

    View the tree list and assign trees to themselves.

    View assigned trees, update their status to “done“, or choose to accept or reject trees assigned by plant stores.

    Access their profile, performance rating, and full history of actions and completed tasks.

  • Plant Store (Login Required):

    Add new trees to the waiting list or assign them directly to a volunteer.

    Manage and track all added trees, including ones specifically linked to their store.

    Access a profile page with their rating and a detailed log of all past activity.

  🛠 Tech Stack:

  • React Native (Expo): Cross-platform app development for iOS and Android with native performance.
  • Expo Router: Simplifies and scales navigation structure.
  • Zustand: Lightweight, scalable state management for fast performance.
  • Axios: Handles API requests securely and efficiently.
  • NativeWind (Tailwind for React Native): Enables clean, responsive UI design with utility-first styling.
  • React Native Appwrite: Manages authentication, databases, and role-based access control.
  • Expo Image Picker: Allows users to upload images with ease.
  • Core React Hooks: useState, useEffect, useMemo, useCallback, and useRef for optimal control, performance, and UI logic.

  Core Workflows & Functionality:

  • 🌱 User Flow: Submit tree work requests → Upload location images → View articles and platform stats.
  • 🤝 Volunteer Flow: Browse tree opportunities → Assign tree → Accept/reject → Mark as done → Track progress.
  • 🏪 Plant Store Flow: Add/assign trees → Monitor status → Track actions → Engage with volunteers.

  Challenges:

  • Implementing multi-role login and access control while keeping the UI clean and intuitive.
  • Building a real-time tree assignment system that allows both manual and self-assignment.
  • Managing image uploads, status tracking, and action history per role.
  • Supporting guest users with meaningful engagement while incentivizing registration.

  Note:

  you can test the app and the dashboard just send me a message to send you a valid email and password for that

• 

  Rasheed Dashboard

  Organizations Management System

  • A powerful web-based platform designed to streamline the oversight and coordination of organizations and their projects.
  • This system enables centralized administration while also empowering each organization with the tools needed to manage their own initiatives, address user feedback, and evaluate public engagement through surveys and suggestions.
  • With an intuitive interface, role-based access, and real-time updates, the platform supports transparent project tracking and fosters collaborative development between organizations and communities.

  ✨ Key Features:

  • Role-Based Access:

    Admin: Full control to manage all organizations and their projects, as well as view overall system statistics.

    Organizations: Access to manage their own projects, view user-submitted feedback, and analyze survey results.

  • Organization & Project Management:

    Admins and organization accounts can add, edit, and delete organizations or projects.

    View detailed information about each project and organization in an organized layout.

  • Feedback & Community Engagement: Organizations can view user-submitted problems, suggestions, and surveys specific to their projects, supporting responsive and people-centered development.
  • Statistics Dashboard: Admins have access to visual insights and key metrics across all organizations and projects for informed decision-making.
  • Responsive Interface: Seamlessly accessible across desktops, tablets, and mobile devices.

  🛠 Tech Stack:

  • React.js: Powers the dynamic and interactive front-end interface.
  • Tailwind CSS: Enables rapid UI development with utility-first responsive design.
  • Zustand: Lightweight state management for improved scalability and performance.
  • Axios: Simplifies API requests and data fetching.
  • React Hook Form: Provides performant and accessible form handling.
  • React Router DOM: Handles smooth, single-page application routing.
  • React Icons: Enhances user experience with visually intuitive iconography.

  • Built-in React Hooks:

    useRef: For DOM access and form management.

    useState, useEffect, useMemo, useCallback: Manage lifecycle, state, and performance optimization.

  Challenges:

  • Implementing secure, scalable role-based access that distinguishes admin and organization capabilities without complexity.
  • Managing a dynamic flow of community feedback (problems, suggestions, and surveys) per project while maintaining clarity and organization.
  • Ensuring high usability and accessibility across multiple roles and platforms.

  Note:

  Send me a Message if you want to test the project, I will send you password and a valid email for that

• 

  Rasheed App

  Rasheed Mobile App

  • Rasheed is a user-centric mobile application built with React Native, designed to enhance transparency and community engagement between the public and various organizations.
  • The app empowers users to actively participate in the development and improvement of public and private sector projects by submitting surveys, suggestions, and reports on encountered issues.
  • Through a clean interface and streamlined interactions, Rasheed Connect bridges the gap between users and organizations, fostering accountability and collaborative growth.

  ✨ Key Features:

  • 🏛 Explore Organizations & Projects

    View a comprehensive list of registered organizations and their active projects.

    Access project details, status, and purpose to stay informed.

  • 🗳 User Interaction & Feedback

    Submit Surveys: Provide structured feedback for each project to support decision-making.

    Send Suggestions: Share ideas or improvements related to any organization or project.

    Report Problems: Alert organizations to issues with specific projects or operations, promoting real-time responsiveness.

  • 📚 Informational Access

    View the About section to understand the app's mission and goals.

    Browse Policy and Terms of Use pages for transparency and user trust.

  🛠 Tech Stack:

  • React Native (Expo): Delivers a seamless and responsive user experience across mobile platforms.
  • Expo Router: Ensures scalable and intuitive navigation.
  • Zustand: Manages app state with simplicity and efficiency.
  • Axios: Enables fast, secure communication with the backend.
  • NativeWind: Powers modern and consistent UI styling.
  • Appwrite (React Native): Handles user roles and secure data storage.
  • React Hooks: useState, useEffect, useMemo, useRef, and useCallback used for optimal state and logic management.

  Workflow Overview:

  • 🔍 Browse organizations and projects.
  • 📝 Submit surveys, suggestions, or problem reports.
  • 📄 Read platform policies and app information.

  Impact & Purpose:

  • Encourages civic participation by giving users a voice in local and national projects.
  • Provides organizations with valuable community insight through real-time feedback.
  • Supports accountability and continuous improvement in project management and service delivery.

  Note:

  you can test the app and the dashboard just send me a message to send you a valid email and password for that

• 

  Falfilgy

  Restaurant Web App

  • A restaurant web app for a falafel and snacks shop, featuring a digital menu with bilingual support (Arabic/English) and a smooth browsing experience across all devices.
  • The platform offers bilingual support Arabic and English and integrates electronic payment systems to provide users with a seamless and efficient booking experience.
  • Users can easily search for available bus routes, select their preferred travel times, and secure their tickets online.

  ✨ Key Features:

  • Real-Time Availability: Users can view real-time Restaurant Meals Menu.
  • Responsive Design: Optimized for various screen sizes and devices for easy access from anywhere.
  • 🛠 Tech Stack: Built with React.js, ensuring fast rendering, smooth performance.

  🛠 Tech Stack:

  • React.js: Provides a fast, dynamic user interface.
  • react-router-dom: Manages seamless navigation between pages.
  • useState: Manage application lifecycle and performance optimizations.
• 

  Al-Mahaba

  Restaurant Web App

  • A restaurant web app for a traditional Syrian cuisine restaurant, showcasing authentic dishes including classic heritage meals, with a clean bilingual menu interface..
  • The platform offers bilingual support Arabic and English and integrates electronic payment systems to provide users with a seamless and efficient booking experience.
  • Users can easily search for available bus routes, select their preferred travel times, and secure their tickets online.

  ✨ Key Features:

  • Real-Time Availability: Users can view real-time Restaurant Meals Menu.
  • Responsive Design: Optimized for various screen sizes and devices for easy access from anywhere.
  • 🛠 Tech Stack: Built with React.js, ensuring fast rendering, smooth performance.

  🛠 Tech Stack:

  • React.js: Provides a fast, dynamic user interface.
  • react-router-dom: Manages seamless navigation between pages.
  • useState: Manage application lifecycle and performance optimizations.
• 

  Ghalia Khlefawy Portfolio

  A Personal Portfolio

  • modern, responsive portfolio and agency web template crafted to showcase personal brand, projects, services, and professional strengths in a clean and visually compelling way.
  • This website template is designed with a focus on simplicity and aesthetic appeal, enabling developers, designers, and freelancers to present their work effectively.
  • The layout highlights key sections such as featured projects, technologies used, skill sets, and contact information to provide visitors with a complete overview of your professional profile.
  • Built with modern web standards, this template ensures compatibility across different devices and screen sizes, making your portfolio accessible and engaging on mobile, tablet, and desktop.
  • Its structure emphasizes readability, intuitive navigation, and polished design elements that help create a strong first impression for potential clients or employers.

  ✨ Key Features:

  • Responsive Layout: Fully optimized for seamless viewing on all screen sizes and devices.
  • Project Showcase: Beautifully arranged sections to highlight featured work and case studies.
  • Service Presentation: Clean content blocks to display skills, services, or offerings.
  • Modern UI/UX: Elegant design with attention to whitespace, typography, and visual hierarchy.
  • Smooth Navigation: Easy scrolling and section transitions for enhanced user experience.
  • SEO-Friendly Structure: Semantic HTML layout prepared for search engine visibility.

  🛠 Tech Stack:

  • React.js: Component-based architecture for building fast, scalable, and interactive user interfaces
  • Vite: Modern build tool providing ultra-fast development server and optimized production builds
  • JavaScript ES6+: Clean and maintainable code with modern syntax
  • HTML5 & CSS3: Semantic structure and responsive styling
  • Responsive Design: Optimized layouts for desktop, tablet, and mobile devices
  • GitHub Pages: Deployed and hosted for easy access and live preview
  • Modern UI/UX Practices: Focus on clarity, readability, and smooth user experience

  🎯 Ideal For:

  • Personal portfolios for developers, designers, and freelancers.
  • Agency landing pages with project highlights and service offerings
  • Creative CV websites to impress recruiters and clients.
• 

  WAYGO

  Bus Booking Web App

  • An advanced intercity bus booking platform — an evolved version of XTRAVEL — with enhanced UI, improved booking flow, and bilingual support for Arabic and English users.
  • The platform offers bilingual support Arabic and English and integrates electronic payment systems to provide users with a seamless and efficient booking experience.
  • Users can easily search for available bus routes, select their preferred travel times, and secure their tickets online.

  ✨ Key Features:

  • Bilingual Support: Full support for Arabic and English languages to accommodate a diverse user base.
  • Secure Payments: Integrated electronic payment gateway for quick and secure transactions.
  • Real-Time Availability: Users can view real-time bus schedules and seat availability.
  • Responsive Design: Optimized for various screen sizes and devices for easy access from anywhere.
  • 🛠 Tech Stack: Built with React.js, ensuring fast rendering, smooth performance.

  🛠 Tech Stack:

  • React.js: Provides a fast, dynamic user interface.
  • useContext: Ensures efficient state management across components.
  • Zustand: Lightweight state management for better scalability and performance.
  • Firebase: Used for backend services, including data storage and authentication.
  • Axios: Handles API requests efficiently.
  • i18-next: Enables full multilingual support for an international user base.
  • useRef: Facilitates direct DOM manipulation and better handling of form inputs and other interactive elements.
  • react-icon: Adds icons for a more intuitive user experience.
  • react-router-dom: Manages seamless navigation between pages.
  • useEffect, useState, useMemo: Manage application lifecycle and performance optimizations.

  Challenges:

  • Ensuring a seamless experience across different languages and RTL right-to-left support for Arabic.
  • Implementing secure and reliable electronic payment integration.
• 

  YAMAN CACHIER

  Sales Management Web App

  • This web application is designed to streamline the management of sales, cash flow, and inventory for businesses.
  • It offers a comprehensive suite of features that help users track transactions, monitor profits, and manage inventory, all within an intuitive and responsive interfaces.

  ✨ Key Features:

  • Cashbox Management: Users can add cash to the cashbox and charge items to the store. The system calculates the price with and without profit, helping businesses track their earnings.
  • Profit Calculation: Automatic monthly profit calculation based on sales. Every transaction is recorded and contributes to the overall profit report.
  • Real-Time Inventory Management: When items are sold, the system automatically reduces the stock amount, ensuring up-to-date inventory levels.
  • Invoice Generation: Invoices are generated for every sale, sent to the business owner's Telegram account, and printed via a thermal printer using ESC/POS.
  • Admin Dashboard: Admins can export invoices to an Excel file, view all past invoices, monitor profits, and see the total cash in the cashbox.
  • Editable Items: Users can adjust the quantity and prices of items to keep inventory data accurate.

  🛠 Tech Stack:

  • React.js: Provides a fast, dynamic user interface.
  • useContext: Ensures efficient state management across components.
  • Firebase: Used for backend services, including data storage and authentication.
  • Axios: Handles API requests efficiently.
  • ESC/POS: Integrated for printing invoices via thermal printers.
  • useEffect, useState, useMemo: Manage application lifecycle and performance optimizations.

  Challenges:

  • Real-Time Inventory and Cash Tracking: Ensuring accurate updates to inventory levels and cashbox amounts in real time.
  • Seamless Invoice Generation: Sending invoices to Telegram and printing with thermal printers efficiently.
  • Data Accuracy: Ensuring accurate calculations for monthly profits and cash flow management across the system.
• 

  TELLO TOK

  Social Media Mobile App

  • This mobile application, inspired by TikTok, is designed for users to create, share, and discover short-form videos with ease.
  • The app provides a platform for creative expression and social interaction through video content.

  ✨ Key Features:

  • User Authentication: Users can sign up and sign in to manage their profiles.
  • Video Upload and Management: Users can upload videos from their device, using the built-in video picker, and delete their own content if needed.
  • Favorite Videos: Users can mark videos as favorites and easily access them in their personal list.
  • Recommended Videos: The app suggests videos tailored to the user’s preferences, ensuring a personalized content experience.
  • Profile Editing: Users can update their account information and preferences.
  • Smooth Animations and Performance: Integrated animations provide a smooth and engaging user experience.

  🛠 Tech Stack:

  • React Native Expo: Ensures cross-platform compatibility and ease of development.
  • expo-router: Simplifies navigation across app screens.
  • expo-image-picker & expo-document-picker: Enable users to upload videos from their devices.
  • expo-av: Handles video playback functionality.
  • useFonts: Adds custom fonts to enhance the app’s appearance.
  • useContext, useState, useEffect: Manage state and handle app lifecycle efficiently.
  • react-native-appwrite: Provides backend services such as authentication and file storage.
  • react-native-animatable: Adds smooth, engaging animations for an enhanced user experience.
  • MongoDB: Serves as the database for managing user data and video content.
  • nativewind: For styling and ensuring a responsive, modern UI.
• 

  MOAZ CHAT APP

  Chat Web App

  • This chat application, inspired by WhatsApp, allows users to communicate in real time, manage their profiles, and enjoy music streaming directly within the app.
  • Designed for a seamless and interactive messaging experience, it incorporates various modern technologies to ensure speed, security, and scalability.

  ✨ Key Features:

  • Real-Time Messaging: Users can send and receive messages instantly using socket.io for real-time communication.
  • User Authentication: Secure sign-up and sign-in functionalities powered by JWT for token-based authentication.
  • Profile Management: Users can edit their profile settings, ensuring a personalized experience.
  • Music Streaming: Integrated music player for users to listen to music while using the app.
  • Responsive Design: Tailwind CSS ensures a clean and modern UI that is responsive across devices.

  🛠 Tech Stack:

  • React.js: Frontend framework for building a dynamic user interface.
  • Zustand & useContext: Efficient state management solutions.
  • socket.io: Handles real-time messaging and communication.
  • Node.js & Express.js: Backend for managing user data, messaging, and API requests.
  • MongoDB & Mongoose: Database and ORM for handling user profiles, messages, and settings.
  • JWT: Secure authentication for user sessions.
  • Vite: Fast build tool for optimized app performance.
  • Tailwind CSS: Provides a responsive, modern user interface.
  • useMemo, useRef, useEffect, useState: Ensure optimized performance and state management.
  • react-router-dom: Navigation between different app pages.
  • bcryptjs: Ensures secure password encryption.
  • Multer: For file uploads, such as profile pictures.
  • cookie-parser: Handles user session data in cookies.
  • react-hot-toast: Delivers smooth, non-intrusive notifications.
  • Deployed on Render: Ensures scalable and reliable app deployment.
• 

  WASSELNY

  Taxi Booking App

  • This mobile application facilitates the process of booking taxis, providing a seamless interaction between clients, drivers, and admins.
  • It allows clients to search for available drivers, track their location, and manage trips, while drivers can accept requests and handle multiple rides.
  • Admins oversee the entire ecosystem, managing users and resolving issues.

  ✨ Key Features:

  • User Authentication: Clients, drivers, and admins can sign up and sign in securely.
  • Driver Availability & Request Handling: Clients can search for available taxi drivers, send ride requests, and drivers can either accept or reject them.
  • Real-Time Location Tracking: Both clients and drivers can view each other’s locations on a map during a trip.
  • Trip Management: Clients can select a destination, see the estimated cost, and track the driver’s location. Drivers can mark trips as completed, enabling them to receive new requests.
  • Issue Reporting: Both drivers and clients can report problems encountered during trips.
  • Order & History Tracking: Clients and drivers can view their past trips and order history.
  • Admin Dashboard: Admins can manage users clients and drivers, approve driver requests to join, and view reports on issues from both clients and drivers.

  🛠 Tech Stack:

  • React Native: Ensures a smooth and responsive user interface for mobile devices.
  • Expo-Router: Facilitates navigation within the application.
  • Maps Integration: Allows real-time location tracking and destination selection for clients and drivers.
  • useContext: Manages global state across different components.
  • Axios: Efficient handling of API requests.
  • Nativewind: Provides styling solutions for the mobile interface.
  • Expo Image Picker: Enables users to upload images, such as driver documents or profile photos.

  Challenges:

  • Real-Time Tracking: Ensuring accurate, real-time location updates for both clients and drivers.
  • Request Flow: Managing the lifecycle of ride requests, from searching to trip completion, while maintaining smooth interactions between clients and drivers.
  • User Management: Efficiently handling driver approvals, client requests, and issue tracking within the admin panel.
• 

  FUSHA

  Tour Booking Web App

  • This web application offers users the ability to explore exciting tours to destinations around the world.
  • Clients can browse tours, view key details such as dates, locations, and pricing, and easily connect with trip organizers for booking.
  • The platform also provides personalized tour recommendations based on users’ previous bookings, ensuring a tailored travel experience.

  ✨ Key Features:

  • Tour Listings: Clients can browse tours to various destinations, with details on the date, location, and cost of each tour.
  • Organizer Connection: Clients can directly connect with tour organizers to book trips and ask questions.
  • Personalized Recommendations: The app suggests trips based on the client's past travel history, helping them discover new destinations that suit their preferences.
  • Multi-Language Support: The app offers multilingual support, allowing users to switch between languages via i18-next integration.

  🛠 Tech Stack:

  • React.js: Provides a fast and interactive user interface.
  • useEffect, useState, useMemo: Handle application lifecycle, state management, and performance optimization.
  • Custom Hooks: Improve reusability and functionality across components.
  • useContext: Streamlines state management for global components.
  • react-router-dom: Manages navigation between different sections of the app.
  • Axios: Handles API requests for fetching tour details and recommendations.
  • i18-next: Enables multi-language support, ensuring the app is accessible to a global audience.

  Challenges:

  • Recommendation Engine: Providing accurate and relevant trip recommendations based on past bookings.
  • Seamless Booking: Ensuring smooth and intuitive interactions between clients and organizers for a hassle-free booking experience.
  • Scalability: Supporting multiple languages and handling large amounts of tour data without compromising performance.
• 

  SPACE TIME

  Design Company Portfolio Website

  • This portfolio website showcases the services and expertise of a design company, offering a sleek and visually appealing platform for potential clients to explore their work and connect via social media.
  • The website is designed with a strong focus on aesthetics and user experience, ensuring that visitors can easily navigate and discover the company's offerings.

  ✨ Key Features:

  • Service Showcase: The website highlights the company's range of design services in a visually engaging format.
  • Social Media Integration: Direct links to the company’s social media accounts, allowing visitors to follow and connect with the brand.
  • Responsive Design: Optimized for both desktop and mobile devices, ensuring a seamless experience across different screen sizes.

  🛠 Tech Stack:

  • Bootstrap 5: Provides a responsive, mobile-first layout with built-in components and a modern design.
  • HTML & CSS: Customizes the structure and style of the website, creating a unique and visually appealing design.
  • Beautiful Design: Focused on clean, modern aesthetics that reflect the professionalism of the design company.

  Challenges:

  • Aesthetic Consistency: Ensuring the design is both visually appealing and functional across various devices and screen sizes.
  • Responsive Layout: Leveraging Bootstrap 5 to create a smooth, responsive experience without sacrificing design quality.
• 

  IMAGE EDITOR

  Advanced Image Editor Web App

  • A fully interactive and intuitive image editing web application that empowers users to upload and transform their images with precision and ease.
  • This tool is designed with modern UI/UX principles to deliver a seamless editing experience right in the browser—no need for external software.
  • It offers a wide range of editing capabilities to cater to both casual users and creative professionals.

  ✨ Key Features:

  • Image Upload & Preview:

  • Instantly upload and view images with real-time editing feedback.

  • Adjustable Filters:

    Saturation

    Contrast

    Grayscale

    Brightness

    Hue Rotation (Orange Tint Adjustment) lets users emphasize warm tones for a vibrant aesthetic.

  • Image Transformations:

    Flip Vertically (Up-Down)

    Flip Horizontally (Left-Right)

    Rotate (Clockwise & Counter-Clockwise)

  • Cropping Tool:

    Select and cut out specific regions of the image with precision.

  • Download Edited Image:

    Export the final edited image in a high quality format.

  • Responsive Design:

    Optimized for both desktop and mobile screens, ensuring smooth usability on all devices.

  🛠 Tech Stack:

  • React.js: Delivers a fast, interactive, and component-driven front-end.
  • Tailwind CSS: Enables clean and responsive design with utility-first styling.
  • Built-in React Hooks (useState, useEffect, useRef, useMemo): Manage state, DOM interactions, and performance efficiently.

  🎯 Purpose & Impact:

  • This project reflects a strong grasp of image manipulation, real-time rendering, and modern front-end development.
  • It demonstrates the ability to combine usability with technical depth, providing an accessible solution for image editing that runs entirely in the browser no installations required.
• 

  PDF MINIMIZER

  📄 PDF Note-Taking Assistant Web App

  • A React.js-based web application designed to enhance the learning experience by transforming standard PDF files into student-friendly note-taking layouts.
  • This intuitive tool allows users to upload a PDF, automatically minimize its content to the top-left quadrant of each page, and create clean, empty spaces for handwritten or typed notes—ideal for lectures, study sessions, and interactive learning.

  ✨ Key Features:

  • PDF Upload & Preview: Upload any standard PDF file and view the changes in real time.
  • Smart Content Resizing: Automatically reduces the content of each page to the top-left quarter while maintaining readability.
  • Note-Friendly Layout: Leaves the remaining 3/4 of the page blank—perfect for students to jot down thoughts, summaries, or annotations.
  • Download Modified PDF: Export the transformed PDF with its new layout, ready for print or digital annotation.
  • Responsive Design: Seamlessly usable across devices, including tablets and desktops.

  🛠 Tech Stack:

  • React.js: Ensures a dynamic and smooth single-page application experience.
  • PDF.js / pdf-lib: Handles reading, editing, and regenerating PDF documents on the client side.
  • Tailwind CSS: Provides clean, responsive, and consistent styling across the app.
  • React Hooks (useState, useEffect, useRef): Manage state, lifecycle, and DOM manipulation effectively.

  🎯 Purpose & Impact:

  • This tool simplifies the process of preparing study-friendly PDFs, saving time for students and educators alike.
  • It showcases practical use of PDF manipulation in the browser, thoughtful UX design for educational needs, and advanced file processing without requiring server-side operations.
• 

  DINTEST CLINIC

  🦷 Dental Clinic Management Web App

  • A modern React.js-based web application tailored for dental clinics to streamline patient management, enhance service visibility, and optimize daily workflows for doctors and their assistants.
  • This all-in-one dashboard provides structured access to patient records, clinic information, and promotional service content, empowering healthcare professionals to focus more on care and less on paperwork.

  ✨ Key Features:

  • Patient Account Management: Doctor assistants can create and manage patient profiles, input treatment details, and update personal and medical information.
  • Doctor's Daily View: Doctors can easily view a list of scheduled patients for each day, with quick access to their medical histories and current treatment plans.
  • Clinic Overview: Detailed sections providing an overview of the clinic, including doctors' profiles, qualifications, and areas of expertise.
  • Services & Promotions: Display of the clinic's available treatments and services, with integrated advertisement banners for featured services or seasonal promotions.
  • Responsive & User-Friendly Design: Clean, mobile-friendly UI ensures seamless use on tablets, desktops, or at reception desks.

  🛠 Tech Stack:

  • React.js: Front-end library for dynamic and responsive interface development.
  • Tailwind CSS: Rapid styling for consistent and clean layout design.
  • Zustand: Lightweight state management for scalable and efficient app behavior.
  • React Router DOM: Smooth navigation across patient records, dashboards, and info pages.
  • React Icons: Enhances the visual user experience with familiar iconography.
  • React Hooks (useState, useEffect, useRef, useMemo): Power core interactions and optimize performance.

  🎯 Purpose & Impact:

  • This application bridges administrative needs with patient care, helping dental clinics move away from paper-based systems toward a streamlined, digital-first approach.
  • It demonstrates strong UX thinking, solid form and data management, and effective role-based UI behavior for medical workflows.
• 

  MUFEED AI

  🤖 AI Access & Global Payment Platform

  • A full-featured React.js web application that democratizes access to GPT-3.5 by enabling flexible payment options and integrating Telegram for mobile AI interaction.
  • Designed for global users—especially those without access to traditional online payment methods—this platform provides a seamless experience to subscribe, interact, and benefit from powerful AI tools.

  ✨ Key Features:

  • User Account System:

    Secure sign-up and login functionality for individual user profiles.

  • Flexible Payment Integration:

    Online Payments: Support for PayPal and Mastercard for instant access.

    Offline Payments: For users in regions without access to online payment services:

    Pay at physical money transfer companies (e.g., Western Union, MoneyGram).

    Upload a photo of the receipt for manual verification.

  • Custom Pricing Offers:

    View and choose from multiple AI usage packages and promotional offers.

  • Telegram Bot Integration:

    Use GPT-3.5 directly from your smartphone via a Telegram bot, ensuring accessibility and ease of use without needing to stay on the website.

  • Community Feedback:

    Users can upload reviews and file complaints.

    Public review section allows users to read others experiences and build trust.

  • Responsive Design:

    Fully optimized for desktop and mobile, making it accessible from any device.

  🛠 Tech Stack:

  • React.js: Modern front-end framework enabling interactive and scalable UIs.
  • Tailwind CSS: Utility-first styling for consistent and mobile-friendly design.
  • Axios: Handles secure API communication.
  • React Router DOM: Enables seamless navigation between user dashboard, reviews, and payment pages.
  • Zustand: Simple yet powerful state management across the app.
  • React Hook Form: Provides robust form handling for payments, uploads, and user feedback.
  • Built-in React Hooks (useState, useEffect, useRef, etc.): Optimized interaction handling and performance.

  🎯 Purpose & Impact:

  • This project empowers users from underbanked regions to gain access to advanced AI tools through inclusive payment options and mobile-friendly interfaces.
  • It showcases a thoughtful approach to global accessibility, third-party integration (Telegram), secure user management, and community engagement through reviews and support channels.
• 

  XTRAVEL

  Bus Booking Web App

  • An intercity bus booking web app for Syria, allowing users to search routes, view schedules, and book tickets online with secure payment integration.
  • The platform offers bilingual support Arabic and English and integrates electronic payment systems to provide users with a seamless and efficient booking experience.
  • Users can easily search for available bus routes, select their preferred travel times, and secure their tickets online.

  ✨ Key Features:

  • Secure Payments: Integrated electronic payment gateway for quick and secure transactions.
  • Real-Time Availability: Users can view real-time bus schedules and seat availability.
  • Responsive Design: Optimized for various screen sizes and devices for easy access from anywhere.
  • 🛠 Tech Stack: Built with React.js, ensuring fast rendering, smooth performance.

  🛠 Tech Stack:

  • React.js: Provides a fast, dynamic user interface.
  • useContext: Ensures efficient state management across components.
  • Axios: Handles API requests efficiently.
  • useRef: Facilitates direct DOM manipulation and better handling of form inputs and other interactive elements.
  • react-icon: Adds icons for a more intuitive user experience.
  • react-router-dom: Manages seamless navigation between pages.
  • useEffect, useState, useMemo: Manage application lifecycle and performance optimizations.

  Challenges:

  • Implementing secure and reliable electronic payment integration.