Lab finished

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 🎧 🥁 🎸 🔊")
+);

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"
   }
 }

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;
+
+        }
+    }
+}

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;
+}

views/albums.hbs

@@ -0,0 +1,23 @@
+<div
+  style="padding: 15px; margin:20px;"
+  class="row row-cols-2 row-cols-md-4 g-4"
+>
+
+  {{#each albums as |album|}}
+    <div class="col" style="padding: 5px;">
+      <div class="card" style="background-color: rgba(227, 182, 134, 0.646); padding:10px;" >
+        <img
+          style="height: 250px; object-fit: contain;"
+          src="{{album.images.0.url}}"
+          class="card-img-top"
+          alt="..."
+        />
+        <div class="card-body"style=" display: flex; flex-direction:column; align-items:center; justify-content:center;">
+          <h5 class="card-title">{{album.name}}</h5>
+          <a href="/tracks/{{album.id}}" class="btn btn-primary" style="background-color: rgb(251 104 98); border-style:none;">View Tracks</a>
+        </div>
+
+      </div>
+    </div>
+  {{/each}}
+</div>

views/artist-search.hbs

@@ -0,0 +1,23 @@
+<div
+  style="padding: 15px; margin:20px;"
+  class="row row-cols-2 row-cols-md-4 g-4"
+>
+
+  {{#each artists as |artist|}}
+    <div class="col" style="padding: 5px;">
+      <div class="card" style="background-color: rgba(239, 224, 197, 0.646); padding:10px;" >
+        <img
+          style="height: 250px; object-fit: contain;"
+          src="{{artist.images.0.url}}"
+          class="card-img-top"
+          alt="..."
+        />
+        <div class="card-body"style=" display: flex; flex-direction:column; align-items:center; justify-content:center;">
+          <h5 class="card-title">{{artist.name}}</h5>
+          <a href="/albums/{{artist.id}}" class="btn btn-primary" style="background-color: rgb(251 104 98); border-style:none;">View Albums</a>
+        </div>
+
+      </div>
+    </div>
+  {{/each}}
+</div>

views/home.hbs

@@ -0,0 +1,17 @@
+<head>
+  <link rel="stylesheet" href="/styles/home.css" />
+</head>
+<div id="main-div">
+  <div>
+    <form method="GET" action="/artist-search" style="display: flex; flex-direction:column; align-items:center; justify-content: center;">
+
+      <input name="query" style="width: 300px;"
+        type="text"
+        class="form-control"
+        id="exampleInputEmail1"
+        aria-describedby="emailHelp"
+      />
+      <button type="submit" class="btn btn-primary"  style="margin-top: 15px; background-color: rgb(251 104 98); border-style:none;">Search for an Artist</button>
+    </form>
+  </div>
+</div>

views/layout.hbs

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/styles/style.css">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <title>Document</title>
+</head>
+<body>
+{{{body}}}
+      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>  
+</body>
+</html>

views/tracks.hbs

@@ -0,0 +1,15 @@
+<head>
+  <link rel="stylesheet" href="/styles/tracks.css" />
+</head>
+<div id="header">
+  <p>Title</p>
+  <p>Listen</p>
+</div>
+<div id="track-div">
+  {{#each tracks as |track|}}
+    <div id="track-box">
+      <p>{{track.name}}</p>
+      <audio controls src="{{track.preview_url}}"></audio>
+    </div>
+  {{/each}}
+</div>