root 0f3652d871 feat: Modernisation complète UI/UX du site web
Design & Animations:
-  Background animé avec gradients qui se déplacent
- 🎨 Glassmorphism (backdrop-filter blur) sur tous les éléments
-  Animations fluides (cubic-bezier easing) sur toutes les interactions
- 🌟 Effets néon glow améliorés avec ombres colorées
- 📱 Responsive design perfectionné (mobile, tablette, desktop)

Améliorations CSS:
- Spinner double rotation (cyan + violet)
- Logo avec animation glow cyclique (3 couleurs)
- Formulaires avec icônes FontAwesome intégrées
- Boutons avec effet shine au hover
- Cartes avec barre supérieure animée
- Scrollbar custom néon
- Animations: fadeIn, slideIn, pulse, shimmer, shake

Nouvelles Fonctionnalités HTML:
- 🎉 Toast notifications container
- 📱 Bouton menu mobile
- ❤️ Section "Titres likés"
-  Section "Récemment écoutées"
- 🔀 Contrôles player: shuffle, repeat, mute, like, add to playlist
- 🔊 Bouton volume interactif
- 🎯 Attributs autocomplete sur les formulaires

Nouveaux Contrôles Player:
- Bouton shuffle (aléatoire)
- Bouton repeat (répéter)
- Bouton mute (couper le son)
- Bouton like (aimer)
- Bouton add to playlist
- Times affichés de chaque côté du progress bar

Micro-interactions:
- Hover states sur tous les éléments cliquables
- Transformations scale/translate au hover
- Transitions 0.3s cubic-bezier fluides
- Focus states avec glow sur les inputs
- Loading states avec skeleton shimmer

Accessibilité:
- Attributs autocomplete pour les formulaires
- Titles sur tous les boutons
- Input types corrects (email, password)
- Labels sémantiques

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:48: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%