# Ali Benkarrouch - Software Engineer & Student at ÉTS

> Software engineering student at École de Technologie Supérieure (ÉTS) and software engineer intern at Airbus, specializing in full-stack web development, system architecture, performance optimization, and creative web engineering.

## Profile Summary
- **Name**: Ali Benkarrouch
- **Role**: Software Engineer / Full Stack Developer
- **Education**: B.Eng in Software Engineering at École de Technologie Supérieure (ÉTS, Montreal); DEC in Computer Science at Cégep de Rosemont
- **Experience**: Software Engineer Intern at Airbus; Full Stack Developer at Agence Web & Mobile I3; Frontend Developer Intern at Galerie d'Art Loriginal
- **Website**: https://www.aliben.me
- **GitHub**: https://github.com/ben4ali
- **LinkedIn**: https://www.linkedin.com/in/alibenkarrouch/
- **Contact**: alibenkarrouch@gmail.com

## Technical Expertise
- **Languages**: TypeScript, JavaScript, Python, Java, C#, SQL, HTML, CSS, Bash, Kotlin, PHP
- **Frameworks & Libraries**: Next.js (App Router), React 19, Node.js, Express.js, Spring Boot, Vue.js, Angular, Tailwind CSS, GSAP, Three.js, React Three Fiber, TanStack Query
- **Architecture & Cloud**: REST APIs, System Design, Microservices, CI/CD, Docker, AWS, GCP, Azure, PostgreSQL, MySQL, MongoDB, Prisma ORM
- **Focus Areas**: High-performance web applications, interactive 3D UI, generative AI integrations, software reliability and security

## Key Projects
- [Neumorphia DevKit](https://www.aliben.me/en/projects/neumorphia-devkit): 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. (Stack: Vite, React, Typescript, Tailwind)
- [Le Brow Studio & Co](https://www.aliben.me/en/projects/le-brow-studio--co): 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. (Stack: React, Typescript, Docker, Express.js, Postgresql, AWS S3, Google Analytics API, Prisma, Next, Stripe, Tailwind)
- [Genie Optiroll](https://www.aliben.me/en/projects/genie-optiroll): 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). (Stack: GSAP, OpenCV, Vite, React, SQLite, Python, FastAPI, muspy, Oemer (OMR), smplr, Tailwind)
- [Spellmotion](https://www.aliben.me/en/projects/spellmotion): 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. (Stack: OpenCV, Unity, MediaPipe, Flask, C#, Python)
- [ProjetR](https://www.aliben.me/en/projects/projetr): 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. (Stack: Vite, Express.js, React, Node.js, Typescript, Postgresql, Firebase)
- [Spritelab](https://www.aliben.me/en/projects/spritelab): 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. (Stack: React, Typescript)
- [Progression - Visualization](https://www.aliben.me/en/projects/progression---visualisation): 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. (Stack: Javascript, PHP, Python, Vue)
- [Portail DTI](https://www.aliben.me/en/projects/portail-dti-1): 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. (Stack: Blazor, .NET Core, C#, React, Typescript, WebRTC)
- [Easystay](https://www.aliben.me/en/projects/easystay): 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. (Stack: Springboot, Android studio, Kotlin)
- [Runebound](https://www.aliben.me/en/projects/runebound): 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. (Stack: Unity, C#)
- [AI Camera](https://www.aliben.me/en/projects/camera-ia): 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. (Stack: GSAP, Electron, JavaScript, Flask, SQLite, Python)
- [Devil fruit Encyclopedia](https://www.aliben.me/en/projects/devil-fruit-encyclopedia): 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). (Stack: Springboot, React, Typescript)
- [Whale of Misfortune](https://www.aliben.me/en/projects/whale-of-misfortune): 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. (Stack: Android studio, Kotlin)
- [Netpulse](https://www.aliben.me/en/projects/netpulse): 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. (Stack: Javascript, Electron, Flask, Python)
- [Genies](https://www.aliben.me/en/projects/genies): 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. (Stack: Javascript, CSS, Express.js, HTML, Node.js, MongoDB)
- [ArtSync](https://www.aliben.me/en/projects/artsync-1): 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. (Stack: ChatGPT, Angular, Javascript, MySQL, Java, Spring Boot, WebRTC)
- [Shopnest](https://www.aliben.me/en/projects/shopnest): 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. (Stack: Javascript, PHP, CSS, Bootstrap, JQuery, HTML)
- [Vantabank](https://www.aliben.me/en/projects/vantabank): 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. (Stack: Java, JavaFX)
- [Memo-mate](https://www.aliben.me/en/projects/memo-mate): 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. (Stack: Java, Swing)

## Articles & Writing
- [How to Publish a React Application on GitHub](https://www.aliben.me/en/blog/comment-mettre-en-ligne-une-application-react-sur-github): 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.
- [Using libraries in React](https://www.aliben.me/en/blog/utiliser-des-librairies-en-react): 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.
- [Using routing in React](https://www.aliben.me/en/blog/utiliser-le-routing-en-react): 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.
- [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): 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.
- [Creating your first React components](https://www.aliben.me/en/blog/crer-ses-premiers-composants-react): 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.
- [Creating your first React application](https://www.aliben.me/en/blog/crer-sa-premire-application-react): 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. 

## Full AI Context
- For complete project breakdowns and detailed background: [Full Context Document](https://www.aliben.me/llms-full.txt)