diff --git a/app.js b/app.js
index 5ea8eb4db..3b3ccb198 100644
--- a/app.js
+++ b/app.js
@@ -1,18 +1,72 @@
-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 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)
+ );
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"));
+hbs.registerPartials(__dirname + "/views/partials");
// setting the spotify-api goes here:
+app.get("/", (req, res) => {
+ res.render("index");
+});
+
+app.get("/artist-search", (req, res) => {
+ spotifyApi
+ .searchArtists(req.query.artist)
+ .then((data) => {
+ 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) => {
+ spotifyApi.getArtistAlbums(req.params.artistId).then(
+ function (data) {
+ res.render("albums", { albums: data.body.items });
+ },
+ function (err) {
+ console.error(err);
+ }
+ );
+});
+
+app.get("/tracks/:albumId", (req, res) => {
+ spotifyApi.getAlbumTracks(req.params.albumId).then(
+ function (data) {
+ res.render("tracks", { tracks: data.body.items });
+ },
+ function (err) {
+ console.error(err);
+ }
+ );
+});
+
// Our routes go here:
-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..4aedf7a39 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.19.2",
+ "hbs": "^4.2.0",
+ "spotify-web-api-node": "^5.0.2"
}
}
diff --git a/public/images/spotify-background.jpeg b/public/images/spotify-background.jpg
similarity index 100%
rename from public/images/spotify-background.jpeg
rename to public/images/spotify-background.jpg
diff --git a/public/styles/style.css b/public/styles/style.css
index e69de29bb..58466833e 100644
--- a/public/styles/style.css
+++ b/public/styles/style.css
@@ -0,0 +1,133 @@
+body {
+ background-image: url('../images/spotify-background.jpg');
+ background-size: cover;
+ background-repeat: no-repeat;
+ font-family: Arial, sans-serif;
+ color: #ffffff;
+}
+
+h1 {
+ font-size: 36px;
+ font-weight: bold;
+ text-align: center;
+ margin-top: 100px;
+}
+
+p {
+ font-size: 18px;
+ text-align: center;
+ margin-top: 20px;
+}
+
+li {
+ list-style-type: none;
+}
+
+button {
+ background-color: #1db954;
+ color: #ffffff;
+ font-size: 18px;
+ font-weight: bold;
+ padding: 10px 20px;
+ border: none;
+ border-radius: 5px;
+ margin-top: 20px;
+ cursor: pointer;
+}
+
+#search-container {
+ text-align: center;
+ margin-top: 50px;
+ background-color: rgba(0, 0, 0, 0.5);
+ padding: 20px;
+ border-radius: 10px;
+ background-image: url('./images/spotify-background.jpg');
+
+}
+
+#artist-container ul {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ gap: 20px;
+ margin-top: 50px;
+}
+
+#artist-partial {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background-color: rgba(0, 0, 0, 0.5);
+ padding: 20px;
+ border-radius: 10px;
+}
+
+#artist-partial a {
+ color: #ffffff;
+ text-decoration: none;
+ display: inline-block;
+ padding: 10px 20px;
+ background-color: #1db954;
+ color: #ffffff;
+ font-size: 18px;
+ font-weight: bold;
+ text-decoration: none;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+#albums-container ul {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ gap: 50px;
+ margin-top: 50px;
+}
+
+#albums-container a {
+ color: #ffffff;
+ text-decoration: none;
+ display: inline-block;
+ padding: 10px 20px;
+ background-color: #1db954;
+ color: #ffffff;
+ font-size: 18px;
+ font-weight: bold;
+ text-decoration: none;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+#tracks-container th {
+ background-color: #333333;
+ color: #d3d3d3;
+ padding: 20px;
+}
+
+#tracks-container td {
+ padding: 10px;
+ border-bottom: 1px solid #d3d3d3;
+}
+
+#tracks-container {
+ margin-top: 50px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ background-color: rgba(0, 0, 0, 0.5);
+ padding: 20px;
+ border-radius: 10px;
+}
+
+#tracks-container table {
+ width: 100%;
+}
+
+#tracks-container thead {
+ width: 100%;
+}
+
+#tracks-container tbody {
+ width: 100%;
+}
diff --git a/views/albums.hbs b/views/albums.hbs
new file mode 100644
index 000000000..7dba9750a
--- /dev/null
+++ b/views/albums.hbs
@@ -0,0 +1,14 @@
+Albums for: {{albums.0.artists.0.name}}
+
+
+ {{#each albums}}
+
+
+
+ {{/each}}
+
+
+
+ {{#each artists}}
+ {{> artistPartial}}
+ {{/each}}
+
+
+
+
\ No newline at end of file
diff --git a/views/layout.hbs b/views/layout.hbs
new file mode 100644
index 000000000..0d94f72bc
--- /dev/null
+++ b/views/layout.hbs
@@ -0,0 +1,10 @@
+
+
+ Music Search
+
+
{{name}}
+
View Ablums
+
Genres:
+
+ {{#each genres}}
+ {{this}}
+ {{/each}}
+
+
Followers:
+
{{followers.total}}
+
Popularity:
+
{{popularity}}
+
Spotify ID:
+
{{id}}
+
Spotify Link:
+
Link to {{name}} on Spotify
+
Images:
+
+
+
+
+
+ Title
+ Listen
+
+
+
+ {{#each tracks}}
+
+ {{name}}
+
+
+
+ Your browser does not support the audio element.
+
+
+
+ {{/each}}
+
+
+
+