Par Emma Guetta | Avril 2026
J'ai créé gagarank.com, un site qui permet de classer toutes les chansons de Lady Gaga par comparaisons, sans savoir coder. Voici exactement comment j'ai fait, étape par étape, pour que vous puissiez faire pareil.
<aside> 💡
Suis-moi sur mes réseaux
Je partage chaque jour de la vulgarisation sur les sciences, la techno et l'IA — avec des conseils pratiques sur l'utilisation de Claude Code.
Soyons honnêtes dès le départ :
| Poste | Coût | Fréquence |
|---|---|---|
| Claude Pro/Max | ~20$/mois (Pro) ou ~100$/mois (Max) | Abonnement mensuel |
| Vercel (hébergement) | 0$ | Gratuit (plan Hobby) |
| Supabase (base de données) | 0$ | Gratuit (plan Free) |
| Nom de domaine | ~10-15$/an | Annuel |
| Total pour démarrer | ~20$ + domaine | |
| Total récurrent (après le dev) | ~10-15$/an (juste le domaine) |
<aside> 💡
Une fois le site créé, vous pouvez résilier Claude et ne garder que le nom de domaine. Vercel et Supabase restent gratuits tant que votre trafic est raisonnable.
</aside>
Avant de commencer, il faut comprendre les briques qu'on va utiliser. Pas besoin de comprendre comment elles fonctionnent en détail : c'est Claude qui s'en occupe. Mais c'est utile de savoir à quoi elles servent pour suivre ce qui se passe.
| Terme | C'est quoi ? | Analogie |
|---|---|---|
| Frontend | Ce que l'utilisateur voit (le site, les boutons, le design) | La vitrine du magasin |
| Backend | La logique côté serveur (calculs, connexion base de données) | L'arrière-boutique |
| Base de données | Là où on stocke les données (utilisateurs, votes, classements...) | Le carnet de comptes |
| API | Le "messager" entre le frontend et le backend | Le serveur au restaurant |
| Déployer | Mettre le site en ligne pour que tout le monde puisse y accéder | Ouvrir les portes du magasin |
| Brique | Rôle | Analogie |
|---|---|---|
| Next.js | Le moteur du site (gère les pages, les API, les performances) | Le moteur de la voiture |
| Tailwind CSS | Le style du site (couleurs, tailles, espacements) | La peinture et la déco |
| shadcn/ui | Des composants prêts à l'emploi (boutons, cartes, menus...) | Des meubles IKEA pour le web |
| Supabase | La base de données (stocke vos données dans le cloud) | Le classeur Excel, mais en ligne |
| Vercel | L'hébergement (rend votre site accessible à tout le monde) | Le propriétaire du local commercial |
| GitHub | Le stockage du code + l'historique des modifications | Le classeur avec tout l'historique |
| Git | Le système qui sauvegarde vos modifications | Les points de sauvegarde dans un jeu vidéo |
<aside> ✅
Vous n'avez pas besoin d'apprendre ces technologies. Claude les connaît parfaitement et s'occupe de tout installer, configurer et coder. Votre rôle, c'est de décrire ce que vous voulez et de valider le résultat.
</aside>