Michael Diaz WD PT MAD 9TH SEP

app.js

@@ -4,15 +4,71 @@ 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:
+// Home route to render a search form
+app.get('/', (req, res) => {
+    res.render('index'); // This renders a view called 'index.hbs'
+  });
+// Route to handle artist search results
+app.get('/artist-search', (req, res) => {
+    const artistName = req.query.artist; // get artist name from the query string
+
+    spotifyApi
+      .searchArtists(artistName)
+      .then(data => {
+        const artists = data.body.artists.items; // extract artist data
+        res.render('artist-search-results', { artists }); // pass data to the view
+      })
+      .catch(err => console.log('Error while searching for artists:', err));
+  });
 
+  // Route to handle album display for a specific artist
+  app.get('/albums/:artistId', (req, res, next) => {
+    const artistId = req.params.artistId;  // Get artistId from the URL
+    spotifyApi
+      .getArtistAlbums(artistId)  // Use Spotify API method to get albums for the artist
+      .then(data => {
+        const albums = data.body.items;  // Extract albums data from the response
+        const artistName = albums[0] ? albums[0].artists[0].name : '';  // Safely get the artist's name
+        res.render('albums', { albums, artistName });  // Pass both albums and artistName to the view
+      })
+      .catch(err => console.log('Error while fetching artist albums:', err));
+  });
+
+  app.get('/tracks/:albumId', (req, res, next) => {
+    const albumId = req.params.albumId;  // Get albumId from the URL
+
+    spotifyApi
+      .getAlbum(albumId)  // Get the album details (including name)
+      .then(albumData => {
+        const albumName = albumData.body.name;  // Get album name from the response
+        return spotifyApi.getAlbumTracks(albumId)  // Then get the tracks for that album
+          .then(trackData => {
+            const tracks = trackData.body.items;  // Extract tracks data from the response
+            res.render('tracks', { tracks, albumName });  // Pass tracks and albumName to the 'tracks' view
+          });
+      })
+      .catch(err => console.log('Error while fetching album tracks:', 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.4.5",
+    "express": "^4.21.1",
+    "hbs": "^4.2.0",
+    "spotify-web-api-node": "^5.0.2"
   }
 }

views/albums.hbs

@@ -0,0 +1,19 @@
+<h1>Albums by {{artistName}}</h1>
+
+{{#if albums.length}}
+  <ul>
+    {{#each albums}}
+      <li>
+        <h2>{{this.name}}</h2>
+        {{#if this.images.length}}
+          <img src="{{this.images.[0].url}}" alt="{{this.name}}" style="width: 200px;">
+        {{/if}}
+        <!-- Link to view tracks (this will be added in the next iteration) -->
+        <a href="/tracks/{{this.id}}">View Tracks</a>
+      </li>
+    {{/each}}
+  </ul>
+{{else}}
+  <p>No albums found for this artist.</p>
+{{/if}}
+

views/artist-search-results.hbs

@@ -0,0 +1,20 @@
+
+  <h1>Search Results</h1>
+
+  {{#if artists.length}}
+    <ul>
+      {{#each artists}}
+        <li>
+          <h2>{{this.name}}</h2>
+          {{#if this.images.length}}
+            <img src="{{this.images.[0].url}}" alt="{{this.name}}" style="width: 200px;">
+          {{/if}}
+          <!-- Link to albums (functionality will be added later) -->
+          <a href="/albums/{{this.id}}">View Albums</a>
+        </li>
+      {{/each}}
+    </ul>
+  {{else}}
+    <p>No artists found. Please try again.</p>
+  {{/if}}
+

views/index.hbs

@@ -0,0 +1,8 @@
+
+  <h1>Spotify Artist Search</h1>
+  <form action="/artist-search" method="GET">
+    <label for="artist">Artist Name:</label>
+    <input type="text" id="artist" name="artist" required>
+    <button type="submit">Search</button>
+  </form>
+

views/layout.hbs

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    {{{body}}}
+</body>
+</html>

views/tracks.hbs

@@ -0,0 +1,22 @@
+<h1>Tracks from {{albumName}}</h1>
+
+{{#if tracks.length}}
+  <ul>
+    {{#each tracks}}
+      <li>
+        <h3>{{this.name}}</h3>
+        {{#if this.preview_url}}
+          <!-- Add audio preview for the track -->
+          <audio controls>
+            <source src="{{this.preview_url}}" type="audio/mpeg">
+            Your browser does not support the audio element.
+          </audio>
+        {{else}}
+          <p>No preview available</p>
+        {{/if}}
+      </li>
+    {{/each}}
+  </ul>
+{{else}}
+  <p>No tracks found for this album.</p>
+{{/if}}