solvedLab

app.js

@@ -4,15 +4,83 @@ 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('layout', { title: 'Home' });
+  });*/
+app.get("/", (req, res) => res.render("home"));
+
+// Route to handle artist search
+app.get('/artist-search', (req, res) => {
+    const artistName = req.query.artist; 
+
+
+    spotifyApi.searchArtists(artistName)
+      .then(data => {
+        console.log('The received data from the API: ', data.body.artists.items); // Log data for debugging
+
+        // Render the results in the view
+        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) => {
+    const artistId = req.params.artistId; 
+
+
+    spotifyApi.getArtistAlbums(artistId)
+      .then(data => {
+        const albums = data.body.items; // Extract the albums from the response
+        console.log('Albums data: ', albums); // Log data for debugging
+
+        // Render the albums in the view
+        res.render('albums', {
+          albums: albums
+        });
+      })
+      .catch(err => console.log('The error while searching albums occurred: ', err));
+  });
+  // app.js (continued)
+
+// Route to handle viewing tracks by album
+app.get('/tracks/:albumId', (req, res) => {
+    const albumId = req.params.albumId; // Get the album ID from the URL parameter
+
+    // Use Spotify API to get the album's tracks
+    spotifyApi.getAlbumTracks(albumId)
+      .then(data => {
+        const tracks = data.body.items; // Extract the tracks from the response
+        console.log('Tracks data: ', tracks); // Log data for debugging
+
+        // Render the tracks in the view
+        res.render('tracks', {
+          tracks: tracks
+        });
+      })
+      .catch(err => console.log('The error while searching tracks occurred: ', err));
+  });
+
+
 app.listen(3000, () => console.log('My Spotify project running on port 3000 🎧 🥁 🎸 🔊'));

package.json

@@ -4,6 +4,7 @@
   "description": "",
   "main": "app.js",
   "scripts": {
+
     "dev": "nodemon app.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -12,5 +13,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"
   }
 }

public/styles/style.css

@@ -0,0 +1,99 @@
+#home{
+    width: 100%;
+    height: 700px;
+    background-image: url(../images/spotify-background.jpeg);
+    background-size: cover;
+    background-position: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+#artist-form{
+    display: flex;
+    justify-content: center;
+    background-color: rgb(245, 245, 220, 0.5);
+    padding: 50px 200px;
+}
+#artist-form form{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+#artist-form form input{
+    width: 350px;
+    height: 30px;
+}
+#artist-form form button{
+    width: 150px;
+    height: 30px;
+    margin-top: 20px;
+    background-color: red;
+    border-style: none;
+    color: white;
+}
+#artists{
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    align-items: center;
+}
+#artists button{
+    display: flex;
+    padding: 10px;
+    background-color: red;
+    color: white;
+    text-decoration: none;
+    border-style: none;
+    border-radius: 5px;
+    margin-bottom: 10px;
+}
+#artists a{
+    text-decoration: none;
+}
+#artists div{
+    width: 25%;
+    background-color: grey;
+    margin: 30px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+#artists h3{
+    color: white;
+    font-family: Arial, Helvetica, sans-serif;
+}
+#albums{
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    align-items: center;
+}
+#albums button{
+    display: flex;
+    padding: 10px;
+    background-color: red;
+    color: white;
+    text-decoration: none;
+    border-style: none;
+    border-radius: 5px;
+    margin-bottom: 10px;
+}
+#albums a{
+    text-decoration: none;
+    color: white;
+}
+#albums div{
+    width: 25%;
+    background-color: grey;
+    margin: 30px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+#albums h3{
+    color: white;
+    font-family: Arial, Helvetica, sans-serif;
+}
+#tracks div audio{
+    width: 100%;
+}

views/albums.hbs

@@ -0,0 +1,17 @@
+<!-- views/albums.hbs -->
+
+<h2>Albums</h2>
+<ul>
+  {{#each albums}}
+    <li>
+      <h3>{{this.name}}</h3>
+      {{#if this.images.[0]}}
+        <img src="{{this.images.[0].url}}" alt="{{this.name}}" width="100">
+      {{else}}
+        <p>No image available</p>
+      {{/if}}
+      <br>
+      <a href="/tracks/{{this.id}}">View Tracks</a>
+    </li>
+  {{/each}}
+</ul>

views/artist-search-results.hbs

@@ -0,0 +1,18 @@
+
+<!-- views/artist-search-results.hbs -->
+
+<h2>Search Results for "{{query}}":</h2>
+<ul>
+  {{#each artists}}
+    <li>
+      <h3>{{this.name}}</h3>
+      {{#if this.images.[0]}}
+        <img src="{{this.images.[0].url}}" alt="{{this.name}}" width="100">
+      {{else}}
+        <p>No image available</p>
+      {{/if}}
+      <br>
+      <a href="/albums/{{this.id}}">View Albums</a>
+    </li>
+  {{/each}}
+</ul>

views/home.hbs

@@ -0,0 +1,11 @@
+
+<div id="home">
+  <div id="artist-form">
+    <form action="/artist-search" method="GET">
+      <label for="artist">
+        <input name="artist" type="text" id="artist" />
+      </label>
+      <button type="submit">Search for an artist</button>
+    </form>
+  </div>
+</div>

views/layout.hbs

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>{{title}}</title>
+  <link rel="stylesheet" href="/stylesheets/style.css">
+</head>
+<body>
+  <h1>Welcome to Spotify Artist Search</h1>
+  <form action="/artist-search" method="GET">
+    <input type="text" name="artist" placeholder="Enter artist name" required>
+    <button type="submit">Search</button>
+  </form>
+  {{{body}}}
+</body>
+</html>

views/tracks.hbs

@@ -0,0 +1,18 @@
+<!-- views/tracks.hbs -->
+
+<h2>Tracks</h2>
+<ul>
+  {{#each tracks}}
+    <li>
+      <h3>{{this.name}}</h3>
+      {{#if this.preview_url}}
+        <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>