Skip to content

mitchlabeetch/o2paris

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

166 Commits
app
app
 
 
components
components
 
 
lib
lib
 
 
types
types
 
 
.env.example
.env.example
 
 
.eslintrc.json
.eslintrc.json
 
 
.gitignore
.gitignore
 
 
ARCHITECTURE.md
ARCHITECTURE.md
 
 
CONTRIBUTING.md
CONTRIBUTING.md
 
 
DEPLOYMENT.md
DEPLOYMENT.md
 
 
DOCUMENTATION.md
DOCUMENTATION.md
 
 
QUICKSTART.md
QUICKSTART.md
 
 
README.md
README.md
 
 
TROUBLESHOOTING.md
TROUBLESHOOTING.md
 
 
VERCEL_SETUP.md
VERCEL_SETUP.md
 
 
aymeric.md
aymeric.md
 
 
check_db_duplicates.js
check_db_duplicates.js
 
 
init_db.js
init_db.js
 
 
init_db_js.js
init_db_js.js
 
 
next.config.js
next.config.js
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 
postcss.config.js
postcss.config.js
 
 
server.log
server.log
 
 
tailwind.config.ts
tailwind.config.ts
 
 
tsconfig.json
tsconfig.json
 
 
vercel.json
vercel.json
 
 
verify_db_standalone.js
verify_db_standalone.js
 
 
verify_tiles_db.js
verify_tiles_db.js
 
 

Repository files navigation

O2Paris - Carte Sonore Interactive

Carte sonore interactive pour un projet en collaboration avec Eau de Paris

đź“– NEW! Complete Documentation Available! Check out DOCUMENTATION.md for comprehensive, friendly documentation in English. Note: App content is in French (project-specific for Eau de Paris, but you're welcome to adapt it for your own projects!)

🔊 Sounds Not Playing? If sounds fall back to beep when clicked, see FIXING_SOUNDS.md for the complete solution.

Description

O2Paris est une application de carte interactive qui affiche la ville de Paris avec des points sonores. Chaque point peut être cliqué pour afficher un tooltip avec un texte et des contrôles audio (lecture/pause) qui déclenchent des sons hébergés sur Neon PostgreSQL. L'application suit un thème aquatique en lien avec l'institution publique Eau de Paris.

Fonctionnalités

  • Carte Interactive : Visualisation de Paris basĂ©e sur Leaflet.js
  • Points Sonores : Marqueurs cliquables avec descriptions et lecteurs audio
  • Interface d'Administration : GUI protĂ©gĂ©e par mot de passe pour :
    • CrĂ©er, modifier et supprimer des points sur la carte
    • TĂ©lĂ©charger et gĂ©rer des fichiers audio
    • Configurer les tuiles de carte, le centre, le zoom
    • Personnaliser les icĂ´nes et le design
  • Thème Eau : Design inspirĂ© de l'eau avec une palette de couleurs bleues
  • Base de DonnĂ©es : PostgreSQL (Neon) pour stocker les points, sons et configuration

Technologies Utilisées

  • Next.js 14 : Framework React avec App Router
  • TypeScript : Typage statique
  • Leaflet.js : Bibliothèque de cartes interactives
  • React-Leaflet : Composants React pour Leaflet
  • Neon PostgreSQL : Base de donnĂ©es serverless
  • Tailwind CSS : Framework CSS utility-first
  • Vercel : Plateforme de dĂ©ploiement

Installation

  1. Clonez le dépôt :
git clone https://github.com/lightmyfireadmin/o2paris.git
cd o2paris
  1. Installez les dépendances :
npm install
  1. Configurez les variables d'environnement : Créez un fichier .env basé sur .env.example :
cp .env.example .env

Éditez .env avec vos informations :

  • DATABASE_URL : Votre chaĂ®ne de connexion Neon PostgreSQL
  • ADMIN_PASSWORD : Votre mot de passe admin en texte clair (par dĂ©faut: Admin123 en dĂ©veloppement)
  • NEXTAUTH_SECRET : Secret gĂ©nĂ©rĂ© avec openssl rand -base64 32

  1. Initialisez la base de données :

    • Option CLI : psql "$DATABASE_URL" -f scripts/migrations/001_init.sql
    • Option HTTP : accĂ©dez Ă  /api/init après le premier dĂ©marrage pour crĂ©er les tables et insĂ©rer des donnĂ©es de dĂ©monstration

  2. Lancez le serveur de développement :

npm run dev

Ouvrez http://localhost:3000 dans votre navigateur.

DĂ©ploiement sur Vercel

  1. Connectez votre dépôt GitHub à Vercel

  2. Configurez les variables d'environnement dans les paramètres Vercel :

    • DATABASE_URL : ChaĂ®ne de connexion Neon PostgreSQL (requis)
    • ADMIN_PASSWORD : Votre mot de passe admin (requis pour production)

    Note importante pour Vercel : Le nom de la variable d'environnement pour le mot de passe admin doit être exactement ADMIN_PASSWORD. Utilisez un mot de passe fort et sécurisez-le via les variables d'environnement cryptées de Vercel.

  3. DĂ©ployez !

Vercel détectera automatiquement Next.js et utilisera la configuration appropriée.

⚠️ Important: Si les sons ne se jouent pas après le déploiement (tombent en son de bip), consultez le guide VERCEL_SETUP.md pour configurer correctement la variable DATABASE_URL.

Utilisation

Interface Principale

  • Visualisez la carte de Paris avec les points sonores
  • Cliquez sur un point pour voir sa description et Ă©couter le son associĂ©
  • Utilisez les contrĂ´les de lecture/pause pour contrĂ´ler l'audio

Interface d'Administration

  1. Accédez à /admin
  2. Connectez-vous avec le mot de passe admin (par défaut en développement: Admin123)
  3. GĂ©rez les points, sons et configuration de la carte

GĂ©rer les Points

  • CrĂ©ez de nouveaux points en spĂ©cifiant latitude, longitude, titre, description et URL du son
  • Modifiez ou supprimez les points existants

GĂ©rer les Sons

  • TĂ©lĂ©chargez des fichiers audio (MP3, WAV, OGG, etc.)
  • Utilisez l'ID retournĂ© dans l'URL du son pour un point : /api/sounds?id=ID

Configuration de la Carte

  • Personnalisez l'URL des tuiles de carte
  • Ajustez le centre de la carte (latitude/longitude)
  • Configurez les niveaux de zoom (initial, min, max)
  • Modifiez l'attribution de la carte

Structure du Projet

o2paris/
├── app/                      # App Router de Next.js
│   ├── api/                  # Routes API
│   │   ├── auth/            # Authentification
│   │   ├── config/          # Configuration de la carte
│   │   ├── init/            # Initialisation de la DB
│   │   ├── pinpoints/       # CRUD des points
│   │   └── sounds/          # Upload/récupération des sons
│   ├── admin/               # Page d'administration
│   ├── globals.css          # Styles globaux
│   ├── layout.tsx           # Layout racine
│   └── page.tsx             # Page principale (carte)
├── components/              # Composants React
│   └── Map.tsx             # Composant carte Leaflet
├── lib/                     # Utilitaires et bibliothèques
│   ├── auth.ts             # Authentification
│   └── db.ts               # Configuration et schémas DB
├── public/                  # Fichiers statiques
├── .env.example            # Exemple de variables d'environnement
├── .gitignore              # Fichiers ignorés par Git
├── next.config.js          # Configuration Next.js
├── package.json            # Dépendances
├── postcss.config.js       # Configuration PostCSS
├── tailwind.config.ts      # Configuration Tailwind CSS
├── tsconfig.json           # Configuration TypeScript
└── vercel.json             # Configuration Vercel

API Endpoints

  • GET /api/pinpoints : RĂ©cupère tous les points

  • POST /api/pinpoints : CrĂ©e un nouveau point

  • PUT /api/pinpoints : Met Ă  jour un point

  • DELETE /api/pinpoints?id=ID : Supprime un point

  • GET /api/sounds?id=ID : RĂ©cupère un fichier audio

  • POST /api/sounds : TĂ©lĂ©charge un nouveau son

  • DELETE /api/sounds?id=ID : Supprime un son

  • GET /api/config : RĂ©cupère la configuration de la carte

  • PUT /api/config : Met Ă  jour la configuration

  • POST /api/auth : Authentification admin

  • DELETE /api/auth : DĂ©connexion

  • GET /api/init : Initialise la base de donnĂ©es

Sécurité

  • L'interface d'administration est protĂ©gĂ©e par authentification
  • Utilisez un mot de passe fort pour ADMIN_PASSWORD en production
  • Les variables d'environnement sensibles ne sont pas committĂ©es
  • Les sessions utilisent des cookies HTTP-only
  • Les mots de passe sont sĂ©curisĂ©s via les variables d'environnement cryptĂ©es de Vercel

Contribution

Les contributions sont les bienvenues ! N'hésitez pas à ouvrir une issue ou une pull request.

Licence

Ce projet est développé pour Eau de Paris.

Documentation Complète

Document Description
DOCUMENTATION.md đź“– COMPLETE GUIDE - Comprehensive, friendly documentation (English)
QUICK_FIX.md ⚡ Solution rapide (5 min) pour problèmes de son
FIXING_SOUNDS.md 🔊 Guide complet pour réparer la lecture audio
VERCEL_SETUP.md ⚙️ Configuration Vercel et variables d'environnement
TROUBLESHOOTING.md 🔧 Dépannage et solutions aux problèmes courants
DATABASE_CONFIG_NOTES.md 🗄️ Notes sur la configuration de la base de données
DEPLOYMENT.md 🚀 Guide de déploiement complet
QUICKSTART.md ⏱️ Démarrage rapide (5 minutes)
ARCHITECTURE.md 🏗️ Architecture technique détaillée
CONTRIBUTING.md 🤝 Guide pour contributeurs
PROJECT_SUMMARY.md 📋 Résumé du projet

Support

Pour toute question ou problème, veuillez ouvrir une issue sur GitHub.

About

Carte sonore interactive pour un projet en collaboration avec Eau de Paris đź’§

o2paris.vercel.app

Topics

map sound data-visualization

Resources

Readme

Contributing

Contributing
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •  

Languages