Subtrack·Mars 2025

Présentation

Subtrack est une application web conçue pour gérer et suivre facilement les paiements mensuels. Elle offre une vue d'ensemble claire grâce à des graphiques et statistiques détaillées, ainsi qu'un historique complet des paiements passés. Les utilisateurs peuvent également définir des limites budgétaires personnalisées afin de mieux contrôler leurs dépenses et ajuster leur budget en fonction de leurs besoins. Ce projet m'a permis de tester Auth.js et d'expérimenter Next.js en fullstack, en mettant particulièrement l'accent sur la partie backend de Next.js.

Vidéo

Fonctionnalités

  • Créer un compte utilisateur.
  • Se connecter avec Google ou avec Email/MDP.
  • Ajouter, modifier ou supprimer une mensualité.
  • Ajouter, modifier ou supprimer une limite budgétaire.
  • Filtrer une mensualité par nom, catégorie ou prix.
  • Visualiser les mensualités sous forme de graphique (camembert).
  • Visualiser les statistiques des mensualités.
  • Visualiser l'historique des mensualités par mois.
  • Visualiser l'historique des mensualités par année (graphique en barres avec prix par mois).
  • Modifier son mot de passe.
  • Supprimer son compte.

Architecture

Subtrack est une application fullstack développée avec Next.js et dotée d'une authentification sécurisée via Auth.js. Le backend repose principalement sur les routes API de Next.js et quelques server actions pour gérer la logique métier. Une tâche cron est exécutée chaque premier du mois pour transférer les mensualités actives dans l'historique. Une vérification supplémentaire empêche la surcharge de la base de données : si un utilisateur ne s'est pas connecté depuis plusieurs mois, l'historique n'est plus mis à jour automatiquement. Cette approche a été adoptée pour gérer efficacement les limites de stockage d'une base de données dans le cadre d'un projet personnel.

Stack technique

Next.jsTanStack QueryAuth.jsTailwindCSSOAuthPrismaPostgreSQLStorybookPlaywright

Liens