Je code un boilerplate React Typescript Supabase spécial Temps-Réel
Je vous offre ce boilerplate ViteJS Typescript React Supabase (Postgres) pour coder vos projets beaucoup plus rapidement.
Si comme moi vous vous êtes déjà retrouvé à lancer un npx create-react-app ou npm create vite@latest juste pour passer l’heure suivante à installer React Router, Tailwind, un système d’auth, React Query et tous les trucs de base… cet article est pour vous.
À force de refaire toujours les mêmes setups, j’ai fini par me créer un vrai boilerplate que je peux cloner et lancer en 2 minutes pour démarrer un projet.
Et aujourd’hui, je le partage avec vous.
Ce starter est basé sur :
- Vite (rapide, fluide, efficace)
- React + TypeScript
- Supabase (base Postgres, auth et temps réel)
- Tailwind, React Query, React Hook Form, React Router DOM
C’est le genre de base que je clone quand je veux prototyper une idée, monter un dashboard ou builder un outil interne sans me taper tout le setup initial.
Il est déjà structuré, il gère les routes privées, les notifications, les hooks custom, et même le temps réel via Supabase. Le tout avec une simple app de type to-do pour vous montrer les concepts en place.
Ce que le projet inclut
Voici ce que vous trouverez directement dans le repo :
- Authentification via Supabase (email/password)
- Ecoute d'événements temps réel à la base PostgreSQL (insert/delete)
- Routes protégées avec redirection automatique
- Hooks réutilisables pour centraliser les requêtes
- Script SQL pour créer la table
tasken un clic, les policies
Tout ça pour faire une petite app de to-do pour tester les features rapidement.
La stack est très moderne et efficace :
- Tailwind pour le style,
- Toastify pour les notifs,
- React Router DOM pour naviguer entre les pages (login, dashboard, etc.).
C’est une structure pensée pour rester rapide tout en étant scalable.
Le temps réel avec Supabase
Le vrai plus, c’est la gestion du temps réel.
Allez dans le dashboard Supabase, et activez le “Realtime” sur la table task et c’est tout.
Ensuite, côté frontend, j’ai branché des subscriptions dans le hook de récupération des tâches.
Dès qu’un élément est inséré ou supprimé dans la table, on met à jour le cache de React Query pour refléter le changement directement dans l’UI.
J’aurais pu faire une simple invalidation du cache, mais là j’ai préféré montrer comment modifier directement le cache avec le client React Query. C’est utile si vous voulez gérer des animations, ou du traitement en cascade.
Structure du projet
Quelques choix techniques qui font gagner du temps sur le long terme :
Hooks : toutes les requêtes sont centralisées dans des hooks. Jamais de logique directement dans les pages. C’est plus maintenable et plus DRY.
Context : j’utilise un
AuthContextpour stocker l’utilisateur connecté, et faire le lien avec les routes privées.Routing : classique, avec trois routes principales :
/,/login,/dashboard. UneProtectedRouteempêche d’accéder au dashboard sans être connecté.Base de données : un simple copier-coller du script SQL fourni dans le README suffit à créer la table
task..env : à renseigner avec l’URL et la clé anonyme de Supabase. Aucune logique serveur ici, tout est en pur SPA.
À quoi ça sert (et à quoi ça ne sert pas)
Ce boilerplate n’est pas fait pour le SEO. Il n’y a pas de rendu serveur, donc inutile pour des sites vitrines ou des landing pages publiques. Par contre, il est parfait pour :
- des dashboards
- des outils internes
- des MVPs en mode full client
- des apps où l’utilisateur est connecté
Typiquement : une app de caisse, un CRM, un backoffice… tout ce qui nécessite une structure solide avec des données temps réel, mais pas besoin d’être crawlé par Google.
Si vous voulez gérer votre SEO, rien ne vous empêche de brancher un blog ou une landing en parallèle, en Next.js ou autre.
Mot de la fin
C’est une structure que je réutilise tout le temps. Elle me fait gagner un temps fou, surtout sur les projets où je sais que je vais devoir aller vite et rester clean côté archi.
Vous pouvez forker, adapter, simplifier ou complexifier selon vos besoins. Vous avez déjà l’auth, le temps réel, la pagination, la structure de code… bref, de quoi construire quelque chose de solide sans vous perdre dans le setup.
Si vous voulez que je pousse une version Next.js ou SSR un jour, ça arrive !
Bon dev à vous, et à bientôt pour un nouveau boilerplate.