Application musicale réalisée avec React, Airtable (en guise de base de donnée) et SCSS (pour la mise en forme).
- création d'une base de donnée via Airtable
- appel à l'API afin de récupérer et afficher les données
- possibilité de trier les morceaux par genre sans recharger la page
- création de plusieurs composants ("Navigation", "Footer" etc...)
- création de routes dynamiques (basées sur l'ID) permettant d'afficher les données d'un seul morceau
- utilisation de différents hooks React (useState, useEffect, useHistory..)
- implantation de Firebase afin de gérer la connexion (Google, Facebook) + redirection
- mise en place d'un preloader (gif) avant d'afficher la homepage
- utilisation de la bibliothèque "framer motion" pour gérer les transitions entre les pages
- ajout d'un favicon personnalisé
- gestion du responsive mobile, tablette et grand écran
- mise en place d'un menu burger/responsive en dessous de 768px
- git clone ou télécharger le projet
- dans
src/assets, récupérer le fichier ilovethistrack.com.csv (base de donnée Airtable utilisée pour le projet) - créer un compte sur Airtable (si ce n'est pas déjà fait)
- importer le fichier csv afin de créer une nouvelle base de donnée (cf. "add data to new table")
- se rendre sur l'API d'Airtable et selectionner la base nouvellement créée
- cliquer sur l'onglet "Javascript" et cocher "show API" afin de récupérer:
- ID de la base
- nom de la base
- API Key
- dans
src/components/Music.jsremplacer les données de l'URL par celles récupérées précédemment (...)
Exemple: https://api.airtable.com/v0/ID_BASE/NOM_BASE?api_key=API_KEY - une fois l'URL mise à jour, ouvrir la console et faire (à la racine du projet):
- npm i pour installer les dépendances (nodes modules)
- npm start pour lancer le projet