BER Webdev PT 012024 Nil Erden

app.js

@@ -1,18 +1,107 @@
-require('dotenv').config();
+require("dotenv").config();
 
-const express = require('express');
-const hbs = require('hbs');
+const express = require("express");
+const hbs = require("hbs");
+const path = require("path");
 
-// 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"));
+hbs.registerPartials(path.join(__dirname, "views/partials"));
 
 // 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("/home", (request, response, next) => response.render("index"));
 
-app.listen(3000, () => console.log('My Spotify project running on port 3000 🎧 🥁 🎸 🔊'));
+app.get("/artist-search", (request, response, next) => {
+  let artistDetails;
+  console.log(request.query.query);
+  spotifyApi
+    .searchArtists(request.query.query)
+    .then((data) => {
+      let myArr = data.body.artists.items;
+      let newArr = [];
+      myArr.forEach((item) => {
+        let myObj = {};
+        myObj.name = item.name;
+        myObj.image = item.images[0];
+        myObj.id = item.id;
+        newArr.push(myObj);
+      });
+      return newArr;
+    })
+    .then((artistDetails) => {
+      console.log(artistDetails);
+      return response.render("artist-search-results", { artistDetails });
+    })
+    .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) => {
+      let myArr = data.body.items;
+      let newArr = [];
+      myArr.forEach((item) => {
+        let myObj = {};
+        myObj.name = item.name;
+        myObj.image = item.images[0];
+        myObj.id = item.id;
+        newArr.push(myObj);
+      });
+      return newArr;
+    })
+    .then((albumDetails) => {
+      console.log(albumDetails);
+      return res.render("albums", { albumDetails });
+    })
+    .catch((err) =>
+      console.log("The error while searching artists occurred: ", err)
+    );
+});
+
+app.get("/tracks/:albumId", (req, res, next) => {
+  spotifyApi
+    .getAlbumTracks(req.params.albumId, { limit: 5, offset: 1 })
+    .then((data) => {
+      let myArr = data.body.items;
+      let newArr = [];
+      myArr.forEach((item) => {
+        let myObj = {};
+        myObj.name = item.name;
+        myObj.preview_url = item.preview_url;
+        newArr.push(myObj);
+      });
+      return newArr;
+    })
+    .then((trackDetails) => {
+      console.log(trackDetails);
+      return res.render("tracks", { trackDetails });
+    })
+    .catch((err) =>
+      console.log("The error while searching artists occurred: ", err)
+    );
+});
+
+app.listen(3000, () =>
+  console.log("My Spotify project running on port 3000 🎧 🥁 🎸 🔊")
+);

package.json

@@ -12,5 +12,11 @@
   "license": "ISC",
   "devDependencies": {
     "nodemon": "^2.0.2"
+  },
+  "dependencies": {
+    "dotenv": "^16.4.5",
+    "express": "^4.18.3",
+    "hbs": "^4.2.0",
+    "spotify-web-api-node": "^5.0.2"
   }
 }

public/stylesheets/style.css

@@ -0,0 +1,86 @@
+body {
+    background-image: url("../images/spotify-background.jpeg");
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+.search-box {
+    background-color: rgba(255, 255, 255,0.7);
+    width: 40%;
+    height: 200px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content:center;
+    position: absolute;
+    top: 35%;
+    left: 30%;
+}
+
+.search-box > input,.button {
+    margin: 10px;
+    padding: 8px;
+}
+
+.search-box > input {
+    width: 60%;
+    margin: 2px;
+    border-radius:5px;
+    border-color: rgb(221, 218, 218);
+}
+
+.search-box > .button {
+    background-color: rgb(246, 79, 80);
+    color: rgb(255, 255, 255);
+    border: none;
+}
+
+.card img {
+    height: 200px;
+    object-fit: cover;
+  }
+
+.card-title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 150px;
+}
+
+  .artists {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .card {
+    padding: 15px;
+    margin: 15px;
+    height: 350px;
+    background-color: rgb(255, 255, 255);
+  }
+
+  button.button {
+  background-color: rgb(246, 79, 80);
+  color: rgb(255, 255, 255);
+  border: none;
+}
+
+#result-text {
+    color: white;
+}
+
+.track-title {
+
+}
+.trackcard {
+    background-color: rgb(182, 178, 178);
+    margin: 5px;
+    display: flex;
+    justify-content: space-between;
+    padding: 15px;
+}
+
+.tracks {
+    display: flex;
+    flex-direction: column;
+}

views/albums.hbs

@@ -0,0 +1,11 @@
+<div>
+    <h2 id="result-text">Here are the results for your artist search:</h2>
+</div>
+<div class="artists">
+    {{#each albumDetails}}
+        {{> albumPartial this}} 
+    {{else}}
+        <p>No items yet!</p>
+    {{/each}}
+</div>
+

views/artist-search-results.hbs

@@ -0,0 +1,11 @@
+<div>
+    <h2 id="result-text">Here are the results for your artist search:</h2>
+</div>
+<div class="artists">
+    {{#each artistDetails}}
+        {{> artistPartial this}} 
+    {{else}}
+        <p>No items yet!</p>
+    {{/each}}
+</div>
+

views/index.hbs

@@ -0,0 +1,5 @@
+
+    <form action="/artist-search" method="get" class="search-box">
+    <input type="text" name="query" id="query" required />
+    <input type="submit" value="Search for an Artist" class="button"/>
+</form>

views/layout.hbs

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Spotify Search</title>
+    <link rel="stylesheet" href="../stylesheets/style.css" />
+  </head>
+  <body>
+    {{{ body }}}
+  </body>
+</html>

views/partials/albumPartial.hbs

@@ -0,0 +1,11 @@
+<div class='col-md-4'>
+  <div class='card'>
+    <img class='card-img-top' src='{{this.image.url}}' alt='{{this.name}}'onerror="src='../../images/spotify-background.jpeg'"/> 
+    <div class='card-body'>
+      <h5 class='card-title'>
+        {{this.name}}
+      </h5>
+      <a href="/tracks/{{this.id}}"><button class="button">View Tracks</button></a>
+    </div>
+  </div>
+</div>

views/partials/artistPartial.hbs

@@ -0,0 +1,11 @@
+<div class='col-md-4'>
+  <div class='card'>
+    <img class='card-img-top' src='{{this.image.url}}' alt='{{this.name}}'onerror="src='../../images/spotify-background.jpeg'"/> 
+    <div class='card-body'>
+      <h5 class='card-title'>
+        {{this.name}}
+      </h5>
+      <a href="/albums/{{this.id}}"><button class="button">View Albums</button></a>
+    </div>
+  </div>
+</div>

views/partials/trackPartial.hbs

@@ -0,0 +1,10 @@
+<div class='trackcard'>
+  <div class='track-body'>
+      <h5 class='track-title'>
+        {{this.name}}
+      </h5>
+  </div>
+  <div class="track-play">
+    <audio controls src="{{this.preview_url}}"></audio>
+  </div>
+</div>

views/tracks.hbs

@@ -0,0 +1,11 @@
+<div>
+    <h2 id="result-text">Here are the songs for the selected album</h2>
+</div>
+<div class="tracks">
+    {{#each trackDetails}}
+        {{> trackPartial this}} 
+    {{else}}
+        <p>No items yet!</p>
+    {{/each}}
+</div>
+