all Iterations done

app.js

@@ -4,6 +4,7 @@ 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();
 
@@ -13,6 +14,54 @@ 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, next) => {
+    res.render('home')
+})
+
+app.get('/artist-search-results', (req, res, next) => {
+    const { artist } = req.query;
+    spotifyApi
+    .searchArtists(artist)
+    .then(data => {
+    console.log('The received data from the API: ', data.body.artists.items);
+    res.render('artist-search-results', {artist: data.body.artists.items})
+  })
+  .catch(err => console.log('The error while searching artists occurred: ', err));
+})
+
+app.get('/albums/:artistId', (req, res, next) => {
+    const { artistId } = req.params;
+    spotifyApi
+    .getArtistAlbums(artistId)
+    .then(data => {
+    console.log('Album Information: ', data.body.items);
+    res.render('albums', {album: data.body.items})
+  })
+  .catch(err => console.log('The error while searching artists occurred: ', err));
+})
+
+app.get('/tracks/:albumId', (req, res, next) => {
+    const { albumId } = req.params;
+    spotifyApi
+    .getAlbumTracks(albumId)
+    .then(data => {
+    console.log('Album Tracks: ', data.body.items);
+    res.render('tracks', {track: data.body.items})
+  })
+  .catch(err => console.log('The error while searching artists occurred: ', 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"
   }
 }

public/styles/style.css

@@ -0,0 +1,105 @@
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: Arial, sans-serif;
+}
+
+body {
+    background-color: #121212;
+    color: #FFFFFF;
+    font-size: 16px;
+}
+
+.container {
+    width: 90%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #1E1E1E;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
+    margin-bottom: 20px;
+}
+
+h1, h2, h3, p {
+    color: #FFFFFF;
+}
+
+a {
+    color: #1DB954;
+    text-decoration: none;
+}
+
+a:hover {
+    color: #1ed760;
+}
+
+button {
+    background-color: #1DB954;
+    color: #FFFFFF;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 25px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+button:hover {
+    background-color: #1ed760;
+}
+
+form {
+    display: flex;
+    justify-content: center;
+    margin: 20px 0;
+}
+
+input[type="text"] {
+    padding: 10px;
+    width: 300px;
+    border: 1px solid #333;
+    border-radius: 20px;
+    background-color: #333;
+    color: #FFFFFF;
+    margin-right: 10px;
+}
+
+.container p {
+    font-size: 1.1em;
+    font-weight: bold;
+    margin: 10px 0;
+}
+
+.container img {
+    width: 100%;
+    max-width: 300px;
+    border-radius: 10px;
+    margin-bottom: 10px;
+}
+
+audio {
+    width: 100%;
+    max-width: 300px;
+    margin-top: 10px;
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 15px;
+    }
+
+    input[type="text"] {
+        width: 200px;
+    }
+
+    button {
+        padding: 8px 15px;
+    }
+
+    .container img {
+        width: 100%;
+        max-width: 100%;
+    }
+}

views/albums.hbs

@@ -0,0 +1,5 @@
+{{#each album as |album|}}
+<p>{{album.name}}</p>
+<img src="{{album.images.0.url}}" alt="">
+<a href="/tracks/{{album.id}}">View tracks</a>
+{{/each}}

views/artist-search-results.hbs

@@ -0,0 +1,8 @@
+{{#each artist as |artist|}}
+<div class="container">
+    <p>{{artist.name}}</p>
+    <img src="{{artist.images.0.url}}" alt="">
+    <a href="/albums/{{artist.id}}">View albums</a>
+</div>
+
+{{/each}}

views/home.hbs

@@ -0,0 +1,4 @@
+<form action="/artist-search-results" method="get">
+<input type="text" name="artist">
+<button type="submit">Search for an Artist</button>
+</form>

views/layout.hbs

@@ -0,0 +1,14 @@
+<!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>Spoti</title>
+</head>
+<body>
+    <div class="container">
+        {{{body}}}
+    </div>
+</body>
+</html>

views/tracks.hbs

@@ -0,0 +1,8 @@
+{{#each track as |track|}}
+<div class="container">
+    <p>{{track.name}}</p>
+    <audio src="{{track.preview_url}}"controls></audio>
+
+</div>
+
+{{/each}}