My Projects
Discover my journey through code, creativity, and innovation — projects that showcase passion, precision, and purpose.
AIUB Portal+ Chrome Extension
A productivity-focused Chrome extension that transforms the official AIUB Student Portal into a faster, cleaner, and more powerful academic management experience. Built specifically for AIUB students
News Portal
A modern full-stack news platform that combines free and premium content, secure subscriptions, role-based publishing, and real-time analytics in a responsive editorial experience.
PageBitz – Multi-Tenant SaaS Landing Page Builder
A full-stack SaaS platform that enables entrepreneurs and businesses to create, customize, and publish high-converting landing pages while managing orders, customers, and leads from a centralized dash
AJ Khan Foundation
A modern digital platform for AJ Khan Foundation that combines a public-facing foundation website with a centralized administrative management system.
Ai-powerd-Student-Life-Toolkit
A comprehensive student productivity platform designed to help students manage their academic responsibilities, study resources, personal finances, and daily tasks from one centralized workspace.
Full Stack E-Com Website
An AI-powered full-stack e-commerce platform built to deliver a personalized, secure, and responsive online shopping experience.
Online Compiler
The Problem: Friction in Prototyping Developers often need to test a quick snippet of code, try a new algorithm, or verify logic in a different language. However, spinning up a new local environment, configuring compilers, or navigating clunky online IDEs creates unnecessary friction. I wanted to build a lightweight, frictionless solution that felt as powerful as VS Code but lived entirely in the browser, requiring zero setup. The Solution I built a modern, browser-based code editor and compiler that supports 10 programming languages (including C++, Python, Java, Go, and Rust) with a seamless, lag-free developer experience. It features a clean, responsive UI with a familiar file/folder management tree, auto language detection, and standard inputs (stdin) execution. Engineering & Architecture To deliver a premium VS Code-like experience, I had to carefully select and integrate frontend technologies that could handle heavy DOM manipulation and real-time editing. Monaco Editor Integration: Instead of reinventing the wheel or using basic textareas, I integrated Microsoft's Monaco Editor (the engine behind VS Code). This provided out-of-the-box syntax highlighting, intelligent code completion, and mini-map support. Next.js & TypeScript: The application is built on Next.js for optimized performance and SEO. TypeScript ensures strict type safety across complex state management, particularly when handling file trees, editor states, and language configurations. Secure Execution Engine: Compiling arbitrary code in the browser is dangerous and computationally heavy. To solve this, I integrated the Wandbox API as the remote execution engine. When a user runs code, the payload is securely dispatched to Wandbox, compiled in an isolated container, and the stdout/stderr streams are piped back to the client in real-time. Dynamic Resizable UI: I engineered a resizable split-pane layout using custom React hooks to manage drag events. This allows users to effortlessly resize the file explorer, editor, and terminal output windows to suit their workflow, mirroring professional desktop IDEs. Overcoming Challenges One of the main challenges was state synchronization between the selected file in the file explorer and the Monaco Editor instance. Since users can rapidly switch between files of different programming languages, the editor's language model had to update instantly without losing the undo/redo history stack of the previous file. I solved this by caching the Monaco ITextModel instances in memory. When a user switches files, the application simply swaps the active model rather than unmounting and remounting the editor component. This resulted in instantaneous file switching and preserved local state perfectly. The Result The final product is a blazing-fast, robust online compiler that feels like a native desktop application. It features a complete dark/light mode ecosystem and handles complex multi-language execution flawlessly. It serves as a testament to building high-performance, developer-focused tooling on the web.
Job Portal
JobPortal is a modern job search platform connecting job seekers with top employers. Built with React and TailwindCSS, it offers a smooth and responsive user experience. Users can register using email, Google, or GitHub via Firebase Authentication. Job seekers can search, filter, and apply for jobs effortlessly. Employers can post job listings and manage applications in real-time. Advanced filtering helps users find relevant job opportunities quickly. Application tracking keeps users updated on their job status and history. Both job seekers and employers have personalized profile management. Real-time notifications alert users of new job posts and updates. Powered by Firestore/MongoDB, and deployed on Vercel/Netlify for high performance.
Library Management SystemF
BookHaven is a full-featured library management system built with React. It allows users to browse, borrow, and return books easily from an organized collection. Secure user authentication is handled through Firebase Authentication. Users can filter books by category, genre, or search by title/author. Each book includes detailed info, including availability and description. The borrowing system tracks available quantities and due return dates. Users can view their borrowed books and return them with one click. The responsive UI ensures smooth performance across all devices. Modern technologies like React Router, Tailwind CSS, and Axios are used. SweetAlert2 enhances the user experience with clean and intuitive popups.