Hi, I'm Loay

The Compliance Professor is a full-featured e-learning platform designed for compliance training and certification. Built with Next.js 15, TypeScript, Redux Toolkit, and Tailwind CSS, it delivers a seamless learning experience for students and a scalable admin panel for platform management. The platform includes video and lecture course players with real-time progress tracking, secure exam systems with auto-grading and timers, OAuth (Google/Microsoft) authentication, and Stripe-powered payments with cart and wishlist functionality. The admin dashboard enables complete control over courses, sections, lectures, exams, and certification issuance, showcasing expertise in building production-ready, high-performance web applications.

MedHive is a comprehensive full-stack medical education platform designed to support medical and health science students in Saudi Arabia and the Arab world. Built with Next.js 15, TypeScript, Node.js, Express, and MongoDB, it features a hierarchical education structure from universities down to individual courses with multimedia support. The platform includes a powerful Admin Dashboard with role-based access control for managing universities, faculties, academic years, subjects, doctors, and courses with real-time updates. Students can browse courses, enroll with secure payment tracking, access lectures and study materials, and track their learning progress.

Autofilliate is a conversion-optimized B2B SaaS landing page designed to market creator and affiliate program automation tools, featuring highly interactive sections, pricing models, and case studies. Built for a Netherlands-based client, the entire high-performance interface was developed using Next.js, TypeScript, and Tailwind CSS, engineering a scalable component architecture that enables smooth updates, localization, and mobile optimization across breakpoints. Fluid, interactive animations implemented with Framer Motion showcase product capabilities like automation workflows and ROI metrics, delivering an intuitive and engaging user experience tailored to drive sign-ups and demo requests.

Time Tracking System is a comprehensive time management application built with Next.js 15, TypeScript, Supabase, and Zustand for precise work hour tracking across multiple projects. The platform features both authenticated mode with cloud persistence and guest mode with local storage. Key features include a real-time timer with millisecond precision and cross-tab sync, flexible time entry management with billable/non-billable tracking, project organization with color coding and hourly rates, comprehensive reports with earnings calculations in multiple currencies (USD, EUR, GBP, EGP), interactive data visualizations using Recharts for daily trends and project distribution, and a fully responsive design with dark/light mode support.

X Clone is a full-featured social media mobile application built with React Native and Expo, inspired by Twitter/X. It provides a complete social media experience including posting, liking, commenting, real-time messaging, notifications, and user authentication. The app runs on both Android and iOS, leveraging Firebase for real-time chat and Clerk for authentication. Features include a dynamic home feed with infinite scrolling, post creation with image attachments, real-time direct messaging with Firebase Realtime Database, push notifications for likes/comments/follows, and a fully customizable user profile. Built with TypeScript, NativeWind (Tailwind for React Native), TanStack React Query for state management, and smooth animations with React Native Reanimated.

AI-powered chatbot Widget is a React-based web widget (script) that streams real-time information through conversational AI interfaces. Developed with React and JavaScript, supports markdown rendering, data visualization, and a modular architecture that dynamically adapts to user roles and authentication status. The widget also includes a comprehensive file management system featuring multi-file uploads, drag-and-drop functionality, validation mechanisms, and progress tracking to streamline document handling. This project highlights expertise in building interactive, secure, and adaptive UI components that deliver an intelligent and engaging user experience.

Spotlight is a full-stack Instagram-like social media mobile application built with React Native and Expo, designed to deliver a modern and seamless user experience. The app runs on both Android and iOS, leveraging Convex as a real-time backend database and Clerk for secure Google OAuth authentication. Features include a dynamic Instagram-style feed with pull-to-refresh and infinite scrolling, post creation with image uploads from gallery or camera, social interactions including likes, comments, and bookmarks with real-time updates, follow/unfollow system with real-time follower counts, real-time notifications for likes, comments, and follows, user profile management with editable bio and profile pictures, dedicated bookmarks section, and a modern dark theme with green accents. Built with TypeScript, React Native Reanimated for smooth animations, Expo Router for file-based navigation, and optimized image caching with Expo Image, demonstrating expertise in building scalable, performant, and visually appealing mobile applications.

Compliance Management Platform is a scalable web application designed to streamline structured data workflows for compliance operations. Built with Next.js, TypeScript, and Tailwind CSS, it features a responsive and modular interface tailored for enterprise environments. The platform includes interactive dashboards with advanced filtering, hierarchical views, and export functionality to support data-driven decision-making. Close collaboration with backend engineers enabled secure API integrations for authentication, role-based access, and real-time functionality. This project showcases expertise in building robust, user-focused frontend architectures for complex, data-intensive platforms.

Bookworm is a social mobile application built with React Native and Expo, designed for book lovers to discover, share, and rate books. The app enables users to create a personal book collection, share recommendations with the community, and explore books with ratings and reviews. Features include secure user authentication with persistent sessions, book sharing with titles, descriptions, ratings (1-5 stars), and cover images, a social feed browsing recommendations from the community, personal profile to view and manage book recommendations, image upload using device camera or gallery, pull-to-refresh functionality, and a responsive design optimized for both iOS and Android. Built with TypeScript, Zustand for state management, Expo Router for file-based navigation, Expo Image for optimized image loading and caching, React Native Reanimated for smooth animations, and AsyncStorage for local data persistence, showcasing expertise in building engaging social mobile applications.

Island Wide Palm Trees is a feature-rich internal management system designed to streamline operations for a field service company specializing in tree treatments. Developed using React, Redux Toolkit, PrimeReact, and Tailwind CSS, the platform allows administrators to manage customers, orders, products, tasks, and technicians through dynamic tables, filters, and interactive dialogs. Integrated with Google Maps via @react-google-maps/api, the system enables real-time technician and customer location tracking, optimized route planning, and task assignment based on geographic data. Additional features include PDF report generation, tree condition tracking with video integration, technician dashboards, persistent user sessions, and role-based admin control—demonstrating advanced capabilities in building operational tools for field coordination and resource management.

The Elfath Quran Competition is a Next.js 14 and TypeScript educational platform for Quranic memorization competitions, targeting individuals aged 6-25. Features a five-level progressive system from five Juz to complete Quran memorization with traditional Islamic curricula integration. Built with React, Tailwind CSS, and Arabic typography support, including streamlined registration workflows, interactive level displays, and prize showcases. Demonstrates expertise in creating culturally-sensitive, multilingual educational applications with modern web development standards.

Nataaegy is a specialized website for displaying Egyptian High School (Thanaweya Amma) results, allowing students to search by name or seat number. Built with Next.js 14 and TypeScript, it features real-time data caching, advanced pagination, an Arabic-optimized responsive interface, intelligent search algorithms, and performance analytics to ensure fast and accurate results.

Happy-Shop is designed to deliver a seamless and engaging e-commerce experience, featuring product browsing, detailed product views, shopping cart management, and a responsive, user-friendly interface. Admins have extensive control over the platform, including adding and managing brands, categories, products, coupons, and orders, with validation and responsive design ensuring smooth operation. Users can create accounts, manage profiles and addresses, view order history, add products to favorites, and efficiently interact with the shopping cart and checkout processes. The platform supports secure user authentication and various payment options for an enhanced user experience.

Developed a React-based platform leveraging the Context API for streamlined and efficient state management across components. Integrated with Salesforce as a backend to manage and retrieve dynamic data for both members and service providers. The platform enables members to explore, learn about, and support quality service providers that align with DoGood's mission of promoting impactful purchasing. Since launch, DoGood has facilitated over $1 million in donations to charities and nonprofits, empowering members to make meaningful social contributions through their professional roles and purchasing decisions.

Developed a scalable and performance-oriented dashboard using Next.js to manage over 100 marketing sites, optimizing content oversight and performance monitoring. The dashboard integrates with key platforms like Google Maps, Google My Business, Facebook, and Instagram, centralizing cross-platform data to streamline functionality. Hosted on AWS for enhanced scalability and reliability, the solution ensures strong performance under high traffic and usage demands.

The project involves building a dual-sided e-commerce application. On the admin side, administrators can perform CRUD operations, managing products. On the client side, users can browse products, create wish lists, add items to a watchlist, shop, add to cart, and complete purchases. User authentication features like signing in and out are also implemented for a personalized experience.

This full-stack e-commerce project is developed using React and TypeScript, integrating technologies like Chakra UI, Redux Toolkit, Formik, and React Router for seamless user interactions and efficient state management. The implementation connects the React TypeScript front end with a Strapi backend, demonstrating proficiency in backend API communication, user authentication, and role-based permissions. The outcome is a secure and engaging full-stack e-commerce experience.

The Find A Coach Vue App is a user-friendly platform built with Vue.js, designed to connect users with coaches. It allows coaches to register, update their profiles, and manage incoming requests from users. The app includes a request system, authentication with Firebase, and a responsive interface for seamless navigation across devices. Core technologies used include Vite, Vue Router, Vuex for state management, Tailwind CSS for styling, and Firebase Realtime Database and Authentication for backend functionality.

The Fullstack Next.js Todo App seamlessly integrates a frontend and backend using Next.js, React, Prisma, Clerk Authentication, and TypeScript. Users can easily manage todos with features like adding, editing, and deleting tasks—all personalized to the user's account. The tech stack includes React-Hook-Form, Tailwind CSS, Lucide React, and Moment, ensuring a secure and feature-rich todo management solution.

Oya-Clone is a Vue.js 3 web application designed to highlight the power of GSAP for building interactive animations. This project demonstrates how to create a dynamic, responsive user experience using reusable, modular components. By replicating the essential features of the original Oya platform, Oya-Clone serves as a comprehensive practice project for mastering Vue.js and advanced animation techniques.

Dashboard React is a dynamic web application built with React and Vite, designed to display data interactively across various pages such as charts, calendars, and forms. Utilizing technologies like Material UI, Nivo, FullCalendar, and Firebase, it offers a rich user experience with features like data visualization, event management, and team and contact information.

Real-Estate React App is a responsive and user-friendly web application for browsing real estate listings, built with React and Tailwind CSS. It offers an interactive property list on the home page and a detailed property view with images, descriptions, and contact options for each listing. The app is designed to provide an optimal experience across various screen sizes, making it easy to explore properties on both mobile and desktop devices.

The Store Web App is a responsive eCommerce platform built with React.js and Create React App. Featuring a modern interface, it optimizes UI components using HTML, Bootstrap, and JavaScript. Seamless integration of external product data from a fake storeAPI enhances both realism and functionality, offering users a visually appealing and user-friendly online shopping experience.

The Fullstack Todo List is an efficient and modern application for managing tasks, crafted with React, TypeScript, and Tailwind CSS. It offers seamless task creation, editing, and deletion, backed by a Strapi backend for secure data handling. Its responsive design ensures a smooth user experience for enhancing personal productivity.

Shopping Cart Vue App is a simple e-commerce application built with Vue.js. It allows users to browse products, add items to a shopping cart, update quantities, and view total prices. The app uses Vue Router for navigation and Vuex for state management. Ideal as a foundation for a scalable shopping cart system.

The VSCode Clone project is a Redux Toolkit-driven endeavor, meticulously recreating the familiar Visual Studio Code interface. Seamlessly open files through the file tree, manage tabs with syntax-highlighted content, and optimize your workspace layout with the resizable panel – all enhanced by the robust state management capabilities of Redux Toolkit.

Product Cards is a dynamic and intuitive React application designed for streamlined inventory management. Developed with Vite, TypeScript, and Tailwind CSS, it offers users a fluid experience in adding, editing, and removing products. Enhanced by @heroicons/react and @headlessui/react for elegant UI components, this app is ideal for managing product details with efficiency and style.

The Shopping Cart optimized with Redux Toolkit, ensures a smooth shopping journey. Effortlessly add and manage items with actions like viewing, updating quantities, and removing. Experience streamlined state management for a responsive and dynamic shopping experience.

Fitness React App is a responsive web application built with React, JavaScript, and Material UI, designed to help users explore and manage fitness routines. It features a clean, interactive interface for accessing exercises, tracking progress, and viewing personalized workout plans.

The Social Web App is a responsive platform developed with HTML, CSS (Bootstrap), and JavaScript, allowing users to log in, register, create posts, and view profiles. Axios is employed for smooth server communication. The app features essential components like navigation, authentication modals, post creation and viewing, as well as alerts for notifications. With a clean and efficient design, it provides a straightforward and user-friendly experience for social interactions.

The Kasper Art Studio Template is a dynamic HTML, CSS, and JavaScript project tailored for artistic showcases. Boasting a responsive design, it features animated sections for landing, services, portfolio, about us, statistics, skills, testimonials, pricing, and a contact form. With visually captivating elements, including image sliders powered by Swiper and enchanting scroll-triggered animations using WOW.js.

The Quiz App is an engaging platform that challenges users with diverse topics through multiple-choice questions. Accessible via a web browser, participants select the correct answers and submit them to progress through the quiz. With dynamic question displays, a countdown timer, and insightful feedback, the app concludes with a comprehensive summary of the user's performance.

The Multi-Purpose Business Template is a dynamic HTML, CSS, and JavaScript project tailored for versatile businesses. Notable features include engaging Swiper slides in the Testimonials section, creating a visually appealing display. Additionally, the AOS Animate Library is seamlessly integrated, providing smooth and captivating animations triggered on scroll. This template ensures an interactive and modern user experience.

The Hangman Game is a classic word-guessing challenge where players aim to unveil a hidden word by guessing letters. Accessible through a web browser, the game randomly selects a word from various categories, prompting players to click on letters to decipher the word. With each incorrect guess, a dynamic hangman illustration evolves. Successfully guessing the word leads to victory while reaching 8 wrong attempts results in defeat.

The Special Design template offers a dynamic HTML, CSS, and JavaScript solution for creative agencies. With its modern design and various sections like About Us, Our Skills, Gallery, and Testimonials, it delivers an immersive user experience. Noteworthy features include local storage support for personalized settings and smooth animations for enhanced engagement.

Landing Page

The Typing Speed Test Game is a web-based challenge designed to elevate your typing skills. Offering various difficulty levels, including Easy, Normal, and Hard, the game prompts players to type displayed words within a set time limit. With a dynamic interface, real-time score updates, and a congratulatory finish message, this game provides an engaging way to measure and improve your typing speed.

Landing Page

Landing Page

Landing Page

The Memory Game is a simple and engaging challenge where players match pairs of images related to various technologies. To play, users click the 'Start Game' button, enter their name when prompted, and the game briefly reveals all images before starting. Clicking on two blocks unveils the images, and if they match, the blocks stay flipped; otherwise, they flip back. The game continues until all pairs are successfully matched.

Landing Page