All Projects

// Food Del

const project = {

type: "Front-End",

year: 2024,

description: "Food Del is a comprehensive food delivery web application built with React and modern web technologies. The platform features a responsive design that works seamlessly across all devices, offering users an intuitive interface to browse through diverse food categories including Pizza, Chicken, Tacos, Pasta, Couscous, Tajine, Fish, and Pastilla. Key Features: Interactive menu exploration with category filtering, real-time shopping cart management with quantity controls, user authentication system with login/signup functionality, responsive design optimized for mobile and desktop, modern UI with smooth animations and transitions, complete e-commerce functionality with price calculations, and professional footer with company information and social links. The application demonstrates modern React development practices including Context API for state management, React Router for navigation, and component-based architecture."

};

const stack = [

"React.js", "React Router DOM", "Vite", "CSS3", "JavaScript ES6+", "Context API"

];

// Localize

const project = {

type: "Full-Stack",

year: 2024,

description: "Created a dynamic web platform enabling clients to showcase offerings, post ads, and engage users through a commenting and rating system. Mastering full-stack web development, I specialize in using ReactJS to build dynamic and responsive user interfaces. With my expertise in UI/UX design using Figma, I create attractive and intuitive layouts. Leveraging JSON data management and Git for version control, I ensure efficient project organization and smooth collaboration. Experienced in analyzing project requirements and creating technical specifications, I have successfully delivered projects that meet various client needs. This platform allows clients to showcase their offerings, post ads, and choose from a range of usage options, including a free option. Additionally, I implemented a commenting and rating system to facilitate visitor feedback and encourage engagement with the featured venues."

};

const stack = [

"React.js", "Laravel", "Laravel Auth", "MongoDB", "CSS"

];

// Jewelry Store

const project = {

type: "Full-Stack",

year: 2024,

description: "This project is a fully functional online jewelry store built using HTML, CSS, and JavaScript, offering users the ability to browse and purchase elegant jewelry items such as diamond rings, gold necklaces, pearl earrings, and silver bracelets. The website features intuitive sorting by price, a dynamic shopping cart, and a responsive design for seamless browsing. Additionally, an admin dashboard provides comprehensive insights, including buyer information, top sales, and sales analytics, enabling efficient store management. This project combines a user-friendly interface with powerful backend functionality to deliver a complete e-commerce solution."

};

const stack = [

"JavaScript", "HTML", "CSS"

];

// School Management

const project = {

type: "Full-Stack",

year: 2025,

description: "A modern web application built with Python Flask for educational institutions to manage student academic performance. The system features a robust authentication system with admin and student role-based access, comprehensive grade management across multiple modules, attendance tracking, and an advanced analytics dashboard with risk assessment capabilities. Key features include: Admin dashboard for complete student management, student self-registration and personal dashboard, real-time analytics and performance tracking, risk detection algorithms with configurable thresholds, data export functionality (CSV/Excel), responsive design with modern UI/UX, and secure session management with password hashing. The application uses SQLite database with automatic initialization and includes comprehensive testing."

};

const stack = [

"Python", "Flask", "SQLite", "HTML", "CSS", "JavaScript", "Pandas", "OpenPyXL"

];

// Stock Management

const project = {

type: "Full-Stack",

year: 2025,

description: "A full-featured stock management application designed to streamline inventory control and business operations. The system provides real-time tracking of product quantities, automated stock level alerts, comprehensive transaction history, and detailed reporting capabilities. Built with Django framework, it includes user authentication, dashboard analytics, supplier management, client tracking, and automated inventory updates. The application helps businesses maintain optimal stock levels, track sales performance, manage supplier relationships, and generate insightful reports for better decision-making."

};

const stack = [

"Django", "Python", "SQLite", "Bootstrap", "JavaScript", "HTML", "CSS", "Crispy Forms"

];

// UEFA Champions League Tracker

const project = {

type: "Full-Stack",

year: 2026,

description: "Real-time UEFA Champions League tracker — follow every match of the 2025/26 season, check live scores, explore results by stage, and dive into the full history of UCL winners since 1956."

};

const stack = [

"Next.js 14", "TypeScript", "Tailwind CSS", "Framer Motion", "SWR", "football-data.org API"

];

// Real Madrid Store App

const project = {

type: "Mobile",

year: 2026,

description: "The Real Madrid Store App is an unofficial, high-quality Android application dedicated to the most successful football club in history. Built with modern Android technologies, it offers fans a complete shopping experience for the 2025/26 season jerseys, training gear, and official merchandise. Key Features: Browse the full Real Madrid 2025/26 collection with beautiful product images, AI Chatbot powered locally by DeepSeek-R1:8b via Ollama (100% offline & free), Camera integration, Store Locator using Google Maps, Near Me feature, Cart, Checkout & Wishlist with persistent sessions, and stunning dark UI in Real Madrid Navy, White & Gold colors."

};

const stack = [

"Kotlin", "Jetpack Compose", "Android", "MVVM", "Retrofit", "Ollama", "DeepSeek", "Google Maps"

];

// Hsabi

const project = {

type: "Full-Stack",

year: 2026,

description: "Hsabi is a modern, intuitive, and high-performance Stock Management SaaS designed for small to medium businesses. It provides a seamless experience for tracking inventory, managing stock levels, and showcasing products through a public storefront. Key Features: Secure Authentication with JWT, Product Management (CRUD + stock tracking), Stock Movements with detailed history, Low Stock Alerts & Smart Analytics, Public Storefront for sharing product catalog, CSV Export for inventory reports, and Fully Responsive (Desktop + Mobile)."

};

const stack = [

"React", "Vite", "Tailwind CSS", "Node.js", "Express", "Prisma", "PostgreSQL", "JWT"

];

// DrawCalc

const project = {

type: "Full-Stack",

year: 2026,

description: "DrawCalc is a handwriting calculator that uses Google Gemini AI to recognize math expressions drawn on a canvas with your mouse. No keyboard needed — just draw something like 15 + 5 and get the answer instantly. Built with Next.js 14, TypeScript, and Tailwind CSS with a clean minimal design and dark mode support."

};

const stack = [

"Next.js", "TypeScript", "Tailwind CSS", "Google Gemini AI"

];

// Portfolio

const project = {

type: "Full-Stack",

year: 2026,

description: "My personal portfolio website built with Next.js and Tailwind CSS. Featuring animated backgrounds, browser mockup project cards, GSAP scroll effects, and a VS Code-inspired design. Showcasing my projects, skills, and experience as a full-stack developer. This project demonstrates my expertise in modern web development, from responsive design to interactive animations, creating a unique and engaging user experience that reflects my technical skills and creative vision."

};

const stack = [

"Next.js", "Tailwind CSS", "TypeScript", "Framer Motion"

];

// AutoLoc

const project = {

type: "Full-Stack",

year: 2026,

description: "Premium car rental platform for Morocco — online reservation system with a full admin dashboard, agent management, and real-time fleet tracking. Features a beautiful landing page, vehicle catalog with advanced filters, 5-step reservation flow with real-time availability check, PDF invoice generation, and role-based access for clients, agents, and admins."

};

const stack = [

"Next.js 19", "React 19", "TypeScript", "Tailwind CSS 4", "shadcn/ui", "Prisma 7", "Neon PostgreSQL", "Framer Motion", "Recharts", "jsPDF"

];