🎵 Mon Profil Spotify - Style Deezer

Une application web PHP qui permet de visualiser votre profil Spotify, rechercher de la musique et gérer vos artistes suivis, avec un design inspiré de Deezer.

✨ Fonctionnalités

🔐 Authentification Spotify

• Connexion sécurisée via l'API Spotify OAuth 2.0
• Gestion automatique des tokens d'accès
• Déconnexion avec nettoyage des sessions

👤 Profil Utilisateur

• Affichage des informations du profil (nom, email, pays)
• Photo de profil
• Statistiques (nombre d'abonnés)
• Design avec cards élégantes

🔍 Recherche Musicale

• Recherche d'artistes et de pistes en temps réel
• Interface de recherche intuitive
• Affichage des résultats avec images et métadonnées
• Barres de popularité visuelles

🎵 Lecteur Intégré

• Player Spotify intégré en bas de page
• Lecture directe des pistes depuis les résultats de recherche
• Interface fixe et responsive

👥 Gestion des Artistes

• Visualisation des artistes suivis
• Boutons Follow/Unfollow pour chaque artiste
• Mise à jour en temps réel du statut de suivi
• Conservation de la recherche après les actions

🎨 Design

Style Deezer

• Palette de couleurs : Gradient multicolore caractéristique
• Thème sombre : Fond noir/gris pour les yeux
• Cards flottantes : Effets d'ombre et transparence
• Animations fluides : Transitions et effets hover
• Responsive design : Adaptatif mobile/desktop

Composants Visuels

• Gradient header avec effet overlay
• Cards avec corners arrondis et backdrop-filter
• Barres de progression pour la popularité
• Tags colorés pour les genres musicaux
• Boutons avec effets de glow

🚀 Installation

Prérequis

• PHP 7.4 ou supérieur
• Extension cURL activée
• Compte Spotify Developer

Configuration Spotify

1. Allez sur Spotify Developer Dashboard
2. Créez une nouvelle application
3. Notez votre Client ID et Client Secret
4. Ajoutez http://127.0.0.1:3333/callback.php dans les Redirect URIs

Installation du projet

1. Clonez ou téléchargez le projet
2. Éditez spotify.php :

   const CLIENT_ID = "votre_client_id";

3. Lancez le serveur PHP :

   php -S 127.0.0.1:3333

4. Ouvrez http://127.0.0.1:3333 dans votre navigateur

📁 Structure du Projet

api-test/
├── index.php          # Page principale
├── spotify.php        # Gestion OAuth et tokens
├── callback.php       # Callback OAuth Spotify
├── function.php       # Fonctions API Spotify
├── style.css          # Styles Deezer
└── README.md          # Documentation

🔧 Fichiers Principaux

index.php

• Interface utilisateur principale
• Gestion des formulaires (recherche, follow/unfollow)
• Affichage des données Spotify
• Player intégré

spotify.php

• Authentification OAuth 2.0
• Gestion des tokens d'accès
• Redirection vers l'API Spotify
• Durée de vie des cookies adaptée aux tokens

function.php

• fetchFollowedArtists() : Récupère les artistes suivis
• SearchByString() : Recherche dans l'API Spotify
• followArtist() / unfollowArtist() : Gestion du suivi
• isFollowingArtist() : Vérification du statut de suivi

style.css

• Variables CSS pour le thème Deezer
• Composants réutilisables (cards, boutons, grids)
• Animations et transitions
• Media queries pour le responsive

🎯 Utilisation

Première connexion

1. Cliquez sur "Se connecter à Spotify"
2. Autorisez l'application dans Spotify
3. Vous êtes redirigé vers votre profil

Recherche de musique

1. Utilisez le formulaire de recherche
2. Tapez le nom d'un artiste ou d'une chanson
3. Cliquez sur "Rechercher"
4. Parcourez les résultats

Écoute de musique

1. Dans les résultats de recherche
2. Cliquez sur le titre d'une piste
3. Elle se charge dans le player en bas

Gestion des artistes

1. Recherchez un artiste
2. Cliquez sur "➕ Suivre" ou "❌ Ne plus suivre"
3. Vos artistes suivis apparaissent dans la section dédiée

🔒 Sécurité

• Utilisation d'OAuth 2.0 avec PKCE
• Tokens stockés dans des cookies sécurisés
• Expiration automatique des sessions
• Protection CSRF avec tokens cachés
• Échappement des données utilisateur

🌐 API Spotify Utilisées

• /v1/me : Profil utilisateur
• /v1/me/following : Artistes suivis
• /v1/search : Recherche de contenu
• /v1/me/following/contains : Vérification de suivi
• /v1/me/following (PUT/DELETE) : Gestion du suivi

🎵 Scopes Spotify Requis

• user-read-private : Lecture du profil
• user-read-email : Accès à l'email
• user-follow-read : Lecture des artistes suivis
• user-follow-modify : Modification du suivi d'artistes

🐛 Dépannage

Token expiré

• Reconnectez-vous via "Se connecter à Spotify"
• Les tokens ont une durée de vie limitée (1 heure par défaut)

Erreurs de recherche

• Vérifiez votre connexion internet
• Assurez-vous d'être connecté à Spotify

Player ne fonctionne pas

• Vérifiez que JavaScript est activé
• Certains bloqueurs de publicité peuvent interférer

📱 Responsive

L'interface s'adapte automatiquement :

• Desktop : Layout en grille avec sidebar
• Tablet : Grille adaptative
• Mobile : Layout empilé, boutons pleine largeur

🎨 Personnalisation

Couleurs

Modifiez les variables CSS dans style.css :

:root {
    --deezer-accent: #ff6b35;
    --deezer-secondary: #00d4ff;
    /* ... */
}

Layout

Ajustez les tailles de grille :

.artists-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

🤝 Contribution

1. Forkez le projet
2. Créez une branche feature
3. Committez vos changements
4. Pushez vers la branche
5. Ouvrez une Pull Request

📄 Licence

Ce projet est libre d'utilisation pour des fins personnelles et éducatives.

🔗 Liens Utiles

• Spotify Web API Documentation
• Spotify Developer Dashboard
• OAuth 2.0 avec PKCE

---

Enjoy your music! 🎧