CASE STUDY · FULL-STACK + AI

MONO

Full-Stack E-commerce Platform + AI Virtual Try-On

MONO is a modern e-commerce platform that combines a seamless shopping experience with an AI-powered virtual try-on, allowing customers to see how clothes look on them before they buy.

Next.jsNode.jsExpressPrismaMySQLJWTAI

Projet de Fin d'Études (PFE)/ISMAGI/2025 – 2026

By Saad Bouhamou/Licence Professionnelle en Développement Web et Mobile

mono — storefront

Storefront — the shipped homepage

PROJECT

OVERVIEW

A complete full-stack e-commerce platform with AI virtual try-on, built to deliver a smooth, modern and intelligent shopping experience.

Problem

Traditional online shopping lacks the ability to try clothes virtually, leading to uncertainty, higher return rates and less customer satisfaction.

Architecture

Modern full-stack architecture: Next.js frontend, Node.js + Express REST API, Prisma ORM with a MySQL database, and an AI service for virtual try-on.

Solution

A full-stack e-commerce platform with AI virtual try-on, allowing users to visualise clothing on their own body, with a seamless and secure shopping experience.

Key Features

Everything a store needs, plus the AI module that makes MONO different.

Secure authentication & authorization
Product catalog & search
Shopping cart & wishlist
Order management
AI virtual try-on

Context

Fashion e-commerce is one of the largest markets online, but customers still cannot try clothes on before buying. That uncertainty means more returns, more frustration and less trust in online stores.

MONO — a modern e-commerce platform with an AI-powered virtual try-on, so customers can see how a garment fits on their own body before they order it.

src/app/api/products/route.ts

1import { NextResponse } from "next/server";
2import { prisma } from "@/lib/prisma";
3
4export async function GET(request: Request) {
5  try {
6    const products = await prisma.product.findMany({
7      where: { isActive: true },
8      include: { category: true, images: true },
9    });
10
11    return NextResponse.json({ products });
12  } catch (error) {
13    return NextResponse.json(
14      { message: "Failed to fetch products" },
15      { status: 500 }
16    );
17  }
18}

Objectives

Develop a modern e-commerce platform

Build a high-performance full-stack architecture

Integrate an AI virtual try-on system

Improve the user experience

AI POWERED

AI VIRTUAL TRY-ON

See how it looks on you, in real time. MONO's AI pipeline maps the garment onto your own photo and returns a realistic preview you can compare before ordering.

Realistic results
Powered by advanced AI models
Multiple poses
View from different angles
Accurate fit
Better shopping decisions

mono — product

Real screen · product page, where the try-on starts

Demo recording

The module running end to end: photo upload, generation and the before → after comparison.

MP4 · 33 MB · CLICK TO PLAY

PIPELINE

END-TO-END FLOW

From the “Try On” click to the Before → After comparison: the 15 steps of the AI try-on, across the frontend, the backend, the AI provider and the database.

FRONTENDBACKENDAI PROVIDERDATABASE

01FRONTEND

Frontend

The user opens a product page, clicks “Try On”, selects a photo and clicks “Generate AI Try-On”.

02BACKEND

Upload

Frontend calls POST /api/upload/try-on. The backend stores the file (uploads/try-on/<timestamp>.jpg) and returns its public URL.

03BACKEND

Frontend → Backend

POST /api/ai-try-on with { "productId": "...", "userImage": "http://.../uploads/..." }.

04BACKEND

Controller

The controller stays thin — Route → Controller → Service → Response. No business logic inside the controller.

05BACKEND

AI Try-On Service

findProduct(productId) reads the product from the database and resolves its main image.

06BACKEND

Resolve product image

The internal path /assets/products/... is turned into an absolute public URL so the AI provider can fetch it.

07AI PROVIDER

AI Provider Factory

The service only calls createAIProvider(). The factory reads AI_PROVIDER from .env and instantiates the right provider (new HuggingFaceProvider(), or a MockProvider) — the Provider Pattern.

08AI PROVIDER

HuggingFace Provider

The provider receives two inputs: the person image and the garment image.

09AI PROVIDER

File handling

HuggingFace cannot read localhost, relative or backend paths, so resolveAndHandleFile() downloads the URL to a temp file first.

10AI PROVIDER

Gradio upload

handle_file() converts the image into Gradio's FileData format ({ type: "command", command: "upload_file" }).

11AI PROVIDER

Space discovery

The provider tries Space1 → Space2 → Space3 → Space4 until it finds an endpoint exposing /tryon or /process_hd.

12AI PROVIDER

Prediction

Person + garment + parameters are sent to the IDM-VTON model (GPU inference), which returns the generated image.

13AI PROVIDER

Raw response

The generated image is read from the raw response (e.g. data.url).

14DATABASE

Database update

The service stores generatedImage through repository.update() and sets the TryOnJob status to SUCCESS.

15FRONTEND

Frontend

The frontend fetches generatedImage and shows a Before → After comparison.

ARCHITECTURE

SYSTEM ARCHITECTURE

A scalable and secure architecture designed for performance, modularity and AI integration.

Frontend

Next.js

(Web App)

API

Node.js + Express

(REST API)

Database

MySQL

(Prisma ORM)

AI Service

Virtual Try-On

(AI Model)

Frontend

Fully responsive, animation-driven interface.

Next.jsReactTailwind CSSZustand (state)GSAP + Lenis (animation & UX)

Backend

Layered REST API with JWT authentication.

Node.jsExpress.jsControllers → Services → RepositoriesREST APIJWT authModules: Auth · Users · Products · Categories · Collections · Variants · Cart · Orders · Wishlist · Upload · AI Try-On

Database & ORM

Normalized, scalable and maintainable schema.

MySQLPrisma ORMMigrationsRelational integrity15+ normalized entities

AI

Provider Pattern — swap the AI without touching the app.

Provider Pattern / Provider FactoryMock Provider (development / simulation, ~5s)HuggingFace provider (real integration)Future: FASHN AI · Replicate

Database design

User

Accounts, credentials, roles

Product

Catalog, images, collections

Variant

Size / colour, stock and price

Collection

Curated product groupings

Cart / CartItem

Active basket and its line items

Order / OrderItem

Placed orders, status, line items

Wishlist

Saved products per user

TryOnJob

Person image, garment, generated image, status

15+ normalized entities in total — the eight above are the core of the schema. A user can create multiple orders, add products to the cart and the wishlist, and run the AI Try-On module — every relation is enforced by the schema.

KEY FEATURES

MAIN FEATURES

Authentication

Secure login and registration, JWT tokens and protected routes.

Products

Product catalog, categories, search and filters — full CRUD.

Cart

Add, remove and manage items in your cart.

Wishlist

Save your favourite items for later.

Orders

Track orders, history and invoices.

AI Try-On

Upload your photo (or use the webcam) to see clothes on you.

TROUBLESHOOTING

PROBLEMS SOLVED

Six blockers hit while wiring the AI try-on to a real model — and how each one was fixed.

#01“Could not resolve app config”

Solved with Space discovery.

#02ENOENT

Wrong product path.

#03localhost inaccessible

Download the image to a temp file before uploading it.

#04upload_file error

Use handle_file() instead.

#05IndexError

Caused by unsuitable images / internal Space states — fixed after correcting how files were passed.

#06Final run

Prediction SUCCESS → Repository SUCCESS → generated image returned.

External limitation · The remaining “Could not resolve app config” that occurs across all public Spaces (Nymbo/IDM-VTON, John6666/IDM-VTON, yisol/IDM-VTON, levihsu/OOTDiffusion) is an EXTERNAL limitation — Spaces removed, renamed or sleeping, or a gradio_client update — not an application bug.

PROJECT REPORT / DOCUMENTATION

DOCUMENTATION

ISMAGI

Licence Professionnelle en Développement Web et Mobile

MONO

MONO AI Fashion Store : Plateforme e-commerce intelligente avec essayage virtuel assisté par l'IA

Full-Stack E-commerce Platform + AI Virtual Try-On

Project Report

Author — Saad Bouhamou · Encadrant — Nassim Kharmoum · Président du jury — Yassine Rayri · Examinateur — Kamal Najem · Year — 2025 – 2026

48 pages · PDF · 2.3 MB

Deliverables

Report & slides

The two PFE deliverables, published with the project: the full written report and the defence slide deck — both served as local files, never from an external host.

Report

Project Report

48 pages · PDF · 2.3 MB

The complete final-year report (French): context, architecture, implementation, results, difficulties and perspectives.

View Full Report

Slides

Presentation Slides

16 slides · PPTX · 1.4 MB

The defence deck used in front of the jury: the same story, slide by slide.

Download Slides

Report structure · 48 pages

01Introduction
02Context & problématique
03Objectives
04General architecture
05Technologies used
06Realization — frontend
07Realization — backend & database
08AI Virtual Try-On module
09Results
10Difficulties encountered
11Conclusion & perspectives

Presentation Slides

“AI-Powered Fashion E-Commerce with AI Virtual Try-On”

The defence deck — 16 slides, French — follows the same structure as the report.

MONO

Architecture

AI Try-On

Results

Slide deck · 16 slides · main sections

01Title / thanks (MONO)
02Plan
03Context & problem
04Objectives
05General architecture
06System design
07Database design (User / Product / Variant / Collection / Order / Cart / Wishlist / TryOnJob)
08Frontend (Next.js, React, Tailwind, Zustand, GSAP, Lenis)
09Backend (Node/Express, Controllers-Services-Repositories, Prisma, REST)
10AI Try-On module (Provider Factory)
11Results
12AI module deep-dive + limitations
13Perspectives
14Conclusion + Q&A

RESULT

WHAT I BUILT

A complete, production-ready full-stack e-commerce platform with AI virtual try-on, showcasing modern web development, scalable architecture and real-world AI integration.

Full-stack application
Clean & scalable code
AI virtual try-on integration
Responsive design

View Live DemoCOMING SOONGitHub

Live demo coming soon · full source code on GitHub

VALIDATION · TESTED

JWT authentication working
Complete product catalog with all CRUD operations
Cart, wishlist and orders work correctly
Backend validated with Postman (REST APIs tested)
Responsive app on desktop, tablet and mobile

HONEST REVIEW

LIMITS & PERSPECTIVES

LIMITATIONS

Main limit: dependency on an external AI API, which is not always available.
No online payment yet.
Not deployed to the cloud yet.

PERSPECTIVES

01Integrate a more performant AI provider (FASHN AI or Replicate, behind the existing Provider Factory)
02Deploy the application to the cloud
03Add an online payment system
04Build a dashboard with more analytics and statistics
05Develop a mobile application