Gradient Generator
Une application web avancée pour créer, personnaliser, previsualiser et exporter des degradees CSS sophistiques - avec génération par IA, ~980 presets, partage communautaire et 20+ mockups d'appareils.
Lignes de code
51,186
TypeScript + React + Prisma
Composants React
142
87 métier + 55 shadcn/ui
Presets de degradees
~980
En 10 categories, 80+ sous-categories
Mockups d'appareils
20+
iPhone, MacBook, iPad, navigateurs...
Présentation du Projet
Ce qu'est Gradient Generator et pourquoi il existe
Gradient Generator est une application web conçue pour les designers, développeurs front-end et creatifs qui ont besoin de générer rapidement des degradees CSS sophistiques. L'outil supporte les degradees lineaires, radiaux, coniques et mesh avec previsualisation en temps réel, une bibliotheque riche de ~980 presets et l'export multi-format (CSS, SVG, PNG, JPEG).
Contrairement aux outils existants (cssgradient.io, webgradients.com), ce projet repousse les limités avec un système de calques avec modes de fusion, une génération par IA via OpenAI, des previsualisations sur mockups d'appareils et une plateforme de partage communautaire avec likes, forks et découverte. Il supporte 11 espaces d'interpolation de couleurs CSS incluant les standards de pointe OKLab et OKLCH.
Linear
Lineaire - Transitions de couleurs basées sur la direction avec contrôle de l'angle
Radial
Radial - Degradees circulaires avec contrôle de la position du centre et de la forme
Conic
Conique - Degradees angulaires tournant autour d'un point central
Mesh
Mesh - Degradees multi-points avec distributions de couleurs complexes
Objectifs, Contexte & Risques
La vision stratégique derriere le projet
Le projet était porte par des objectifs clairs et ambitieux :
UX Intuitive
Qualité designer
Interface fluide, reactive et visuellement soignee
Couverture degradees
4 types
Lineaire, radial, conique et mesh
Bibliotheque de presets
~980
Organises en 10 categories, 80+ sous-categories
Intégration IA
GPT-4o-mini
Générer des degradees à partir de descriptions textuelles
Formats d'export
4 formats
CSS, SVG, PNG, JPEG
Contexte
Ce projet personnel a été conçu à la fois comme un outil de productivité pour designers et une démonstration portfolio de la maîtrise de React/Next.js moderne. L'application a été construite de zero en seulement 3 jours avec les dernières versions de la stack : Next.js 16, React 19, TypeScript strict, Tailwind CSS 4, Prisma 7. Le développement a été accéléré par le codage assisté par IA, Jose DA COSTA servant d'architecte, product owner et reviseur technique.
Enjeux
Le projet devait se differencier des outils existants par la complétude (mesh gradients, calques, IA, mockups, communauté) et la qualité visuelle. La performance était critique : l'éditeur devait rester fluide avec des degradees multi-calques complexes, des effets en temps réel et des animations sans aucun lag. Le projet servait egalement de démonstration concrète des capacités de développement rapide augmente par l'IA.
Complexité de la gestion d'état
8 stores Zustand interconnectés gerant gradient, calques, historique, previsualisation, selections, degradees sauvegardes, communauté et presets.
Compatibilite navigateurs
Les mesh gradients et les espaces d'interpolation modernes (OKLab, OKLCH) ont un support navigateur limite.
Dépendance a OpenAI
La fonctionnalité de génération IA repose entièrement sur l'API OpenAI (modèle gpt-4o-mini).
Absence de tests
Zero fichier de test decouvert - un risque de regression important pour 142 composants et 12 endpoints API.
Les Étapes de Réalisation
Un parcours chronologique de 3 jours de développement intensif
- Scaffold Next.js 16 avec App Router, TypeScript mode strict, Tailwind CSS 4
- Mise en place de l'architecture de stores Zustand pour gradient, calques et historique
- Implémentation de l'éditeur interactif avec support lineaire, radial et conique
- Construction du color picker avance avec saisie HEX/RGB/HSL et zone 2D de couleur
- Implémentation de la persistance IndexedDB pour la sauvegarde locale via la bibliotheque idb
- Construction d'une bibliotheque de ~980 presets organises en 10 categories et 80+ sous-categories
- Implémentation du moteur d'effets visuels : grain, vignette, fondu et modes de fusion
- Ajout des ajustements de couleurs : luminosite, saturation, contraste, rotation de teinte
- Création du module d'export multi-format : CSS, SVG, PNG (via html2canvas), JPEG
- Construction de 20+ composants mockups d'appareils (iPhone 15 Pro, MacBook, iPad, iMac, navigateurs)
- Intégration de l'API OpenAI (gpt-4o-mini) pour la génération texte-vers-degradee avec prompts structures
- Implémentation du support mesh gradient avec distribution multi-points de couleurs
- Construction de la section communautaire "Explore" avec Prisma + SQLite (publication, likes, forks, vues)
- Création du système de calques avec modes de fusion, contrôle d'opacite et reordonnancement
- Ajout de 11 espaces d'interpolation CSS (sRGB, OKLab, OKLCH, Lab, LCH, etc.)
- Construction des pages statiques : Contact, Confidentialite, CGU, Copyright, Changelog
- Design de la section hero animee avec mise en avant communautaire
- Implémentation des animations CSS : rotation, changement de couleur, mouvement, effets glow
- Correction des bugs d'alignement et d'overflow sur les breakpoints responsive
- Configuration du manifest PWA pour l'installation en mode standalone
Les Acteurs & Interactions
L'écosystème humain et technologique
Il s'agit d'un projet solo conçu, désigné et livré par Jose DA COSTA. Le développement a suivi un workflow "human-in-the-loop" : spécification et décisions architecturales par le développeur, génération de code assistee par IA via Claude Code, et revue manuelle et validation de tout le code généré.
La phase de brainstorming a implique 4 assistants IA différents (ChatGPT, Gemini, Grok, Mistral) pour l'ideation et l'analyse concurrentielle, avec des exports stockes dans le depot du projet. Le code de production a été principalement généré via Claude Code, Jose DA COSTA dirigeant les spécifications via un CLAUDE.md detaille.
| Source | Lignes | % du total | Detail |
|---|---|---|---|
| Scaffold (create-next-app) | ~336 | 0.7% | Next.js boilerplate |
| Committed code | ~1,560 | 3.0% | 3 commits (page, configs, modal) |
| AI-assisted code | ~49,476 | 96.7% | 142 components, 8 stores, 12 APIs |
| Total | ~51,186 | 100% |
Dépendances externes
Les intégrations externes clés incluent l'API OpenAI (gpt-4o-mini pour la génération de degradees), Radix UI (25 composants primitifs via shadcn/ui), html2canvas (export d'docs) et idb (abstraction IndexedDB pour la persistance locale).
Les Résultats
Résultats mesurables pour le projet et pour la croissance personnelle
Pour le produit
Fonctionnalités livrees
20
Ensemble complet en 3 jours
Presets de degradees
~980
10 categories, 80+ sous-categories
Espaces de couleurs
11
Dont OKLab, OKLCH, Display-P3
Endpoints API
12
7 GET + 5 POST
Tables en base
3
Author, PublicGradient, Like
Dépendances
66
54 production + 12 développement
Pour moi
Ce projet a renforcé et élargi plusieurs compétences clés :
- Maîtrise React/Next.js moderne - expérience pratique avec les toutes dernières versions (Next.js 16, React 19) et leurs nouveaux patterns
- Expertise CSS avancee - compréhension profonde des spécifications modernes de degradees CSS, espaces d'interpolation (OKLab/OKLCH) et mesh gradients
- Gestion d'état complexe - architecture de 8 stores Zustand interconnectés avec persistance, undo/redo et coordination inter-stores
- Patterns d'intégration IA - prompt engineering structure pour la génération de contenu creatif, parsing des réponses OpenAI en structures typees
- Prototypage rapide avec assistance IA - validation qu'une application complexe et riche peut être construite en 3 jours avec le développement augmente par IA
- Création de design system - construction d'un système complet de tokens CSS avec themes éditeur/site/partage supportant les modes sombre et clair
Les Lendemains du Projet
La vie après le sprint de développement initial
Suites immédiates
L'application était fonctionnelle en local après 3 jours de développement. Cependant, plusieurs éléments manquaient pour un lancement en production : une stratégie de base de données robuste (SQLite est insuffisant pour les accès concurrents d'une plateforme communautaire), une couverture de tests adequat et des pipelines CI/CD. Le projet est resté en état de développement avec seulement 3 commits git et un working tree largement non-commite.
A moyen terme
Le projet a rempli son objectif principal en tant que pièce de démonstration portfolio, montrant la capacité à construire une application complexe et riche en fonctionnalités rapidement. Les ~980 presets et la génération IA représentent une propriété intellectuelle réutilisable qui pourrait être extraite en bibliothèques autonomes ou intégrée dans d'autres outils de design.
État actuel
Le projet est fonctionnel en local mais non déployé en production. Il resté une démonstration convaincante de ce que les outils de développement web modernes et le codage assisté par IA peuvent accomplir dans un délai extrêmêment compresse. L'architecture et les patterns etablis (composants feature-driven, multi-store Zustand, backend communautaire Prisma + SQLite) fournissent une base solide pour un futur déploiement en production.
Mon Regard Critique
Une analyse rétrospective honnete
- Richesse fonctionnelle exceptionnelle pour un projet de 3 jours - éditeur, calques, IA, mockups, communauté, presets
- Stack de pointe : Next.js 16, React 19, Tailwind CSS 4, Prisma 7 - toutes les dernières versions
- Système de types TypeScript exhaustif (479 lignes pour les types gradient) offrant une excellente sécurité
- Design system cohérent avec tokens CSS, themes sombre/clair et theming spécifique à l'éditeur
- ~980 presets offrent une valeur immédiate - les utilisateurs peuvent créer sans apprendre l'interface
- Architecture de composants feature-driven permettant la maintenabilité indépendante par module
- Zero couverture de tests - aucun test unitaire, d'intégration ou E2E pour un codebase de 51K lignes
- Seulement 3 commits git - quasi aucune traçabilité des décisions et changements
- SQLite inadequat pour les fonctionnalités communautaires en production (accès concurrent, scalabilité)
- Aucun pipeline CI/CD configuré - pas de portes qualité automatisees
- README par défaut de Next.js sans documentation spécifique au projet
- Pas de rate limiting ni d'authentification réelle (hash navigateur seulement) sur les routes API
Enseignements durables
- L'outillage moderne maximise la productivité - shadcn/ui, Zustand, Prisma et Next.js App Router eliminent le boilerplate et permettent de se concentrer sur la logique métier
- L'architecture feature-driven passe à l'échelle - organiser par fonctionnalité (color-picker, mockups, presets, layers) maintient chaque module autonome et maintenable
- Le typage fort est un investissement - le fichier de 479 lignes de types semble coûteux mais previent des categories entieres de bugs dans l'application
- Les outils riches en contenu gagnent les utilisateurs - les ~980 presets rendent l'outil immédiatement utile, prouvant que le contenu pre-construit a autant de valeur que l'éditeur lui-même
Architecture
Parcours associe
Experience professionnelle liee a cette realisation
Competences mobilisees
Competences techniques et humaines appliquees
Galerie d'images
Captures et visuels du projet
