Application esport

web Next.js Tailwind API développement
Voir le projet en ligne ↗

Description du Projet

Ce projet, réalisé durant le BUT MMI, consistait à concevoir et développer de A à Z une application web dédiée à l’esport, permettant de suivre les résultats des matchs, les rosters des équipes et l’actualité des tournois en temps réel. L’ambition était d’offrir une expérience riche et moderne, allant au-delà du simple affichage de données grâce à l’intelligence artificielle et aux APIs tierces.

L’application a été développée avec Next.js comme framework principal et Tailwind CSS pour le responsive design. Le résultat est entièrement responsive (desktop et mobile), et j’ai poussé le projet jusqu’à une version APK installable sur Android, ce qui m’a permis d’appréhender le développement cross-platform.

Pour alimenter l’application, j’ai intégré la PandaScore API, spécialisée dans les données esport, afin de récupérer automatiquement les rosters, les résultats et les informations des tournois pour plusieurs jeux. Cette intégration m’a confronté aux enjeux de la consommation d’APIs : gestion des appels, traitement des données et affichage dynamique.

La fonctionnalité la plus ambitieuse est l’intégration d’un agent IA générant automatiquement un synopsis, un récap narratif et une analyse tactique pour chaque match, en transformant des données brutes en contenu lisible. L’application propose aussi une mise à jour des résultats en temps réel avec des liens directs vers les streams officiels, ainsi que des filtres et des animations qui fluidifient la navigation.

J’ai développé un système de favoris permettant d’enregistrer ses équipes préférées par jeu et de recevoir des notifications dès qu’elles entrent en match. Cela a nécessité une réflexion approfondie sur la modélisation des données : conception de la base de données, structuration de l’API back-end pour stocker les matchs passés et consulter l’historique, et gestion des abonnements aux notifications.

Enfin, j’ai développé un back office complet pour gérer résultats et utilisateurs, avec un système multi-admins et une gestion fine des rôles et des permissions. Ce projet m’a fait monter en compétences sur toute la stack de développement web moderne, de la base de données au déploiement, en passant par l’intégration d’APIs complexes et l’exploitation de l’IA. L’application est consultable en ligne sur esport.marwan-fagrouch.com.
Next.js

Next.js

Tailwind CSS

Tailwind CSS

PandaScore

PandaScore

IA

IA

SQL

SQL

API REST

API REST

Android

Android

Apprentissages Critiques associés

  • AC24.01 — Produire des pages et applications web responsives
  • AC24.02 — Mettre en place ou développer un back office
  • AC24.03 — Intégrer, produire ou développer des interactions riches ou des dispositifs interactifs
  • AC24.04 — Modéliser les traitements d’une application web