tous les projets

Astroloutre

Site de l'Antre des Loutres, lieu ou nos utilisateurs peuvent admirer leurs statistiques et accomplissements.

Statut
en production
Service
en ligne
Contribution
357 commits sur 568
Stack
Astro, TypeScript
Version
v1.7.0
Début
févr. 2025
Dernière activité
août 2026
voir le codevoir le site

Bienvenue sur le dépôt du site web de L'Antre des Loutres. Ce projet est une application web statique moderne construite avec Astro et React, conçue pour la performance, la flexibilité et une expérience utilisateur fluide.

Technologies

Ce projet utilise une stack moderne:

  • Framework: Astro (v5) - Pour la génération statique et la performance.
  • UI Library: React (v19) - Pour les composants interactifs complexes (tableaux de classements, etc.).
  • Styling: Tailwind CSS (v4) & Variables CSS natives pour la gestion des thèmes.
  • Langage: TypeScript - Pour un code robuste et typé.

Installation et Démarrage

Étapes

  1. Cloner le projet
git clone https://github.com/L-Antre-des-Loutres/Reactisoutre.git
cd Reactisoutre
  1. Installer les dépendances
npm install
  1. Lancer le serveur de développement
npm run dev

Le site sera accessible sur http://localhost:4321.

Autres commandes utiles

Commande Action
npm run build Compile le site pour la production dans le dossier ./dist/
npm run preview Prévisualise le build de production localement
npm run astro check Lance une vérification des types et du code

Structure du Projet

L'architecture du code source dans src/ est organisée comme suit:

  • pages/: Contient les routes du site. Astro utilise un routage basé sur les fichiers (ex: pages/classements/minecraft.astro devient /classements/minecraft).
  • components/:
  • classements/: Composants React gérant l'affichage et le tri des tableaux de scores.
  • sections/: Blocs de mise en page réutilisables (Bannières, Présentations...).
  • ui/: Composants d'interface atomiques (Boutons, Inputs...).
  • layouts/: Gabarits principaux (ex: Layout.astro) qui définissent la structure commune (Header, Footer, Meta tags).
  • styles/:
  • themes/: Définit les palettes de couleurs pour les modes Clair et Sombre via des variables CSS.
  • global/: Styles CSS globaux spécifiques (ex: rankings.css).
  • utils/: Fonctions utilitaires, helpers de formatage et logique métier partagée.

Fonctionnement des Thèmes (Dark Mode)

Le site intègre un système de thème Clair / Sombre natif. Ceci est géré via des variables CSS définies dans src/styles/themes/. Les composants utilisent ces variables (ex: var(--background-color), var(--ranking-text-color)) pour s'adapter automatiquement à la préférence de l'utilisateur ou au switch manuel.

Données et API

L'application est "Frontend-only" pour l'affichage, mais elle consomme des données dynamiques. Toutes les statistiques (Minecraft, Palworld, Discord) sont récupérées depuis notre API publique:

Otterly API

Sources de données

  • Minecraft: Données collectées par Otternel (Rust).
  • Discord: Bot Discord interne pour les statistiques d'activité.

Pour toute demande de suppression de données, veuillez consulter notre page de gestion des données.

Contributeurs

  • Mathéo (matheo-1712): Développement Frontend (Astro/React) & API Otterly.
  • Corentin (corentin-cott): Développement Backend, Outils de monitoring ( Rust/Go) & DevOps.