From 82849b00f2fda6e2b726adf4dca24c8e6f3c7a0c Mon Sep 17 00:00:00 2001 From: tsekamaru <67861937+tsekamaru@users.noreply.github.com> Date: Tue, 25 Feb 2025 21:40:58 +0100 Subject: [PATCH 1/2] done --- app.js | 48 +++++++++++++++++++++++++++------ package.json | 6 +++++ views/albums.hbs | 33 +++++++++++++++++++++++ views/artist-search-results.hbs | 18 +++++++++++++ views/home.hbs | 22 +++++++++++++++ views/layout.hbs | 36 +++++++++++++++++++++++++ 6 files changed, 155 insertions(+), 8 deletions(-) create mode 100644 views/albums.hbs create mode 100644 views/artist-search-results.hbs create mode 100644 views/home.hbs create mode 100644 views/layout.hbs diff --git a/app.js b/app.js index 5ea8eb4db..0a559c311 100644 --- a/app.js +++ b/app.js @@ -1,18 +1,50 @@ -require('dotenv').config(); +require("dotenv").config(); -const express = require('express'); -const hbs = require('hbs'); +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')); +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("home"); +}); + +app.get("/artist-search", (req, res) => { + spotifyApi + .searchArtists(req.query.artist) + .then((data) => { + const artists = data.body.artists.items; + res.status(200).render("artist-search-results", { artists }); + }) + .catch((err) => console.log("The error while searching artists occurred: ", err)); +}); + +app.get("/albums/:artistId", (req, res, next) => { + spotifyApi.getArtistAlbums(req.params.artistId).then((data) => { + console.log("Artist albums", data.body.items); + const albums = data.body.items; + res.render("albums", { albums }); + }); +}); -app.listen(3000, () => console.log('My Spotify project running on port 3000 🎧 🥁 🎸 🔊')); +// Start listening the server +app.listen(3000, () => console.log("My Spotify project running on port 3000 🎧 🥁 🎸 🔊")); diff --git a/package.json b/package.json index c9f4085ba..c6ef96d20 100644 --- a/package.json +++ b/package.json @@ -12,5 +12,11 @@ "license": "ISC", "devDependencies": { "nodemon": "^2.0.2" + }, + "dependencies": { + "dotenv": "^16.4.7", + "express": "^4.21.2", + "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..57af44d7f --- /dev/null +++ b/views/albums.hbs @@ -0,0 +1,33 @@ +
+

Albums for: {{albums.[0].artists.[0].name}}

+ +
+ {{#each albums}} +
+
+ {{#if images.[0].url}} + {{name}} + {{/if}} +
+
{{name}}
+
+ + View Tracks + +
+
+
+
+ {{/each}} +
+
+ + diff --git a/views/artist-search-results.hbs b/views/artist-search-results.hbs new file mode 100644 index 000000000..ac214e7be --- /dev/null +++ b/views/artist-search-results.hbs @@ -0,0 +1,18 @@ +
+

Artist Search Results

+
+ {{#each artists}} +
+
+ {{this.name}} +
+
{{this.name}}
+
+ View Albums +
+
+
+
+ {{/each}} +
+
\ No newline at end of file diff --git a/views/home.hbs b/views/home.hbs new file mode 100644 index 000000000..5b84c69d7 --- /dev/null +++ b/views/home.hbs @@ -0,0 +1,22 @@ + + +
+
+
+
+ +
+ +
+
+
\ No newline at end of file diff --git a/views/layout.hbs b/views/layout.hbs new file mode 100644 index 000000000..c77e4dcf2 --- /dev/null +++ b/views/layout.hbs @@ -0,0 +1,36 @@ + + + + + + Artist Search Results + + + + + + {{{body}}} + + + + \ No newline at end of file From 66860852a72e16d14d8d3607c3ebc399365cb7e5 Mon Sep 17 00:00:00 2001 From: tsekamaru <67861937+tsekamaru@users.noreply.github.com> Date: Fri, 28 Feb 2025 16:52:47 +0100 Subject: [PATCH 2/2] Solved --- app.js | 23 +++++++++++++++++++++++ views/albums.hbs | 2 +- views/tracks.hbs | 36 ++++++++++++++++++++++++++++++++++++ 3 files changed, 60 insertions(+), 1 deletion(-) create mode 100644 views/tracks.hbs diff --git a/app.js b/app.js index 0a559c311..f846e86a0 100644 --- a/app.js +++ b/app.js @@ -46,5 +46,28 @@ app.get("/albums/:artistId", (req, res, next) => { }); }); +app.get("/tracks/:albumId", (req, res, next) => { + spotifyApi + .getAlbumTracks(req.params.albumId) + .then((data) => { + const tracks = data.body.items; + // Get album info to display album name and image + spotifyApi + .getAlbum(req.params.albumId) + .then((albumData) => { + const albumInfo = albumData.body; + res.render("tracks", { tracks, album: albumInfo }); + }) + .catch((error) => { + console.error("Error getting album info:", error); + next(error); + }); + }) + .catch((error) => { + console.error("Error getting album tracks:", error); + next(error); + }); +}); + // Start listening the server app.listen(3000, () => console.log("My Spotify project running on port 3000 🎧 🥁 🎸 🔊")); diff --git a/views/albums.hbs b/views/albums.hbs index 57af44d7f..036201a19 100644 --- a/views/albums.hbs +++ b/views/albums.hbs @@ -11,7 +11,7 @@
{{name}}
- + View Tracks
diff --git a/views/tracks.hbs b/views/tracks.hbs new file mode 100644 index 000000000..95f08ebd3 --- /dev/null +++ b/views/tracks.hbs @@ -0,0 +1,36 @@ +
+
+
+ {{#if album.images.[0].url}} + {{album.name}} + {{/if}} +
+
+

{{album.name}}

+

By {{album.artists.[0].name}}

+ +
+ {{#each tracks}} +
+
+
{{name}}
+ Duration: {{duration_ms}} ms +
+ {{#if preview_url}} + + {{else}} + No preview available + {{/if}} +
+ {{/each}} +
+ + + Back to Albums + +
+
+
\ No newline at end of file