The Playground
Lancez votre communauté. Organisez vos événements. Animez votre réseau.
→ the-playground.fr · Changelog · À propos
Le problème
Ça fait des années que j'organise des événements communautaires. Et depuis des années, je me heurte au même mur.
Il n'existe pas d'outil qui fait à la fois communauté + événements + gratuit + UX correcte + maîtrise de son audience.
| Outil | Problème |
|---|
| Meetup | Modèle communautaire intéressant, mais UX datée et paywall organisateur |
| Luma | Expérience propre, pages événement belles — mais chaque événement est une île, aucune rétention |
| Le bricolage | Google Forms + Eventbrite + WhatsApp + tableurs. On se débrouille, on perd son audience |
La réponse
The Playground part d'une idée simple :
- La communauté est l'entité centrale — pas l'événement
- L'événement est une porte d'entrée virale
- S'inscrire à un événement rend automatiquement membre de la communauté
- La communauté persiste entre les événements
Le modèle communautaire de Meetup + l'expérience de Luma + 100% gratuit. Pas d'abonnement, pas de commission plateforme.
Fonctionnalités
Pour l'organisateur
- Créer et gérer sa communauté — privée ou publique, avec invitations par lien
- Co-organisateurs — déléguez la gestion sans partager les accès sensibles (Stripe, suppression)
- Créer des événements avec une page autonome et partageable
- Pièces jointes — documents et vidéos consultables directement sur la page événement
- Billetterie intégrée via Stripe Connect — 0% commission plateforme
- Inscriptions sur validation pour filtrer les participants si besoin
- Gérer ses participants de façon persistante (pas événement par événement)
- Email groupé aux participants d'un événement (inscrits, liste d'attente ou tous)
- Export CSV des inscrits, liste d'attente automatique
- Radar IA — détection des événements concurrents (Luma, Eventbrite, Meetup) autour de votre lieu et de votre date, pour choisir le bon créneau (mots-clés extraits via Claude)
Pour le participant
- Découverte via lien partagé (mobile-first)
- Inscription en quelques secondes — magic link, pas de compte requis
- Devient automatiquement membre de la communauté
- Profil public avec bio, ville, liens sociaux
- Ajout à son calendrier en un clic (Google Calendar, Apple Calendar, .ics)
- Fuseaux horaires : horaires affichés dans le fuseau de l'appareil, emails à l'heure du lieu de l'événement
- Notifications email (confirmation, rappel 24h avant, changements, annulations)
- Page communauté : prochains événements, membres, historique
- Fil de commentaires (avec photos) sur chaque événement
Plateforme
- Explorer — répertoire public de communautés avec tri, filtres et section À la une
- Widget intégrable — encart événement embarquable sur n'importe quel site externe (thème clair/sombre, copie du snippet HTML en un clic)
- Réseaux — regrouper plusieurs communautés sous une vitrine commune (fédérations, collectifs, marques)
- Blog — articles de fond et guides pratiques (philosophie produit, migration depuis Meetup, etc.)
- Bilingue FR / EN avec URLs propres
- 100% gratuit — seuls les frais Stripe (~2,9% + 0,30€) sur les événements payants
Stack
| |
|---|
| Framework | Next.js 16 (App Router, SSR, Server Actions) · React 19 |
| Langage | TypeScript strict, full-stack |
| Base de données | PostgreSQL · Neon serverless (EU), une branche par environnement |
| ORM | Prisma 7 |
| Auth | Auth.js v5 · Magic link + OAuth (Google, GitHub, LinkedIn) |
| UI | Tailwind CSS 4 + shadcn/ui · éditeur Tiptap · PWA |
| i18n | next-intl · FR / EN |
| Email | Resend + react-email · invitations calendrier (.ics) |
| IA | Anthropic SDK · Claude Haiku 5.5 (radar des événements concurrents) |
| Paiements | Stripe Connect |
| Stockage | Vercel Blob |
| Analytics | PostHog · Vercel Analytics · Speed Insights |
| Monitoring | Sentry |
| Tests | Vitest (BDD, spec by example) · Playwright (desktop + mobile) |
| CI/CD | GitHub Actions · Release Please · scan DAST OWASP ZAP hebdomadaire |
| Déploiement | Vercel (EU), 8 tâches planifiées |
Architecture hexagonale (Ports & Adapters), TypeScript strict, tout déployé en Europe. Développé avec Claude Code (Anthropic) — quelques jours pour le MVP, quelques semaines pour une plateforme complète en production.
En chiffres
Relevés sur main le 9 octobre 2026 (v2.18.2), premier commit le 19 février 2026.
| |
|---|
| 61 500 | lignes de TypeScript en production (593 fichiers) |
| 29 100 | lignes de tests |
| 1 703 | tests unitaires (Vitest) |
| 211 | tests E2E (Playwright, en CI) + 35 scénarios mobiles sur 3 appareils |
| 89 | cas d'usage métier (domain usecases) |
| 15 | ports, 10 repositories Prisma, 16 modèles en base |
| 50 | pages, 22 routes API |
| 1 672 | textes traduits, en FR et en EN |
| 2 095 | commits (hors merges), dont 84 % co-écrits avec Claude |
| 552 | pull requests mergées |
| 42 | versions publiées |
→ Fiche technique illustrée
Architecture
Architecture hexagonale (Ports & Adapters) — domaine métier pur, découplé de l'infrastructure :
src/
domain/ → Logique métier pure (models, ports, usecases)
infrastructure/ → Adapters (Prisma, Resend, Stripe, Claude)
app/ → Next.js App Router (routes, server actions)
components/ → Composants React réutilisables
lib/ → Utilitaires partagés (helpers purs)
hooks/ → React hooks personnalisés
types/ → Types TypeScript partagés (non domaine)
i18n/ → Configuration next-intl (routing, request)
content/ → Contenu statique (articles de blog en Markdown)
assets/ → Polices et assets statiques
Voir CLAUDE.md pour le contrat strict d'architecture et les règles de dépendance.
Développement
Prérequis
- Node.js ≥ 22 LTS (version utilisée en CI et en production Vercel)
- pnpm ≥ 10 (le projet déclare
[email protected] via packageManager) — npm install -g pnpm
- PostgreSQL : un compte gratuit Neon ou un Postgres local
- Compte Resend (gratuit, 100 emails/jour) : resend.com — pour le magic link et les autres emails
Setup local (5 minutes)
# 1. Cloner et installer
git clone https://github.com/DragosDreptate/the-playground.git
cd the-playground
pnpm install
# 2. Configurer les variables d'environnement
cp .env.example .env.local
# Édite .env.local : voir le fichier pour la liste détaillée. Au minimum :
# - DATABASE_URL (ta branche Neon)
# - AUTH_SECRET (génère avec : npx auth secret)
# - un provider d'auth (Resend recommandé, sinon Google/GitHub OAuth)
# 3. Initialiser la DB
pnpm db:push # applique le schema Prisma sur ta DB
# 4. (Optionnel) Seed des données de test
pnpm db:seed-test-data
# 5. Lancer
pnpm dev # http://localhost:3000
Authentification en local
Quatre options, au moins une doit être configurée dans .env.local :
| Option | Effort | Avantages |
|---|
| Resend (magic link) | 2 min | recommandée — c'est le flow par défaut de l'app. Crée un compte resend.com, mets ta clé dans AUTH_RESEND_KEY et ton email dans STAGING_EMAIL_ALLOWLIST. |
| Google OAuth | 5 min | Crée un OAuth client sur console.cloud.google.com avec callback http://localhost:3000/api/auth/callback/google |
| GitHub OAuth | 5 min | Idem sur github.com/settings/developers, callback http://localhost:3000/api/auth/callback/github |
| LinkedIn OAuth | 5 min | Idem sur linkedin.com/developers, callback http://localhost:3000/api/auth/callback/linkedin |
Garde-fou email : safe-resend.ts bloque tous les envois vers de vraies adresses dès que VERCEL_ENV !== "production". En local, seuls les emails listés dans STAGING_EMAIL_ALLOWLIST (ou se terminant par @test.playground / @demo.playground) sont effectivement envoyés. Voir spec/email-testing.md.
Commandes courantes
pnpm dev # serveur de développement
pnpm test # tests Vitest
pnpm test:e2e # tests E2E (Playwright)
pnpm typecheck # vérification TypeScript
pnpm db:push # applique le schema sur la DB dev
pnpm db:studio # UI de visualisation Prisma
pnpm db:seed-test-data # injecte les données de test
Changelog
L'historique complet des versions est publié sur the-playground.fr/changelog.
Auteur
Projet de Dragos Dreptate — dirigeant, entrepreneur et coach, 25 ans dans la tech, basé à Paris. Fondateur de The Spark, cabinet de conseil en IA, Produit et Innovation.
Une expérience Claude Code · Anthropic
