diff --git a/app.js b/app.js index 5ea8eb4db..8f406931a 100644 --- a/app.js +++ b/app.js @@ -1,18 +1,71 @@ -require('dotenv').config(); +require("dotenv").config(); -const express = require('express'); -const hbs = require('hbs'); - -// require spotify-web-api-node package here: +const express = require("express"); +const hbs = require("hbs"); +const SpotifyWebApi = require("spotify-web-api-node"); +const spotifyApi = new SpotifyWebApi({ + clientId: process.env.CLIENT_ID, + clientSecret: process.env.CLIENT_SECRET, +}); +spotifyApi + .clientCredentialsGrant() + .then((data) => spotifyApi.setAccessToken(data.body["access_token"])) + .catch((error) => + console.log("Something went wrong when retrieving an access token", error) + ); const app = express(); -app.set('view engine', 'hbs'); -app.set('views', __dirname + '/views'); -app.use(express.static(__dirname + '/public')); - -// setting the spotify-api goes here: +app.set("view engine", "hbs"); +app.set("views", __dirname + "/views"); +app.use(express.static(__dirname + "/public")); // Our routes go here: +app.get("/home", (req, res, next) => { + res.render("home"); +}); +app.get("/artist-search", (req, res, next) => { + const { query } = req.query; + spotifyApi + .searchArtists(query) + .then((data) => { + console.log( + "The received data from the API --->> ", + data.body.artists.items[0] + ); + res.render("artist-search", { artists: data.body.artists.items }); + }) + .catch((err) => + console.log("The error while searching artists occurred: ", err) + ); +}); + +app.get("/albums/:id", (req, res, next) => { + const { id } = req.params; + spotifyApi + .getArtistAlbums(id) + .then((data) => { + console.log("/// Album information-->>> ///", data.body.items[0]); + res.render("albums", { albums: data.body.items }); + }) + .catch((err) => + console.log("The error while searching albums occurred: ", err) + ); +}); + +app.get("/tracks/:id", (req, res, next) => { + const { id } = req.params; + spotifyApi + .getAlbumTracks(id) + .then((data) => { + console.log("//Track info -->>//", data.body.items); + res.render("tracks", {tracks : data.body.items}) + }) + .catch((err) => + console.log("The error while searching tracks occurred: ", err) + ); +}); -app.listen(3000, () => console.log('My Spotify project running on port 3000 🎧 🥁 🎸 🔊')); +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/public/styles/home.css b/public/styles/home.css new file mode 100644 index 000000000..c2b71d81b --- /dev/null +++ b/public/styles/home.css @@ -0,0 +1,20 @@ +body{ + background-image: url("/images/spotify-background.jpeg"); + background-size: cover; + + #main-div{ + width: 100vw; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + div { + background-color: rgba(255, 255, 255, 0.7); + padding: 20px; + border-radius: 4px; + width: 500px; + height: 150px; + + } + } +} \ No newline at end of file diff --git a/public/styles/tracks.css b/public/styles/tracks.css new file mode 100644 index 000000000..56f91b582 --- /dev/null +++ b/public/styles/tracks.css @@ -0,0 +1,17 @@ +#header { + display: flex; + justify-content: space-between; + background-color: rgba(228, 157, 109, 0.929); + p { + margin: 30px; + font-size: 30px; + font-weight: 600; + } +} +#track-box { + display: flex; + justify-content: space-between; + align-items: center; + + margin: 15px; +} \ No newline at end of file diff --git a/views/albums.hbs b/views/albums.hbs new file mode 100644 index 000000000..fd62bf6df --- /dev/null +++ b/views/albums.hbs @@ -0,0 +1,23 @@ +
+ + {{#each albums as |album|}} +
+
+ ... +
+
{{album.name}}
+ View Tracks +
+ +
+
+ {{/each}} +
\ No newline at end of file diff --git a/views/artist-search.hbs b/views/artist-search.hbs new file mode 100644 index 000000000..d072f9bf7 --- /dev/null +++ b/views/artist-search.hbs @@ -0,0 +1,23 @@ +
+ + {{#each artists as |artist|}} +
+
+ ... +
+
{{artist.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..9752799b6 --- /dev/null +++ b/views/home.hbs @@ -0,0 +1,17 @@ + + + +
+
+
+ + + +
+
+
\ No newline at end of file diff --git a/views/layout.hbs b/views/layout.hbs new file mode 100644 index 000000000..1334acfb1 --- /dev/null +++ b/views/layout.hbs @@ -0,0 +1,14 @@ + + + + + + + + Document + + +{{{body}}} + + + \ No newline at end of file diff --git a/views/tracks.hbs b/views/tracks.hbs new file mode 100644 index 000000000..11b9bd12f --- /dev/null +++ b/views/tracks.hbs @@ -0,0 +1,15 @@ + + + + +
+ {{#each tracks as |track|}} +
+

{{track.name}}

+ +
+ {{/each}} +
\ No newline at end of file