diff --git a/app.js b/app.js index 5ea8eb4db..15001d393 100644 --- a/app.js +++ b/app.js @@ -4,7 +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(); app.set('view engine', 'hbs'); @@ -12,7 +12,63 @@ 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 🎧 🥁 🎸 🔊')); diff --git a/package.json b/package.json index c9f4085ba..938120348 100644 --- a/package.json +++ b/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" } } diff --git a/views/albums.hbs b/views/albums.hbs new file mode 100644 index 000000000..6cd7cbdcd --- /dev/null +++ b/views/albums.hbs @@ -0,0 +1,19 @@ +

Albums by {{artistName}}

+ +{{#if albums.length}} + +{{else}} +

No albums found for this artist.

+{{/if}} + diff --git a/views/artist-search-results.hbs b/views/artist-search-results.hbs new file mode 100644 index 000000000..5afcb838c --- /dev/null +++ b/views/artist-search-results.hbs @@ -0,0 +1,20 @@ + +

Search Results

+ + {{#if artists.length}} + + {{else}} +

No artists found. Please try again.

+ {{/if}} + diff --git a/views/index.hbs b/views/index.hbs new file mode 100644 index 000000000..5a260a570 --- /dev/null +++ b/views/index.hbs @@ -0,0 +1,8 @@ + +

Spotify Artist Search

+
+ + + +
+ diff --git a/views/layout.hbs b/views/layout.hbs new file mode 100644 index 000000000..bf7593652 --- /dev/null +++ b/views/layout.hbs @@ -0,0 +1,11 @@ + + + + + + Document + + + {{{body}}} + + \ No newline at end of file diff --git a/views/tracks.hbs b/views/tracks.hbs new file mode 100644 index 000000000..38c50c3d5 --- /dev/null +++ b/views/tracks.hbs @@ -0,0 +1,22 @@ +

Tracks from {{albumName}}

+ +{{#if tracks.length}} + +{{else}} +

No tracks found for this album.

+{{/if}}