ironhack-labs · Addiyo22 · Jun 12, 2024
diff --git a/app.js b/app.js
@@ -4,15 +4,67 @@ 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'));
+app.use(express.urlencoded({ extended: true }));
 
 // 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 => {
+      // ----> 'HERE'S WHAT WE WANT TO DO AFTER RECEIVING THE DATA FROM THE API'
+      res.render('artist-search-results', {artists: data.body.artists.items})
+    })
+    .catch(err => console.log('The error while searching artists occurred: ', err));
+
+  });
+
+  app.get('/albums/:artistId', (req, res) => {
+    // .getArtistAlbums() code goes here
+    spotifyApi
+    .getArtistAlbums(req.params.artistId)
+    .then(data => {
+        res.render('albums', {
+            artistName: data.body.items[0].artists[0].name ,
+            albums: data.body.items
+          })
+        })
+        .catch(err => console.log('The error while fetching albums occurred:', err))
+  });
+
+  app.get('/tracks/:albumId', (req, res) => {
+    spotifyApi
+    .getAlbumTracks(req.params.albumId)
+    .then(data => {
+        res.render('tracks', {
+            tracks : data.body.items
+        })
+    })
+  })
+
 app.listen(3000, () => console.log('My Spotify project running on port 3000 🎧 🥁 🎸 🔊'));
diff --git a/package.json b/package.json
@@ -12,5 +12,11 @@
   "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/public/styles/style.css b/public/styles/style.css
@@ -0,0 +1,20 @@
+body{
+    margin: 0;
+}
+.background{
+    background-image: url("/images/spotify-background.jpeg");
+    width: 100vw;
+    height: 100vh;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+form{
+    width: 50rem;
+}
+.index-container{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(239, 239, 239, 0.56);
+}
diff --git a/views/albums.hbs b/views/albums.hbs
@@ -0,0 +1,8 @@
+<h1>Albums for : {{artistName}}</h1>
+{{#each albums}}
+    <div class="album">
+      <h2>{{name}}</h2>
+      <img src="{{images.[0].url}}" alt="{{name}}'s album cover">
+      <a href="/tracks/{{id}}">View Songs</a>
+      </div>
+      {{/each}}
diff --git a/views/artist-search-results.hbs b/views/artist-search-results.hbs
@@ -0,0 +1,12 @@
+
+        {{#each artists}}
+            <p>{{name}}</p>
+            <img src="{{images.[0].url}}" alt="{{name}}'s image">   
+            <a href="/albums/{{id}}">View Albums</a>
+        {{/each}}
+    </div>  
+</div>
+
+
+
+
diff --git a/views/index.hbs b/views/index.hbs
@@ -0,0 +1,8 @@
+<div class="background">
+    <div class="index-container">
+            <form action="/artist-search", method="GET">
+                <input type="text" name="artist" class="">
+                <button type="submit">Submit</button>
+            </form>
+    </div>
+</div>
diff --git a/views/layout.hbs b/views/layout.hbs
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/styles/style.css">
+    <title>Document</title>
+</head>
+<body>
+    {{{ body }}}
+</body>
+</html>
diff --git a/views/tracks.hbs b/views/tracks.hbs
@@ -0,0 +1,6 @@
+{{#each tracks}}
+    <div class="track">
+      <p>{{name}}</p>
+      <audio src="{{preview_url}}" controls></audio>
+    </div>
+  {{/each}}