Construire une webapp en quelques jours — avec IA et no-code.

De quoi il s'agit

Cet article fait partie de notre cluster thématique Logiciels & Produits numériques — une vue d'ensemble de tous les articles sur les architectures d'app, le prototypage de webapp et le chemin de migration vers du code custom.

Dans le blog sur les types d'apps, j'ai décrit pourquoi les PWA et les applications web sont en 2026 le choix optimal pour beaucoup de projets startup et PME, et quelle stack fonctionne pour cela : Cloudflare, GitHub, Cursor + Claude Code, Lovable / v0, Resend.

Dans cet article, tu reçois le walkthrough concret et honnête de la manière dont j'ai utilisé cette stack pour deux projets réels :

• aheadoftime.ch — mon propre site d'agence, plusieurs locales (DE / EN / FR), cas, services, blog, formulaire de contact avec protection anti-spam
• purebosnia.com — un site marketing/produit pour un projet lifestyle bosniaque, multilingue, avec newsletter et amorce de boutique
• Plus des indications sur d'autres setups plus petits que j'ai bâtis selon le même pattern

Public cible de ce blog : des personnes qui ne viennent pas du software engineering classique — responsables marketing, fondateurs/fondatrices, responsables d'équipes innovation, membres de direction de PME. Tu n'as pas besoin de pré-requis en coding, mais bien d'une volonté de suivre le raisonnement étape par étape.

Disclaimer en préambule : « Sans coding classique » ne signifie pas « sans comprendre ». Tu devras apprendre ce qu'est un repo Git, ce qu'est une branche, comment fonctionne un déploiement. Mais : en 2026, quelques heures d'onboarding plus de l'apprentissage itératif on-the-job suffisent. Tu n'as plus besoin d'écrire toi-même du code JavaScript.

Pourquoi IA + no-code + Cloudflare maintenant

Trois évolutions se sont rejointes ces 18 derniers mois, et cela rend la stack en 2026 inhabituellement puissante :

1. Les assistants de coding IA ont atteint un niveau productif. Cursor et Claude Code génèrent du code fonctionnel et maintenable à partir du langage naturel. Ce qui en 2023 était encore un « jouet » est en 2026 un quotidien productif.
2. Cloudflare est en 2026 la stack d'hosting par défaut pour les petites et moyennes web apps. Pages, Workers, D1, R2, KV — infrastructure backend complète, serverless, avec un free tier généreux.
3. Les outils de design IA (Lovable, v0, Figma AI) livrent en quelques minutes des composants frontend exploitables — comme point de départ que l'on raffine ensuite.

Ces trois couches combinées changent ce qu'une seule personne ou une petite équipe peut construire avec un budget minimal. Drastiquement. Pour des projets plus ambitieux, nous combinons la même stack avec un développement plateforme custom classique dès qu'un MVP montre de la traction et doit être stabilisé.

Ma stack — vue d'ensemble

┌─ Concept & exigences ─────────────────────────────────────┐
│  Claude / ChatGPT — partenaire de sparring pour sitemap,  │
│  flows, spec d'exigences, edge cases                      │
├─ Design ───────────────────────────────────────────────────┤
│  Figma + Figma AI OU Lovable / v0 (pour sprints rapides)  │
├─ Code & build ─────────────────────────────────────────────┤
│  Cursor (fork VS Code avec IA) + Claude Code (agent CLI)  │
├─ Repo ─────────────────────────────────────────────────────┤
│  GitHub (privé ou public)                                 │
├─ Hosting ──────────────────────────────────────────────────┤
│  Cloudflare Pages + Workers + D1 + R2                     │
├─ Email & formulaires ──────────────────────────────────────┤
│  Resend (transactionnel) + Cloudflare Turnstile (anti-spam)│
├─ Analytics & SEO ──────────────────────────────────────────┤
│  Plausible + Cloudflare Web Analytics + Google Search Console│
└────────────────────────────────────────────────────────────┘

Coût mensuel total pour les deux projets : ~35 CHF (Cursor Pro, Resend Pro tier optionnel, tout le reste en free tier).

Cas 1 : aheadoftime.ch — walkthrough pas à pas

Les neuf étapes du setup en un coup d'œil :

Point de départ

Il me fallait un site d'agence avec :

• Plusieurs langues (DE, EN, FR)
• Sections : Home, Services (4 sous-pages), Cas (7 sous-pages), Blog (15+ articles), À propos, Contact
• Un design moderne avec header-hero, parallax, scrollytelling
• Un formulaire de contact qui fonctionne sans bascule mailto
• Une intégration Maps conforme LPD/RGPD

Étape 1 — Concept et stratégie de contenu (Claude comme partenaire de sparring)

J'ai expliqué à Claude mon positionnement business, mes audiences et ma brand voice en 5–6 messages. Puis itérativement :

• Sitemap défini : « Voici la description de mon activité. Quelle structure a du sens en SEO et en conversion ? »
• Un content brief par page travaillé (tonalité, sections, éléments obligatoires)
• Mots-clés SEO et LLMO recherchés (clairement, avec vérification des affirmations factuelles — voir pièges 14 et 15)

Output : 25+ fichiers de content briefs en Markdown qui ont alimenté directement l'étape de coding.

Charge étape 1 : ~12 heures réparties sur plusieurs sessions.

Étape 2 — Concept design

Ici, je n'ai pas pris Lovable/v0 mais nourri Cursor + Claude Code directement avec un design system clair :

• Couleurs de marque (cyan/vert/violet/orange comme accents service, gris foncé en BG par défaut)
• Typographie (light/300 weight, sans-serif, hiérarchie claire)
• Style de card (gris foncé #1a1a1a, fine bordure blanche 15% / 40% au hover)
• Système d'icônes (Lucide React, blanc flat)

Justification : Pour un site d'agence je voulais un contrôle total sur le look & feel — et le système est suffisamment clair pour que Claude Code l'applique de manière cohérente sur toutes les pages.

Alternative pour d'autres projets (p. ex. purebosnia.com) : Lovable comme démarrage rapide, puis ajustement manuel. Économise 60–80% de la charge initiale pour des marques plus simples.

Charge étape 2 : ~6 heures (définition du design system + premiers mockups Figma)

Étape 3 — Mise en place du repo (GitHub)

• Nouveau repository créé sur GitHub (privé — public n'a aucun sens pour un site d'agence)
• README, .gitignore, structure de dossiers de base
• Cloné en local via Cursor

Charge étape 3 : ~30 minutes

Étape 4 — Initialisation du code (Cursor + Claude Code)

• Projet Next.js avec Tailwind CSS et support MDX initialisé (Claude Code génère cela avec un seul prompt)
• Couleurs de marque définies dans tailwind.config.js
• Composants de base (Header, Footer, Card, Section, PageHero) construits avec Claude Code

À chaque étape j'ai clairement formulé ce que je voulais :

• « Construis un composant Card avec BG gris foncé (#1a1a1a), bordure blanche (15% d'opacité, 40% au hover), icône Lucide en haut à gauche, headline, body text. Mobile-responsive. »
• Claude Code génère le code, je review (je lis, je n'édite pas), petits ajustements via langage naturel, terminé.

Charge étape 4 : ~8 heures pour la bibliothèque complète de composants de base

Étape 5 — Mise en place du contenu (MDX + content briefs)

• Déposer les content briefs préparés à l'étape 1 en fichiers MDX dans /content/blog/, /content/cases/, /content/services/
• Claude Code construit les routes dynamiques, le SEO meta, le schema markup, la logique d'articles liés

Charge étape 5 : ~10 heures pour tous les contenus

Étape 6 — Header-Hero + Parallax + Scrollytelling

• <PageHero> comme composant partagé avec slot d'image header, eyebrow, H1, sub, CTA optionnel
• Couche parallax via JS (facteur 0.5 desktop / 0.25 mobile, désactivée avec prefers-reduced-motion)
• Reveal des blocs de contenu via Intersection Observer

Charge étape 6 : ~6 heures — y compris le tuning de performance, parce que le LCP était important

Étape 7 — Formulaire de contact + backend

C'est là que ça devient intéressant pour les non-codeurs/codeuses. Mon setup :

• Formulaire frontend avec tous les champs obligatoires (généré à l'étape 4 avec Claude Code)
• Cloudflare Turnstile comme couche anti-spam
• Champ honeypot en défense supplémentaire
• Cloudflare Worker comme endpoint API (/api/contact) recevant la soumission
• Intégration Resend dans le Worker pour l'envoi d'email vers info@aheadoftime.ch (adresse cachée du frontend !)
• Auto-réponse à l'expéditrice/expéditeur via Resend
• Embed Google Maps two-click pour l'adresse du bureau (conforme RGPD)

Charge étape 7 : ~5 heures — y compris les tests end-to-end du pipeline mail

Étape 8 — Déploiement sur Cloudflare Pages

• Compte Cloudflare connecté au repo GitHub
• Projet Pages créé : Cloudflare détecte automatiquement qu'il s'agit d'un projet Next.js
• Domaine custom (aheadoftime.ch) configuré — SSL auto-provisionné
• Variables d'environnement (clé API Resend, clés Turnstile, email de réception) ajoutées

Chaque push sur la branche main déploie automatiquement. Les preview deployments pour les feature branches sont offerts en bonus.

Charge étape 8 : ~2 heures, y compris la migration DNS du domaine

Étape 9 — SEO, analytics, schema markup

• Snippet Plausible intégré (sans cookies, conforme RGPD)
• Cloudflare Web Analytics activé
• sitemap.xml et robots.txt générés via les outils Next.js
• Article schema et FAQ schema dans les posts de blog (pour SEO + LLMO)
• Google Search Console + Bing Webmaster Tools connectés

Charge étape 9 : ~3 heures

Charge totale aheadoftime.ch

• Temps de travail effectif : environ 52 heures réparties sur 4 semaines (soirs/weekends, en parallèle de mandats clients)
• Coût d'outils dans cette phase : ~30 CHF (abonnement Cursor Pro pour 1 mois) + 0 CHF hosting/email/domaine (tout en free tier ou déjà acheté)
• Output : site d'agence multi-locale entièrement fonctionnel avec blog, cas, services, formulaire de contact, header-hero + parallax — production-ready

Combien cela aurait coûté de manière classique ? Réalistement : 40 000–80 000 CHF chez une agence classique, 6–10 mois de projet.

Cas 2 : purebosnia.com — pas à pas

Point de départ

Site marketing/produit pour un projet lifestyle bosniaque :

• Multilingue (DE, EN, BS)
• Page de brand storytelling
• Inscription newsletter
• Amorce de shop (avec statut « Coming Soon », intégration Mailchimp/Brevo pour la liste pre-launch)
• Design mobile-first

Qu'est-ce qui différait d'aheadoftime.ch ?

• Lovable comme générateur initial : Ici je n'ai pas tout construit depuis zéro dans Cursor, mais j'ai généré la première itération UI dans Lovable. Raison : le brand design était plus flexible, un look moderne photo-driven suffisait au départ. Lovable a livré en 20 minutes une première version utilisable à 60%.
• Cursor + Claude Code pour le raffinement : J'ai exporté la sortie Lovable vers GitHub, ouverte dans Cursor et raffinée avec Claude Code — header, images, multilingue, intégration newsletter.
• Cloudflare Pages identique : Même stack d'hosting qu'aheadoftime.ch.
• Resend pour la confirmation newsletter et les soumissions de formulaire.

Charge totale purebosnia.com

• Temps de travail effectif : environ 16 heures sur 2 semaines
• Coût d'outils : abonnement Lovable (~25 USD pour ce mois unique) + reste en free tier
• Output : site marketing productif avec newsletter, multilingue, mobile-first, production-ready

Leçon apprise : Lovable comme générateur initial fait gagner énormément de temps pour des marques plus simples. Avec un brand system plus complexe (comme aheadoftime.ch et ses 4 accents service et patterns de cards stricts), l'entrée directe dans Cursor est payante.

D'autres projets selon le même pattern

J'utilise désormais cette stack pour :

• Des microsites pour des clients (typiquement 8–20 heures de charge)
• Des landing pages pour des campagnes (typiquement 4–8 heures)
• Des outils internes pour l'automation des workflows AOT (bots, dashboards, mini-apps avec Cloudflare Workers)
• Des environnements d'entraînement bootcamp pour les participantes et participants de workshops

La stack scale magnifiquement de « microsite de 20 heures » à « site d'agence complet ». Là où il s'agit d'une vraie plateforme produit avec comptes utilisateurs et transactions, notre cas plateforme Sharyoo montre jusqu'où tu peux porter le même pattern.

Quand vient le moment du custom code

Malgré tout mon amour pour la stack IA + no-code : il existe une limite réelle où les gains d'efficacité basculent. Dès que ta webapp prend soit une vraie échelle (des centaines d'utilisateurs et utilisatrices en simultané, des workflows transactionnels qui touchent à l'argent), soit nécessite des fonctionnalités spéciales que le générateur ne peut tout simplement pas livrer (modèles de permissions complexes, synchronisation temps réel, algorithmes sur mesure, pipelines de données sensibles), le travail de contournement commence à manger ton temps.

La décision entre « rester en no-code » et « migrer vers du custom » se cartographie sur deux axes : l'échelle utilisateurs (combien de personnes utilisent réellement l'app, à quelle fréquence ?) et le besoin de fonctionnalités sur mesure (à quel point les exigences métier sont-elles spécifiques ?). Pour la plupart des MVP de PME, tu restes dans le quadrant bas-gauche — le no-code suffit largement. Ce n'est qu'en dérivant vers le quadrant haut-droit que le passage à ta propre base de code Next.js, une infrastructure dédiée et un setup dev classique devient rentable.

Important : la migration n'est pas la réussite en soi, c'est le moment où ton produit est sorti du stade MVP. Migrer trop tôt brûle du budget en ingénierie au lieu de validation produit.

Guide pratique pour personnes non-techniques — le plan d'action

Si tu veux te lancer maintenant, voici ton plan en 7 points :

Jour 1 — Concept

• Décris ton projet en 5 phrases
• Discute avec Claude ou ChatGPT : sitemap, user flows, fonctions cœur, edge cases
• Écris-toi à la fin un content brief par page (max 1 page par page)

Jour 2 — Comptes et outils

Liste de setup, dans l'ordre :

1. Compte GitHub (gratuit)
2. Compte Cloudflare (gratuit)
3. Installer Cursor (free tier gratuit, ou Pro pour 20 USD/mois)
4. Compte Anthropic pour Claude / Claude Code (free tier gratuit, ou Pro pour 20 USD/mois)
5. Compte Resend (gratuit jusqu'à 3 000 mails/mois)
6. Compte Plausible (optionnel, 10 EUR/mois) ou Cloudflare Web Analytics (gratuit)
7. Acheter un domaine (typiquement 12–20 USD/an chez Cloudflare Registrar ou Namecheap)

Jour 3 — Design

• Soit : ouvrir Figma, générer un layout de base avec Figma AI, raffiner manuellement
• Soit : ouvrir Lovable, décrire ton app en langage naturel, laisser générer l'UI initiale
• Noter les couleurs de marque, la typographie, le système de composants

Jour 4–5 — Code setup

• Créer le repo GitHub
• Ouvrir Cursor avec Claude Code, cloner le repo
• Nourrir Claude Code avec ton concept et ton design : « Initialise un projet Next.js avec Tailwind CSS et MDX basé sur le brief suivant : [coller le brief] »
• Construire les composants (Card, Header, Footer, Hero, Form) — pas à pas avec Claude Code

Jour 6 — Contenu + backend de formulaire

• Créer tes contenus en fichiers MDX
• Construire le backend du formulaire via Cloudflare Worker + Resend (Claude Code peut le faire de bout en bout)

Jour 7 — Déploiement + polish

• Connecter Cloudflare Pages au repo GitHub
• Configurer le domaine custom
• Lancer un audit Lighthouse, optimiser la performance
• SEO meta, sitemap.xml, robots.txt

Estimation réaliste : Si tu fais ça pour la première fois, il te faudra plutôt 14–20 jours que 7 — courbes d'apprentissage, embûches, itérations. C'est normal. Au deuxième projet, tu es 3× plus rapide.

Pièges fréquents pour personnes non-techniques

• Workflows Git : branch, commit, push, merge — comprends ces bases avant de commencer. 30 minutes de tutoriel YouTube suffisent.
• Variables d'environnement : les clés API vont dans .env (local) et dans l'ENV Cloudflare (production), jamais dans le repo. Sinon tu fuis des credentials.
• Spirale de coût Cursor : Claude Code via Cursor consomme des tokens. Si tu prompts toute la journée sans focus, ça te coûte plus que prévu. Formule des tâches claires.
• Hallucinations : l'IA invente parfois des fonctions de librairie qui n'existent pas. Si le code crashe : « Ça existe vraiment, ou tu l'as inventé ? » est un re-prompt légitime.
• Performance : le code généré par IA est souvent fonctionnel mais pas toujours optimal en performance. Lance des audits Lighthouse, optimise avec Claude Code.
• Mobile testing : les devtools du navigateur ne suffisent pas. Teste sur un vrai iPhone et un vrai Android.

Workshop / Bootcamp : je coache ton équipe sur le setup

Si toi ou ton équipe voulez apprendre exactement ce setup en hands-on, je propose des workshops et bootcamps de 2 à 5 jours :

Options de format

• Workshop intensif de 2 jours pour 4–8 personnes : concept, setup, première page déployée
• Bootcamp de 5 jours pour 4–8 personnes : MVP web app complet production-ready, plus formation pour le développement autonome ultérieur
• Coaching d'accompagnement sur 4–8 semaines (1× par semaine, call de 2h) pour des équipes qui construisent leur première application en parallèle du job

Ce que les participants emportent

• Compréhension pratique de la stack complète (Cloudflare, GitHub, Cursor, Claude Code, Resend)
• Une web app / PWA propre qui tourne, à la fin
• Compréhension de la manière de répliquer et étendre des projets similaires de manière autonome
• Une lecture claire de quand ils peuvent le faire eux-mêmes — et quand des partenaires externes ont du sens

Pour qui

• Équipes marketing et innovation de PME qui veulent devenir digitalement capables
• Équipes fondatrices qui veulent construire leur premier MVP en autonomie
• Membres de direction qui veulent comprendre une fois le setup eux-mêmes pour prendre de meilleures décisions tech
• Équipes IT ou digitales internes qui veulent être au contact des setups modern-stack

Valeur durable

À la différence d'un projet d'agence classique qui te livre un produit, le bootcamp transmet la capacité à construire plusieurs produits toi-même. Tu n'as pas juste une web app finie à la fin, tu as aussi l'équipe qui fait la suivante en autonomie. Qui préfère démarrer accompagné trouvera dans notre accompagnement workshop le bon format.

Intéressé/e ? Écris-moi via le formulaire de contact — on discute de ton scénario concret en un call de 30 min.

Q&R — les questions les plus fréquentes sur le setup IA + no-code

Puis-je vraiment construire une web app production-ready sans background coding ? Oui, avec le bon accompagnement dans les premières étapes. Tu apprendras au passage des concepts de coding (Git, ENV, builds) — mais tu n'auras pas à écrire du code toi-même. Apprentissage itératif on-the-job.

Où sont les limites ? Logique backend complexe (workflows multi-étapes, pipelines de données, fonctionnalités temps réel), intégration matérielle profonde (apps mobiles avec Bluetooth ou similaire), et exigences de performance très élevées (jeux, 3D temps réel) — là, il te faut des ingénieures et ingénieurs logiciels classiques. Pour des processus opérationnels récurrents, ces limites peuvent souvent être déplacées via des workflows multi-agents, plutôt que tout coder soi-même.

Que se passe-t-il si la stack ressemble à autre chose en 2027 ? Elle ressemblera à autre chose. Cloudflare apportera plus de features, Cursor/Claude Code s'amélioreront, de nouveaux outils de design IA arriveront. Mais : le pattern de base (concept → design → code → repo → hosting → forms/email) reste. Qui comprend le pattern peut absorber n'importe quel changement tech concret.

Est-ce que ça vaut la peine pour une PME suisse de former un « web app champion » interne plutôt que de mandater une agence ? Oui, dans la majorité des cas. Une personne dans l'équipe qui maîtrise cette stack bat toute agence externe en vitesse, coût et tempo d'itération — pour des MVP standards et des web apps marketing. Pour des custom builds très complexes, l'agence ou le/la senior dev reste pertinent.

Et la maintenance et les mises à jour ? Cloudflare patche l'infrastructure. Cursor/Claude Code aident pour les updates de dépendances. Une fois la stack comprise, la maintenance est réalistement de 2–4 heures par mois pour un site de taille moyenne.

Et la protection des données et la conformité (LPD, RGPD) ? Cloudflare a des datacenters UE, Resend aussi, Plausible est conforme RGPD — la stack peut être posée proprement compliant. Important : déclaration de confidentialité avec listing concret des outils, bannière cookies si nécessaire, contrats de sous-traitance avec Cloudflare et Resend.

Ma conclusion

En 2026, la barrière d'entrée pour ses propres web apps et MVPs s'est drastiquement abaissée. Là où en 2020 il te fallait encore une équipe de 5 personnes et 6 mois, en 2026 avec le bon setup tu peux démarrer seul/e en 2–4 semaines. Cela change fondamentalement les règles du jeu pour les startups, les PME et les équipes innovation. Pour que de la vitesse découle aussi de l'impact, on couple si besoin le prototypage à une implémentation stratégique propre — sinon tu construis vite, mais à côté de la cible.

Ce qui n'a pas changé :

• Il te faut de la clarté sur ce que tu veux construire (concept).
• Il te faut de la discipline pour vérifier l'output IA (voir pièges de pensée 14 + 15).
• Il te faut une volonté d'itération — les premiers jets ne sont jamais parfaits.

Mais si tu apportes ces trois choses — et que tu investis quelques jours dans l'onboarding — tu disposes en 2026 d'un outil qui était il y a peu encore complètement impensable.

Si tu as envie d'un démarrage concret, contacte-moi. Bootcamp, workshop ou simplement un call de sparring — j'aide volontiers à monter le setup pour ton contexte.

Cela pourrait aussi t'intéresser

• Quel type d'app convient à ton projet ? Native, cross-plateforme, PWA, hybride + setup MVP IA → l'article précédent à ce walkthrough — quel type d'app pour quel projet
• 15 pièges de pensée dans le digital business — partie 2 → les pièges spécifiques à l'IA (biais d'autorité, hallucination) à absolument garder en tête lors d'un setup MVP IA

Sources et lectures complémentaires

• Cloudflare (2024). Pages Documentation.
• Cloudflare (2024). Workers Documentation.
• Vercel (2024). Next.js Documentation.
• Cursor (2024). Documentation.
• Anthropic (2024). Claude Code Documentation.
• Lovable (2024). Documentation.
• Resend (2024). Documentation.
• GitHub (2024). Documentation.

Cette liste rassemble les sources principales pour les concepts abordés dans ce billet. Elle n'est pas exhaustive mais sert de point de départ pour approfondir.