Skip to content

Projet personnel — Plateforme de matchmaking gaming

TeamsFinder

React
Next.js
TypeScript
Tailwind
Supabase
Ionic
Stripe
Screenshot 1

TeamsFinder est une plateforme qui permet aux joueurs de trouver des coéquipiers pour leurs jeux favoris. Recherche par jeu, niveau et disponibilité pour former l'équipe idéale.

Contexte

01

Problème

Les joueurs manquaient d'un outil fiable pour trouver des coéquipiers de leur niveau.

02

Mon rôle

Créateur et développeur full stack du projet (Web & Mobile).

03

Résultat

Plateforme live avec matchmaking algorithmique, événements (calendrier d’appels, notifications), blog, annonces et game review. Intégration Discord (accès aux channels exclusifs, webhooks d'annonces). Déjà 20 utilisateurs.

En chiffres

20 inscritsUtilisateurs
2 ventesRevenu
AlgorithmiqueMatchmaking

Architecture

L'architecture de TeamsFinder repose sur trois piliers distincts conçus pour offrir une expérience fluide et interconnectée.

1. Écosystème Client — Next.js & Ionic
La plateforme est accessible via une interface web (Next.js) optimisée pour le SEO grâce au Server-Side Rendering, et via une application mobile (Ionic). Les deux interfaces partagent la même codebase React et s'abonnent aux mêmes flux de données en temps réel.

2. Moteur de Matchmaking — Supabase & Edge Functions
Le matchmaking est orchestré par des requêtes optimisées qui croisent instantanément les profils selon des critères stricts : jeu spécifique, niveau de compétence (tolérance de +/- 1 rang) et chevauchement des horaires de disponibilité. Les données sont sécurisées par Row Level Security (RLS). Dès qu'un match est trouvé, une notification temps réel est poussée via les WebSockets natifs de Supabase.

3. Écosystème Discord — Webhooks & Gestion de rôles
La plateforme est profondément liée à Discord pour fidéliser la communauté. Des webhooks automatisent la diffusion des annonces LFG (Looking For Group) en temps réel dans des salons dédiés. La gestion de rôles via l'API Discord restreint l'accès à des canaux exclusifs uniquement pour les membres vérifiés.

1

Frontend Unifié : Codebase React partagée entre le web (Next.js) et le mobile (Ionic).

2

Temps Réel : Utilisation des subscriptions Supabase pour les notifications instantanées.

3

Algorithmique : Filtrage multicritères (Jeu, Rang, Disponibilité) exécuté côté serveur.

4

API Discord : Automatisation des Webhooks LFG (Looking For Group) avec embeds enrichis.

5

Sécurité : Row Level Security (RLS) sur Supabase pour protéger les données privées des joueurs.

Fonctionnalités

Recherche de coéquipiers par jeu et niveau

Système de profils joueurs

Filtres avancés (disponibilité, langue, rang)

Messagerie intégrée

TeamsFinder — Benhouss | Benhouss