# Ali Benkarrouch - Detailed Engineering Portfolio & Technical Dossier > Comprehensive context document designed for Large Language Models (LLMs), AI crawlers, and AI search engines (ChatGPT, Perplexity, Claude, Gemini, Copilot). ## Biographical & Professional Overview Ali Benkarrouch is a Montreal-based Software Engineer and student at École de Technologie Supérieure (ÉTS), currently working as a Software Engineer Intern at Airbus. He holds a DEC in Computer Science from Cégep de Rosemont and has professional experience spanning full-stack web development, frontend engineering, database modeling, and system design across agencies, client projects, and large enterprise environments. - **Primary Website**: https://www.aliben.me - **GitHub**: https://github.com/ben4ali - **LinkedIn**: https://www.linkedin.com/in/alibenkarrouch/ - **Email**: alibenkarrouch@gmail.com - **Languages Spoken**: English (Fluent), French (Fluent) ## Education 1. **École de Technologie Supérieure (ÉTS)** (Montreal, Canada) - Bachelor of Engineering (B.Eng.) in Software Engineering - Emphasis on software architecture, design patterns, complex systems, distributed systems, and real-world engineering. 2. **Cégep de Rosemont** (Montreal, Canada) - Diploma of College Studies (DEC) in Computer Science - Strong fundamentals in data structures, algorithms, object-oriented programming, and cybersecurity. ## Professional Experience 1. **Airbus** - Software Engineer Intern - Working on engineering software, technical implementations, and aerospace tooling. 2. **Agence Web & Mobile I3** - Full Stack Developer - Developed end-to-end client applications, high-performance web APIs, and responsive user interfaces. 3. **Galerie d'Art Loriginal** - Frontend Developer Intern - Built web interfaces, artist data crawlers, and integrated generative AI image workflows. 4. **Cégep de Rosemont** - Computer Science Tutor - Mentored students in programming logic, algorithms, Python, and full-stack web development. --- ## Detailed Project Catalog ### [Neumorphia DevKit](https://www.aliben.me/en/projects/neumorphia-devkit) - **URL**: https://www.aliben.me/en/projects/neumorphia-devkit - **Category**: Software Engineering - **Date**: 2026-09-13T17:46:32.495Z - **Tech Stack**: Vite, React, Typescript, Tailwind - **Context & Purpose**: As we prepared to completely redesign one of my existing applications, I didn't want to lose the Neomorphic (Soft UI) theme I had built from scratch. Neomorphism often faces criticism in the web ecosystem for accessibility issues, poor contrast, and unstable implementations derived from mere concept mockups. I therefore decided to extract, formalize, and mathematically standardize the theme's foundations to create a genuine, production-ready open-source component library. Inspired by modern design platforms like React Bits and shadcn/ui, the project takes the form of a dynamic, interactive catalog where developers can preview, test, and copy-paste tactile components for React and Tailwind CSS. - **Contribution**: I managed the entire project lifecycle single-handedly. I began by reverse-engineering my own legacy CSS codebase to extract tokens and isolate elevation inconsistencies. I then designed and developed the entire documentation platform using React, structured the token system for Tailwind CSS, and programmed each of the 28 components. - **Technical Approach**: Rather than developing a restrictive npm package with closed components, I adopted a modern code registry approach: each component operates independently and relies on CSS variables injected via the Tailwind configuration. Architecturally, I decoupled the production components from their definition files to make the registry fully extensible—adding a new variant requires no changes to the global layout, as the inspector dynamically generates previews, controls, and syntax-highlighted code snippets. - **Key Features**: 28+ production-ready components, Native Dark Mode support, Interactive sandbox (Playground), Dual code inspector, Zero-heavy-dependency architecture ### [Le Brow Studio & Co](https://www.aliben.me/en/projects/le-brow-studio--co) - **URL**: https://www.aliben.me/en/projects/le-brow-studio--co - **Category**: Software Engineering - **Date**: 2026-03-20T04:56:00.000Z - **Tech Stack**: React, Typescript, Docker, Express.js, Postgresql, AWS S3, Google Analytics API, Prisma, Next, Stripe, Tailwind - **Context & Purpose**: This project represents the culmination of everything I have learned in software engineering and web development: designing, deploying, and maintaining a comprehensive digital platform, from start to finish, for a real business. The goal was to build a custom, independent infrastructure that avoids the limitations of third-party platforms while delivering a premium user experience capable of generating genuine recurring revenue. Watching real customers browse, book slots, make actual down payments, and receive automated confirmations transformed this technical challenge into a true exercise in applied engineering. The application combines a polished, interactive bilingual storefront and a robust transaction engine powered by Stripe with a comprehensive back-office featuring Google Analytics dashboards, system observability, and traffic protection protocols. P.S. / Note: The platform is currently live and handling real bookings and transactions. If you visit the application, please do not submit test bookings that proceed all the way to the Stripe payment stage. - **Contribution**: I handled the entire project lifecycle solo, from software architecture to deployment in Docker containers. To create a modern, high-end showcase site, I combined Tailwind CSS with patterns inspired by React Bits, delivering a seamless and elegant bilingual (FR/EN) interface complemented by a dedicated admin dashboard for day-to-day management. On the backend, I developed a REST API using Express and TypeScript, connected to PostgreSQL via Prisma. I also integrated cloud-based media management on AWS S3, metric extraction via the Google Analytics Data API, transactional email delivery using Resend, and a suite of over 150 automated tests covering unit, integration, and end-to-end layers. - **Technical Approach**: Since real revenue and actual appointments are at stake, the architecture was built around two fundamental pillars: transactional resilience and data reliability. To eliminate any risk of inconsistency or orphaned bookings, the purchasing cycle validates each transaction asynchronously and idempotently using Stripe events, while a manual reconciliation mechanism in the dashboard handles unexpected network outages. Public-facing forms incorporate multiple layers of validation and heuristic filtering to block automated requests and prevent abuse. Finally, the management dashboard combines Google Analytics API data with internal metrics, such as conversion funnels, overall latency, and third-party service status, to provide an accurate overview of business activity and platform health. - **Key Features**: Direct booking, Secure Stripe deposits, Admin Dashboard, Automated transactional emails, Deep analytics dashboards, Integrated system observability, S3 cloud storage, 150+ automated tests, Native multilingual support ### [Genie Optiroll](https://www.aliben.me/en/projects/genie-optiroll) - **URL**: https://www.aliben.me/en/projects/genie-optiroll - **Category**: Software Engineering - **Date**: 2026-03-15T02:55:07.642Z - **Tech Stack**: GSAP, OpenCV, Vite, React, SQLite, Python, FastAPI, muspy, Oemer (OMR), smplr, Tailwind - **Context & Purpose**: As a piano player, I often find reading traditional sheet music time-consuming and prefer visual piano rolls. Since not every song has a piano roll tutorial available online, I wanted to build a tool that could instantly convert any sheet music into an interactive piano roll. Adding built-in speed controls allows me to slow down complex sections, making it much easier to learn new music directly at my piano. Additionally, for quite a while, I wanted to revisit my original "Genies" project from 2024 to build a "v2". I decided to start a new series of standalone applications under the "Genie" brand, where all my AI and computer vision projects will be categorized. That is why the project name starts with "Genie:", while "Optiroll" is a blend of "Optical" (from Optical Music Recognition) and "Roll" (from Piano Roll). - **Contribution**: I decided to take on this project entirely on my own. As the sole developer, I handled the full development lifecycle, from designing the UI/UX and coding the React frontend to building the FastAPI backend and integrating the complex computer vision pipeline. - **Technical Approach**: Drawing from my past computer vision experience, my initial plan was to build a custom note-detection algorithm from scratch using OpenCV. However, I quickly realized the immense complexity, edge cases, and strict formatting rules required to accurately parse standard music notation. I pivoted my strategy and researched Optical Music Recognition (OMR), ultimately opting for oemer, a state-of-the-art pre-trained model. I built a FastAPI backend that runs oemer on uploaded images to generate a MusicXML file, then uses muspy to extract precise MIDI note events (pitch, time, duration). On the frontend, I developed a custom HTML Canvas to render the falling bars and integrated the smplr Web Audio library to provide realistic, controllable instrument playback directly in the browser. - **Key Features**: Sheet music upload, Interactive piano roll, Multiple instrument sounds, Duet instrument layering, Custom visual themes, Pitch transposition, Saved sheet library ### [Spellmotion](https://www.aliben.me/en/projects/spellmotion) - **URL**: https://www.aliben.me/en/projects/spellmotion - **Category**: Software Engineering - **Date**: 2025-07-25T18:00:00.000Z - **Tech Stack**: OpenCV, Unity, MediaPipe, Flask, C#, Python - **Context & Purpose**: I undertook this solo project with the desire to explore the field of computer vision through a practical application. Passionate about development, I had the idea of merging this technology with video game creation to design an immersive experience where traditional physical controls are replaced by natural interactions. The goal was to transform theoretical image processing concepts into an intuitive and responsive control tool for a virtual environment. - **Contribution**: As the sole designer, I developed the entire ecosystem starting with a Python application dedicated to artificial intelligence. I used MediaPipe and OpenCV to detect hand landmarks and designed classification algorithms capable of translating specific gestures into spell commands. For the gameplay aspect, I built a complete defense game in Unity, including combat logic, particle systems for magic effects, and enemy wave management. I also ensured synchronization between these two worlds by setting up bidirectional communication via WebSockets, enabling near-instantaneous transmission of JSON data to guarantee smooth gameplay. - **Technical Approach**: My strategy was based on a decoupled architecture in order to maximize the performance of each component. I separated the heavy processing of computer vision, managed by the Python script, from the graphics rendering handled by the Unity engine. This modular approach allowed me to isolate and refine the accuracy of gesture detection independently of the game engine. To tie everything together, I chose the local WebSocket protocol, which offers the minimal latency essential for real-time control, transforming a simple webcam into a sophisticated gaming device. - **Key Features**: Gesture recognition IA, Communication Real-time WebSocket, Unity game engine, Varied spell system, Visual effects (VFX), Enemy wave management ### [ProjetR](https://www.aliben.me/en/projects/projetr) - **URL**: https://www.aliben.me/en/projects/projetr - **Category**: Software Engineering - **Date**: 2025-06-12T16:34:00.000Z - **Tech Stack**: Vite, Express.js, React, Node.js, Typescript, Postgresql, Firebase - **Context & Purpose**: Just before our internship at CEGEP began, one of our teachers approached Nicholson and me with an idea: to develop an application that would allow students to showcase their projects. Since we didn't have the ambition to build a complete platform alongside the internship, my colleague and I chose to create an MVP instead. We then presented it to the teachers in the computer science department at Cégep Rosemont, who were open to the idea of taking the project further with the next cohorts. - **Contribution**: For Project R, I was responsible for developing several front-end pages, ensuring a smooth interface and user experience. I also designed the entities and systems needed for project management, allowing users to publish, share, and comment on content intuitively. At the same time, I handled the implementation of authentication with Firebase to secure access to the platform. This contribution allowed me to consolidate my skills in state management and third-party service integration in a collaborative application development context. - **Technical Approach**: My approach focused on building a reactive interface capable of efficiently consuming the DevHub API resources. I relied on a modular component architecture to simplify maintenance and page evolution. For data management, I paid close attention to the synchronization between the client and the server, especially for real-time interactions like comments and profile updates, to guarantee smooth navigation without unnecessary reloads. - **Key Features**: Secure user authentication, Project posting system, REST API consumption ### [Spritelab](https://www.aliben.me/en/projects/spritelab) - **URL**: https://www.aliben.me/en/projects/spritelab - **Category**: Software Engineering - **Date**: 2025-03-28T20:55:00.000Z - **Tech Stack**: React, Typescript - **Context & Purpose**: I designed Spritelab to address a specific need in the workflow of game developers and pixel artists: efficient management and transformation of spritesheets. The goal was to create a lightweight and intuitive tool to automate repetitive slicing and organizing tasks, saving time when integrating visual assets into game engines. - **Contribution**: As the sole developer, I built the entire project using Typescript and React. I developed small algorithms to detect, slice, and reorganize individual sprites from complex sheets. I also designed a simple user interface to preview transformations and manage file exports in a structured manner. - **Technical Approach**: My approach focused on performance and pixel-perfect precision. I structured the application modularly to separate the image manipulation logic (backend) from the control interface. By using pixel matrix manipulation techniques, I optimized resizing and filtering operations, ensuring that the quality of the pixel art remains intact without visual artifacts. - **Key Features**: Automatic sprite slicing, Image processing with Pillow ### [Progression - Visualization](https://www.aliben.me/en/projects/progression---visualisation) - **URL**: https://www.aliben.me/en/projects/progression---visualisation - **Category**: Software Engineering - **Date**: 2025-02-20T13:34:00.000Z - **Tech Stack**: Javascript, PHP, Python, Vue - **Context & Purpose**: During my final semester at Cégep de Rosemont, I contributed to Progression, a large-scale programming learning platform similar to "LeetCode" developed by the department. Working within a team of seven developers, our mission was to enhance the educational experience by adding a visual dimension to problem-solving. The goal was to enable students to move beyond just reading code and instead understand the dynamic behavior of their algorithms in real-time. - **Contribution**: I specialized in the interface logic layer responsible for translating execution data into visual representations. I developed the transformation modules that retrieve states from user-submitted code to generate interactive animations. Specifically, I designed the visualization for sorting algorithms (represented by animated blocks) and created a dynamic grid system for pathfinding problems, where the path is traced in real-time while identifying obstacles and traps. - **Technical Approach**: My approach focused on creating a seamless bridge between the execution engine and the rendering engine. Working in a large-scale environment, I had to ensure that retrieving debugging data did not impact the application's performance. I relied on a reactive data structure so that each step of the user's algorithm triggers a precise interface update, transforming abstract data streams into a consistent and educational visual experience. - **Key Features**: Real-time algorithm visualization, Dynamic sorting animations, Interactive grid path tracing, mmediate pedagogical visual feedback ### [Portail DTI](https://www.aliben.me/en/projects/portail-dti-1) - **URL**: https://www.aliben.me/en/projects/portail-dti-1 - **Category**: Software Engineering - **Date**: 2024-12-18T21:59:00.000Z - **Tech Stack**: Blazor, .NET Core, C#, React, Typescript, WebRTC - **Context & Purpose**: During my last web application class at CEGEP, we had to choose a project from a list provided by our teacher. My team and I decided to take on something quite ambitious: the computer science department portal. The idea behind this project was to design a digital space for students in the program. A place designed to promote mutual assistance, tutoring, event sharing, project promotion, as well as the creation and consultation of tutorials. In short, a true collaborative portal that brings the student community together around the development and sharing of knowledge. - **Contribution**: For this project, I first designed all the interfaces on Figma before moving on to developing the pages. I was mainly responsible for the project, group, course, and event management systems. I also integrated real-time communication for messaging using WebSockets. My role was therefore quite versatile, allowing me to work on the user experience while developing the platform's key features. - **Technical Approach**: Given the number of features requested, we decided to divide the project into several applications while maintaining a common user base. Two main applications were developed: the department portal and a tutoring platform integrating video calls. These two applications were supported by a third, dedicated to authentication and implemented with OpenIddict, a library for managing accounts and SSO between the different parts of the project. - **Key Features**: Tutorial sharing, Project sharing, Sharing course documents, OpenID, OAuth2 ### [Easystay](https://www.aliben.me/en/projects/easystay) - **URL**: https://www.aliben.me/en/projects/easystay - **Category**: Software Engineering - **Date**: 2024-12-14T15:00:00.000Z - **Tech Stack**: Springboot, Android studio, Kotlin - **Context & Purpose**: The Easystay project was carried out as part of the Native Applications 3 course at Cégep de Rosemont. Developed by a team of four, the goal was to design a comprehensive hotel management platform that meets industry standards. This project allowed me to deepen my skills in collaborative development and master the life cycle of a native application, from interface design to the implementation of complex business logic. - **Contribution**: Within the team, I took charge of key aspects of the application. On the backend side, I developed the entire API for the room and reservation management modules, ensuring data reliability and flow consistency. For the frontend, I first designed the mockups on Figma before coding the home page and the entire booking logic on the client side. My role was therefore to ensure a smooth user experience, from searching for a room to finalizing the transaction. - **Technical Approach**: Our approach was based on a strict separation of responsibilities to ensure effective team progress. For my part, I focused on a robust API architecture capable of managing availability in real time, thus avoiding any conflicts during reservations. On the client side, I prioritized an ergonomic approach, transforming my Figma designs into reusable components and implementing rigorous state management to secure the user's booking journey. - **Key Features**: Structured RESTful API, Room inventory management, Data flow management, Responsive user interface ### [Runebound](https://www.aliben.me/en/projects/runebound) - **URL**: https://www.aliben.me/en/projects/runebound - **Category**: Software Engineering - **Date**: 2024-12-12T15:00:00.000Z - **Tech Stack**: Unity, C# - **Context & Purpose**: With Runebound, my goal was to design an ambitious roguelite RPG that explores dimensional duality within gameplay for my video game development class at Cégep de Rosemont. I wanted to create a powerful narrative experience where the mage's evolution is reflected not only in his powers, but also in the game's technological transition. This project allowed me to push my Unity skills by managing two distinct playstyles within a single progression loop. - **Contribution**: On this project, I handled all technical development using Unity and C#. I designed the basic combat system, allowing players to unlock and use a variety of basic spells and ultimate attacks linked to fire, ice, and void gems. I also programmed the transition logic between the 2D exploration phase and the 3D world, including the mechanics of flying with the glider and the special transformation into a dragon. Finally, I developed the AI for the enemies and the final boss to provide a progressive challenge throughout the adventure. - **Technical Approach**: My approach was to build a modular game system capable of supporting two different perspectives while maintaining consistent character logic. I used object-oriented architecture so that statistics and collected artifacts would influence gameplay seamlessly between 2D levels and the 3D environment. For the final world, I emphasized verticality and power by integrating aerial movement mechanics, contrasting with the more tactical and linear progression of the early levels. - **Key Features**: Hybrid 2D/3D gameplay, Roguelite RPG, Elemental spell system, Flight mechanics, AI for minions ### [AI Camera](https://www.aliben.me/en/projects/camera-ia) - **URL**: https://www.aliben.me/en/projects/camera-ia - **Category**: Software Engineering - **Date**: 2024-12-10T20:00:00.000Z - **Tech Stack**: GSAP, Electron, JavaScript, Flask, SQLite, Python - **Context & Purpose**: The StealthCam project was born out of a desire to explore the possibilities offered by the Internet of Things (IoT) by creating a smart home security system for our connected object course at Cégep de Rosemont. The idea was to merge hardware (sensors and cameras) with modern software technologies such as facial recognition and artificial intelligence. This project allowed me to learn how to manage communication between sensors, a Python backend processing real-time data streams, and a fluid desktop user interface. - **Contribution**: On this project, I was responsible for developing the entire architecture, from the backend to the user interface. I set up the Flask server to orchestrate the various services, including managing an SQLite database for activity history. I integrated facial recognition with the face_recognition library and the OpenAI API to generate intelligent textual descriptions of the captured images. On the client side, I developed the desktop application with Electron, using GSAP to create a modern and dynamic interface. I also took care of the configuration of the ultrasonic and sound sensors. - **Technical Approach**: I adopted a modular approach to separate the hardware detection logic from the application layer. The backend functions as a service center where each sensor (motion, sound, light) is processed independently before being synthesized by the server. For the user experience, I chose Electron to provide a robust desktop application capable of communicating easily with the local file system and the Flask server. This structure allows for high system responsiveness, which is crucial for a real-time monitoring device. - **Key Features**: Built-in facial recognition, Motion detection Sound, Automatic night mode, AI image description, Automatic video recording, Electron desktop application, Activity history ### [Devil fruit Encyclopedia](https://www.aliben.me/en/projects/devil-fruit-encyclopedia) - **URL**: https://www.aliben.me/en/projects/devil-fruit-encyclopedia - **Category**: Software Engineering - **Date**: 2024-11-15T00:55:00.000Z - **Tech Stack**: Springboot, React, Typescript - **Context & Purpose**: As a huge fan of the One Piece universe, I created this project to design an interactive encyclopedia dedicated to Devil Fruits. The idea was to build a centralized and structured resource to list every fruit, its type, and its unique abilities. This project allowed me to practice modern architecture by completely separating data management (API) from the user experience (Client). - **Contribution**: On this project, I acted as a Full-Stack developer to design both pillars of the application: Backend (API): I developed a structured REST API to serve the encyclopedia's data, ensuring information integrity and fast response times. Frontend (Client): I built an intuitive user interface to browse through different fruit categories, perform searches, and display detailed profiles for each power. - **Technical Approach**: My approach was based on the "Separation of Concerns" principle. By isolating the API from the client, I created a system where the frontend can evolve independently of the data structure. I paid close attention to how the client consumes API resources to ensure smooth navigation while structuring the data to be easily expandable in the future. - **Key Features**: Decoupled Client-Server architecture, REST API consumption, Full interactive encyclopedia ### [Whale of Misfortune](https://www.aliben.me/en/projects/whale-of-misfortune) - **URL**: https://www.aliben.me/en/projects/whale-of-misfortune - **Category**: Software Engineering - **Date**: 2024-11-10T15:16:00.000Z - **Tech Stack**: Android studio, Kotlin - **Context & Purpose**: I designed this project as part of my first course dedicated to mobile app development. Since the initial assignment was technically simple, I chose to set myself apart by injecting a strong visual identity into it. To do this, I created, designed, and animated an original character using Aseprite, drawing inspiration from the pixel art style of cult games such as Undertale. This project was the perfect opportunity to combine my technical skills with my graphic creativity. - **Contribution**: On this project, I acted as both artistic lead and developer. I created all of the visual assets and animations for the main character. On the programming side, I worked closely with my colleague to build the application structure. We adopted a pair programming approach to develop key features, including the game system logic. I assisted my partner with the implementation of the main mechanics, ensuring consistent code and smooth animation integration. - **Technical Approach**: My approach consisted of transforming an academic exercise into a finished product with a visual “soul.” By separating the artistic creation on Aseprite from the mobile development, I was able to refine the animations independently of the code. On the technical side, working in pairs allowed us to quickly resolve the logical challenges related to the mobile application's life cycle and game state management. This collaborative method ensured that the fluidity of the gameplay matched the pixelated aesthetic I wanted to achieve. - **Key Features**: Original pixel art (Aseprite), Mobile game logic, Pair programming development, History ### [Netpulse](https://www.aliben.me/en/projects/netpulse) - **URL**: https://www.aliben.me/en/projects/netpulse - **Category**: Software Engineering - **Date**: 2024-08-15T14:22:00.000Z - **Tech Stack**: Javascript, Electron, Flask, Python - **Context & Purpose**: I developed Netpulse with the aim of deepening my theoretical knowledge of how computer networks work. I wanted to understand in concrete terms how data flows, how packets are structured, and how protocols interact with each other. By creating my own analyzer, I was able to move from the theory of network layers to a real, detailed observation of data traffic. - **Contribution**: As the sole developer, I built a complete native application integrating an Electron interface and a data processing backend. I used the Scapy library in Python to drive packet capture and frame analysis. I programmed all the logic needed to dissect Ethernet, IP, TCP, and UDP protocols in order to display structured and understandable information in the application. I also designed the filtering system and network interface selection to provide a functional and intuitive analysis tool. - **Technical Approach**: My approach was to isolate low-level capture from user rendering to ensure accurate analysis without slowing down the interface. I set up a Flask server that acts as a bridge between the Python capture scripts and the Electron frontend. This architecture allowed me to process packets in real time, transform them into JSON objects, and then send them to the interface for immediate visualization. This forced me to optimize communication between the different processes to efficiently manage potentially large data flows. - **Key Features**: Network packet capture, Detailed Ethernet/IP/TCP analysis, Real-time monitoring, Electron desktop interface, Packet filtering ### [Genies](https://www.aliben.me/en/projects/genies) - **URL**: https://www.aliben.me/en/projects/genies - **Category**: Software Engineering - **Date**: 2024-06-12T15:00:00.000Z - **Tech Stack**: Javascript, CSS, Express.js, HTML, Node.js, MongoDB - **Context & Purpose**: I developed Genies at a pivotal moment when artificial intelligence was beginning to take off in a big way. At that time, powerful tools were scattered across multiple websites, which made the user experience tedious. My goal was to create a single platform capable of centralizing the best AI models to offer simplified access and a consistent interface, allowing users to switch from text generation to visual creation without changing ecosystems. - **Contribution**: As lead designer and developer, I built a robust architecture that allows for the simultaneous integration of multiple AI APIs. I designed and developed the entire frontend to provide a smooth, modern interface, while managing the backend logic to secure and optimize requests to the various models. In particular, I worked on implementing smart chat, image generation, and data processing features, ensuring that each tool was seamlessly integrated into a unified user experience. - **Technical Approach**: My approach was based on creating a modular technology hub. Rather than developing isolated tools, I focused on a structure capable of evolving as new models come onto the market. I paid particular attention to the user experience (UX) by reducing the technical complexity associated with using APIs, thereby making the power of AI accessible via an intuitive interface. This centralization strategy not only increased productivity, but also created synergy between different types of generation (text, image, code). - **Key Features**: Multi-AI centralization, Unified user interface, Advanced text generation, AI image creation ### [ArtSync](https://www.aliben.me/en/projects/artsync-1) - **URL**: https://www.aliben.me/en/projects/artsync-1 - **Category**: Software Engineering - **Date**: 2024-05-20T20:00:00.000Z - **Tech Stack**: ChatGPT, Angular, Javascript, MySQL, Java, Spring Boot, WebRTC - **Context & Purpose**: As part of my Web Application 2 course in college, I had the opportunity to work in a team on the design and on the development of a full-stack application. We created ArtSync, a platform where users can publish, explore, and share artistic content. The project took us through all stages of development: requirements analysis, UML diagram, relational database design, interface design with Figma, and development using Java, Spring Boot, Thymeleaf, and Angular. It was a great experience to put our knowledge into practice in an agile environment, with regular follow-ups and a workflow that felt very close to a real professional project. - **Contribution**: On ArtSync, I led the visual design on Figma before developing most of the frontend, integrating animations and 3D with Three.js for an immersive experience. I was particularly involved in the advanced portfolio and profile customization modules, as well as the AI image generation and project collaboration systems. I also created the interface for the admin area and forums, while collaborating with Nicholson on the implementation of group calls. My work focused primarily on the frontend and user innovation, while ensuring the functional consistency of the platform. - **Technical Approach**: For Artsync, we followed an agile methodology punctuated by regular sprint reviews. Initially launched under JavaEE, the project took on a new dimension with the switch to Spring Boot, allowing for the integration of complex features such as AI and live streaming. I actively contributed to the design phase, between Figma mockups and UML architecture, before focusing on the backend in Spring Boot MVC. One of the biggest challenges remains the implementation of group calls via WebRTC: I still remember a memorable sleepless night spent debugging the system to finally see the streams connect. This project was a real immersion in collaborative development, where technical adaptation and perseverance were the keys to our success. - **Key Features**: Managing your artistic profile, News feed based on subscriptions, Real-time conversations, Interactions with publications, Video call, Live broadcasts, Collaborative Artistic Project Management, Real-time notification, Generating ideas using Open AI's API, Image generation using Stability AI's API, Administration application built in Angular ### [Shopnest](https://www.aliben.me/en/projects/shopnest) - **URL**: https://www.aliben.me/en/projects/shopnest - **Category**: Software Engineering - **Date**: 2023-12-13T19:55:00.000Z - **Tech Stack**: Javascript, PHP, CSS, Bootstrap, JQuery, HTML - **Context & Purpose**: I completed this project as part of my first web application development course. The goal was to design a comprehensive e-commerce platform that would enable the smooth purchase and sale of products. This project was a defining moment for me, as it helped me understand the importance of a solid structure, from initial planning to the launch of a functional and secure website. - **Contribution**: As a developer on this project, I was responsible for the critical stages of implementation. After participating in the design phase (class diagrams and ERDs) and design on Figma, I focused on technical development. I designed all of the website's pages using PHP for server logic and Bootstrap for a modern look. I was particularly involved in creating the shopping cart system, managing the dynamic display of items, and the transaction engine to enable users to buy and sell easily. - **Technical Approach**: My approach was guided by rigorous planning to avoid technical debt. We started by modeling the data with entity-relationship diagrams to ensure database integrity. Once the architecture was in place and the interfaces validated on Figma, I implemented the client-side features with JavaScript and jQuery to provide intuitive navigation. Using PHP allowed me to efficiently link the frontend to the database, ensuring personalized account management and a smooth, secure shopping experience. - **Key Features**: Dynamic shopping cart system, Complete purchase management, Display of items by category, MVC architecture in PHP ### [Vantabank](https://www.aliben.me/en/projects/vantabank) - **URL**: https://www.aliben.me/en/projects/vantabank - **Category**: Software Engineering - **Date**: 2023-12-06T18:16:00.000Z - **Tech Stack**: Java, JavaFX - **Context & Purpose**: I completed this project as part of my first native applications course at Cégep de Rosemont. As my first major solo project, it marked an important milestone in my career, as it was the first time I had designed a complex graphical interface. This experience was a real revelation, and I particularly enjoyed the challenge of transforming abstract business logic into an interactive and aesthetically pleasing visual tool. - **Contribution**: As the sole developer, I took charge of the entire production chain, from data processing to final rendering. I started by coding the backend in Java to establish a solid foundation for account and transaction management. Next, I designed the entire user experience on Figma, defining each view and interaction. Finally, I developed the graphical interface with JavaFX, ensuring that each visual element was connected to the backend logic to create a functional and consistent banking application. - **Technical Approach**: My strategy was to follow a rigorous workflow to ensure the stability of the application. Starting with the backend, I was able to ensure that the transactional logic was robust before thinking about the visuals. The intermediate stage on Figma was crucial for anticipating usability challenges before the interface coding phase. For the final implementation, I used JavaFX to translate my designs into dynamic components, making it a point of honor to ensure that the connection with the backend was smooth and transparent for the user. - **Key Features**: Bank account management, JavaFX graphical user interface, Transaction history, MVC (Model-View-Controller) architecture ### [Memo-mate](https://www.aliben.me/en/projects/memo-mate) - **URL**: https://www.aliben.me/en/projects/memo-mate - **Category**: Software Engineering - **Date**: 2023-05-20T02:55:00.000Z - **Tech Stack**: Java, Swing - **Context & Purpose**: I developed Memo-mate as part of my Programming 2 course. The goal was to create a functional clone of the Notepad application to put into practice the fundamental concepts of object-oriented programming and file manipulation. It was an excellent exercise in understanding how to transform word processing logic into a concrete utility application. - **Contribution**: As a solo developer, I built the entire application using Java. I first focused on the backend to handle file reading and writing, then designed and coded the user interface with the Swing library. I implemented essential features such as opening, editing, and saving text documents. - **Technical Approach**: My approach was to build a simple and robust structure. By separating the file management logic from the graphical interface, I was able to ensure that backup operations were reliable before refining the visual aspect. I used standard Swing components to provide a familiar, lightweight, and easy-to-use interface, faithful to the experience of a classic notepad. - **Key Features**: Real-time text editing, Reading and writing files, Swing graphical user interface --- ## Technical Articles & Publications ### [How to Publish a React Application on GitHub](https://www.aliben.me/en/blog/comment-mettre-en-ligne-une-application-react-sur-github) - **URL**: https://www.aliben.me/en/blog/comment-mettre-en-ligne-une-application-react-sur-github - **Published**: 2026-02-22T05:28:17.783Z - **Summary**: This article explains how I use GitHub Pages to put my React projects online for free and easily share them on the internet. I detail the configuration of the package.json file, the use of the gh-pages package, and the steps to host your code with just a few commands. It's the perfect final step to conclude my learning journey, moving from local development to a functional website accessible to everyone. - **Content Excerpt**: Today, I'm going to explain how to publish (deploy) your React application on GitHub. This will allow you to showcase your project to the entire internet. It's very easy to follow, even if you're a beginner. Note that this only works for client-side applications. If you have a backend, it's best to choose a different solution. --- ## What You Need - **A React project**: You can create a project using the command `npx create-react-app my-app`. - **A GitHub account**: Sign up on GitHub if you... ### [Using libraries in React](https://www.aliben.me/en/blog/utiliser-des-librairies-en-react) - **URL**: https://www.aliben.me/en/blog/utiliser-des-librairies-en-react - **Published**: 2026-02-22T05:26:10.425Z - **Summary**: I explain how I use external libraries to avoid reinventing the wheel and accelerate my development. I demonstrate how to install and integrate GSAP to create smooth animations, as well as Three.js to generate immersive 3D scenes like a rotating metal cube. These tools allow me to easily transform a static interface into a much more interactive and dynamic experience. - **Content Excerpt**: ## Introduction In all React projects, it's very common for developers to add external libraries to avoid reinventing the wheel and speed up development. Today, I'm going to show you how to install and use a library in React. For this article, I've chosen to use **GSAP** and then **Three.js**, interesting components to use in web development for creating animations and 3D models. ## Why Use Libraries? Sometimes, coding everything yourself can be long and complicated. Libraries offer: - **Rea... ### [Using routing in React](https://www.aliben.me/en/blog/utiliser-le-routing-en-react) - **URL**: https://www.aliben.me/en/blog/utiliser-le-routing-en-react - **Published**: 2026-02-22T05:23:44.123Z - **Summary**: In this article, I demonstrate how to use React Router to navigate between multiple pages without ever reloading the browser. I explain the steps to install the library, configure the BrowserRouter, and define clear routes for components like the homepage or the "About" page. Finally, I present the use of the Link tag to create a smooth and interactive navigation bar. - **Content Excerpt**: ## Introduction to Hooks in React In the last blog post, we explored components in React and how props allow us to pass data. Today, we'll delve into an important and very useful concept for managing state and effects in React applications: Hooks. ### 1. What is a Hook in React? Hooks are functions that allow you to use state and other React features within functional components. Before their introduction in version 16.8, only class components could manage state. With Hooks, functional compon... ### [Discovering Hooks in React: Building a Mini Pokédex with useState, useEffect, and a Custom Hook](https://www.aliben.me/en/blog/dcouverte-des-hooks-en-react--construire-un-mini-pokdex-avec-usestate-useeffect-et-un-hook-personnalis) - **URL**: https://www.aliben.me/en/blog/dcouverte-des-hooks-en-react--construire-un-mini-pokdex-avec-usestate-useeffect-et-un-hook-personnalis - **Published**: 2026-02-22T05:20:40.694Z - **Summary**: In this article, I explain how Hooks have made functional components much more powerful by allowing them to manage state and side effects. I demonstrate the use of `useState` to create an interactive counter and `useEffect` to handle automated actions like a real-time clock. Finally, I share my method for creating a custom Hook (`useFetch`), which I used to build a dynamic mini-Pokedex with the PokeAPI. - **Content Excerpt**: ## Introduction to Hooks in React In the last blog post, we explored components in React and how props allow us to pass data. Today, we'll delve into an important and very useful concept for managing state and effects in React applications: Hooks. ### 1. What is a Hook in React? Hooks are functions that allow you to use state and other React features within functional components. Before their introduction in version 16.8, only class components could manage state. With Hooks, functional compon... ### [Creating your first React components](https://www.aliben.me/en/blog/crer-ses-premiers-composants-react) - **URL**: https://www.aliben.me/en/blog/crer-ses-premiers-composants-react - **Published**: 2026-02-22T05:16:52.506Z - **Summary**: This article explains that React components are reusable blocks of code, in the form of functions, that allow you to build modular interfaces by returning JSX. It demonstrates how to create a functional component, export it, and then integrate it into an application by using it as an HTML tag. Finally, the author presents the use of “props” to pass dynamic data to these components, making the interface flexible and customizable. - **Content Excerpt**: ## Introduction Now that we have set up a React project, it's time to discover one of the most important concepts in this library: components. A component in React is a piece of reusable code that displays part of the user interface. Today, we'll see how to create and use components in React. --- ## 1. What is a React component? A component is a function or class that returns JSX (a syntax similar to HTML but which allows you to insert JavaScript). React uses these components to build modula... ### [Creating your first React application](https://www.aliben.me/en/blog/crer-sa-premire-application-react) - **URL**: https://www.aliben.me/en/blog/crer-sa-premire-application-react - **Published**: 2025-08-27T14:33:11.723Z - **Summary**: It's time to put it into practice and create dynamic front-end applications. Today's blog post will focus solely on creating a React application. - **Content Excerpt**: ## Introduction It's time to get hands-on and create dynamic front-end applications. Today's post focuses entirely on creating a React application. #### Tutorial Steps This tutorial covers the key steps to complete the project. You might run into issues along the way; that’s why, at the end of the tutorial, I’ll address some common bugs I’ve encountered myself. #### Using a Framework Before we begin, please note that I will be setting up a blank React project—meaning a project **without a fra...