framed-tracker

Framed Tracker

Framed Tracker est une application web pour suivre et analyser vos scores aux jeux Framed (Daily Frame et One Frame).

Table des matières

• Architecture
• Installation
• API Routes
• Authentication
• Database Schema
• Themes
• Development

Architecture

L'application est construite avec une architecture client-serveur:

• Frontend: React.js avec Tailwind CSS pour les styles
• Backend: Node.js avec Express.js
• Base de données: SQLite

Structure du projet

framed-tracker/
├── client/               # Frontend React
│   ├── public/           # Fichiers statiques
│   └── src/              # Code source React
│       ├── App.jsx       # Composant principal React
│       ├── api.js        # Fonctions d'API
│       └── index.css     # Styles CSS
├── server/               # Backend Express
│   ├── server.js         # Point d'entrée du serveur
│   ├── schema.sql        # Schéma de la base de données
│   ├── scripts/          # Scripts utilitaires
│   │   ├── init-db.js    # Initialisation de la BD
│   │   └── backup-db.js  # Sauvegarde de la BD
│   └── public/           # Build du frontend (production)
├── data/                 # Stockage des données
│   └── framed.db         # Base de données SQLite
├── backups/              # Sauvegardes de la BD
├── nginx/                # Configuration NGINX (production)
└── docker-compose.yml    # Configuration Docker

Installation

Avec Docker (recommandé)

1. Cloner le dépôt:

   git clone https://github.com/votre-username/framed-tracker.git
   cd framed-tracker
   

2. Lancer en mode développement:

   docker-compose up
   

3. Créer une version de production:

   docker-compose --profile build up framed-client-build
   docker-compose --profile prod up -d
   

Installation manuelle

1. Installer les dépendances du serveur:

   cd server
   npm install
   

2. Installer les dépendances du client:

   cd client
   npm install
   

3. Lancer le serveur:

   cd server
   npm start
   

4. Lancer le client (dans un autre terminal):

   cd client
   npm start
   

API Routes

Authentification

• POST /api/register - Inscription utilisateur

  • Body: { username, password }
  • Response: { message, userId, username }

• POST /api/login - Connexion utilisateur

  • Body: { username, password }
  • Response: { userId, username }

Scores

• POST /api/scores - Ajouter un score

  • Body: { userId, date, gameType, gameNumber, score }
  • Response: Objet score créé

• GET /api/scores/user/:userId - Récupérer les scores d'un utilisateur

  • Response: Liste des scores

• DELETE /api/scores/:id?userId=<userId> - Supprimer un score

  • Response: { message }

Statistiques et classement

• GET /api/stats/:userId - Statistiques d'un utilisateur

  • Response: Statistiques par type de jeu

• GET /api/leaderboard?gameType=<type> - Classement global

  • Query Params: gameType (all, daily, one)
  • Response: Liste des joueurs avec leurs statistiques

• GET /api/scores?gameType=<type> - Tous les scores (admin)

  • Query Params: gameType (all, daily, one)
  • Response: Liste complète des scores

Authentication

L'authentification est gérée sans JWT ou sessions côté serveur. À la place:

1. Un utilisateur s'inscrit avec un nom d'utilisateur et un mot de passe
2. Le mot de passe est hashé avec bcrypt avant d'être stocké en base de données
3. Lors de la connexion, le mot de passe fourni est comparé avec le hash stocké
4. Les données utilisateur (userId, username) sont stockées dans le localStorage
5. Ces données sont incluses dans les requêtes API nécessitant une authentification

Cette approche est simple mais convient à cette application. Une authentification plus robuste avec JWT serait préférable pour une application en production à plus grande échelle.

Sécurité

• Les mots de passe sont hashés avec bcrypt (10 rounds de salage)
• Validation des entrées pour prévenir les injections SQL
• Vérification des autorisations pour la manipulation des scores
• CORS configuré pour restreindre les origines

Database Schema

La base de données SQLite contient deux tables principales:

Table users

Colonne	Type	Description
id	INTEGER	Clé primaire auto-incrémentée
username	TEXT	Nom d'utilisateur (unique)
password	TEXT	Mot de passe hashé
created_at	TIMESTAMP	Date de création du compte

Table scores

Colonne	Type	Description
id	INTEGER	Clé primaire auto-incrémentée
user_id	INTEGER	ID de l'utilisateur (clé étrangère)
date	TEXT	Date du jeu (YYYY-MM-DD)
game_type	TEXT	Type de jeu ("daily" ou "one")
game_number	INTEGER	Numéro du jeu
score	INTEGER	Score (1-6)
created_at	TIMESTAMP	Date d'enregistrement du score

Index

• idx_users_username: Index unique sur le nom d'utilisateur
• idx_scores_user_id: Index sur les scores par utilisateur
• idx_scores_game_type: Index sur les scores par type de jeu
• idx_scores_user_game_type: Index composite pour les requêtes fréquentes

Vues

• user_stats: Statistiques globales par utilisateur
• user_game_type_stats: Statistiques par type de jeu et utilisateur
• leaderboard: Classement général
• leaderboard_by_type: Classement par type de jeu

Themes

L'application propose plusieurs thèmes visuels:

1. Standard: Thème clair par défaut
2. Sombre: Thème sombre avec fond noir et texte clair
3. Matrix: Thème inspiré de Matrix avec texte vert sur fond noir
4. Matrix Hardcore: Version extravagante du thème Matrix avec:
   • Animation de "pluie de code" en arrière-plan
   • Effets de glitch sur les titres
   • Effets d'animation sur les boutons
   • Effet de scan ligne
   • Scores colorés (vert pour bon, jaune pour moyen, rouge pour mauvais)

Les thèmes sont stockés dans localStorage et s'appliquent à toute l'interface.

Development

Technologies utilisées

• Frontend:

  • React.js
  • Tailwind CSS
  • Axios
  • HTML5 Canvas (pour les animations Matrix)

• Backend:

  • Node.js
  • Express.js
  • SQLite3
  • bcrypt (hachage des mots de passe)

• DevOps:

  • Docker & Docker Compose
  • NGINX (en production)

Scripts utilitaires

• Initialisation de la base de données:

  node server/scripts/init-db.js
  

• Sauvegarde de la base de données:

  node server/scripts/backup-db.js
  

Environnement de production

En production, l'application est servie par NGINX qui:

1. Redirige les requêtes API vers le backend Node.js
2. Sert les fichiers statiques du frontend
3. Gère le caching et l'optimisation

La configuration Docker permet une isolation complète et une facilité de déploiement.