🗺️ GuessThePlace

Une application web de géolocalisation et de jeu

Projet réalisé dans le cadre du cours ArchiOWeb et DévMobil - HEIG-VD

Description

GuessThePlace est une application de jeu géolocalisé interactive où les utilisateurs publient des photos géolocalisées et tentent de deviner leur emplacement exact pour gagner des points.

Le système de score se base sur la précision de la localisation devinée, créant ainsi une expérience compétitive et ludique. Le backend repose sur une API REST sécurisée respectant les bonnes pratiques d'architecture et de qualité de code.

Équipe

Mathilde Ançay
Estelle Bolay
Maximilien Maret
Victor Wojciechowski

Fonctionnalités principales

Gestion des utilisateurs

Inscription et authentification sécurisée (JWT)
Système de rôles (utilisateur / administrateur)
Gestion de profil

Gestion des équipes

Création et gestion d'équipes
Attribution des joueurs aux équipes

Publications

Publication de photos géolocalisées
Validation des publications par un administrateur
Upload d'images avec stockage local

Système de jeu

Devinettes avec calcul de score basé sur la précision géographique
Calcul de distance avec la bibliothèque GeoLib

Classement

Classement global des joueurs
Système de points basé sur la précision
Agrégations de scores
Note : Les droits administrateurs existent, mais ne sont pour le moment implémentés que du côté backend (middleware, routes spécialisées, propriété is_admin du model User)

Stack technique

Backend

Langage : Node.js (ES Modules)
Framework : Express 5.1
Base de données : MongoDB avec Mongoose 8.19
Authentification : JWT (JSON Web Tokens)
Hashing : bcrypt
Géolocalisation : GeoLib
Upload : Multer
Tests : Jest + Supertest
Documentation : OpenAPI/Swagger UI

Frontend

Framework : Vue.js 3.5
Routing : Vue Router 4.6
State Management : Vuex 4.0
Styling : Tailwind CSS 4.1
Cartographie : Leaflet 1.9 + D3.js 7.8
Build : Vite 7.1
Icons : Lucide Vue

DevOps

Environnement : dotenv
Développement Local : MongoDB via Docker Compose ou Mongo Atlas avec une variable d'environnement MONGO_URI pointant vers une collection test.

Architecture

GuessThePlace/
├── backend/              # API REST Node.js/Express
│   ├── src/
│   │   ├── bin/         # Point d'entrée (start.js)
│   │   ├── controllers/ # Logique métier
│   │   ├── models/      # Modèles Mongoose
│   │   ├── routes/      # Routes API v1
│   │   ├── middlewares/ # Auth & Admin
│   │   ├── data/        # Données GeoJSON
│   │   └── spec/        # Tests Jest
│   ├── openapi.yml      # Documentation API
│   ├── compose.yaml     # Docker Compose
│   └── package.json
│
└── frontend/            # Application Vue.js
    ├── src/
    │   ├── App.vue          # Composant racine
    │   ├── main.js          # Point d'entrée
    │   ├── components/      # Composants Vue réutilisables
    │   ├── composables/     # Logique réutilisable 
    │   │   ├── api/         # Appels API 
    │   │   ├── useAuth.js   # Gestion authentification
    │   │   └── useLogout.js # Gestion déconnexion
    │   ├── views/           # Pages/vues de l'application
    │   ├── router/          # Configuration Vue Router
    │   ├── store/           # State management (Vuex)
    │   └── css/             # Styles globaux
    ├── public/              # Assets statiques
    ├── index.html           # Template HTML
    ├── vite.config.js       # Configuration Vite
    └── package.json

Installation et démarrage

Prérequis

Node.js 20.19+ ou 22.12+
MongoDB (via Docker ou installation locale)
npm ou yarn

1. Cloner le projet

git clone https://github.com/ProjArtBAMAgency/GuessThePlace.git
cd GuessThePlace

2. Configuration de la base de données

Démarrer MongoDB avec Docker Compose :

cd backend
docker compose up -d

MongoDB sera accessible sur localhost:27017 avec :

Username: root
Password: example

3. Configuration du Backend

cd backend
npm install

Créer un fichier .env à la racine du dossier backend :

MONGO_URI=mongodb://root:example@localhost:27017/guesstheplace?authSource=admin
JWT_SECRET=your-secret-key-here
PORT=3000

Démarrer le serveur :

npm start
# ou en mode développement
npm run dev

L'API sera disponible sur http://localhost:3000

4. Configuration du Frontend

cd frontend
npm install

Démarrer le serveur de développement :

npm run dev

L'application sera disponible sur http://localhost:5173

5. Build de production

Frontend :

cd frontend
npm run build

Les fichiers compilés seront dans frontend/dist/ et automatiquement servis par le backend Express.

Documentation API

Accès à la documentation

Production

https://www.guesstheplace.ch/api-docs/

Développement local

Une fois le backend démarré : http://localhost:3000/api-docs

Endpoints principaux

Authentication

POST /api/v1/register - Inscription
POST /api/v1/login - Connexion

Users

GET /api/v1/users - Liste des utilisateurs
GET /api/v1/users/:id - Détails d'un utilisateur
PATCH /api/v1/users/:id - Mise à jour
DELETE /api/v1/users/:id - Suppression

Teams

GET /api/v1/teams - Liste des équipes
POST /api/v1/teams - Créer une équipe
GET /api/v1/teams/:id - Détails
PATCH /api/v1/teams/:id - Mise à jour
DELETE /api/v1/teams/:id - Suppression

Posts

GET /api/v1/posts - Liste des publications (avec pagination)
POST /api/v1/posts - Créer une publication (avec image)
GET /api/v1/posts/:id - Détails
PATCH /api/v1/posts/:id - Valider/modifier
DELETE /api/v1/posts/:id - Suppression

Guesses

GET /api/v1/guesses - Liste des devinettes
POST /api/v1/guesses - Soumettre une devinette
GET /api/v1/guesses/:id - Détails

Zones

GET /api/v1/zones - Liste des zones géographiques
GET /api/v1/zones/:id - Détails d'une zone

Authentification

Toutes les routes protégées nécessitent un token JWT dans un cookie nommé token :

Cookie: token=<votre-token-jwt>

Modèle de données

Collections MongoDB

Users : Utilisateurs avec authentification
Teams : Équipes de joueurs
Posts : Publications avec photos et géolocalisation
Guesses : Tentatives de localisation
Zones : Zones géographiques (données GeoJSON Suisse)

Design et Maquettes

Voir le prototype interactif Figma

Tests

Lancer les tests backend :

cd backend
npm run test

Les tests couvrent :

Authentication (signup, login)
Users CRUD
Teams CRUD
Posts avec upload d'images
Guesses et calcul de scores
Les routes /profile et /user-scores
Zones géographiques

Sécurité

Hashing des mots de passe avec bcrypt
Authentification JWT
Protection des routes avec middleware d'authentification
Contrôle d'accès basé sur les rôles
Validation des données entrantes
Protection contre les injections NoSQL (Mongoose)

Fonctionnalités clés

Calcul du score

Le score est calculé en fonction de la distance entre la localisation devinée et la localisation réelle :

Distance croissante : Points décroissants
Algorithme basé sur GeoLib pour les calculs géographiques

Pagination

L'API supporte la pagination pour optimiser les performancea. Pour voir lesquelles routes la supporte, consulter la documentation.

Upload d'images

Upload via Multer
Stockage local dans backend/images/
Formats supportés : JPG, PNG, GIF
Taille maximum : configurable

Déploiement

Application en production

L'application est accessible en ligne sur : www.guesstheplace.ch

Variables d'environnement requises

# Database
MONGODB_URI=mongodb://user:password@host:port/database

# JWT
JWT_SECRET=your-secret-key

# Server
PORT=3000
NODE_ENV=production

Build frontend

cd frontend
npm run build

Les fichiers statiques dans dist/ sont automatiquement servis par Express.

Licence

Ce projet est développé dans le cadre académique du cours ArchiOWeb et DévMobil à la HEIG-VD.

Contact

Projet GuessThePlace - @ProjArtBAMAgency

Lien du projet : https://github.com/ProjArtBAMAgency/GuessThePlace

Fait avec ❤️ à la HEIG-VD

Name		Name	Last commit message	Last commit date
Latest commit History 359 Commits
backend		backend
frontend		frontend
.gitignore		.gitignore
README.md		README.md

Uh oh!

Folders and files

Latest commit

History

Repository files navigation