✨ Senior Full Stack Developer & AI Engineer
I'm soufiane El hamri
Senior Full Stack Developer with 5+ years of experience architecting scalable, high-performance web applications optimized for speed, SEO, and conversion. Proficient in Next.js, React, Node.js, and TypeScript — I also engineer AI-powered systems using RAG pipelines, LangChain, LangGraph, and n8n workflow automation to deliver intelligent, business-driven solutions in production
ABOUT ME
Hi There! I'm Soufiane El hamri
With 5+ years of experience, I build production-grade web applications using React, Next.js, Node.js & TypeScript — and engineer AI-powered systems with RAG pipelines, LangChain, LangGraph & n8n. Clean code, peak performance, real results.
Web Development
SEO
Web scraping
UX UI Design
Llm engineer
Devops
Problem solving
Automation Engineer
RESUME
Experience
Full Stack Developer
Jan 2021 - Present
Gear9, CasaBlanca
As a vital member of the dynamic web development team at Inwi.ma project, I played a crucial role in the conceptualization,design, and implementation of the company's official website
Full Stack Developer
April 2021- October 2021
Um6p, Benguerir
As a Software Engineer intern at Mohammed VI Polytechnic University, I had the exciting opportunity to contribute to the development of a dynamic website. Working closely with a talented team, I played a key role in designing and implementing new features, enhancing the site's functionality, and ensuring a seamless user experience.
Full stack developer
Mar 2019 - Apr 2021
Salam Système,CasaBlanca
Developed a web application for managing stock, electrical equipment, and industrial installations using React.js for the front-end and Node.js for the back-end
Education
Full Stack Developer
April 2019 - 2023
1337, Khouribgha
Completed intensive and immersive Full Stack Web Development training at 1337 School, renowned for its innovative and project-based curriculum
Technician diploma specialized in computer development
Sep 2017 - Aug 2019
ISGI, Khouribgha
Holder of an ISGI Technician diploma in computer development, I have undergone comprehensive training in programming languages, including Java, Python, and C++, coupled with in-depth studies in databases, web development, and systems analysis
Bachelor
Sep 2015 - Aug 2016
Bir Anzarane School, Fkih Ben Salah
Bachelor of Science in Physics and Chemistry
Projects
This project lets you spin up a fully branded chatbot front end with minimal effort
This project lets you spin up a fully branded chatbot front end with minimal effort. It wraps the @n8n/chat widget inside a Next.js App Router application, manages access by checking MongoDB for valid users, and layers shadcn-inspired styling on top so conversations feel polished out of the box. Bring your own n8n workflow, point the UI at its webhook, and share the resulting link to let teammates or customers chat immediately.
N8n - LLm - embeddings
This project showcases a powerful, zero-effort resume matching system built with n8n to automate the entire hiring pipeline. The solution seamlessly integrates Google Drive for resume storage, Google Gemini for generating advanced text embeddings, and Pinecone for indexing and querying a high-performance vector database. The system features two core n8n workflows: one for processing and indexing resumes from Google Drive into Pinecone, and another that triggers via a web form to match job requirements against the indexed resumes. When a user submits job details, an AI agent processes the query, performs a similarity search in Pinecone, and uses Google Gemini to interpret the results before automatically sending the top candidate recommendations via Gmail. This creates a fully automated, end-to-end solution for intelligent candidate sourcing.
N8n - LLm - SEO
HealthSEO Auditor is a fully automated website health and SEO auditing workflow built with n8n. This powerful tool allows users to submit a website URL via a simple form and choose from four distinct analysis types: a comprehensive SEO Audit, a Google PageSpeed Insights report, an Accessibility Check, or an overall Business Value Score. The n8n workflow intelligently routes the request, leveraging the Google PageSpeed Insights API for performance metrics and Google Gemini AI to conduct in-depth evaluations for SEO, accessibility, and business value. The AI then generates a clean, professional, and client-ready report from the findings. Finally, the system automatically formats the report into an HTML email and delivers it directly to the user's inbox, providing actionable insights with zero manual intervention.
Blogs
Concurrent Rendering in React: The Performance Upgrade Most Teams Overlook
Modern React doesn't just render faster — it renders smarter. With Concurrent Rendering, React can pause work, prioritize user interactions, and resume rendering without blocking the UI. The result? Smooth, responsive interfaces even when your app is doing something heavy.
The Real Reason Your Project Needs Playwright (And It's NOT "More Tests")
Most teams don't actually have a testing problem. They have a confidence problem. Every release comes with the same doubts. Manual testing doesn't solve this — it only creates a false sense of safety. Playwright turns assumptions into guarantees.
Why Do Agent Skills Matter?
Long prompts reduce agent performance. Instead of relying on one massive prompt, modern AI agents use a catalog of Agent Skills — reusable playbooks with clear, structured instructions that are loaded only when needed. This makes agents faster, more reliable, and more scalable.
Optimizing Data Fetching in React using React.use
When working with React component, managing data fetching efficiently is crucial to providing a smooth and responsive user experience. In many cases using React.use or React.useEffect for fetching data can lead to multiple redundant requests, impacting both performance and resource usage. In this post, we’ll explore how to implement a custom caching mechanism to prevent unnecessary fetches while using React.Suspense and React.ErrorBoundary to handle loading states and errors.
Understanding React's useSyncExternalStore
React 18 introduced a new hook called useSyncExternalStore to help manage state that is external to React components. This hook is useful for integrating with external libraries or APIs that manage their own state
Controlled and Uncontrolled Components
Controlled components and uncontrolled components are two ways to manage form data. In a controlled component, the form data is handled by a React component. The form data is stored in the component's state and is updated through the component's setState method. the benefit of using a controlled component is that you have full control over the form data. You can validate the form data, manipulate the form data, and perform other operations on the form data. In an uncontrolled component, the form data is handled by the DOM itself. The form data is stored in the DOM, and is accessed through the DOM's API. In an uncontrolled component, the component does not manage the form data directly. the benefit of using an uncontrolled component is that you do not need to write as much code as you would with a controlled component. or for simple form with limited interaction You can also use uncontrolled components to integrate with third-party libraries that require direct access to the DOM. However, uncontrolled components are not as flexible as controlled components, and you may run into issues with form data
SKILLS
0
Years
Experience
Working
Great Experience
Fill appear won't may make moveth signs. Fourth. Good own. Green you're moveth us, lesser.
Nextjs
90%
Reactjs
90%
SEO
80%
Docker
70%
Mongodb
70%
Nodejs
70%
JavaScript And TypeScript
90%
Css
90%
N8n
80%
Python
70%
Llm engineer
80%
Contact
Let's grab a coffee and jump on conversation. Let's chat.
You can also find me on LinkedIn if that's easier for you.
Direct Line
(+212) 641-40-48-42