Qu'est-ce que WeWeb ? (différences avec Bubble, Webflow, Framer)

WeWeb est un constructeur d'applications web visuel. Contrairement aux outils comparables, il occupe une niche très précise : vous permettre de construire des interfaces utilisateur complexes, connectées à des données réelles, sans écrire de code.

**WeWeb vs Bubble** : Bubble est tout-en-un (frontend + backend + données dans la même plateforme). WeWeb est exclusivement un frontend — vous connectez votre propre backend (Supabase, Xano, n'importe quelle API REST). Cette séparation donne une flexibilité et des performances nettement supérieures.

**WeWeb vs Webflow** : Webflow est un constructeur de sites web orienté marketing et CMS. Il n'est pas conçu pour des applications avec des comptes utilisateurs, des données dynamiques complexes, ou de la logique métier. WeWeb est fait exactement pour ça.

**WeWeb vs Framer** : Framer est un outil de design et de prototypage. Les connexions aux données et la logique applicative sont très limitées. Pour un vrai produit avec des utilisateurs, vous avez besoin de WeWeb.

En résumé : si vous construisez un site vitrine ou un blog, Webflow ou Framer suffisent. Si vous construisez une application — dashboard, SaaS, portail client, marketplace — WeWeb est l'outil. Découvrez toutes les possibilités sur notre page dédiée à WeWeb.

Créer votre projet WeWeb (workspace, pages, grille responsive)

Pour commencer, créez un compte sur weweb.io. Le tier gratuit vous permet de tester l'outil sans limite de fonctionnalités, avec un sous-domaine WeWeb.

**Créer un workspace** : après l'inscription, créez un nouveau projet. Donnez-lui un nom et choisissez "Web App" comme type de projet. WeWeb vous propose des templates de départ — commencez avec un template vide pour bien comprendre les bases.

**Structure de la grille** : WeWeb utilise une grille flexbox responsive. Chaque élément est dans un conteneur (div) qui peut être configuré en row ou column, avec des gaps, paddings et margins. La logique est identique à CSS — si vous connaissez Flexbox, vous retrouvez vos repères immédiatement.

**Créer des pages** : dans le panneau gauche, cliquez sur "Pages" pour créer vos routes. Chaque page a une URL, un titre et une meta description (important pour le SEO). Commencez par créer : une page `/login`, une page `/dashboard`, et une page `/items`.

**Responsive** : WeWeb gère trois breakpoints — desktop, tablette, et mobile. Vous pouvez ajuster l'affichage indépendamment pour chaque taille. En cliquant sur l'icône responsive en haut de l'éditeur, vous basculez entre les vues. Les modifications sur mobile n'impactent pas le desktop.

Connecter votre base de données Supabase (tables, API REST, auth)

Supabase est le backend idéal pour une première app WeWeb. Son tier gratuit est généreux, et WeWeb dispose d'un connecteur natif.

**Créer un projet Supabase** : rendez-vous sur supabase.com et créez un nouveau projet. Choisissez la région "West EU (Paris)" pour héberger vos données en France. Notez votre URL de projet et votre clé anon.

**Créer vos tables** : dans Supabase, ouvrez l'éditeur de tables. Pour cet exemple, créez une table `items` avec les colonnes : `id` (uuid, primary key), `title` (text), `description` (text), `created_at` (timestamp), `user_id` (uuid, foreign key vers auth.users). Activez Row-Level Security sur la table.

**Configurer le connecteur WeWeb** : dans WeWeb, allez dans "Plugins" > "Supabase". Entrez votre URL et votre clé anon. WeWeb se connecte à votre projet Supabase et importe automatiquement la liste de vos tables.

**Tester la connexion** : dans le panneau "Data" de WeWeb, créez une nouvelle collection basée sur votre table `items`. Vous devriez voir les données apparaître dans WeWeb en temps réel. Si la table est vide, ajoutez une ligne de test directement dans Supabase via l'interface SQL Editor.

Construire les opérations CRUD (liste, création, modification, suppression)

CRUD signifie Create, Read, Update, Delete — les quatre opérations de base sur les données. Voici comment les implémenter dans WeWeb.

**Read (afficher une liste)** : sur votre page `/items`, ajoutez un composant "Repeater" (boucle d'affichage). Liez-le à votre collection `items`. Dans le Repeater, ajoutez un composant "Card" avec deux textes : l'un lié à `item.title`, l'autre à `item.description`. Vous devriez voir vos données s'afficher en boucle.

**Create (créer un élément)** : ajoutez un bouton "Nouveau". En cliquant dessus, ouvrez une modal avec un formulaire. Le formulaire contient deux champs : "Titre" et "Description". Sur le bouton "Sauvegarder" de la modal, ajoutez une action de type "Supabase — Insert row" sur la table `items`. Liez les valeurs des champs aux paramètres de l'insert.

**Update (modifier)** : sur chaque carte, ajoutez un bouton "Modifier". En cliquant, ouvrez une modal pré-remplie avec les données de l'item. Sur "Sauvegarder", ajoutez une action "Supabase — Update row" avec la condition `id = item.id`.

**Delete (supprimer)** : sur chaque carte, un bouton "Supprimer" déclenche une action "Supabase — Delete row" avec la condition `id = item.id`. Ajoutez une confirmation (dialog) pour éviter les suppressions accidentelles.

Gérer l'authentification (Supabase Auth + guards de page WeWeb)

L'authentification est la fonctionnalité la plus importante d'une application. WeWeb + Supabase la rendent simple à implémenter.

**Configurer Supabase Auth** : dans votre projet Supabase, allez dans "Authentication" > "Providers". Activez "Email" (confirmations par email). Dans "Templates", personnalisez l'email de confirmation avec le nom de votre application.

**Page de connexion WeWeb** : sur votre page `/login`, ajoutez deux champs (email, mot de passe) et deux boutons ("Se connecter", "Créer un compte"). Sur "Se connecter", ajoutez l'action "Supabase — Sign in with email/password". Sur "Créer un compte", ajoutez "Supabase — Sign up with email/password". En cas de succès, redirigez vers `/dashboard`.

**Row-Level Security (RLS)** : dans Supabase, sur votre table `items`, créez deux politiques RLS : une pour SELECT (`user_id = auth.uid()`), une pour INSERT/UPDATE/DELETE (`user_id = auth.uid()`). Cela garantit que chaque utilisateur ne voit et ne modifie que ses propres données.

**Guards de pages WeWeb** : dans les propriétés de votre page `/dashboard`, activez "Auth Guard". Si l'utilisateur n'est pas connecté, il est automatiquement redirigé vers `/login`. Appliquez le même guard à toutes les pages nécessitant une authentification.

Design et responsive (variables CSS, breakpoints, composants réutilisables)

WeWeb offre un système de design puissant. Voici comment l'utiliser efficacement.

**Variables CSS** : dans "Design" > "Variables", définissez vos tokens de design — couleurs primaires, secondaires, polices, tailles de texte. Ces variables sont réutilisables dans toute l'application. Si vous changez la couleur primaire, elle se met à jour partout. C'est l'équivalent d'un système de design tokens.

**Composants réutilisables** : sélectionnez un groupe d'éléments (par exemple, une Card) et cliquez sur "Create component". Le composant devient disponible dans la bibliothèque et peut être réutilisé sur toutes les pages. Modifier le composant source met à jour toutes les instances — comme des symboles Figma, mais avec de la logique.

**Breakpoints** : WeWeb a trois vues — desktop (>1024px), tablette (768–1024px), mobile (<768px). Pour chaque breakpoint, vous pouvez ajuster la taille des textes, la mise en page (row vs column), les espaces, et la visibilité des éléments. En mobile, les grilles multi-colonnes passent généralement en colonne unique.

**Bonnes pratiques** : utilisez des marges et paddings définis en variables (ex: `--spacing-md: 16px`), évitez les valeurs en pixels fixes pour les tailles de police (préférez `rem`), et testez systématiquement les trois breakpoints avant de publier.

Publier votre app WeWeb (domaine custom, SEO, certificat SSL)

Votre application est prête. Il est temps de la mettre en ligne.

**Publier sur un sous-domaine WeWeb** : cliquez sur "Publish" en haut à droite. WeWeb publie automatiquement sur votre-app.weweb.io. C'est suffisant pour tester et partager avec des utilisateurs beta.

**Domaine personnalisé** : dans "Settings" > "Domain", entrez votre domaine (exemple : app.votreentreprise.fr). WeWeb vous fournit un CNAME à ajouter chez votre registrar DNS (OVH, Gandi, etc.). La propagation DNS prend de quelques minutes à 48 heures. Le certificat SSL est généré automatiquement par WeWeb via Let's Encrypt.

**SEO technique** : pour chaque page, définissez un titre (60 caractères max), une meta description (155 caractères max), et un og:image pour le partage social. WeWeb gère le rendu côté serveur (SSR) pour les pages publiques, ce qui est crucial pour l'indexation par Google. Activez le SSR dans les paramètres de votre projet.

**Prochaines étapes** : votre application est en ligne. Partagez-la avec vos premiers utilisateurs, collectez des retours, et itérez. La puissance du no-code est précisément là : vous pouvez déployer une modification en quelques minutes. Pour aller plus loin, notre équipe de développeurs WeWeb certifiés peut vous accompagner sur des projets plus complexes.