SysGlad-hta
Electric Power Quality Monitoring System, facilitating the tracking and management of electricity production, transmission, and distribution. It employs an algorithm for anomaly detection and network performance analysis.
- IndustryElectricity control, ONEE
- ClassificationRELEASED
- Technologies I UsedSymfony, Angular, API Platform, ApexCharts.js
- RoleFull Stack, Design
- Challenges
- ⬩ Designing a database schema to accurately represent the electricity distribution network.
- ⬩ Migrating client data from Excel sheets to an SQL database.
- ⬩ Integrating Angular frontend with Symfony backend.
- Solutions
- ⬩ Integrating the Breadth-First Search (BFS) algorithm.
- ⬩ Implementing efficient caching strategies.
- ⬩ Using Angular's powerful data-binding and visualization libraries for clear, interactive dashboards.
Marrakech Fine Food
ma.marrakechfinefood.comAn e-commerce platform. It offers a diverse range of items such as fragrant teas, carefully roasted coffees, crispy shortbread and wafers, and more..
- IndustryFood
- ClassificationRELEASED
- Technologies I UsedPrestashop, Webpack
- RoleFrontend
- Challenges
- ⬩ Convert Figma designs into a custom PrestaShop theme.
- ⬩ Customizing product listing layouts and filters.
- ⬩ Implementing interactive product swatches for variant selection.
- Solutions
- ⬩ Implementing cross-selling product recommendation.
- ⬩ Customizing checkout process for usability and conversion.
- ⬩ Designing flexible homepage sections for promotions.
- ⬩ Developing a customizable mega menu for navigation.
Agadir Oufella
Official WebsiteHistory WebsiteTickets Websiteios AppAndroid AppDeveloped a multi-platform project for Agadir Oufella, a historical touristic site. The project includes a WordPress website for general information, a Symfony-based platform for ticket sales, and a React Native app for an audio guide
- IndustryTourism
- ClassificationRELEASED
- Technologies I UsedWordPress, React Native, GSAP, OpenSeadragon, Webpack
- RoleFrontend
- Challenges
- ⬩ Implementing smooth animations and interactive elements.
- ⬩ Coordinating development across WordPress, Symfony, and React Native for seamless integration.
- Solutions
- ⬩ Using the GSAP library for dynamic and engaging historical content.
- ⬩ Integrating OpenSeadragon for an interactive 3D map experience.
- ⬩ Ensuring seamless multi-language support and RTL functionality for Arabic.
Tots
tots.frtots.fr is an e-commerce website specializing in the online sales of bathroom furniture, and all accessories needed to create or renovate bathroom.
- IndustryBathroom Furniture and Accessories
- ClassificationRELEASED
- Technologies I UsedHandlebars, SCSS/ES6+ JS, Webpack, Algolia
- RoleFrontend
- Challenges
- ⬩ Complex Product Page Requirements.
- ⬩ Handling a Very Large Products Database.
- ⬩ Building from Scratch with Scalability in Mind.
- ⬩ Managing Extensive Features Leading to Website Size.
- Solutions
- ⬩ Developed Custom Product Pages with Interactive Features.
- ⬩ Integrated Algolia for Efficient Search Functionality.
- ⬩ Implemented SEO Best Practices, Including Optimized Image Handling.
Picaxel
picaxel.comA digital agency website showcasing web development, digital strategy, and consulting services
- IndustryDigital Agency
- ClassificationRELEASED
- Technologies I UsedHandlebars, SCSS/ES6+ JS, Webpack, GSAP
- RoleFrontend
- Challenges
- ⬩ Ensuring Smooth Animations.
- ⬩ Optimizing Website Performance.
- ⬩ Ensured consistent experience across different browsers.
- Solutions
- ⬩ Used GSAP for high-performance animations.
- ⬩ Employed caching, image optimization, and code minification.
- ⬩ Followed SEO best practices and WCAG guidelines.
Dunforce
dunforce.comAn application focused on big data solutions for social housing. It uses machine learning to predict invoice payment timelines, automates collection processes, integrates with ERPs, and supports various financial services through an open architecture.
- IndustrySocial housing
- ClassificationRELEASED
- Technologies I UsedReact, Chart.js, WebSocket, React query, Axios
- RoleFrontend
- Challenges
- ⬩ Coordinating frontend changes with backend updates during the migration from v1 to v2.
- ⬩ Maintaining consistent UI/UX across a large-scale application with diverse feature sets.
- ⬩ Adapting to and implementing SCRUM methodologies alongside remote international team members.
- Solutions
- ⬩ Collaborating with backend developers to synchronize API changes with frontend updates.
- ⬩ Utilizing Git-flow for efficient version control and collaborative development.
- ⬩ Conducting regular code reviews and using standardized coding practices to maintain code quality.
Yesbox
yes-box.frYesbox is a self-storage company located in Hauts-de-France. The website provides information about their storage units and automates the process of requesting quotes and checking box availability.
- IndustrySelf-Storage, Real Estate
- ClassificationRELEASED
- Technologies I UsedSCSS/ES6+ JS, Webpack, Symfony
- RoleFull Stack
- Challenges
- ⬩ Automating the process of checking storage unit availability and requesting quotes.
- ⬩ Integrating a real-time system to provide accurate rental estimates.
- ⬩ Designing a user-friendly customer area to enhance customer relationship management.
- Solutions
- ⬩ Developed a dynamic catalog of storage units by center, allowing sales reps to manage current rentals efficiently.
- ⬩ Implemented a 3-step quote request process that provides real-time estimates, streamlining the process for customers and sales reps.
- ⬩ Created a comprehensive customer area that offers a personalized experience, making it easy for customers to manage their rentals and interact with the company.
IGolf Morocco
igolfmorocco.comA website dedicated to promoting golf tourism in Morocco. The website provides information about various golf courses, travel packages, accommodation options, and related services.
- IndustryGolf
- ClassificationRELEASED
- Technologies I UsedHandlebars, SCSS/ES6+ JS, Webpack, Google map API
- RoleFrontend
- Challenges
- ⬩ Implement interfaces for customizing golf trip packages.
- ⬩ Create booking forms and calendars for professional golfers.
- ⬩ Support multilingual and multi-currency options.
- Solutions
- ⬩ Develop interactive maps and location-based features for showcasing golf courses..
- ⬩ Integrate intuitive navigation and user flows for seamless booking experiences.
- ⬩ Implement advanced search and filtering options for golf courses and accommodation.
HIFI FILTER
hifi-filter.comA dynamic website for HIFI FILTER, specializing in filtration and separation solutions.
- IndustryFiltration and separation solutions
- ClassificationRELEASED
- Technologies I UsedWordpress, ACF, WPML, Gutenberg, WPRocket
- RoleBackend
- Challenges
- ⬩ Managing a multi-language website with 7 different languages.
- ⬩ Developing dynamic content blocks with unique designs.
- ⬩ Handling a complex image-rich multi-level menu.
- Solutions
- ⬩ Using WordPress's ACF plugin for component-based block development.
- ⬩ Creating a custom menu walker to handle the intricate menu structure.
- ⬩ Implementing SEO best practices for efficient image handling.
Laboratoires de Biarritz
laboratoires-biarritz.com- IndustryCosmetics
- ClassificationRELEASED
- Technologies I UsedPrestashop, Webpack, Creative Elements
- RoleFrontend
- Challenges
- ⬩ Customizing checkout process to improve user experience.
- ⬩ Integrating third-party modules with custom frontend.
- ⬩ Maintaining SEO best practices with dynamic content.
- Solutions
- ⬩ Ensuring smooth integration of the custom live cart plugin.
- ⬩ Achieving full customization of the frontend UI while maintaining performance.
- ⬩ Making the website fully editable by non-developers.
Fryvy
A French app that connects individuals and businesses with professionals in the construction, renovation, and home improvement sectors. The platform allows users to find and hire experts such as builders, plumbers, electricians, painters, and other tradespeople for various projects. Key features include service listings, project showcases, and customer reviews, helping users make informed decisions when selecting contractors.
- IndustryConstruction, Renovation
- ClassificationUNRELEASED
- Technologies I UsedReact Native, React query, Axios
- RoleFrontend
- Challenges
- ⬩ Developing the app to work seamlessly across iOS, Android, and web platforms.
- ⬩ Ensuring a consistent user experience and performance across all platforms.
- ⬩ Integrating comprehensive features like service listings, project showcases, and customer reviews.
- Solutions
- ⬩ Utilizing React Native for cross-platform development, ensuring compatibility with iOS, Android, and web.
- ⬩ Implementing responsive design and adaptive features to maintain a consistent experience across devices.
- ⬩ Building robust components and leveraging third-party libraries for features like listings and reviews.
Portfolio
saidalachgar.devA personal portfolio showcasing a collection of projects across various platforms and industries, highlighting skills in web and app development. Built using Astro, the portfolio emphasizes performance, modern web standards, and showcases professional accomplishments with an interactive and engaging design
- IndustryPersonal
- ClassificationRELEASED
- Technologies I UsedAstro
- RoleFull Stack, Design
- Challenges
- ⬩ Customizable and lightweight, optimized for fast performance.
- ⬩ Interactive project showcases with detailed descriptions and visuals.
- ⬩ Responsive design ensuring compatibility across all devices.
Les Sens de Marrakech
lessensdemarrakech.frLes Sens de Marrakech is a French brand based in Morocco, specializing in cosmetics and home products with natural ingredients. The project involves developing a custom PrestaShop theme to enhance the online store’s visibility, navigation, and user experience. The custom theme, designed based on a Figma mockup, aims to reflect the brand’s colors and streamline the ordering process.
- IndustryCosmetics & Home Products
- ClassificationRELEASED
- Technologies I UsedPrestashop
- RoleFrontend
- Challenges
- ⬩ Enhancing user navigation and overall experience.
- ⬩ Personalizing the ordering process while maintaining site performance.
- Solutions
- ⬩ Developed a custom theme that reflects the brand's aesthetic.
- ⬩ Streamlining the checkout process with intuitive UI elements and personalization options.
- ⬩ Ensuring the theme’s performance and responsiveness across devices.
Evras déménagement
evrasdemenagements.frIt's a company specialized in national and international removals for individuals as well as companies
- IndustryRemovals & Relocations
- ClassificationRELEASED
- Technologies I UsedWordpress, Enfold
- RoleFull Stack
- Challenges
- ⬩ Customizing the Enfold Theme to match the brand's colors and design specifications.
- ⬩ Ensuring the website effectively highlights various removal services and improves online visibility.
- ⬩ Making the website user-friendly for non-developers to manage content.
- Solutions
- ⬩ Pixel-perfect customization of the Enfold Theme based on the Figma mockup.
- ⬩ Implementing SEO best practices to enhance online visibility.
- ⬩ Configuring theme settings and content management features to facilitate easy updates by non-developers.
Kinesil
Kinesil.comWebsite for a local physiotherapist to showcase services and provide contact information
- IndustryPhysiotherapy
- ClassificationRELEASED
- Technologies I UsedWordpress
- RoleFull Stack
- Challenges
- ⬩ Implementing a user-friendly layout to effectively present physiotherapy services.
- ⬩ Ensuring the website is accessible in multiple languages.
- Solutions
- ⬩ Configuring contact forms and location maps for enhanced client interaction.
- ⬩ Developing intuitive navigation and clear calls-to-action to enhance user experience.
Bourdel et associés
bourdel-associes.frAccounting firm providing expert support in accounting, tax, social, and legal management. The site features their services and methods
- IndustryAccounting
- ClassificationRELEASED
- Technologies I UsedWordpress, OpenStreetMap, Enfold
- RoleFull Stack
- Challenges
- ⬩ Customizing a theme to align with the firm's brand and presentation needs.
- ⬩ Ensuring the site offers clear information about their methods and support.
- Solutions
- ⬩ Tailoring the Enfold Theme to match the firm’s branding and service offerings.
- ⬩ Implementing features to facilitate easy navigation and access to key information.
Arganpalace
arganpalace.comA reservation website for a local Moroccan Hammam and Massage Center
- IndustryWellness and Spa
- ClassificationRELEASED
- Technologies I UsedSymfony, SonataAdmin
- RoleFrontend
- Challenges
- ⬩ Developing a reservation system that integrates with the center’s scheduling.
- ⬩ Creating an intuitive user interface that highlights services and pricing.
- Solutions
- ⬩ Building a custom reservation system.
- ⬩ Designing a user-friendly interface that effectively showcases services and pricing.
Myseelver
A customizable app for elderly residences. Designed for TV screens, it displays weather, events, menus, news, and more, with automatic page transitions
- IndustryElderly Care, Residence Management
- ClassificationRELEASED
- Technologies I UsedReact, Polyfills
- RoleFrontend
- Challenges
- ⬩ Ensuring compatibility with very old browser versions across different types of TV screens.
- ⬩ Creating a responsive and visually engaging interface suitable for display on TV screens.
- ⬩ Integrating various data sources, including APIs for weather, news, and residence-specific information.
- Solutions
- ⬩ Implementing polyfills and using compatible libraries to ensure the app runs smoothly on outdated browsers.
- ⬩ Designing a flexible and dynamic UI that adapts to various screen sizes and resolutions.
- ⬩ Employing API integrations for real-time updates on weather, news, events, and other information.
Centre dentaire founty
centredentairefounty.maA local dental clinic. The site showcases the dentist's specialties and provides detailed information about the doctor and her office
- IndustryDental
- ClassificationRELEASED
- Technologies I UsedWordPress, GSAP, Google maps
- RoleFull Stack
- Challenges
- ⬩ Integrating GSAP for smooth animations without compromising site performance.
- ⬩ Implementing multi-language support, including preparation for RTL languages.
- Solutions
- ⬩ Configuring contact forms and location maps for enhanced client interaction.
- ⬩ Developing intuitive navigation and clear calls-to-action to enhance user experience.
Centre Dentaire Essaoui
centredentaireessaoui.maA local dental clinic. The site showcases the dentist's specialties and provides detailed information about the doctor and her office
- IndustryDental
- ClassificationRELEASED
- Technologies I UsedWordPress, Google maps
- RoleFull Stack
- Challenges
- ⬩ Creating a minimalist design that effectively highlights the doctor's specialties and office information.
- ⬩ Implementing multi-language support, including RTL languages.
- Solutions
- ⬩ Configuring contact forms and location maps for enhanced client interaction.
- ⬩ Developing intuitive navigation and clear calls-to-action to enhance user experience.
Golf market place
golfmarketplace.comEuropean platform for online golf equipment sales, featuring a unique catalog with exclusive brands
- IndustryeCommerce
- ClassificationRELEASED
- Technologies I UsedSylius, SCSS/ES6+ JS, Webpack
- RoleFrontend
- Challenges
- ⬩ Overriding Sylius to create a highly customized and unique interface.
- ⬩ Ensuring the platform can handle a diverse and exclusive product catalog.
- ⬩ Implementing multi-language support for various European languages.
- Solutions
- ⬩ Customizing Sylius extensively to meet the specific design and functionality requirements.
- ⬩ Optimizing the platform for a seamless user experience with an exclusive product catalog.
- ⬩ Integrating multi-language support to cater to a European audience.
Inzee.Care
inzee.careA platform connecting patients seeking home healthcare with independent nurses, physiotherapists, and speech therapists. The WordPress site provides comprehensive information about the Inzee Care platform, detailing services, solutions, and pricing for professionals, establishments, and patients.
- IndustryHealthcare
- ClassificationRELEASED
- Technologies I UsedHandlebars, SCSS/ES6+ JS, Webpack
- RoleFrontend
- Challenges
- ⬩ Creating a wide range of custom Gutenberg components that align with the brand's design.
- ⬩ Ensuring the website maintains high performance and SEO standards.
- ⬩ Providing a user-friendly interface with detailed information about services and solutions.
- Solutions
- ⬩ Developing custom JS and CSS for each component to minimize asset file sizes.
- ⬩ Achieving a high Google PageSpeed score by optimizing the site’s performance.
French Reading Tool
french-reading-tool.netlify.appA language-learning companion designed to help my little sister (and anyone learning French!) tackle the challenges of reading and pronouncing French. With this tool, users can snap a picture of any French text, instantly see the translation, and even hear how to pronounce each word, making language practice more accessible and enjoyable
- IndustryEducation & Language Learning
- ClassificationTool
- Technologies I UsedVite.js, React, Primer UI, Axios
- RoleFullstack
- Solutions
- ⬩ Built a smooth, multi-step workflow using React Query to manage data from OCR, translation, and TTS APIs.
- ⬩ Ensuring the tool provides accurate translations and clear audio for pronunciation.
- ⬩ Added interactive text features so users can click on any word for instant pronunciation, empowering them to learn at their own pace.
The Movie Vault (Concept)
The Movie Vault is a conceptual design for a tool aimed at improving movie search experiences with advanced filtering options, tracking shows, creating wishlists, and managing favorites lists. It addresses the limitations of streaming services and IMDb by providing a user-friendly interface and robust search functionality. This project was designed for fun, with the potential to develop into a real hobby project
- IndustryEntertainment, Movies
- ClassificationSTUDY CASE
- RoleDesign
- Challenges
- ⬩ Advanced filters for movie searches, allowing users to sort by genre, release date, ratings, and more.
- ⬩ Options for tracking watched shows, creating wishlists, and saving favorites.
- ⬩ A clean, user-friendly design that prioritizes ease of navigation and accessibility.
- Solutions
- ⬩ Designing a filtering system that surpasses the complexity of existing platforms.
- ⬩ Creating an intuitive user interface that appeals to both casual and dedicated movie enthusiasts.
- ⬩ Planning for a scalable architecture that could support future development into a functional application.
Planetary facts
planetary-facts.netlify.appPlanetary Facts is an interactive website that provides information about the planets in our solar system. The standout feature of this site is the use of Three.js to create realistic 3D models of the planets. Each planet is textured and rendered on a 3D canvas that allows users to rotate and explore the planets, offering a visually engaging and immersive learning experience
- IndustryInteractive Learning, Astronomy
- ClassificationPLAYGROUND
- Technologies I UsedJavaScript, Three.js, nPoint
- RoleFrontend, Design
- Challenges
- ⬩ Integrating Three.js for realistic 3D planet rendering.
- ⬩ Balancing educational content with interactivity to keep users engaged without overwhelming them.
- Solutions
- ⬩ Leveraged the Three.js library to create and animate the 3D models.
- ⬩ Implemented lazy loading and optimized the rendering pipeline to ensure smooth performance.
What if
whatif-app.vercel.appA playground website where people can share their ideas for websites and apps, fostering creativity and innovation. It serves as a valuable resource for developers and entrepreneurs looking for new project ideas or opportunities to improve existing platforms.
- IndustryInnovation and Creativity
- ClassificationPLAYGROUND
- Technologies I UsedMongoDB, Express.js, React, Vite.js, React query, Axios
- RoleFull Stack, Design
- Challenges
- ⬩ Designing an intuitive UI that encourages user engagement and idea sharing.
- ⬩ Implementing real-time updates and interactions for a dynamic user experience.
- ⬩ Managing and moderating content to maintain a positive and constructive community.
- Solutions
- ⬩ Utilizing the MERN stack to build a responsive, real-time web application.
- ⬩ Using MongoDB for flexible data storage and efficient querying of user submissions.
Personal Notebook
A minimalistic notes taking application designed for personal use, featuring a clean interface with a markdown editor and preview
- IndustryProductivity
- ClassificationPLAYGROUND
- Technologies I UsedVite.js, Firebase, Markdown
- RoleFull Stack
- Challenges
- ⬩ Ensuring a smooth and responsive user interface with minimal latency.
- ⬩ Managing user authentication and data storage securely in Firebase.
- Solutions
- ⬩ Utilizing Vite.js for fast and efficient front-end development and hot module replacement.
- ⬩ Implementing Firebase Firestore for real-time database capabilities and seamless data synchronization.
- ⬩ Designing a simple and intuitive user interface with CSS, focusing on usability and minimalism.
Top global music
top-global.netlify.appA playful one-page website display trending music, features a modern interactive design to explore the latest hits around the world. This project was created as a personal experiment in using Vite.js and Spotify API
- IndustryEntertainment, Music
- ClassificationPLAYGROUND
- Technologies I UsedVite.js, Spotify API
- RoleFrontend, Design
- Solutions
- ⬩ Experimented with Vite.js for rapid development and hot module replacement.
- ⬩ Focused on creating a visually appealing and interactive design.
- ⬩ Used API integration to pull real-time data, enhancing the app’s dynamic nature.