albums.ejs

<div id="main-ctn">

    <h1 class="display-artist-name">
        Albums for: 
    </h1>

    <div id="main-grid">
        <% albumsArr.forEach(album=> { %>
            <div class="item">
                <div class="item-img-ctn">
                    <% if (album.images.length) { %>
                        <img class="item-img" src="<%= album.images[1].url %>" alt="album-cover" />
                    <% } else { %>
                        <div class="empty-img"></div>
                    <% } %>
                </div>
                <div class="item-info-ctn">
                    <div class="item-name-ctn">
                        <h2 class="item-name">
                            <%= album.name %>
                        </h2>
                    </div>
                    <div class="item-btn-ctn">
                        <button class="btn" type="button"><a href="<%= `/tracks/${album.id}` %>">View Tracks</a></button>
                    </div>
                </div>
            </div>
            <% }) %>
    </div>
</div>

app.js

require('dotenv').config();

const express = require('express');
const ejs = require('ejs');
const app = express();

const expressLayouts = require("express-ejs-layouts");
app.use(expressLayouts);
app.set("view engine", "ejs");

// require spotify-web-api-node package here:
const SpotifyWebApi = require('spotify-web-api-node');

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:
// Our routes go here:
// Our routes go here:
app.get('/', (req, res) => {
    res.render('home')
})


app.get('/artist-search', (req, res) => {
    const { name } = req.query
    spotifyApi
        .searchArtists(name)
        .then(data => {
            // console.log('The received data from the API: ', data.body);
            const artistsArr = data.body.artists.items;
            res.render('artist-search-results', { artistsArr });
        })
        .catch(err => console.log('Sth went wrong when searching artists: ', err));
})

// app.get('/albums/:artistId', (req, res, next) => {
//     const { artistId } = req.params
//     spotifyApi
//         .getArtistAlbums(artistId)
//         .then(data => {
//             const albumsArr = data.body.items;
//             res.render('albums', { albumsArr });
//         })
//         .catch(err => console.log('Sth went wrong when searching albums: ', err));

//     spotifyApi
//         .getArtist(artistId)
//         .then(data => {
//             const artistName = data.body.name
//             console.log(artistName);
//         })
//         .catch(err => console.log('Sth went wrong when searching artist name: ', err));
// })

app.get('/albums/:artistId', async (req, res, next) => {
    try {
        const { artistId } = req.params
        const data = await spotifyApi.getArtistAlbums(artistId);
        const albumsArr = data.body.items;
        res.render('albums', { albumsArr });
    } catch (error) {
        console.log('Sth went wrong when searching albums: ', err);
    }
})

app.get('/tracks/:albumId', (req, res, next) => {
    const { albumId } = req.params;
    spotifyApi
        .getAlbumTracks(albumId)
        .then(data => {
            const tracksArr = data.body.items;
            res.render('tracks', { tracksArr });
        })
        .catch(err => console.log('Sth went wrong when searching tracks: ', err));
})

app.listen(3000, () => console.log('My Spotify project running on port 3000 🎧 🥁 🎸 🔊'));

artists-search-results.ejs

<div id="main-ctn">
    <div id="main-grid">
            <% artistsArr.forEach(artist => { %>
            <div class="item">
                <div class="item-img-ctn">
                    <% if (artist.images.length) { %>     
                        <img class="item-img" src="<%= artist.images[1].url %>" alt="artist-image" />
                    <% } else { %>
                        <div class="empty-img"></div>
                    <% } %>
                </div>
                <div class="item-info-ctn">
                    <div class="item-name-ctn">
                        <h2 class="item-name">
                            <%= artist.name %>
                        </h2>
                    </div>
                    <div class="item-btn-ctn">
                        <button class="btn" type="button"><a href="<%= `/albums/${artist.id}` %>">View Albums</a></button>
                    </div>
                </div>
            </div>
            <% }) %>    
    </div>
</div>

home.ejs

<div id="bg-image">
    <div id="form-ctn">
        <form id="search-form" method="GET" action="/artist-search">
            <label id="search-label" for="artist-input">
                <input id="search-input" class="form-elem" type="text" name="name">
            </label>
            <button id="search-btn" class="form-elem" type="submit">Search for an Artist</button>
        </form>
    </div>
</div>

layout.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/styles/style.css">
    <title>Document</title>
</head>
<body>
    <header>
        <div class="menu">
            <div class="logo-ctn">
                <a href="/">
                    <img class="spotify-logo" src="../images/Spotify_Logo_CMYK_Green.png" alt="spotify-logo">
                </a>
            </div>
            <div class="sign">
                <span><a href="https://github.com/etiennebelle" target="_blank">Etienne B. اتیین</a></span>
            </div>
        </div>
    </header>
    <%- body %>
</body>
</html>

tracks.ejs

<div class="tracks-ctn">
    <% tracksArr.forEach(song => { %>
        <div class="track-item">
            <div class="track-infos">
                <span class="track-name">
                    <%= song.name %>
                </span>
            </div>
            <audio controls class="track-prev" src="<%= song.preview_url %>"></audio>
        </div>
    <% }) %>
</div>