🎉 Initial commit: AudiOhm - Alternative à Spotify avec streaming YouTube
Features: - Frontend Flutter avec thème néon cyberpunk - Backend FastAPI avec streaming YouTube - Base de données PostgreSQL + Redis - Authentification JWT complète - Recherche multi-source (DB + YouTube) - Playlists CRUD avec drag & drop - Queue management - Settings avec audio quality - Interface adaptative (Desktop + Mobile) Tech Stack: - Frontend: Flutter 3.2+, Riverpod - Backend: Python 3.11+, FastAPI - Database: PostgreSQL 15+ - Cache: Redis 7+ - Streaming: yt-dlp + FFmpeg 🚀 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
feldenr
@@ -0,0 +1,247 @@
|
||||
# Spotify Le 2 - Frontend Flutter
|
||||
|
||||
Application Flutter cross-platform (Desktop + Android) avec thème néon cyberpunk.
|
||||
|
||||
## Stack Technique
|
||||
|
||||
- **Flutter** 3.2+ (Dart 3.2+)
|
||||
- **Riverpod** 2.4+ - State management
|
||||
- **Dio** 5.4+ - HTTP client
|
||||
- **just_audio** 0.9+ - Audio playback
|
||||
- **drift** 2.14+ - Local database
|
||||
- **cached_network_image** 3.3+ - Image caching
|
||||
|
||||
## Structure du Projet
|
||||
|
||||
```
|
||||
lib/
|
||||
├── main.dart # Entry point
|
||||
├── core/ # Configuration partagée
|
||||
│ ├── constants/
|
||||
│ │ └── api_constants.dart
|
||||
│ └── theme/
|
||||
│ ├── colors.dart # Palette néon cyberpunk
|
||||
│ ├── text_styles.dart # Typographie
|
||||
│ └── app_theme.dart # Thème Material
|
||||
├── domain/ # Business logic
|
||||
│ └── entities/
|
||||
│ ├── user.dart
|
||||
│ ├── track.dart
|
||||
│ └── playlist.dart
|
||||
├── infrastructure/ # External dependencies
|
||||
│ └── datasources/
|
||||
│ ├── local/ # Database locale
|
||||
│ └── remote/ # API client
|
||||
├── presentation/ # UI layer
|
||||
│ ├── providers/
|
||||
│ │ └── navigation_provider.dart
|
||||
│ ├── adaptive/
|
||||
│ │ └── adaptive_layout.dart # Desktop vs Mobile
|
||||
│ ├── pages/
|
||||
│ │ ├── desktop/
|
||||
│ │ │ └── home_page.dart
|
||||
│ │ └── mobile/
|
||||
│ │ └── mobile_home_page.dart
|
||||
│ └── widgets/
|
||||
│ ├── common/
|
||||
│ │ └── mini_player.dart
|
||||
│ └── desktop/
|
||||
│ ├── desktop_sidebar.dart
|
||||
│ └── desktop_top_bar.dart
|
||||
└── l10n/ # Internationalization
|
||||
```
|
||||
|
||||
## Installation
|
||||
|
||||
### Prérequis
|
||||
|
||||
- Flutter 3.2+
|
||||
- Dart 3.2+
|
||||
- Android Studio / VS Code
|
||||
- Android SDK (pour Android)
|
||||
|
||||
### 1. Cloner le projet
|
||||
|
||||
```bash
|
||||
cd Spotify_le_2/frontend
|
||||
```
|
||||
|
||||
### 2. Installer les dépendances
|
||||
|
||||
```bash
|
||||
flutter pub get
|
||||
```
|
||||
|
||||
### 3. Générer le code (Riverpod generators)
|
||||
|
||||
```bash
|
||||
dart run build_runner build --delete-conflicting-outputs
|
||||
```
|
||||
|
||||
### 4. Lancer l'app
|
||||
|
||||
```bash
|
||||
# Desktop
|
||||
flutter run -d windows
|
||||
|
||||
# Android
|
||||
flutter run -d android
|
||||
|
||||
# Linux
|
||||
flutter run -d linux
|
||||
```
|
||||
|
||||
## Thème Néon Cyberpunk
|
||||
|
||||
### Palette de Couleurs
|
||||
|
||||
```dart
|
||||
// Backgrounds
|
||||
primary: #0A0E27 // Bleu nuit très foncé
|
||||
surface: #1A1F3A // Bleu nuit
|
||||
surfaceVariant: #252B4A
|
||||
|
||||
// Accent néon
|
||||
cyan: #00F0FF // Cyan électrique
|
||||
violet: #BF00FF // Violet néon
|
||||
rose: #FF006E // Rose néon
|
||||
vert: #39FF14 // Vert néon
|
||||
```
|
||||
|
||||
### Utilisation du Thème
|
||||
|
||||
```dart
|
||||
// Import
|
||||
import 'package:spotify_le_2/core/theme/colors.dart';
|
||||
|
||||
// Utiliser les couleurs
|
||||
Container(
|
||||
color: AppColors.surface,
|
||||
child: Text(
|
||||
'Hello',
|
||||
style: TextStyle(color: AppColors.cyan),
|
||||
),
|
||||
)
|
||||
|
||||
// Gradients
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: AppColors.primaryGradient,
|
||||
),
|
||||
)
|
||||
|
||||
// Effets glow
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
boxShadow: AppColors.cyanGlow,
|
||||
),
|
||||
)
|
||||
```
|
||||
|
||||
## Layout Adaptatif
|
||||
|
||||
L'application utilise deux layouts distincts selon la largeur de l'écran :
|
||||
|
||||
**Desktop (≥ 800px) :**
|
||||
- Sidebar navigation à gauche (240px)
|
||||
- Top bar avec recherche
|
||||
- Contenu principal scrollable
|
||||
- Mini player persistant en bas
|
||||
|
||||
**Mobile (< 800px) :**
|
||||
- Top bar
|
||||
- Contenu principal
|
||||
- Mini player sticky
|
||||
- Bottom navigation bar (4 onglets)
|
||||
|
||||
## Navigation
|
||||
|
||||
```dart
|
||||
// Naviguer vers une page
|
||||
ref.read(navigationProvider.notifier).navigateTo('search');
|
||||
|
||||
// Watcher la page courante
|
||||
final currentPage = ref.watch(currentPageProvider);
|
||||
```
|
||||
|
||||
## Développement
|
||||
|
||||
### Formatter
|
||||
|
||||
```bash
|
||||
flutter format .
|
||||
```
|
||||
|
||||
### Linter
|
||||
|
||||
```bash
|
||||
flutter analyze
|
||||
```
|
||||
|
||||
### Tests
|
||||
|
||||
```bash
|
||||
# Tous les tests
|
||||
flutter test
|
||||
|
||||
# Tests avec coverage
|
||||
flutter test --coverage
|
||||
```
|
||||
|
||||
### Build
|
||||
|
||||
```bash
|
||||
# Windows
|
||||
flutter build windows
|
||||
|
||||
# Android APK
|
||||
flutter build apk
|
||||
|
||||
# Android App Bundle
|
||||
flutter build appbundle
|
||||
|
||||
# Linux
|
||||
flutter build linux
|
||||
```
|
||||
|
||||
## Performance
|
||||
|
||||
### Optimisations implémentées
|
||||
|
||||
1. **Streaming 60fps** - StreamSubscription pour progress bar
|
||||
2. **Infinite scroll** - ListView.builder avec préchargement
|
||||
3. **Image caching** - cached_network_image avec cache infini
|
||||
4. **Animations optimisées** - 200ms avec easeOutCubic
|
||||
|
||||
### Profiling
|
||||
|
||||
```bash
|
||||
# DevTools
|
||||
flutter pub global activate devtools
|
||||
flutter pub global run devtools
|
||||
|
||||
# Puis lancer l'app avec profiling
|
||||
flutter run --profile
|
||||
```
|
||||
|
||||
## Configuration API
|
||||
|
||||
Modifier `lib/core/constants/api_constants.dart` :
|
||||
|
||||
```dart
|
||||
class ApiConstants {
|
||||
static const String baseUrl = 'http://localhost:8000/api/v1';
|
||||
static const String wsUrl = 'ws://localhost:8000';
|
||||
static const Duration connectionTimeout = Duration(seconds: 30);
|
||||
}
|
||||
```
|
||||
|
||||
## Ressources
|
||||
|
||||
- [Flutter Documentation](https://flutter.dev/docs)
|
||||
- [Riverpod Documentation](https://riverpod.dev)
|
||||
- [Design Preview](../docs/design-preview.html) - Aperçu HTML du thème
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
Reference in New Issue
Block a user