Tidak Ada Deskripsi

Virgil Ollivier 62017fb25d add data/.placeholder 3 bulan lalu
client 70c44dd578 Initialize project structure with backend and frontend setup, including Docker configuration, Tailwind CSS integration, and SQLite database schema. 3 bulan lalu
data 62017fb25d add data/.placeholder 3 bulan lalu
server 204359b7c9 update docker-compose.yml server/server.js 3 bulan lalu
.dockerignore 70c44dd578 Initialize project structure with backend and frontend setup, including Docker configuration, Tailwind CSS integration, and SQLite database schema. 3 bulan lalu
.gitignore f1129cb9ef add framed.db to ignore 3 bulan lalu
Dockerfile 70c44dd578 Initialize project structure with backend and frontend setup, including Docker configuration, Tailwind CSS integration, and SQLite database schema. 3 bulan lalu
README.md 70c44dd578 Initialize project structure with backend and frontend setup, including Docker configuration, Tailwind CSS integration, and SQLite database schema. 3 bulan lalu
docker-compose.yml c39a6a90e8 update docker-compose.yml server/server.js 3 bulan lalu
package-lock.json 70c44dd578 Initialize project structure with backend and frontend setup, including Docker configuration, Tailwind CSS integration, and SQLite database schema. 3 bulan lalu
package.json 70c44dd578 Initialize project structure with backend and frontend setup, including Docker configuration, Tailwind CSS integration, and SQLite database schema. 3 bulan lalu
rrr feb3f78383 iiqre 3 bulan lalu

README.md

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

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.