root 42a1ab54f1 prod: UI Optimisée mise en production
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>
2026-01-19 13:59:52 +00:00

AudiOhm 🎵

Alternative à Spotify avec streaming YouTube, interface néon cyberpunk et backend auto-hébergé.

Python Flutter FastAPI License

🎯 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:

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

S
Description
No description provided
Readme 880 KiB
Languages
JavaScript 39.2%
Python 35.6%
HTML 14.1%
CSS 6.6%
Batchfile 2.3%
Other 2.2%