ironhack-labs · Vituin · Jul 31, 2024
diff --git a/app.js b/app.js
@@ -4,15 +4,60 @@ const express = require('express');
 const hbs = require('hbs');
 
 // require spotify-web-api-node package here:
-
+const SpotifyWebApi = require('spotify-web-api-node');
 const app = express();
 
 app.set('view engine', 'hbs');
 app.set('views', __dirname + '/views');
 app.use(express.static(__dirname + '/public'));
 
 // setting the spotify-api goes here:
+const spotifyApi = new SpotifyWebApi({
+    clientId: process.env.CLIENT_ID,
+    clientSecret: process.env.CLIENT_SECRET
+});
 
+// Retrieve an access token
+spotifyApi
+    .clientCredentialsGrant()
+    .then(data => spotifyApi.setAccessToken(data.body['access_token']))
+    .catch(error => console.log('Something went wrong when retrieving an access token', error));
 // Our routes go here:
 
+app.get(`/`, (req, res) => {
+    res.render(`index`)
+})
+
+app.get(`/artist-search`, (req, res) => {
+    spotifyApi
+        .searchArtists(req.query.artist)
+        .then(data => {
+            console.log(`data of API recived`, data.body.artists.items)
+            res.render(`artist_search_results`, { artists: data.body.artists.items })
+        })
+        .catch((err) => console.log(`error searching`, err))
+})
+
+app.get('/albums/:artistId', (req, res,) => {
+    spotifyApi
+        .gethArtistAlbums(req, params, artistId,)
+        .then((data) => {
+            res.render(`albums`, { albums: data.body.items })
+        })
+        .catch((err) => {
+            console.log(`Error searching artist`, err)
+        })
+});
+
+app.get(`tracks/:albumID`, (req, res) => {
+    spotifyApi
+        .getAlbumTracks(req.params.albumId)
+        .then((data) => {
+            res.render(`tracks`, { tracks: data.body.items })
+        })
+        .catch((err) =>
+            console.log(`Error search tracks`, err)
+        )
+})
+
 app.listen(3000, () => console.log('My Spotify project running on port 3000 🎧 🥁 🎸 🔊'));
diff --git a/package.json b/package.json
@@ -4,13 +4,19 @@
   "description": "",
   "main": "app.js",
   "scripts": {
-    "dev": "nodemon app.js",
+    "dev": "nodemon app.js,hbs",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "nodemon": "^2.0.2"
+  },
+  "dependencies": {
+    "dotenv": "^16.4.5",
+    "express": "^4.19.2",
+    "hbs": "^4.2.0",
+    "spotify-web-api-node": "^5.0.2"
   }
-}
+}
diff --git a/views/albums.hbs b/views/albums.hbs
@@ -0,0 +1,13 @@
+<h2>{{albums.0.artists.0.name}}</h2>
+
+<div>
+    {{#each albums}}
+    <div>
+        {{#if this.images.length}}
+        <img src="{{this.images.0.url}}" alt="">
+        {{/if}}
+        <p>{{this.name}}</p>
+        <button><a href="/tracks/{{this.id}}">Tracks</a></button>
+    </div>
+    {{/each}}
+</div>
diff --git a/views/artist-search-results.hbs b/views/artist-search-results.hbs
@@ -0,0 +1,10 @@
+<h1>Welcome Search Spotify API</h1>
+
+{{#each artist}}
+<div>
+    {{#if this.images.length}}
+    <img src="{{this.images.0.url}}" alt="">
+    {{/if}}
+    <button><a href="/albums/{{this.id}}">View Albums</a></button>
+</div>
+{{/each}}
diff --git a/views/index.hbs b/views/index.hbs
@@ -0,0 +1,8 @@
+<div>
+    <form action="/artist-search" , method="GET" , class="fñex,flex-col justify-center items-center"></form>
+
+    <input type="text" placeholder="Choose an artist" id="artist" name="artist"
+        class="border-2 border-black rounded p-2">
+
+    <button type="submit" class="bg-black text-white hover:bg-red-700 mt-3 p-3 rounded">Search</button>
+</div>
diff --git a/views/layaout.hbs b/views/layaout.hbs
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/public/styles/style.css">
+    <title>Spotify API</title>
+</head>
+
+<body>
+    {{{body}}}
+</body>
+
+</html>
diff --git a/views/tracks.hbs b/views/tracks.hbs