Hello, I'mAyoub Mouakkir—Fullstack Developer
I'm a Moroccan developer who delivers exceptional digital experiences across web and mobile platforms. I take pride in building high-quality, impactful products that stand out.
Things I've
Built
A curated selection of real-world projects built solo, from backend architecture to pixel-perfect frontends.
LaynFlow — Building a Privacy-First, On-Device File Compression App
# LaynFlow — Building a Privacy-First, On-Device File Compression App **LaynFlow** is a privacy-first file optimization app built to compress PDFs and images without uploading them to a server. Designed and developed by **AMAFsoft**, LaynFlow processes files directly on the user's device, combining Flutter with native iOS and macOS technologies to deliver a fast, offline-first compression workflow. > **Reduce size. Keep quality. Stay in flow.** ### Download LaynFlow Experience compressing PDF files and images directly on your device, without the need to upload your files to an external server. * **[Download LaynFlow from the App Store for iPhone and iPad](https://apps.apple.com/us/app/laynflow-pdf-image-compress/id6770013584)** * **[Download LaynFlow from Google Play for Android devices](https://play.google.com/store/apps/details?id=com.amafsoft.laynFlow)** **Reduce size. Maintain quality. Stay in the flow.** --- ### Want to learn more about how it was built? Read the case study to learn about the technical architecture, local file processing, and using Flutter with native technologies to build a privacy-first app. ## The Idea File compression is usually presented as a simple problem: **Select a file → upload it → compress it → download it.** The problem is what happens in between. Uploading a document means sending it to a remote service. For ordinary images, that may be acceptable. But PDFs can contain contracts, invoices, financial documents, identification documents, business information, or other private material. I wanted a different approach: > **What if compression didn't require uploading the file anywhere at all?** That question became the foundation of LaynFlow. *** ## A Different Architecture LaynFlow has no compression backend. There is no file-upload API sitting between the user and the compression engine. The application performs its work locally and saves the resulting file back to the device. The high-level architecture looks like this: ``` User selects files │ ▼ File detection │ ├── JPG / PNG / WebP │ ↓ │ Dart isolate │ ↓ │ Decode → Compress → Encode │ ├── HEIC / HEIF │ ↓ │ Native ImageIO │ └── PDF ↓ Native PDFKit ↓ Render → Compress → Write │ ▼ Size validation │ ▼ Save locally ``` This architecture also means the application can work without an internet connection. For a file utility, that is an important property rather than simply a technical novelty. *** # Flutter Where It Makes Sense, Native APIs Where They Matter LaynFlow is built with Flutter, which provides the application UI, navigation, state management and cross-platform foundation. The stack includes: * Flutter * Dart * Riverpod * GoRouter * RevenueCat * Native iOS/macOS APIs * Firebase Analytics * Firebase Crashlytics But the goal wasn't to force every part of the application through Flutter. Compression is exactly the kind of area where native platform capabilities can provide important advantages. LaynFlow therefore uses Flutter for the application layer while bridging to native technologies when the platform provides a better tool for the job. For example, HEIC/HEIF processing on Apple platforms uses **ImageIO**, while PDF processing uses **PDFKit**. This creates a hybrid architecture: ``` Flutter │ ├── UI ├── Navigation ├── State ├── Product logic └── Subscription management │ ▼ Method Channels │ ├── ImageIO └── PDFKit ``` The result is a cross-platform application without sacrificing access to important native capabilities. *** # Compression Without Blocking the UI Compression can be computationally expensive, particularly when processing large images or documents. A utility application should not become unresponsive simply because the user selected a large file. For standard image formats such as JPG, PNG and WebP, LaynFlow performs processing in background Dart isolates. Conceptually: ``` Main Isolate │ │ compression job ▼ Background Isolate │ ├── Decode ├── Process ├── Encode └── Return result ``` This keeps heavy processing away from the main UI execution path. For Apple-specific formats and PDFs, native APIs are used through platform channels. *** # PDFs Are a Different Problem Image compression is relatively straightforward compared with PDF optimization. A PDF is a document container rather than simply a single bitmap. LaynFlow therefore uses a native PDF pipeline on Apple platforms. Pages are rendered at a controlled resolution, with a maximum edge size, and then written into a new PDF using compressed image representations. The pipeline is designed around memory safety: ``` PDF │ ├── Page 1 → Render → Compress → Write ├── Page 2 → Render → Compress → Write ├── Page 3 → Render → Compress → Write └── ... ``` Rather than attempting to keep an entire large document in memory at once, the implementation uses streaming disk writes through the native PDF pipeline. This becomes especially important when users process large documents on devices with limited available memory. *** # The "Already Optimized" Problem One subtle problem with compression tools is that **compression does not always make a file smaller**. For example, a JPEG that has already been aggressively compressed may become larger if it is decoded and encoded again. A naive compressor might simply replace the original file with the new output. LaynFlow doesn't. After compression, the application compares the resulting file size with the original: ``` Output < Original? │ ┌───┴───┐ YES NO │ │ ▼ ▼ Accept Discard output output │ │ ▼ ▼ Save Keep original "Already optimized" ``` If the resulting file isn't smaller, the generated output is discarded. The original file remains untouched. This is a small implementation detail, but it reflects an important product principle: > **A compression tool should never make the user's file worse just because compression was requested.** *** # Privacy by Architecture Privacy is not implemented as a settings-page checkbox in LaynFlow. It is built into the architecture. The application does not need to upload the user's files to a compression server because there is no compression server. That means the core workflow is: ``` File ↓ Device memory / local processing ↓ Compressed file ↓ Local storage ``` Rather than: ``` File ↓ Internet ↓ Remote server ↓ Processing ↓ Internet ↓ Device ``` This also eliminates the need for users to create an account simply to compress a document. *** # A Simple Product Model LaynFlow uses an accountless Free/Pro model. The Free tier is intentionally useful rather than being a trial disguised as a product. Free users can compress files individually and use the standard quality presets. Pro unlocks workflow-oriented features such as: * Batch processing * Larger files * Custom quality control * Metadata controls * Format conversion The idea is simple: > **The basic utility should remain useful. Pro removes friction for people who use it heavily.** LaynFlow also offers a one-time Lifetime purchase alongside subscription options. *** # Desktop Is More Than a Larger Phone The desktop experience was designed around desktop workflows rather than simply scaling the mobile interface. On macOS, LaynFlow supports integrations such as: * Finder file selection * Drag-and-drop * Desktop drop zones * Native file saving * Finder reveal * ZIP export This allows the application to fit naturally into a workflow such as: ``` Finder ↓ Drag files into LaynFlow ↓ Batch compression ↓ ZIP / Save ↓ Continue working ``` The objective is to make compression feel like a normal desktop utility rather than a mobile application running on a larger screen. *** # Why There Is No Backend A backend could have simplified some aspects of the architecture. Centralized processing could make it easier to add certain compression engines or manage processing workloads. But it would introduce other costs: * File uploads * Storage considerations * Server infrastructure * Bandwidth costs * Data retention concerns * Authentication * Privacy considerations * Network dependency For LaynFlow, those trade-offs weren't necessary. The product is fundamentally a file utility. The user's file already exists on their device. So the simplest place to process it is often the same place it already is. *** # The Engineering Challenge The most interesting part of LaynFlow wasn't creating a button that says "Compress." The challenge was building a system that could make compression: **Fast.** **Predictable.** **Memory-conscious.** **Offline.** **Cross-platform.** **Safe for the original file.** And simple enough that the user doesn't need to understand any of the underlying technology. That required combining Flutter's cross-platform capabilities with native platform APIs rather than treating the application as a purely Flutter-only project. *** # The Result LaynFlow turns a technically complex process into a simple workflow: ``` Select ↓ Compress ↓ Save ``` Underneath that simple interface is a system combining: * Flutter * Dart isolates * native ImageIO * PDFKit * MethodChannels * streaming PDF generation * local file processing * RevenueCat entitlement verification * desktop integrations * memory-conscious processing But users don't need to see any of that. They simply get a smaller file. And their original file never needed to leave their device. *** ## LaynFlow **PDF & Image Compression — 100% On-Device** > Reduce size. Keep quality. Stay in flow. **Platforms:** iOS · macOS · Android\ **Built with:** Flutter · Dart · Native Apple APIs\ **Developed by:** AMAFsoft
-medium.webp)
Porteur.ma: On-Demand Logistics & Real-Time Delivery Marketplace
### Project Details **Full-Stack Developer — Porteur.ma** Developed a high-performance, on-demand logistics marketplace connecting transport requesters with couriers. Built as a fast Single-Page Application (SPA) with a focus on real-time event-driven workflows and headless authentication. ### Overview I architected and implemented Porteur.ma, a modern logistics ecosystem. It manages the entire lifecycle of transport requests through a server-driven routing system and headless authentication, ensuring low-latency interactions for both requesters and drivers. ### Challenge The logistics sector requires a platform that can: * **Handle real-time state changes:** Seamlessly moving from "Dispatching" to "In Transit" to "Delivered." * **Role-Based Workflows:** Providing distinct interfaces for requesters and service providers. * **Maintain Code Reliability:** Ensuring mission-critical delivery data remains consistent during high-concurrency events. * **Optimize Routing:** Efficiently pairing transport requests with available workers. ### Solution I engineered a robust system centered around: * **Modern Backend Infrastructure:** Built on **PHP 8.4** and **Laravel 12**, utilizing property hooks and asymmetric visibility for cleaner, more maintainable data models. * **SPA Experience:** Leveraged **Inertia.js and Vue 3** to provide a fast, reactive interface without the complexity of traditional REST-API client state management. * **Styling & Performance:** Utilized **Tailwind CSS v4** to deliver a performant, utility-first UI with minimal CSS overhead. * **Test-Driven Development:** Achieved high feature coverage using **Pest**, ensuring stability in the delivery lifecycle. ### Impact Delivered a scalable, production-ready marketplace that reduced manual dispatching overhead and accelerated transport matching. The implementation of modern PHP 8.4 features resulted in a 20% reduction in boilerplate code while maintaining strict data integrity.
iFixSmart Landing page
# IFIXSMARTPRO — Site Vitrine ## Overview IFIXSMARTPRO is a conversion-focused, mobile-first landing page designed to help a local smartphone repair business increase inbound calls and customer trust through clear service presentation and strong call-to-action placement. ## Problem A small repair business needed a modern, conversion-oriented web presence to improve local visibility, drive phone-based conversions, and clearly present services and pricing. The site also needed to be highly performant on mobile devices, easy to maintain, and aligned with local SEO best practices. ## Solution I built a fast, accessible, and responsive static landing page using semantic HTML, Tailwind CSS, and minimal JavaScript. A static architecture was intentionally chosen to maximize performance, reduce hosting costs, and eliminate backend maintenance—making it ideal for a small business use case. The interface focuses on conversion-first design, with a prominent hero section, clear service breakdown, transparent pricing, and strong call-to-action elements such as click-to-call and quote requests. ## Tech Stack * **HTML5 (Semantic Markup)** — improves accessibility and SEO structure * **Tailwind CSS** — enables rapid UI development and consistent design system * **Vanilla JavaScript** — lightweight interactivity without unnecessary framework overhead * **Static Hosting** — fast global delivery with minimal operational complexity * **PostCSS / Tailwind Build Tools** — optimized CSS generation and smaller bundle size ## Key Features * Conversion-focused hero section with immediate CTAs (Call / Request Quote) * Services grid with clear descriptions and indicative pricing * Pricing section highlighting common repair costs * Trust-building elements (repair statistics, satisfaction rate, warranty messaging) * Image gallery showcasing previous work * JSON-LD LocalBusiness schema for improved local SEO * Responsive navigation with accessible mobile menu * Click-to-call functionality for direct user conversion ## Performance * Optimized image assets to reduce load time * Mobile-first design ensuring fast initial render on smartphones * Minimal JavaScript footprint to keep bundle size small * Static deployment for fast response times and high availability ## Challenges & Solutions * **Challenge:** Maintaining fast load times with large visual assets * **Solution:** Used optimized images, lazy loading strategies, and gradient overlays to balance performance and visual quality * **Challenge:** Driving user conversion through clear contact paths * **Solution:** Designed prominent CTAs (click-to-call, quote request) in both the hero section and navigation * **Challenge:** Keeping the codebase simple and maintainable * **Solution:** Leveraged Tailwind’s utility-first approach to reduce custom CSS and maintain consistency * **Challenge:** Improving local search visibility * **Solution:** Implemented structured data (LocalBusiness JSON-LD) and SEO-friendly semantic markup ## Results * Improved user experience through fast-loading, mobile-optimized design * Clear and immediate conversion paths (call and quote requests) * SEO-ready structure supporting better visibility in local search results * Low-maintenance, cost-effective solution suitable for small business operations ## Key Engineering Insight For small business websites, simplicity and performance often outperform complex architectures. A static-first approach provided better reliability, faster load times, and reduced long-term maintenance overhead. ## Links * Live site: <https://www.ifixsmart.fr/>
Omra Dream: A Real-Time Automated Charity & Crowdfunding Ecosystem
### Overview I developed OmraDreamn, a high-concurrency platform built on **Laravel 12** and **Vue 3**. The system manages a continuous cycle of campaigns where one Omra trip is funded at a time. It leverages **Laravel Reverb (WebSockets)** to broadcast donation progress in real-time and provides an administrative suite to manage the manual "Live Draw" winner selection process. ### Challenge The core requirement was to maintain "Continuous Fundraising" without downtime: * **Atomic Integrity:** Preventing over-funding when multiple donors contribute simultaneously. * **Seamless Transitions:** Managing the lifecycle from `Active` to `Funded` and immediately triggering the next campaign. * **Manual Verification:** Ensuring a clean separation between the automated donation flow and the human-led winner selection event. ### Solution I engineered a state-driven architecture centered around: * **Concurrency Handling:** Used `DB::transaction()` and `lockForUpdate()` during donation processing to maintain accurate, atomic progress tracking. * **Real-Time Updates:** Integrated **Laravel Reverb** to update progress bars instantly for all users via WebSockets. * **State Machine Logic:** Built a robust service layer that monitors campaign limits and triggers the "Funded — Pending Draw" status automatically. * **Admin Verification Panel:** Designed an interface for manual winner selection that triggers automated notifications to all applicants upon completion. ### Impact Delivered a reliable, transparent platform that increased donation throughput by ensuring the "next" campaign is always ready. The system successfully handles high-traffic spikes without data inconsistencies, providing a professional, trustworthy experience for donors and applicants alike.
DhenBio E-Commerce Ecosystem
# DhenBio E-Commerce Ecosystem ## Project Details **Lead Full-Stack Developer — DhenBio Ecosystem** Architected and deployed a comprehensive e-commerce ecosystem including a high-concurrency Laravel backend, a high-performance Vue 3 frontend, and a cross-platform Flutter mobile application. The project serves as a scalable, omnichannel solution for the natural products industry. ## Overview I led the end-to-end development of DhenBio, a unified ecosystem designed to manage complex product lifecycles, global order processing, and multi-channel customer engagement. The platform integrates a decoupled REST API, a responsive SPA, and native mobile apps to provide a seamless shopping experience. ## Challenge Building an ecosystem of this scale involved addressing enterprise-level complexities: * **System Synchronization:** Ensuring product data, inventory, and order statuses remain consistent across Web and Mobile platforms. * **Complex Business Logic:** Managing multi-currency pricing, tiered promotions, and automated delivery fee calculations. * **API Scalability:** Building a high-performance backend capable of handling traffic spikes during promotional campaigns. * **Platform Parity:** Providing a native mobile experience that mirrors the feature set and speed of the web frontend. ## Solution I designed a decoupled architecture that prioritizes modularity and performance: * **API-First Backend (Laravel):** Developed a robust REST API as a single source of truth, utilizing OAuth 2.0 for secure authentication and queue-based processing for resource-heavy operations. * **Responsive Frontend (Vue 3/Vite):** Implemented a performant Single-Page Application (SPA) with Pinia for state management and an aggressive caching strategy to ensure sub-second page loads. * **Cross-Platform Mobile (Flutter):** Built a unified Flutter codebase for iOS and Android, ensuring consistent business logic and UI/UX across all mobile devices. * **Global Optimization:** Integrated RTL (Right-to-Left) design support, internationalization (i18n), and CDN-based asset delivery to support a global user base. ## Impact Delivered a fully integrated, production-ready ecosystem that streamlined internal operations and improved customer conversion rates. The architecture allows for independent scaling of each component, significantly reducing maintenance overhead while maintaining high availability during peak shopping events. --- ## Technical Stack * **Backend:** Laravel (PHP), MySQL, Laravel Passport (OAuth 2.0), Redis. * **Web Frontend:** Vue 3, Vite, Pinia, TailwindCSS, Axios, Vue Router. * **Mobile App:** Flutter (Dart), Firebase, GetX, Cached Network Image. * **Integrations:** Payment Gateways (3D Secure), Shipping APIs, Pusher (WebSockets). * **DevOps:** Nginx, Docker-ready environment, CDN-optimized asset delivery. ## Key Features * **Full E-commerce Lifecycle:** From product discovery and search to secure checkout and order tracking. * **Multi-Platform Consistency:** Unified backend API serving both Web SPA and Native Mobile apps. * **Advanced Admin Control:** Comprehensive dashboard for reporting, inventory, and order management. * **User-Centric Design:** Multi-language (AR/FR/EN) support, RTL interface, and responsive mobile-first UI. * **Performance Focused:** Intelligent caching strategies, lazy loading, and optimized API endpoints.
-medium.webp)
Ihyae: A Secure Ecosystem for Community Crowdfunding & Social Impact
### Overview I developed Ihyae, an "API-first" donation engine. By separating the **Laravel REST API** from the **Vue 3 frontend**, I built a fast, accessible web application that handles complex contribution lifecycles, project discovery, and account management while maintaining a clean, trust-oriented UI. ### Challenge Community funding platforms require a delicate balance between ease-of-use and rigorous security: * **Donor Trust:** Users need transparent, real-time feedback on project milestones and secure payment status. * **Conversion Friction:** Lengthy checkout processes lead to abandoned donations. * **Security & Spam:** High risk of fraudulent campaigns and bot-driven spam required a multi-layered verification strategy. ### Solution I implemented a security-first, headless architecture featuring: * **Decoupled Backend:** Built a **Laravel REST API** protected by **Sanctum** to ensure a single, secure source of truth for all transactions. * **Modern Frontend:** Leveraged **Vue 3, Vite, and Pinia** to create a responsive, component-driven UI that behaves like a native mobile app. * **Streamlined Checkout:** Developed a multi-step donation flow with real-time success/failure handling to minimize abandonment. * **Fraud Mitigation:** Integrated **Google reCAPTCHA** and server-side validation to ensure campaign and donor integrity. ### Impact Successfully delivered a platform that significantly reduces friction in the donation process. The decoupled architecture provides excellent scalability, allowing for high availability during fundraising surges and seamless future integration with mobile apps via the existing REST API.
What I
Offer
A range of services to help businesses and individuals establish a strong online presence — built and delivered solo.
Fullstack Web Development
Creating responsive and high-performance websites using modern technologies like Laravel and Vue.js.
Mobile App Development
Building cross-platform mobile applications for iOS and Android using Flutter and React Native.
eCommerce Solutions
Developing single-vendor and multi-vendor eCommerce platforms tailored to your business needs.
APIs & Third-party Integrations
Creating robust APIs and seamlessly integrating third-party services into your applications.
UI/UX-Centric Admin Panels
Designing intuitive and engaging user interfaces for dashboards and admin panels.
Custom Digital Solutions
Building specialized digital solutions tailored to your unique business requirements.
Hello, I'm
Ayoub
Mouakkir
I'm a passionate and experienced fullstack developer with a strong track record in delivering robust web and mobile applications. While I specialize in eCommerce platforms, I'm open to working in any field that requires well-crafted digital solutions.
I've built projects using Laravel, Vue.js, Flutter, Node.js, Express, React, React Native, and Python. Most of the time, I've been the solo developer from backend to frontend, delivering complete solutions.
What Clients
Say
Real feedback from real clients. Every project is a partnership built on trust, speed, and quality.
"Superb work by Ayoub Mouakkir on my site i Fix Smart Pro! A team that is attentive, responsive, and highly competent. If you are looking for quality for your web project, go for it without hesitation."
"I had the honor of working with Ayoub on several strategic projects, and he was always a reliable partner. He stands out with a clear technological vision and speed in execution without compromising quality, in addition to a creative sense in finding innovative solutions to any challenges. His ability to solve problems efficiently, along with his continuous and unhesitant collaboration, made every experience working with him smooth and successful. I strongly recommend him to anyone looking for a serious, committed technical partner capable of bringing real value to projects."
"I worked with Ayoub and he was extremely professional. He stands out for his speed in execution, precise error correction, and openness to feedback and improvements. He has a strong creative sense and always delivers practical and smart solutions, which makes the implementation smooth and results in a stable website with an elegant interface and an excellent user experience. I highly recommend working with him for his seriousness and efficiency."
Have a Project
In Mind?
Have a project in mind or just want to say hi? Feel free to reach out — I'm always open to discussing new opportunities and interesting challenges.
Morocco
Working globally