done

app.js

@@ -2,7 +2,7 @@ require('dotenv').config();
 
 const express = require('express');
 const hbs = require('hbs');
-
+const SpotifyWebApi = require('spotify-web-api-node');
 // require spotify-web-api-node package here:
 
 const app = express();
@@ -12,7 +12,50 @@ 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.listen(3000, () => console.log('My Spotify project running on port 3000 🎧 🥁 🎸 🔊'));
+app.get('/',(req,res,next)=> {
+    res.render('index.hbs')
+});
+
+app.get('/artist-search',(req,res,next)=> {
+    const textSearch = req.query.name;
+    spotifyApi
+        .searchArtists(textSearch)
+        .then(data =>{
+            res.render('artist-search.hbs',{artists:data.body.artists.items})
+        })
+        .catch(err =>console.log('error while searching.',err))
+});
+
+app.get('/albums/:artistId',(req,res,next)=>{
+    const idArtist = req.params.artistId;
+    spotifyApi.getArtistAlbums(idArtist)
+        .then(data => {
+            console.log('data received from the API',data.body.items);
+            res.render('albums.hbs',{albums:data.body.items})
+        .catch(err => console.log('error while searching',err))
+    })
+});
+
+app.get('/tracks/albId',(req,res,next)=> {
+    const id = req.params.albId;
+    spotifyApi.getAlbumTracks(id)
+        .then(data => {
+            res.render('tracks.hbs',{tracks:data.body.items})
+        })
+        .catch(err => console.log('error while searching',err))
+});
+
+app.listen(3000, () => console.log('App running on port 3000 '));

package.json

@@ -12,5 +12,11 @@
   "license": "ISC",
   "devDependencies": {
     "nodemon": "^2.0.2"
+  },
+  "dependencies": {
+    "dotenv": "^16.4.1",
+    "express": "^4.18.2",
+    "hbs": "^4.2.0",
+    "spotify-web-api-node": "^5.0.2"
   }
 }

public/styles/style.css

@@ -0,0 +1,51 @@
+body {
+    background-image: url("../images/spotify-background.jpeg");
+    justify-content: center;
+    align-items: center;
+    background-image: no-repeat;
+    background-image: fixed;
+    background-image: center;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+}
+
+p {
+    color: white;
+}
+
+#form {
+    justify-content: center;
+    align-items: center;
+    width: 500px;
+    height: 800px;
+
+
+}
+
+.image {
+    width: 200px;
+    height: 300px;
+}
+
+.artists-conteiner {
+    display: inline-flex;
+    grid-row: initial;
+    margin-right: 30px;
+    margin-bottom: 30px;
+}
+
+.div-button {
+    background-color: grey;
+    justify-content: center;
+    align-items: center;
+}
+
+.button {
+    border-radius: 10%;
+    background-color: red;
+    color: white;
+    margin-bottom: 15px;
+
+}

views/albums.hbs

@@ -0,0 +1,14 @@
+{{#each albums}}
+<div class="artists-conteiner">
+    <div>
+        <img class="image" src="{{images.[0].url}}">
+        <div class="div-button">
+            <p>{{this.name}}</p>
+            <a href="/tracks/{{id}}">
+                <button class="button">View Songs</button>
+            </a>
+        </div>
+    </div>
+</div>
+
+{{/each}}

views/artist-search.hbs

@@ -0,0 +1,12 @@
+{{#each artists}}
+<div class="artists-conteiner">
+    <div><img class="image" src="{{images.[0].url}}">
+        <div class="div-button">
+            <p>{{this.name}}</p>
+            <a href="/albums/{{this.id}}">
+                <button class="button">View Albums</button>
+            </a>
+        </div>
+    </div>
+</div>
+{{/each}}

views/index.hbs

@@ -0,0 +1,10 @@
+<div
+  id="home-container"
+  class="d-flex justify-content-center align-items-center"
+>
+  <form action="/artist-search" method="GET" class="text-center">
+    <input type="text" class="form-control" name="artist" placeholder="Type an artist" />
+    <button class="btn btn-success mt-3">Search for an artist</button>
+
+  </form>
+</div>

views/layout.hbs

@@ -0,0 +1,15 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="styles/style.css" />
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
+    <title>Spotify Lab</title>
+</head>
+
+<body>
+    {{{body}}}
+</body>
+
+</html>

views/tracks.hbs

@@ -0,0 +1,23 @@
+<div class="container">
+  <div class="row">
+    <div class="col-8 bg-secondary text-light">
+      <h2>Title</h2>
+    </div>
+    <div class="col bg-secondary text-light">
+      <h2>Listen</h2>
+    </div>
+
+    {{#each tracks}}
+    <div class="col-8">
+      {{name}}
+      <a href="{{external_urls.spotify}}" target="_blank" class="text-decoration-none badge bg-success text-bg-success">Listen on Spotify</a>
+      {{#if explicit}}
+        <span class="badge bg-danger text-bg-danger">Explicit</span>
+      {{/if}}
+    </div>
+    <div class="col-2">
+      <audio src="{{preview_url}}" controls />
+    </div>
+    {{/each}}
+  </div>
+</div>