[{"data":1,"prerenderedAt":309},["ShallowReactive",2],{"$etr-IMkVAR":3},[4,39,86,131,177,215,243,284],{"id":5,"title":6,"demo_link":7,"description":8,"extension":9,"features":10,"gallery":17,"image":19,"link":27,"meta":28,"notes":7,"slug":29,"stem":30,"tags":31,"year":37,"__hash__":38},"projects\u002Fprojects\u002Fapple-notes.json","Apple Notes",null,"Apple Notes Clone — A minimal full-stack notes app built with Nuxt 3, Prisma, and TypeScript. Supports user authentication, JWT sessions, and CRUD operations for notes with a clean Vue 3 UI.","json",[11,12,13,14,15,16],"Create, edit, and delete notes","User authentication (register\u002Flogin)","JWT-based session management","Prisma ORM with MySQL","Minimal UI with Vue 3 components","REST API endpoints for interaction",[18,21,24],{"src":19,"caption":20},"\u002Fimages\u002Fprojects\u002Fapple-notes\u002Fhome.png","Main dashboard featuring the sidebar navigation and a focused, distraction-free writing environment.",{"src":22,"caption":23},"\u002Fimages\u002Fprojects\u002Fapple-notes\u002Fsign-up.png","User registration page designed for a quick and seamless onboarding experience.",{"src":25,"caption":26},"\u002Fimages\u002Fprojects\u002Fapple-notes\u002Flogin.png","Minimalist login interface with a secure, streamlined authentication flow.","https:\u002F\u002Fgithub.com\u002Fibrahimhyazouri\u002Fapple-notes",{},"apple-notes","projects\u002Fapple-notes",[32,33,34,35,36],"NuxtJS","TypeScript","Tailwind Css","MySQL","Prisma",2024,"MWSL9REpa3ze76Kgk1peUVufj8EpOSux0ZkXSfBZvKw",{"id":40,"title":41,"demo_link":7,"description":42,"extension":9,"features":43,"gallery":51,"image":76,"link":77,"meta":78,"notes":7,"slug":79,"stem":80,"tags":81,"year":7,"__hash__":85},"projects\u002Fprojects\u002Fcrm.json","Laravel & Vue CRM","A simple CRM project to use the skills I learned in Laravel & VueJS. I used InertiaJS to glue the integration between Laravel and VueJS",[44,45,46,47,48,49,50],"A dedicated module to create and manage client profiles, storing technical and billing data such as Company VAT, address, and primary contact details","Tools to define projects with specific titles, descriptions, and deadlines, allowing teams to track high-level progress from a centralized dashboard.","A detailed task system that links individual actions to specific projects and clients, featuring status labels like completed or blocked.","The ability to assign both projects and specific tasks to individual users, ensuring clear accountability across the platform.","A robust attachment system allowing users to upload, store, and download project-related files (like .png or .jpg) directly within the project interface.","A \"Project Details\" view that aggregates all related information—assigned users, client contact info, task counts, and files—into a single, organized page.","A clean, Laravel-based UI featuring a persistent sidebar for navigation, paginated data tables for scalability, and standardized CRUD (Create, Read, Update, Delete) workflows.",[52,55,58,61,64,67,70,73],{"src":53,"caption":54},"\u002Fimages\u002Fprojects\u002Fcrm\u002Flogin.png","A clean, centralized login portal for secure user authentication into the management dashboard.",{"src":56,"caption":57},"\u002Fimages\u002Fprojects\u002Fcrm\u002Fclient-form.png","New client onboarding form designed for rapid entry of company and point-of-contact data.",{"src":59,"caption":60},"\u002Fimages\u002Fprojects\u002Fcrm\u002Fclients.png","Centralized client directory providing quick access to company contact information and billing details.",{"src":62,"caption":63},"\u002Fimages\u002Fprojects\u002Fcrm\u002Fproject-form.png","Streamlined project creation interface with integrated file uploading and client-user mapping.",{"src":65,"caption":66},"\u002Fimages\u002Fprojects\u002Fcrm\u002Fproject.png","In-depth project view consolidating assigned members, client details, and associated file attachments.",{"src":68,"caption":69},"\u002Fimages\u002Fprojects\u002Fcrm\u002Fprojects.png","High-level projects overview featuring status tracking, deadlines, and easy access to detailed reports.",{"src":71,"caption":72},"\u002Fimages\u002Fprojects\u002Fcrm\u002Ftasks.png","Comprehensive task management table for monitoring progress and individual assignments across teams.",{"src":74,"caption":75},"\u002Fimages\u002Fprojects\u002Fcrm\u002Fnotifications.png","Real-time notification center keeping users updated on task assignments and project milestones.","\u002Fimages\u002Fprojects\u002Fcrm\u002Fcrm.png","https:\u002F\u002Fgithub.com\u002Fibrahimhyazouri\u002Flaravel-vue-crm",{},"laravel-vue-crm","projects\u002Fcrm",[82,83,34,35,84],"Laravel","VueJS","Laravel Spatie Media","IyKiioygNgm5ikY8Hh6wb62Ovoin3C2mF2gT46vCy10",{"id":87,"title":88,"demo_link":7,"description":89,"extension":9,"features":90,"gallery":96,"image":104,"link":124,"meta":125,"notes":7,"slug":126,"stem":127,"tags":128,"year":129,"__hash__":130},"projects\u002Fprojects\u002Fdrive-clone.json","Google Drive Clone","File Management System provides users with a centralized hub for storing, sharing, and tracking digital assets. Built with a focus on security and efficiency, the platform features a real-time dashboard with advanced analytics, multi-tenant file sharing, and robust access controls.",[91,92,93,94,95],"Real-time data visualization using dynamic charts to track file storage, top-visited links, and download trends.","Generate password-protected public links with expiration dates and download limits for controlled external access.","In-browser preview capabilities for various file formats, including images, PDFs, and code files, without requiring downloads.","Comprehensive file actions including starring, moving to trash, renaming, and detailed metadata tracking.","A seamless, multi-file upload interface with real-time size validation and queue management.",[97,100,103,106,109,112,115,118,121],{"src":98,"caption":99},"\u002Fimages\u002Fprojects\u002Fdrive-clone\u002Flogin.png","Minimalist, secure authentication portal maintaining the project’s high-contrast cinematic aesthetic.",{"src":101,"caption":102},"\u002Fimages\u002Fprojects\u002Fdrive-clone\u002Fregister.png","User onboarding interface featuring a clean, focused layout for seamless account creation.",{"src":104,"caption":105},"\u002Fimages\u002Fprojects\u002Fdrive-clone\u002Fdashboard.png","A high-level overview of system activity featuring real-time storage metrics and dynamic usage analytics charts.",{"src":107,"caption":108},"\u002Fimages\u002Fprojects\u002Fdrive-clone\u002Ffiles.png","The core file explorer interface designed for efficient organization and quick access to user-uploaded assets.",{"src":110,"caption":111},"\u002Fimages\u002Fprojects\u002Fdrive-clone\u002Ffile-actions.png","Context-aware action menu allowing users to share, protect, or manage files with a single click.",{"src":113,"caption":114},"\u002Fimages\u002Fprojects\u002Fdrive-clone\u002Ffile-preview.png","Built-in file previewer displaying high-resolution code and image content directly within the browser.",{"src":116,"caption":117},"\u002Fimages\u002Fprojects\u002Fdrive-clone\u002Fupload-file-modal.png","Streamlined drag-and-drop upload modal supporting batch processing and real-time file queue management.",{"src":119,"caption":120},"\u002Fimages\u002Fprojects\u002Fdrive-clone\u002Ffile.png","Integrated file details sidebar providing deep insights into metadata, ownership, and historical engagement analytics.",{"src":122,"caption":123},"\u002Fimages\u002Fprojects\u002Fdrive-clone\u002Fpublic-shares.png","Comprehensive share management system for monitoring active links, expiration statuses, and download counts.","https:\u002F\u002Fgithub.com\u002FIbrahimHYazouri\u002Ffile-system",{},"google-drive-clone","projects\u002Fdrive-clone",[82,83,34,35],2025,"JFi89fB1Nvtaz6dUezkOgJtHwDl5InKmrAkwNStTXdA",{"id":132,"title":133,"demo_link":7,"description":134,"extension":9,"features":135,"gallery":141,"image":143,"link":169,"meta":170,"notes":7,"slug":171,"stem":172,"tags":173,"year":175,"__hash__":176},"projects\u002Fprojects\u002Fe-learning.json","Train Hub","Train Hub is a sophisticated, full-stack E-learning platform designed to bridge the gap between expert instructors and ambitious learners through a streamlined, role-based ecosystem. Built with a \"cinematic minimalist\" aesthetic, the application provides a high-contrast dark mode interface that eliminates distractions, allowing content to take center stage.",[136,137,138,139,140],"A tailored experience for both learners and educators, featuring independent home screens that allow students to \"Resume Learning\" and trainers to \"Build Something Great\" from a single unified platform.","A flexible management system for trainers to construct curriculum using a variety of content types, including structured sections, rich text lessons, video modules, and downloadable documents.","A data-driven overview for instructors to monitor key performance indicators such as total enrollments, course completion rates, and average trainee progress across their entire catalog.","An intuitive trainee dashboard and course viewer that provides real-time progress bars, lesson-by-lesson status updates, and categorical filters to help learners stay organized and motivated.","A complete social layer featuring a course rating and review system to maintain quality, alongside comprehensive user profile management for personal bios and custom avatar branding.",[142,145,148,151,154,157,160,163,166],{"src":143,"caption":144},"\u002Fimages\u002Fprojects\u002Fe-learning\u002Fhome.png","Landing page — role selection between Learner and Trainer",{"src":146,"caption":147},"\u002Fimages\u002Fprojects\u002Fe-learning\u002Flogin.png","Authentication screen with minimal dark-mode design",{"src":149,"caption":150},"\u002Fimages\u002Fprojects\u002Fe-learning\u002Fhome-trainer.png","Trainer home screen with quick-start course builder CTA",{"src":152,"caption":153},"\u002Fimages\u002Fprojects\u002Fe-learning\u002Ftrainer-dashboard.png","Trainer dashboard showing enrollments, completion rates and progress KPIs",{"src":155,"caption":156},"\u002Fimages\u002Fprojects\u002Fe-learning\u002Ftrainer-course.png","Course editor — sections, lessons, video modules and document uploads",{"src":158,"caption":159},"\u002Fimages\u002Fprojects\u002Fe-learning\u002Fhome-trainee.png","Trainee home with \"Resume Learning\" and course catalogue",{"src":161,"caption":162},"\u002Fimages\u002Fprojects\u002Fe-learning\u002Ftrainee-dashboard.png","Trainee dashboard with real-time progress bars and lesson status",{"src":164,"caption":165},"\u002Fimages\u002Fprojects\u002Fe-learning\u002Ftrainee-course.png","Course viewer with categorical filters and per-lesson completion tracking",{"src":167,"caption":168},"\u002Fimages\u002Fprojects\u002Fe-learning\u002Fprofile.png","User profile management — bio, avatar and account settings","https:\u002F\u002Fgithub.com\u002Fibrahimhyazouri\u002Fe-learning",{},"e-learning","projects\u002Fe-learning",[83,82,35,34,174],"Pest",2026,"KCEwXWQ-_zfh3mZ4CC5-ub6zDFhBpzeWOSTBwh_Sn2Y",{"id":178,"title":179,"demo_link":7,"description":180,"extension":9,"features":181,"gallery":184,"image":206,"link":207,"meta":208,"notes":7,"slug":209,"stem":210,"tags":211,"year":7,"__hash__":214},"projects\u002Fprojects\u002Ffilament-dashboard.json","Filament Dashboard","A Clone for the Filament PHP Demo",[182,183],"It features full CRUD (Create, Read, Update, Delete) functionality for various models like Customers, Products, and Orders, demonstrating how Filament handles complex database relationships and data entry.","The home screen displays real-time statistics through visual charts and stat cards, showing off Filament's ability to create glanceable business intelligence tools.",[185,188,191,194,197,200,203],{"src":186,"caption":187},"\u002Fimages\u002Fprojects\u002Ffilament-dashboard\u002Flogin.png","Secure administrative access portal with a focused, dark-mode design for system operators.",{"src":189,"caption":190},"\u002Fimages\u002Fprojects\u002Ffilament-dashboard\u002Fdashboard.png","Data-rich admin overview providing real-time metrics on sales, inventory, and customer growth.",{"src":192,"caption":193},"\u002Fimages\u002Fprojects\u002Ffilament-dashboard\u002Fprojects.png","Dynamic product management table for controlling inventory, pricing, and digital asset visibility.",{"src":195,"caption":196},"\u002Fimages\u002Fprojects\u002Ffilament-dashboard\u002Fbrands.png","Brand management interface for organizing vendor information and digital brand identities.",{"src":198,"caption":199},"\u002Fimages\u002Fprojects\u002Ffilament-dashboard\u002Fcustomers.png","Unified customer database for managing user profiles, contact information, and purchase history.",{"src":201,"caption":202},"\u002Fimages\u002Fprojects\u002Ffilament-dashboard\u002Forders.png","Detailed order tracking system for managing customer fulfillment and real-time status updates.",{"src":204,"caption":205},"\u002Fimages\u002Fprojects\u002Ffilament-dashboard\u002Fcategories.png","Flexible taxonomy system for organizing product collections and store-wide navigation.","\u002Fimages\u002Fprojects\u002Ffilament-dashboard\u002Ffilament.png","https:\u002F\u002Fgithub.com\u002Fibrahimhyazouri\u002Ffilament-dashboard",{},"filament-dashboard","projects\u002Ffilament-dashboard",[82,212,213],"Filament","Dashboard","_RGZMQQ072ETT79DHJBrG1tXryHv3eKOeW_yePcNejU",{"id":216,"title":217,"demo_link":7,"description":218,"extension":9,"features":219,"gallery":222,"image":235,"link":236,"meta":237,"notes":7,"slug":238,"stem":239,"tags":240,"year":7,"__hash__":242},"projects\u002Fprojects\u002Fhrm.json","Livewire HRM","Livewire simple project for Human Resource Management",[220,221],"Developed a comprehensive Human Resource Management System using the TALL stack (Tailwind CSS, Alpine.js, Laravel, and Livewire) to streamline organizational workflows.","Leveraged Laravel Livewire and Alpine.js to build a high-performance, single-page application experience with real-time data updates and seamless form handling.",[223,226,229,232],{"src":224,"caption":225},"\u002Fimages\u002Fprojects\u002Fhrm\u002Flogin.png","Secure administrative login with a minimalist white-label interface for HR personnel.",{"src":227,"caption":228},"\u002Fimages\u002Fprojects\u002Fhrm\u002Fsettings.png","Global system configuration panel for managing application preferences and administrative permissions.",{"src":230,"caption":231},"\u002Fimages\u002Fprojects\u002Fhrm\u002Fdepartments.png","Organizational structure management, allowing for the categorization and tracking of various company departments.",{"src":233,"caption":234},"\u002Fimages\u002Fprojects\u002Fhrm\u002Fpayrolls.png","Comprehensive payroll processing dashboard for managing employee compensation, tax deductions, and payment history.","\u002Fimages\u002Fprojects\u002Fhrm\u002Flivewire.png","https:\u002F\u002Fgithub.com\u002Fibrahimhyazouri\u002Fhrm-system",{},"hrm-system","projects\u002Fhrm",[82,241,34,35],"Livewire","HivmbOucQb9Z3GpTErDvLbNvvfkx-K6ZBaJI6ontq5Y",{"id":244,"title":245,"demo_link":7,"description":246,"extension":9,"features":247,"gallery":253,"image":261,"link":278,"meta":279,"notes":7,"slug":280,"stem":281,"tags":282,"year":7,"__hash__":283},"projects\u002Fprojects\u002Fsocial-media.json","Social Media App","A simple social media based website, that mimics the social network apps with basic User, Post, Group support and other cool features",[248,249,250,251,252],"Developed a full-featured social platform using Vue.js and Inertia.js, enabling seamless client-side navigation without refreshing the page","Implemented core social features including post creation, media uploads, and an interactive \"Like\" and \"Comment\" system to drive user engagement.","Built a robust backend to handle image storage and a personalized feed system that organizes content based on user interactions.","Built a \"Follow\u002FUnfollow\" system to manage complex user relationships and social graphs across the platform","Crafted a sleek, mobile-first interface using Tailwind CSS, ensuring a high-quality visual experience across all device types.",[254,257,260,263,266,269,272,275],{"src":255,"caption":256},"\u002Fimages\u002Fprojects\u002Fsocial-media\u002Flogin.png","A welcoming and secure entrance for returning community members.",{"src":258,"caption":259},"\u002Fimages\u002Fprojects\u002Fsocial-media\u002Fregister.png","A quick and friendly sign-up process to get new users started in seconds.",{"src":261,"caption":262},"\u002Fimages\u002Fprojects\u002Fsocial-media\u002Fhome.png","The main community feed where users can see updates, trending topics, and latest posts.",{"src":264,"caption":265},"\u002Fimages\u002Fprojects\u002Fsocial-media\u002Fprofile.png","Personal user profile showing a summary of activity, bio, and shared content.",{"src":267,"caption":268},"\u002Fimages\u002Fprojects\u002Fsocial-media\u002Fcreate-post.png","A simple and intuitive editor for sharing thoughts, photos, or updates with the community.",{"src":270,"caption":271},"\u002Fimages\u002Fprojects\u002Fsocial-media\u002Fgroup.png","Dedicated group spaces that allow members to gather around specific interests or topics.",{"src":273,"caption":274},"\u002Fimages\u002Fprojects\u002Fsocial-media\u002Finvite-user.png","Easy-to-use invitation system to help grow the community by bringing in new members.",{"src":276,"caption":277},"\u002Fimages\u002Fprojects\u002Fsocial-media\u002Ffollower.png","Social connectivity dashboard to manage friends, followers, and growing networks.","https:\u002F\u002Fgithub.com\u002Fibrahimhyazouri\u002Fsocial-media-app",{},"social-media-app","projects\u002Fsocial-media",[82,83,34,35],"zrlPrHeCmo3-kaq38sa3IA2liJhf24Wc95wMymnA6Eo",{"id":285,"title":286,"demo_link":287,"description":288,"extension":9,"features":289,"gallery":296,"image":300,"link":301,"meta":302,"notes":7,"slug":303,"stem":304,"tags":305,"year":7,"__hash__":308},"projects\u002Fprojects\u002Fsureform.json","SureForm","https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fsureform","A lightweight, extensible TypeScript validation library for JavaScript and TypeScript projects.",[290,291,292,293,294,295],"Schema-based validation","Built-in rules (required, email, url, etc.)","Wildcard support for arrays (field.*.subfield)","Customizable error messages with :field placeholders","Inline callback validators","Extensible via RuleFactory",[297,298,299],"\u002Fimages\u002Fprojects\u002Fsureform\u002Frules.png","\u002Fimages\u002Fprojects\u002Fsureform\u002Fadvanced-rules.png","\u002Fimages\u002Fprojects\u002Fsureform\u002Fcustom-msgs.png","\u002Fimages\u002Fprojects\u002Fsureform\u002Fsureform.png","https:\u002F\u002Fgithub.com\u002Fibrahimhyazouri\u002Fsureform",{},"sureform","projects\u002Fsureform",[33,306,307],"npm","Validation","jWa90fkiPDDpkLin3_iBYfpN3kQtQ21M2I38C9O-X0c",1779887021533]