42a1ab54f15e798e8091e51353a7e3382f0bdb06
Fichiers mis en production: - ✅ CSS modulaire (900+ lignes) - architecture 9 sections - ✅ JavaScript moderne (600+ lignes) - state management complet - ✅ Sauvegardes des fichiers originaux (.backup) - ✅ Script de démarrage optimisé (START_WEB_OPTIMIZED.sh) - ✅ Documentation déploiement (PRODUCTION_READY.md) Changements CSS: - 🏗️ Architecture modulaire avec CSS Variables - ⚡ Animations GPU-optimisées (transform/opacity) - ♿ prefers-reduced-motion implémenté - 🎯 Focus visible pour accessibilité - 📱 Responsive mobile-first - 🎨 Design System V2 complet Nouvelles fonctionnalités JS: - 📦 State management centralisé (AppState) - 🔐 Auth complète (login, register, logout) - 🎵 Player controls: 8 boutons actifs - 🍞 Toast notifications système - ⌨️ Keyboard shortcuts (8 raccourcis) - 📊 API intégrée (playlists, tracks) - 🧭 Navigation SPA fluide - 📱 Menu mobile responsive Scripts: - START_WEB_OPTIMIZED.sh - Script de démarrage optimisé Documentation: - PRODUCTION_READY.md - Guide complet de déploiement - Instructions de démarrage - Raccourcis clavier documentés - Résolution de problèmes Accessibilité: - Focus states visibles - Reduced motion support - Touch targets 44x44px - Contrast 4.5:1 minimum Performance: - Transform/opacity animations - DOM elements cached - Event delegation - GPU accelerated Generated with [Claude Code](https://claude.com/claude-code) via [Happy](https://happy.engineering) Co-Authored-By: Claude <noreply@anthropic.com> Co-Authored-By: Happy <yesreply@happy.engineering>
AudiOhm 🎵
Alternative à Spotify avec streaming YouTube, interface néon cyberpunk et backend auto-hébergé.
🎯 Fonctionnalités
✅ Implémenté
Backend FastAPI :
- ✅ Authentification JWT complète (register, login, refresh, logout)
- ✅ Recherche multi-source (database + YouTube via yt-dlp)
- ✅ Streaming audio avec support HTTP Range
- ✅ CRUD Playlists complet (create, read, update, delete)
- ✅ Gestion des tracks dans playlists (add, remove, reorder)
- ✅ Recommandations basées sur YouTube related videos
Frontend Flutter :
- ✅ Thème néon cyberpunk complet avec effets glow
- ✅ Layout adaptatif (Desktop sidebar + Mobile bottom nav)
- ✅ Mini player avec contrôles réactifs
- ✅ Navigation instantanée (< 100ms)
- ✅ Image caching progressif
- ✅ State management avec Riverpod
Base de données :
- ✅ 6 modèles SQLAlchemy (User, Artist, Album, Track, Playlist, PlaylistTrack)
- ✅ Relations et indexes optimisés
- ✅ Support async complet
🚧 À venir
- Import de playlists Spotify
- Mode offline avec cache local
- Recommandations avancées (Last.fm)
- Système de likes (bibliothèque)
- Mode collaboratif playlists
- Historique d'écoute
- UI pages (Search, Library, Settings)
📁 Structure du Projet
spotify-le-2/
├── backend/ # FastAPI backend
│ ├── app/
│ │ ├── api/v1/ # Routes (auth, music, playlists)
│ │ ├── core/ # Config, security, database
│ │ ├── models/ # SQLAlchemy models
│ │ ├── schemas/ # Pydantic schemas
│ │ └── services/ # Business logic
│ ├── requirements.txt
│ └── .env.example
│
├── frontend/ # Flutter app
│ ├── lib/
│ │ ├── core/theme/ # Neon cyberpunk theme
│ │ ├── domain/ # Entities
│ │ ├── infrastructure/ # API client
│ │ └── presentation/ # UI, providers
│ └── pubspec.yaml
│
├── docker/
│ └── docker-compose.yml # PostgreSQL + Redis
│
├── docs/
│ ├── design-preview.html # Preview du thème
│ └── plans/ # Design document
│
└── README.md
🚀 Installation
📖 Pour un démarrage rapide en mode Web, voir QUICKSTART_WEB.md
Prérequis
Backend :
- Python 3.11+
- PostgreSQL 15+
- Redis 7+
- FFmpeg
- yt-dlp
Frontend :
- Flutter 3.2+
- Dart 3.2+
- Android Studio / VS Code
1. Cloner le projet
git clone <repo-url>
cd Spotify_le_2
2. Lancer l'infrastructure (Docker)
cd docker
docker-compose up -d
3. Setup Backend
cd backend
# Créer venv
python -m venv venv
venv\Scripts\activate # Windows
source venv/bin/activate # Linux/Mac
# Installer dépendances
pip install -r requirements.txt
# Configurer environnement
cp .env.example .env
# Éditer .env (changer SECRET_KEY!)
# Initialiser DB
python -c "from app.core.database import init_db; import asyncio; asyncio.run(init_db())"
# Lancer serveur
uvicorn app.main:app --reload --host 0.0.0.0 --port 8000
API disponible sur http://localhost:8000
5. Builder l'Application (Android/Windows)
IMPORTANT: Lire le guide de build complet:
- 📖 BUILD_STATUS.md - Status détaillé et solutions aux problèmes
- 🚀 QUICKSTART_BUILDS.md - Guide de build rapide
Résumé rapide:
| Plateforme | Status | Instructions |
|---|---|---|
| Android APK | ⚠️ Nécessite Android SDK | Voir BUILD_STATUS.md |
| Windows EXE | ⚠️ Requiert Windows host | Builder sur Windows avec flutter build windows --release |
| Web | ⚠️ Problème audio | flutter run -d chrome pour dev uniquement |
Pour tester l'application sans build, utiliser:
cd frontend
flutter run -d chrome
4. Setup Frontend
cd frontend
# Installer dépendances
flutter pub get
# Activer le support Web (recommandé pour le debug)
flutter config --enable-web
flutter create --platforms=web .
# Lancer app
flutter run -d chrome # Web (recommandé pour debug)
flutter run -d windows # Desktop Windows
flutter run -d android # Android
🌐 Mode Web (recommandé pour le développement/debug)
L'application web s'ouvrira automatiquement à : http://localhost:8080
Avantages du mode Web :
- ✅ Pas besoin de Visual Studio
- ✅ Débugage dans le navigateur (Chrome DevTools)
- ✅ Hot reload instantané
- ✅ Fonctionne sur toutes les plateformes
5. Créer un exécutable (.exe)
Windows :
# Double-cliquez sur:
BUILD_CLIENT_WINDOWS.bat
# Ou manuellement:
cd frontend
flutter build windows --release
# Exécutable dans: build\windows\x64\runner\Release\
Linux :
./BUILD_CLIENT_LINUX.sh
📖 Voir BUILD_CLIENT_README.md pour les instructions détaillées
🎨 Design
Le thème Néon Cyberpunk est visible dans docs/design-preview.html.
Couleurs principales :
- Background:
#0A0E27(bleu nuit très foncé) - Primary:
#00F0FF(cyan électrique néon) - Secondary:
#BF00FF(violet néon) - Accent:
#FF006E(rose néon)
📡 API Endpoints
Authentification
POST /api/v1/auth/register - Créer compte
POST /api/v1/auth/login - Se connecter
POST /api/v1/auth/refresh - Rafraîchir token
GET /api/v1/auth/me - Profil utilisateur
PUT /api/v1/auth/me - Modifier profil
POST /api/v1/auth/logout - Se déconnecter
Musique
GET /api/v1/music/search - Rechercher (DB + YouTube)
GET /api/v1/music/tracks/{id} - Détails track
GET /api/v1/music/tracks/{id}/stream - Stream audio
POST /api/v1/music/tracks/from-youtube - Créer track YouTube
GET /api/v1/music/tracks/{id}/recommendations - Recommandations
GET /api/v1/music/trending - Trending tracks
Playlists
GET /api/v1/playlists - Lister playlists
POST /api/v1/playlists - Créer playlist
GET /api/v1/playlists/{id} - Détails playlist
PUT /api/v1/playlists/{id} - Modifier playlist
DELETE /api/v1/playlists/{id} - Supprimer playlist
POST /api/v1/playlists/{id}/tracks - Ajouter tracks
DELETE /api/v1/playlists/{id}/tracks/{track_id} - Retirer track
PUT /api/v1/playlists/{id}/tracks/reorder - Réordonner
🔧 Configuration
Backend (.env)
# Application
DEBUG=true
SECRET_KEY=change-this-to-a-strong-random-key
# Database
POSTGRES_HOST=localhost
POSTGRES_PORT=5432
POSTGRES_USER=spotify
POSTGRES_PASSWORD=your_password
POSTGRES_DB=spotify_le_2
# Redis
REDIS_HOST=localhost
REDIS_PORT=6379
Frontend
// lib/core/constants/api_constants.dart
const String baseUrl = 'http://localhost:8000/api/v1';
📊 Stack Technique
| Composant | Technologie |
|---|---|
| Backend | Python + FastAPI |
| Base de données | PostgreSQL 15+ |
| Cache | Redis 7+ |
| Streaming | yt-dlp + FFmpeg |
| Frontend | Flutter 3.2+ |
| State Management | Riverpod |
| Audio | just_audio |
| ORM | SQLAlchemy 2.0 (async) |
🛠️ Développement
Backend
# Linter
ruff check app/
# Formatter
black app/
# Tests
pytest
Frontend
# Formatter
flutter format .
# Linter
flutter analyze
# Tests
flutter test
📝 License
MIT
Projet développé avec 💜 pour remplacer Spotify
Description
Languages
JavaScript
39.2%
Python
35.6%
HTML
14.1%
CSS
6.6%
Batchfile
2.3%
Other
2.2%