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