diff --git a/app.js b/app.js index 5ea8eb4db..45f2b327b 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,75 @@ 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 🎧 🥁 🎸 🔊')); diff --git a/package.json b/package.json index c9f4085ba..df8603d08 100644 --- a/package.json +++ b/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" } } diff --git a/public/styles/style.css b/public/styles/style.css index e69de29bb..f626a171c 100644 --- a/public/styles/style.css +++ b/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%; +} \ No newline at end of file diff --git a/views/albums.hbs b/views/albums.hbs new file mode 100644 index 000000000..e2112c0cc --- /dev/null +++ b/views/albums.hbs @@ -0,0 +1,17 @@ + + +

Albums

+ diff --git a/views/artist-search-results.hbs b/views/artist-search-results.hbs new file mode 100644 index 000000000..8163532a6 --- /dev/null +++ b/views/artist-search-results.hbs @@ -0,0 +1,18 @@ + + + +

Search Results for "{{query}}":

+ diff --git a/views/home.hbs b/views/home.hbs new file mode 100644 index 000000000..b760bbc29 --- /dev/null +++ b/views/home.hbs @@ -0,0 +1,11 @@ + +
+
+
+ + +
+
+
\ No newline at end of file diff --git a/views/layout.hbs b/views/layout.hbs new file mode 100644 index 000000000..209a0d033 --- /dev/null +++ b/views/layout.hbs @@ -0,0 +1,15 @@ + + + + {{title}} + + + +

Welcome to Spotify Artist Search

+
+ + +
+ {{{body}}} + + diff --git a/views/tracks.hbs b/views/tracks.hbs new file mode 100644 index 000000000..7a1ffaf32 --- /dev/null +++ b/views/tracks.hbs @@ -0,0 +1,18 @@ + + +

Tracks

+