← RETOUR AUX PROJETS Case Study

FFXIV COLLECTION

< Collection Tracker / Web App />█

Un tracker de collection FFXIV personnel, pensé pour les joueurs passionnés. De l'idée au produit, retour sur le processus de création.

VOIR LE PROCESSUS EXPLORER LA STACK
Scroll
Project_overview

Le projet

Un outil sur mesure, conçu par une joueuse, pour les joueurs.

FFXIV Collection est une application web qui permet de suivre sa progression de collection dans Final Fantasy XIV : mascottes, montures et bardes de chocobo.

Le jeu propose des centaines d'objets de collection dispersés à travers le monde d'Eorzea. L'idée était de créer un espace personnel où visualiser en un coup d'œil ce qu'on possède, ce qu'il nous manque, et comment l'obtenir.

L'application se synchronise avec FFXIV Collect, intègre les tooltips officiels d'Eorzea Database, et propose une interface immersive inspirée de l'univers du jeu — avec musiques et sons iconiques.

Type
Projet personnel
Durée
~3 mois
Rôle
Full-Stack & Design
Statut
En production
Key_metrics

En chiffres

7
Pages
3
Collections
18
Modules JS
20+
Migrations SQL

Features

Fonctionnalités clés

Authentification
Login sécurisé via Supabase Auth avec gestion de session persistante et protection des routes.
Suivi de collection
Marquer chaque objet comme acquis ou non. L'état est synchronisé en base et persistant entre les sessions.
Filtres avancés
Filtrage par statut, par patch (2.x à 7.x), et recherche textuelle en temps réel. Combinables entre eux.
Sync FFXIV Collect
Synchronisation en un clic avec l'API FFXIV Collect pour importer automatiquement sa collection.
Thème clair / sombre
Détection des préférences système, bascule manuelle, logos adaptés dynamiquement au thème.
Ambiance sonore
Musique de fond, jingles de connexion/déconnexion et effets sonores inspirés du jeu original.
Dev_process

Processus & Évolution

De la première ligne de code au produit fini — retour sur les étapes clés du développement.

Phase 01 — Fondations
Architecture & authentification
Le projet a démarré par le choix d'une architecture multi-page (MPA) avec Vite comme bundler. Plutôt qu'un framework lourd, j'ai opté pour du JavaScript vanilla en ES modules — suffisant pour la complexité du projet et parfait pour garder le contrôle total. Supabase a été choisi comme backend pour son auth intégrée et sa base PostgreSQL. Les premiers jours ont été consacrés à la mise en place de la connexion, la gestion de session, et la protection des pages avec Row Level Security.
Phase 02 — Premier module
Les Mascottes (Minions)
La page Mascottes a servi de prototype fonctionnel pour tout le projet. C'est ici que j'ai construit le système de filtres (acquis/non acquis, par patch, recherche textuelle), le rendu dynamique des cartes, la modale de détails, et surtout la synchronisation avec l'API FFXIV Collect. Le modèle de données Supabase s'est construit itérativement — d'où les 20+ scripts de migration SQL.
Phase 03 — Montée en puissance
Montures & Bardes par parité
Une fois le module Mascottes stabilisé, j'ai répliqué le pattern sur les Montures puis les Bardes de chocobo. Chaque module a bénéficié des enseignements du précédent : meilleur découpage du code, requêtes Supabase optimisées avec jointures relationnelles, et cache client pour éviter les appels répétés. L'historique Git montre clairement cette progression par parité fonctionnelle.
Phase 04 — Immersion
Audio, thèmes & polish
L'expérience utilisateur ne s'arrête pas aux données. J'ai intégré un système audio complet : musique de fond (Prelude FFXIV), jingles de connexion/déconnexion, sons de navigation et de collection. Le thème clair/sombre détecte les préférences système et adapte même les logos dynamiquement. Les sprites flottants sur la page de login ajoutent une touche de magie.
Phase 05 — Production
CI/CD & déploiement
Le déploiement est automatisé via GitHub Actions : chaque push sur main déclenche un build Vite avec injection sécurisée des secrets Supabase, puis un déploiement sur GitHub Pages. Les clés API ne transitent jamais par le repo. La branche dev sert d'environnement de staging.
Tech_stack

Outils & Technologies

Une stack légère et efficace, chaque outil choisi pour une raison précise.

⌨ Frontend
HTML / CSS / JS Vanilla
Architecture multi-page avec ES modules. Pas de framework : contrôle total, performances optimales, zéro overhead.
HTML5 CSS3 ES Modules
⚡ Build & Tooling
Vite 5
Bundler ultra-rapide avec HMR. Gestion des variables d'environnement (VITE_ prefix) et multi-entry points Rollup.
Vite Rollup ESBuild
🛠 Backend & BDD
Supabase
PostgreSQL hébergé avec authentification, Row Level Security, et requêtes relationnelles complexes via le SDK JavaScript.
PostgreSQL Auth RLS
☁ Hébergement
GitHub Pages + Actions
CI/CD automatisé : build, injection de secrets, et déploiement sur chaque push. Zéro intervention manuelle.
CI/CD GitHub Actions
🎨 Médias
Cloudinary
CDN d'images et fichiers audio. Toutes les icônes, logos, screenshots et sons FFXIV sont servis depuis Cloudinary.
CDN Images Audio
🔗 Intégrations
APIs FFXIV
Synchronisation des collections avec FFXIV Collect et tooltips en jeu via Eorzea Database (SDK officiel Square Enix).
FFXIV Collect Eorzea DB
$ cat stack.txt
→ Frontend : HTML / CSS / JavaScript (ES Modules)
→ Build : Vite 5 / Rollup
→ Backend : Supabase (PostgreSQL + Auth + RLS)
→ Médias : Cloudinary CDN
→ Deploy : GitHub Actions → GitHub Pages
→ APIs : FFXIV Collect / Eorzea Database
Challenges

Défis & Solutions

Les problèmes rencontrés et comment ils ont été résolus.

Défi
Sécuriser les clés API
Les clés Supabase ne devaient jamais apparaître dans le repository public, tout en étant disponibles au moment du build.
Solution
Secrets GitHub + Vite env
Les variables sont stockées dans les GitHub Secrets et injectées uniquement au moment du build via le préfixe VITE_ et le workflow CI/CD.
Défi
Modèle de données évolutif
Le schéma de la base a dû évoluer constamment : ajout de colonnes, refonte des sources d'obtention, gestion des devises.
Solution
Migrations SQL itératives
Plus de 20 scripts de migration versionnés, permettant de faire évoluer le schéma sans perdre de données ni casser les relations existantes.
Défi
Autoplay audio bloqué
Les navigateurs modernes bloquent la lecture audio automatique. Impossible de lancer la musique de fond sans interaction utilisateur.
Solution
Interaction différée
Détection du premier clic pour débloquer l'audio, sons de transition stockés en localStorage entre les pages, et gestion manuelle de l'état audio.
Défi
Performance des listes
Afficher des centaines d'objets avec images, états de collection et filtres multiples sans ralentir l'interface.
Solution
Cache client & filtrage local
Les données sont chargées une seule fois via Supabase puis mises en cache côté client. Les filtres opèrent sur le cache sans requêtes supplémentaires.
Retrospective

Apprentissages & Perspectives

Ce que j'ai appris
  • Concevoir un modèle de données relationnel qui évolue avec le produit, en s'appuyant sur des migrations SQL itératives
  • Mettre en place une authentification sécurisée et des politiques Row Level Security sur Supabase
  • Gérer l'audio dans les navigateurs modernes avec les contraintes d'autoplay et les transitions entre pages
  • Construire une architecture modulaire en JavaScript vanilla sans framework, en gardant le code maintenable
  • Automatiser un pipeline CI/CD complet avec GitHub Actions, secrets et déploiement continu
Prochaines étapes
  • Compléter la page Orchestrion pour le suivi des rouleaux de musique en jeu
  • Ajouter un système d'inscription pour ouvrir l'application à d'autres joueurs
  • Enrichir la page de détail avec les prix en temps réel du marché en jeu (Universalis API)
  • Améliorer le responsive design et créer une version PWA pour mobile
  • Explorer une possible migration vers un framework (React ou Vue) si la complexité augmente