🎵 Album Cover Grid Maker 🎵

Une application web interactive permettant de créer et télécharger des grilles personnalisées de pochettes d'albums musicaux.

---

📋 Table des Matières

• Aperçu
• Fonctionnalités
• Technologies Utilisées
• Installation
• Utilisation
• Structure du Projet
• API Utilisées
• Défis Techniques
• Améliorations Futures
• Contributeur
• Licence

---

🎯 Aperçu

Album Grid Creator est une application web qui permet aux passionnés de musique de créer des mosaïques visuelles de leurs albums préférés. Les utilisateurs peuvent rechercher des albums via l'API iTunes, les organiser dans des grilles personnalisables (3×3, 4×4, 5×5, etc.), et télécharger le résultat final sous forme d'image PNG de haute qualité.

User Case

• Créer des collages d'albums pour les réseaux sociaux (Instagram, Twitter)
• Visualiser ses tops albums par année/décennie
• Partager ses découvertes musicales de manière créative
• Créer des challenges avec ses amis

---

✨ Fonctionnalités

🎄 Fenêtre Carte de Fêtes

• Animation p5.js festive
• Popup centrée de la taille du canvas
• Fond gris derrière la fenêtre
• Bouton pour fermer et accéder au site

🔍 Recherche d'Albums

• Recherche en temps réel via l'API iTunes
• Affichage de 15 résultats pertinents par recherche
• Pochettes haute résolution (300×300px)

🎨 Grille Personnalisable

• 6 formats de grille : 3×3, 4×4, 5×5, 3×4, 4×5, 2×5
• Aperçu visuel des différentes configurations
• Carrousel interactif avec glisser-déposer
• Compteur dynamique d'albums ajoutés

📥 Export d'Images

• Téléchargement en format PNG
• Résolution adaptée à la taille de grille (900×900px à 1500×1500px)
• Gestion automatique des images manquantes
• Nom des fichiers automatique (album-grid-3x3---Git@Vic50595.png)

🔥 Albums Tendance

• Carrousel des top 50 albums par pays
• Sélection de pays (BE, US, UK, FR, JP, etc.)
• Défilement infini automatique
• Filtrage des EPs et bandes originales(soundtrack)
• Section accordéon pliable/dépliable
• Ouverture de la page d'album sur Apple Music

🎭 Interface Utilisateur

• Design moderne avec palette rouge/jaune
• Animations fluides et transitions CSS
• Interface responsive et intuitive
• Feedback visuel immédiat sur les actions

---

🛠 Technologies Utilisées

Frontend

• HTML5
• CSS3
• JavaScript

APIs & Services

• iTunes Search API - Recherche d'albums
• iTunes RSS Feeds - Albums tendance par pays
• Canvas API - Export d'images

Concepts Clés

• Programmation asynchrone (async/await)
• Fetch API pour requêtes HTTP
• Manipulation DOM
• Event Listeners
• Gestion d'état (state management)
• Canvas drawing & manipulation d'images

---

📦 Installation

Prérequis

• Navigateur web moderne (Chrome, Safari, Edge)
• ⚠️ Utilisation de Firefox non recommandé, sinon le fichier téléchargé peut être vide ⚠️
• Éditeur de code (VS Code recommandé)
• Serveur local (Live Server, Python SimpleHTTPServer, etc.)

Étapes

1. Cloner le repository

git clone https://github.com/votre-username/album-grid-creator.git
cd album-grid-creator

2. Ouvrir avec un serveur local

Option A - VS Code Live Server :

• Installer l'extension "Live Server"
• Clic droit sur index.html → "Open with Live Server"

Option B - Python :

python -m http.server 8000
# Puis ouvrir http://localhost:8000

Option C - Node.js :

npx serve

3. Accéder à l'application

http://localhost:8000

⚠️ Important : Ne pas ouvrir directement index.html dans le navigateur (file:///) car les APIs externes nécessitent un serveur HTTP.

---

🎮 Utilisation

Créer Votre Première Grille

1. Choisir la taille de grille

   • Cliquer sur l'un des formats proposés dans le carrousel
   • La grille s'adapte automatiquement

2. Rechercher des albums

   • Taper un nom d'artiste, le titre d'une chanson ou d'un album dans la barre de recherche
   • Appuyer sur Entrée ou cliquer sur le bouton de recherche
   • Les résultats s'affichent en dessous

3. Ajouter des albums

   • Cliquer sur une pochette dans les résultats
   • L'album apparaît dans la grille
   • Le compteur se met à jour

4. Gérer la grille

   • Survoler un album pour voir le bouton de suppression (×)
   • Cliquer sur la croix pour retirer un album
   • Continuer jusqu'à remplir tous les emplacements

5. Télécharger

   • Une fois la grille complète, le bouton "Download" apparaît
   • Cliquer pour télécharger votre création en PNG

Explorer les Albums Tendance

1. Ouvrir la section

   • Cliquer sur "Top Trending Albums ▼" en haut de la page
   • Le carrousel se déploie

2. Changer de pays

   • Utiliser le sélecteur de pays
   • Les albums se rechargent automatiquement

3. Naviguer

   • Faire défiler horizontalement
   • Cliquer sur un album pour ouvrir sa page iTunes

4. Fermer la section

   • Cliquer sur "Top Trending Albums ▲" en haut de la page
   • Le carrousel se replie

---

📁 Structure du Projet

album-grid-creator/
│
│──images/
│
│──screenshots/
│
│──trash/
│
├── index.html                 # Page HTML principale
│   ├── Header avec titre
│   ├── Section albums tendance (accordéon)
│   ├── Carrousel sélection grille
│   ├── Zone de recherche
│   ├── Grille d'albums
│   └── Bouton téléchargement
│
├── aboutme.html               # Page HTML secondaire
│    └── VIDE
│
├── global.css                 # Feuille de styles
│   ├── Variables CSS (:root)
│   ├── Reset & base styles
│   ├── Navbar
│   ├── Trending albums
│   └── Responsive design
│
├── index.css                 # Feuille de styles
│   ├── Grid system
│   ├── Carousel grid styling
│   ├── Search interface
│   └── Animation Liens RS
│
├── script.js                  # Logique JavaScript
│   ├── État global
│   ├── Sélection DOM
│   ├── Fonctions grille
│   │   ├── selectGridSize()
│   │   ├── renderGrid()
│   │   └── downloadGrid()
│   ├── Recherche albums
│   │   ├── searchAlbums()
│   │   └── displaySearchResults()
│   ├── Gestion albums
│   │   ├── addAlbum()
│   │   └── removeAlbum()
│   ├── Albums tendance
│   │   └── loadTopAlbums()
│   └── Interactions UI
│       ├── Carousel drag
│       ├── Accordion toggle
│       └── Country selector
│
│
├──mysketch.js                 # Sketch p5.js pour la carte de fêtes
│   ├── Initialisation canvas
│   │   └── createCanvas(700, 700, WEBGL)
│   └── draw()
│       ├── Background
│       ├── Texte affiché sur le plan
│       ├── Couleurs, tailles et positions des objets
│       └── Vitesse de rotation sur l'axe Y et animation
│   
│
└── README.md                  # Documentation (ce fichier)

---

🌐 API Utilisées

1. iTunes Search API

Endpoint : https://itunes.apple.com/search

Paramètres :

• term : Terme de recherche (artiste, album, etc.)
• entity : Type de contenu (album)
• limit : Nombre de résultats (défaut: 15)

Exemple de requête :

fetch('https://itunes.apple.com/search?term=beyonce&entity=album&limit=15')

Réponse (extrait) :

{
  "resultCount": 1,
  "results": [
    {
      "collectionId": 1630005298,
      "collectionName": "RENAISSANCE",
      "artistName": "Beyoncé",
      "artworkUrl100": "https://is1-ssl.mzstatic.com/image/thumb/Music126/v4/17/92/b4/1792b46d-5b89-0c6f-08b8-7f9c2d7a4250/22UMGIM03221.rgb.jpg/316x316bb.webp",
      "releaseDate": "2022-07-29T07:00:00Z"
    }
  ]
}

2. iTunes RSS Feeds

Endpoint : https://itunes.apple.com/{country}/rss/topalbums/limit={limit}/json

Paramètres :

• {country} : Code pays (be, us, fr, uk, jp, etc.)
• {limit} : Nombre d'albums (max: 200)

Exemple de requête :

fetch('https://itunes.apple.com/us/rss/topalbums/limit=50/json')

Réponse (extrait) :

{
  "feed": {
    "entry": [
      {
        "im:name": { "label": "Channel Orange" },
        "im:artist": { "label": "Frank Ocean" },
        "im:image": [
          { "label": "https://.../55x55bb.png" },
          { "label": "https://.../60x60bb.png" },
          { "label": "https://.../170x170bb.png" }
        ]
      }
    ]
  }
}

---

🔧 Défis Techniques

1. Politique CORS (Cross-Origin Resource Sharing)

Problème : Le Canvas HTML devient "tainted" (corrompu) lors du chargement d'images depuis des domaines externes, empêchant l'export.

Solution Implémentée :

// ❌ Ne fonctionne pas :
ctx.drawImage(externalImage, x, y);

// ✅ Solution :
const response = await fetch(album.image);
const blob = await response.blob();
const img = new Image();
img.src = URL.createObjectURL(blob);
// Maintenant on peut dessiner sur le canvas

Explication :

• Récupération de l'image comme données binaires (blob)
• Création d'une URL objet locale temporaire
• Le navigateur considère l'image comme locale, pas externe

2. Gestion Asynchrone Multiple

Défi : Charger 9-25 images simultanément avant de dessiner la grille.

Solution :

const images = [];
for (let i = 0; i < selectedAlbums.length; i++) {
  const img = await loadImage(selectedAlbums[i].image);
  images.push(img);
}
// Toutes les images sont chargées, on peut dessiner

3. Système de Grille Dynamique

Défi : Un seul code pour gérer toutes les tailles de grille.

Solution :

• Utilisation de CSS Grid avec variables dynamiques
• Boucle for génératrice d'emplacements
• Canvas dimensionné automatiquement

canvas.width = cellSize * gridCols;
canvas.height = cellSize * gridRows;

---

🚀 Améliorations Futures

Court Terme

• Drag & Drop : Réorganiser les albums par glisser-déposer
• Search : Amélioration de la recherche
• Design : Amélioration du responsive
• LocalStorage : Sauvegarder automatiquement la dernière grille
• Tiktok Grid : Ajout de grille pour post Tiktok

Moyen Terme

• Formats d'export : JPG, SVG, PDF
• Partage social : Boutons Twitter/Instagram
• Templates : Grilles pré-remplies thématiques

Long Terme

• Collaborative grids : Créer des grilles à plusieurs
• About me : Terminer la page HTML

---

👨‍💻 Contributeur

Victoria

• GitHub: @Vic50595

---

📄 Licence

Ce projet est sous licence MIT - voir le fichier LICENSE pour plus de détails.

---

🙏 Remerciements

• Merci à Aude & à Sonia pour votre accompagnement et vos précieux conseils tout au long de ce projet.

• Merci à Winona et au site OpenProcessing pour l’inspiration et la base de la Carte de fêtes.

• Apple iTunes pour leur API publique

• MDN Web Docs pour la documentation Canvas

• CSS-Tricks pour les astuces de mise en page Grid

• La communauté Stack Overflow pour le support technique

---

📸 Screenshots

Interface Principale

Recherche d'Albums

Grille Complète

Albums Tendance

Partage de la grille

---

🐛 Bugs Connus

• Avec le navigateur Firefox, le png est vide une fois téléchargé car HTLM5 Canvas mal supporté par Firefox.
• Les images iTunes peuvent parfois être lentes à charger (dépend du serveur Apple)
• Le carrousel peut sauter légèrement sur certains navigateurs mobiles
• Limite de 15 résultats par recherche (limitation API iTunes)

---

💡 FAQ

Q : Puis-je utiliser d'autres sources d'albums que iTunes ? R : Actuellement, seule l'API iTunes est supportée. L'intégration Spotify n'est pas prévue dans les futures versions.

Q : Les grilles sont-elles sauvegardées ? R : Non, actuellement les grilles ne sont pas sauvegardées. Vous devez les télécharger avant de quitter la page.

Q : Quelle est la résolution maximale des images exportées ? R : 300×300px par pochette, soit 1500×1500px pour une grille 5×5.

Q : Puis-je créer des grilles rectangulaires ? R : Oui ! Les formats 3×4, 4×5 et 2×5 sont disponibles dans le carrousel.

---

📞 Contact & Support

Pour toute question, suggestion ou signalement de bug :

• Ouvrir une Issue GitHub

---

Fait avec ❤️ par Victoria

⭐ Si vous aimez ce projet, n'hésitez pas à lui donner une étoile !