[BERLIN-PT-032024] Franciely Beckert

app.js

@@ -1,18 +1,97 @@
-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 app = express();
+const path = require("path");
 
-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"));
 
 // 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:
+// sending info from a form
+app.get("/", (req, res) => {
+  res.set("Content-Type", "text/html");
+
+  res.render("index", {
+    title: "Hello world",
+  });
+});
+
+// Query String
+app.get("/artist-search", (req, res) => {
+  spotifyApi
+    .searchArtists(req.query.artist)
+    .then((data) => {
+      console.log("The received data from the API:", data.body);
+      res.render("artist-search-results", { artists: data.body.artists.items });
+      console.log(data.body.artists.items)
+    })
+    .catch((err) => {
+      console.log("The error while searching artists occurred: ", err);
+      res.render("error", { err: err });
+    });
+});
+
+app.get("/albums/:artistId", (req, res, next) => {
+  // get the artistId from the request params
+  const artistId = req.params.artistId;
+  console.log("artistId", artistId)
+
+  // use Spofify Api to get the albums of the specified artist
+  spotifyApi
+    .getArtistAlbums(artistId)
+    .then((data) => {
+      // render the albums.hbs template, passing the albums data
+      res.render("albums", { albums: data.body.items, artist: data.body.items[0].artists[0] });
+      console.log(data.body.items[0].artists)
+      console.log(data)
+    })
+    .catch((error) => {
+      // Pass any errors to the error handling middleware
+      next(error);
+    });
+});
+
+app.get("/tracks/:albumId", (req, res, next) => {
+  // get the albumId from the request params
+  const albumId = req.params.albumId;
+
+  // use Spofify Api to get the tracks of the specified album
+  spotifyApi
+    .getAlbumTracks(albumId)
+    .then((data) => {
+      // render the tracks.hbs template, passing the tracks data
+      res.render("tracks", { tracks: data.body.items });
+      console.log(data.body.items)
+
+    })
+    .catch((error) => {
+      // Pass any errors to the error handling middleware
+      next(error);
+    });
+});
+
 
-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.18.3",
+    "hbs": "^4.2.0",
+    "spotify-web-api-node": "^5.0.2"
   }
 }

public/styles/style-index.css

@@ -0,0 +1,7 @@
+body {
+    background-image:url(/images/spotify-background.jpeg);
+    background-size: cover;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

public/styles/style.css

@@ -0,0 +1,94 @@
+body {
+  display: flex;
+  /* justify-content: center;
+    align-items: center; */
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 20px;
+}
+
+#form-style {
+  display: flex;
+  flex-direction: column;
+  width: 60%;
+  height: 12rem;
+  background: rgba(255, 255, 255, 0.5);
+  background-image: none;
+}
+
+#box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%; /* Adjust width as needed */
+  height: 100%; /* Adjust height as needed */
+}
+
+#input-field {
+  margin-bottom: 10px;
+  width: 50%;
+}
+
+#button-field {
+  background-color: red;
+  color: white;
+  border: none;
+  height: 1.5rem;
+  opacity: 0.7;
+}
+
+.artist,
+.albums {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+
+.artist-info, .album {
+  display: flex;
+  flex-direction: column;
+}
+
+.name-link-artist-search {
+  background-color: rgb(79, 79, 79);
+  width: 200px;
+  text-align: center;
+  color: white;
+  text-decoration: none;
+  font-size: 0.7rem;
+  height: 4.5rem;
+}
+
+.name-artist-search {
+  margin: auto;
+  padding-bottom: 5px;
+}
+
+.artist-album-img {
+  width: 200px;
+  height: 200px;
+}
+
+.button-artist-search {
+  color: white;
+  text-decoration: none;
+  background-color: red;
+  border-radius: 3px;
+  padding: 3px;
+}
+
+.h1-albums {
+  width: 100%;
+  text-align: center;
+}
+
+.name-track {
+  background-color: rgb(79, 79, 79);
+  text-align: center;
+  color: white;
+}
+
+.text-track {
+  margin-bottom: 10px;
+}

views/albums.hbs

@@ -0,0 +1,16 @@
+{{! albums.hbs }}
+
+<h1 class="h1-albums">Albums for: {{artist.name}}</h1>
+
+{{#each albums}}
+  <div class="albums">
+    <div class="album">
+      <img class="artist-album-img" src="{{images.0.url}}" alt="{{name}}" />
+      <div class="name-link-artist-search">
+        <h2 class="name-artist-search">{{name}}</h2>
+        <a class="button-artist-search" href="/tracks/{{id}}">View Tracks</a>
+      </div>
+
+    </div>
+  </div>
+{{/each}}

views/artist-search-results.hbs

@@ -0,0 +1,15 @@
+
+{{#each artists}}
+  <div class="artist">
+    <div class="artist-info">  
+      {{! to check if the images array is not empty }}
+      {{#if images.[0]}}
+        <img  class="artist-album-img" src="{{images.[0].url}}" alt="{{name}} Image" />
+      {{/if}}
+      <div class="name-link-artist-search">
+        <h2 class="name-artist-search">{{name}}</h2>
+        <a class="button-artist-search" href="/albums/{{id}}">View Albums</a>
+      </div>
+    </div> 
+  </div>
+{{/each}}

views/error.hbs

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Error</title>
+</head>
+<body>
+    <h1>Error</h1>
+    {{{err}}}
+</body>
+</html>

views/index.hbs

@@ -0,0 +1,14 @@
+<link rel="stylesheet" href="/styles/style-index.css" />
+
+<form id="form-style" action="/artist-search" method="get">
+  <div id="box">
+    <input
+      id="input-field"
+      type="text"
+      name="artist"
+      id="artist"
+      placeholder="Enter artist name"
+    />
+    <button id="button-field" type="submit">Search for an artist</button>
+  </div>
+</form>

views/layout.hbs

@@ -0,0 +1,11 @@
+<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" />
+    <title>{{title}}</title>
+  </head>
+  <body>
+    {{{body}}}
+  </body>
+</html>

views/tracks.hbs

@@ -0,0 +1,13 @@
+
+<div class="track-list">
+  {{#each tracks}}
+    <div class="track">
+      <h2 class="name-track">{{name}}</h2>
+      <figure>
+        <figcaption class="text-track">Listen to {{name}}: </figcaption>
+        <audio controls src="{{preview_url}}"></audio>
+        <a href="{{preview_url}}" download="">Download audio</a>
+      </figure>
+    </div>
+  {{/each}}
+</div>