Imaginez créer une application Web complexe sans y consacrer des semaines ou des mois. C’est exactement ce que je viens de faire avec ImageTools.pro, une application de traitement d’image en ligne que j’ai créée en seulement 5 jours à l’aide de l’IA et des technologies Web modernes.
Ce projet est issu de ce que l’on appelle désormais communément le « vibe coding », une approche de développement logiciel popularisée par Andrej Karpathy début 2025. Selon Wikipedia, le vibe coding est une méthode dans laquelle les développeurs décrivent le problème en quelques phrases comme une invite vers un grand modèle de langage (LLM), puis guident et affinent le code généré.
Je vais vous expliquer comment j’ai utilisé cette approche pour créer ImageTools.pro en si peu de temps.
ImageTools.pro a été vendu sur Flippa
J’ai ensuite vendu ce projet sur Flippa.
La première chose que j’ai faite a été d’utiliser Claude 3.7 Sonnet pour créer une feuille de route complète et une liste de tâches pour le projet. J’ai expliqué ma vision d’une application de traitement d’image basée sur un navigateur, et l’IA m’a aidé :
J’ai ensuite transmis cette feuille de route et cette liste de tâches à Cursor, l’éditeur basé sur l’IA, afin qu’il puisse apprendre le contexte avant de commencer à créer.
Sur la base des recommandations de l’IA et de ma propre expérience, j’ai choisi cette pile :
Next.js 15.2.4 - La dernière version avec App Router, une excellente prise en charge des composants de serveur, un routage basé sur des fichiers et une optimisation d’image intégrée.
React 19 - La bibliothèque d’interface utilisateur principale pour les interfaces interactives.
TypeScript - Pour une meilleure sécurité des types et une meilleure expérience de développement.
Shadcn UI - Un système de composants hautement personnalisable construit sur Radix UI.
Tailwind CSS - Un framework CSS axé sur les utilitaires qui maintient un style rapide et flexible.
Framer Motion - Pour un mouvement fluide et soigné sur l’interface.
Pour le traitement des images, j’ai utilisé un ensemble hybride de bibliothèques :
Traitement basé sur un navigateur (principal) :
browser-image-compression (v2.0.2) - pour la compression d’images dans le navigateurimage-conversion (v2.1.1) - pour la conversion de format de basejimp (v1.6.0) - une bibliothèque de manipulation d’images purement JavaScriptreact-image-crop et react-easy-crop - pour une interface utilisateur de recadrage intuitiveTraitement côté serveur (facultatif/limité) :
sharp (v0.34.0) - une bibliothèque de traitement d’images Node.js pour des opérations plus avancéesbmp-js - pour la gestion BMPjspdf - pour la conversion PDFto-ico - pour la génération de faviconJ’ai également utilisé plusieurs bibliothèques d’utilitaires :
Contrairement à un flux de travail linéaire traditionnel, ImageTools.pro a évolué de manière plus fluide. C’est l’essence du codage vibratoire. Mon expérience en HTML et CSS m’a beaucoup aidé à comprendre et à guider le code généré par l’IA.
Au lieu de passer par des phases rigides, j’ai sauté entre différentes parties de la construction en fonction de ce qui était nécessaire à ce moment-là. Voici les principaux faits saillants :
J’ai commencé par demander à Cursor + Claude 3.7 de créer la structure du projet Next.js avec Tailwind CSS et Shadcn UI. L’expérience a été étonnamment fluide. J’ai simplement décrit ce que je voulais et l’IA a généré rapidement le passe-partout.
// app/page.tsx - Page de destination simple
import Hero from '@/components/landing/Hero'
import FeaturedTools from '@/components/landing/FeaturedTools'
import HowItWorks from '@/components/landing/HowItWorks'
import Features from '@/components/landing/Features'
export default function Home() {
return (
<main>
<Hero />
<FeaturedTools />
<HowItWorks />
<Features />
</main>
)
}Le plus difficile a été de créer un traitement d’image efficace. Après avoir étudié les options, j’ai opté pour une approche hybride qui donne la priorité au navigateur.
Traitement côté client – C’est devenu la voie principale. Pour la plupart des opérations, j’ai utilisé l’API Browser Canvas avec des bibliothèques JavaScript telles que browser-image-compression, image-conversion et jimp. Cela permet aux utilisateurs de traiter les images directement dans le navigateur sans télécharger de fichiers sur le serveur.
Exemple d’implémentation de redimensionnement avec l’API Canvas :
function resizeImage(file, maxWidth, maxHeight) {
return new Promise((resolve) => {
const img = new Image();
img.onload = () => {
let width = img.width;
let height = img.height;
if (width > maxWidth) {
height = (maxWidth / width) * height;
width = maxWidth;
}
if (height > maxHeight) {
width = (maxHeight / height) * width;
height = maxHeight;
}
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, width, height);
canvas.toBlob((blob) => {
resolve(blob);
}, file.type);
};
img.src = URL.createObjectURL(file);
});
}Traitement de secours côté serveur - Pour les opérations plus complexes ou les formats qui ne sont pas efficaces dans le navigateur, comme la conversion AVIF ou TIFF, j’ai utilisé des API sans serveur avec Sharp.js. L’important était de s’assurer que les fichiers des utilisateurs étaient traités en toute sécurité et non stockés après traitement.
J’ai réduit au minimum le traitement côté serveur et je ne l’ai utilisé que lorsque cela était nécessaire, tout comme le message sur ma page À propos l’indique :
"Toutes les conversions se font directement dans votre navigateur. Vos fichiers ne quittent jamais votre appareil."Cette approche hybride axée sur le navigateur m’a donné de la flexibilité tout en gardant la confidentialité des utilisateurs comme une priorité absolue.
Claude et Gemini ont tous deux été extrêmement utiles lorsque j’ai intégré différentes bibliothèques et optimisé les performances du navigateur. Par exemple, j’ai débattu de l’opportunité d’utiliser browser-image-compression ou une implémentation manuelle de Canvas pour la compression, et l’IA m’a aidé à comparer les avantages et les inconvénients.
La construction de l’interface utilisateur avec Shadcn UI et Tailwind CSS s’est très bien déroulée. Pour rendre l’expérience plus attrayante, j’ai ajouté des animations Framer Motion et je me suis assuré que l’interface était réactive partout.
J’ai également utilisé Zustand pour une gestion légère de l’état, ce qui m’a permis de gérer l’état de l’application sans passe-partout supplémentaire. Cela était particulièrement utile pour conserver les paramètres utilisateur lors du basculement entre les outils.
// Store pour l’état du traitement et les préférences utilisateur
const useImageStore = create((set) => ({
originalImage: null,
processedImage: null,
processingStatus: 'idle', // 'idle' | 'processing' | 'done' | 'error'
settings: {
quality: 80,
format: 'webp',
resize: { width: 800, height: 600, maintain: true },
},
setOriginalImage: (file) => set({ originalImage: file }),
setProcessedImage: (result) => set({ processedImage: result }),
setProcessingStatus: (status) => set({ processingStatus: status }),
updateSettings: (newSettings) => set((state) => ({
settings: { ...state.settings, ...newSettings }
})),
resetStore: () => set({
originalImage: null,
processedImage: null,
processingStatus: 'idle',
}),
}));Dans la phase finale, je me suis concentré sur :
Le processus de déploiement sur Vercel s’est très bien déroulé. La connexion du référentiel GitHub et l’envoi de la première version de production n’ont pris que quelques clics.
Une chose dont je suis particulièrement fier est la collection complète de plus de 35 outils d’image que j’ai construits. Ils sont organisés en catégories faciles à parcourir :
J’ai implémenté la prise en charge de la conversion entre tous les formats populaires :
Outils que j’ai créés pour réduire la taille des fichiers dans tous les formats :
Outils pour modifier les dimensions de l’image :
Outils spéciaux que j’ai ajoutés :
La mise en œuvre de tous ces outils a été un défi, notamment parce que plusieurs nécessitaient une logique de traitement assez complexe. Mais avec le vibe coding, j’ai pu terminer rapidement la plupart des fonctionnalités. Honnêtement, j’avais l’impression d’avoir un assistant développeur travaillant avec moi sans arrêt.
Après le lancement, ImageTools.pro a fourni des résultats qui m’ont vraiment rendu heureux :
Plus important encore, c’est devenu une véritable preuve que le développement assisté par l’IA fonctionne. Ce qui prendrait normalement des semaines, je l’ai terminé en 5 jours.
ImageTools.pro est un véritable exemple de ce que le codage d’ambiance peut faire. Le terme a été popularisé par Andrej Karpathy en février 2025. Selon un article Medium de Madhukar Kumar, le codage d’ambiance est devenu une tendance significative dans le développement de logiciels, avec l’émergence de nombreux outils pour prendre en charge le flux de travail.
Cette approche offre quelques avantages majeurs :
Grâce à l’IA, j’ai pu passer de l’idée au produit fonctionnel beaucoup plus rapidement qu’auparavant. Cela ouvre de nouvelles portes à l’expérimentation et à l’innovation, autrefois limitées par le temps et les ressources.
Vous souhaitez créer une application Web personnalisée pour votre entreprise ? Voir notre service de développement d’applications Web ou contactez-nous pour une consultation gratuite.
Mises à jour, sauvegardes, surveillance de la sécurité et suivi des performances.
Sites React modernes lorsque des fonctionnalités dynamiques sont nécessaires.
Sites vitrines, pages d’atterrissage et sites professionnels orientés contenu.
Fondateur de Harun Studio, développeur web, blogueur et spécialiste de l’hébergement. Il aide les entreprises à construire des sites plus sains grâce au design, au développement et à la maintenance à long terme.
Découvrez d’autres conseils directement liés à ce sujet.
ÉTUDES DE CAS Étude de cas NeatInvoice : positionnement de l'espace de travail vs générateur PDF, architecture Éditeur + aperçu, suivi des liens en direct, conception professionnelle calme et pile Next.js + Supabase + Vercel.
Lire l’article
ÉTUDES DE CAS Comment ICV Training a modernisé son site Web avec Astro, Sanity et Cloudflare Workers pour gérer 4 905 documents liés à la formation avec une publication assistée par l'IA et une configuration de plate-forme légère.
Lire l’article
ÉTUDES DE CAS Une étude de cas sur la migration de Penasihat Hosting : d'une configuration WordPress encore solide vers Next.js 16 + PostgreSQL pour une flexibilité à long terme, un CMS personnalisé, des pages d'outils et une base de produit plus évolutive.
Lire l’article