done

app.js

@@ -1,12 +1,23 @@
 require('dotenv').config();
 
+
+const { response } = require('express');
 const express = require('express');
 const hbs = require('hbs');
+const router = express.Router();
 
 // require spotify-web-api-node package here:
-
+const SpotifyWebApi = require('spotify-web-api-node');
 
 // then invoke the spotify API here with CLIENT keys
+const spotifyApi = new SpotifyWebApi({
+	clientId: process.env.CLIENT_ID,
+	clientSecret: process.env.CLIENT_SECRET
+});
+
+spotifyApi.clientCredentialsGrant()
+	.then(data => spotifyApi.setAccessToken(data.body['access_token']))
+	.catch(error => console.log('Something went wrong when retrieving an access token', error));
 
 const app = express();
 
@@ -16,6 +27,51 @@ app.use(express.static(__dirname + '/public'));
 
 // setting the spotify-api goes here:
 
+
 // Our routes go here:
 
+/* GET home page */
+app.get("/", (req, res) => {
+    res.render("index.hbs")
+});
+
+app.get("/artist-search",(req,res,next)=> {
+    let {artist} = req.query
+    console.log(artist)
+    spotifyApi.searchArtists(artist)
+        .then((data) => {
+            let artists = data.body.artists.items
+            res.render('results.hbs', {artists})
+        }).catch((err) => {
+            console.log('Failed',err)
+        });
+})
+
+app.get('/albums/:id', (req, res, next) => {
+	// .getArtistAlbums() code goes here
+    const {id} = req.params
+    spotifyApi.getArtistAlbums(id)
+    .then((result) => {
+        let albums = result.body.items
+        res.render('albums.hbs', {albums})
+    }).catch((err) => {
+        console.log(err)
+    });
+
+});
+
+app.get('/tracks/:id', (req, res, next) => {
+    const id = req.params.id
+
+    spotifyApi.getAlbumTracks(id)
+    .then((result) => {
+        let tracks = result.body.items
+        res.render('tracks.hbs', {tracks})
+    }).catch((err) => {
+        console.log(err)
+    });
+
+});
+
+
 app.listen(3000, () => console.log('My Spotify project running on port 3000 🎧 🥁 🎸 🔊'));

package.json

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

public/styles/style.css

@@ -0,0 +1,22 @@
+body {
+    padding: 50px;
+    font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+  }
+
+  img {
+    height: 200px;
+
+  }
+  a {
+    color: #00B7FF;
+  }
+
+  .container {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 10px;
+  }
+
+  .card {
+    padding: 20px
+  }

views/albums.hbs

@@ -0,0 +1,16 @@
+
+ <a href="/" class="card-link">Go Back</a>
+ <br> <br>
+
+<div class="container">
+{{#each albums}}
+<div class="card border-0 text-center" style="width: 18rem";>
+  <img src={{images.0.url}} class="card-img-top" alt="...">
+  <div class="card-body">
+    <h5 class="card-title">{{name}}</h5>
+    <a href="/tracks/{{id}}" class="btn btn-primary">View Tracks</a>
+  </div>
+</div>
+{{/each}}
+</div>
+

views/index.hbs

@@ -0,0 +1,8 @@
+<h1>Spotify Express</h1>
+<form action="/artist-search" method="GET">
+  <div class="mb-3">
+    <label for="artist" class="form-label"></label>
+    <input name="artist" type="text" class="form-control" id="artist">
+  </div>
+  <button type="submit" class="btn btn-primary">Search for an Artist</button>
+</form>

views/layout.hbs

@@ -4,7 +4,13 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Spotify</title>
+    <link rel="stylesheet" href="/styles/style.css" />
+    <!-- CSS only -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+    <!-- JavaScript Bundle with Popper -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
+
 </head>
 <body>
     {{{body}}}

views/results.hbs

@@ -0,0 +1,16 @@
+
+ <a href="/" class="card-link">Go Back</a>
+ <br> <br>
+
+<div class="container">
+{{#each artists}}
+<div class="card border-0 text-center" style="width: 18rem";>
+  <img src={{images.0.url}} class="card-img-top" alt="...">
+  <div class="card-body">
+    <h5 class="card-title">{{name}}</h5>
+    <a href="/albums/{{id}}" class="btn btn-primary">View Album</a>
+  </div>
+</div>
+{{/each}}
+</div>
+

views/tracks.hbs

@@ -0,0 +1,34 @@
+
+
+
+{{!-- <div class="container">
+{{#each tracks}}
+<div class="card border-0 text-center" style="width: 18rem";>
+ // <img src={{images.0.url}} class="card-img-top" alt="...">
+  <div class="card-body">
+    <h5 class="card-title">{{name}}</h5>
+    <a href="/tracks/{{id}}" class="btn btn-primary">View Tracks</a>
+  </div>
+</div>
+{{/each}}
+</div> --}}
+
+
+<table class="table table-striped">
+{{#each tracks}}
+    <tr>
+        <td>{{images.2.url}}</td>
+        <td>{{name}}</td>
+        <td>
+            <figure>
+                <figcaption>Listen to the T-Rex:</figcaption>
+                <audio controls src={{preview_url}}>
+                    <a href={{external_urls.spotify}}>
+                        Download audio
+                    </a>
+                </audio>
+            </figure>
+        </td>
+    </tr>
+{{/each}}
+</table>