WPTJAN2024-DIEGO GUAMAN

app.js

@@ -1,18 +1,35 @@
-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 spotifyApi = require("./config/spoti.config");
+// 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"));
 
 // setting the spotify-api goes here:
 
+
+
+const routes = require('./routes/routes');
 // Our routes go here:
+app.use('/', routes)
+
+
 
-app.listen(3000, () => console.log('My Spotify project running on port 3000 🎧 🥁 🎸 🔊'));
+app.listen(3001, () =>
+  console.log("My Spotify project running on port 3000 🎧 🥁 🎸 🔊")
+);

config/spoti.config.js

@@ -0,0 +1,8 @@
+const SpotifyWebApi = require('spotify-web-api-node');
+
+const spotifyApi = new SpotifyWebApi({
+  clientId: process.env.CLIENT_ID,
+  clientSecret: process.env.CLIENT_SECRET
+});
+
+module.exports = spotifyApi;

controllers/main.controller.js

@@ -0,0 +1,47 @@
+const spotifyApi = require("../config/spoti.config");
+
+// '/'
+module.exports.renderHome = (req, res, next) => {
+  res.render("index");
+};
+
+// '/search-artist'
+module.exports.searchArtist = (req, res, next) => {
+  const { artist } = req.query;
+  spotifyApi
+    .searchArtists(artist)
+    .then((data) => {
+      res.render("artists/artist-search-results", {
+        artists: data.body.artists.items,
+      });
+    })
+    .catch((err) =>
+      console.log("The error while searching artists occurred: ", err)
+    );
+};
+
+// '/albums'
+module.exports.getAlbums = (req, res, next) => {
+  const { artistId } = req.params;
+  const { artist } = req.query;
+  spotifyApi
+    .getArtistAlbums(artistId)
+    .then((data) => {
+      console.log(data);
+      res.render("albums/albums", {albums: data.body.items, artist: artist});
+    })
+    .catch((err) =>
+      console.log("The error while searching artists occurred: ", err)
+    );
+};
+
+module.exports.getAlbumTracks = (req, res, next) => {
+  const { albumId } = req.params;
+
+  spotifyApi.getAlbumTracks(albumId)
+    .then(data => {
+      console.log(data.body.items);
+      res.render('albums/albumTracks', { tracks: data.body.items });
+    })
+    .catch(err => console.log('The error while searching artist albums occurred: ', err))
+}

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.css

@@ -0,0 +1,29 @@
+.container-background{
+    width: 100%;
+    height: 100vh;
+    background-image: url("./../images/spotify-background.jpeg");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.form-container{
+    padding: 50px 100px;
+    background-color: rgba(247, 245, 241, 0.5);   
+}
+form{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+}
+.form-control{
+    width: 400px;
+}
+.btn-width{
+    width: 200px;
+}

routes/routes.js

@@ -0,0 +1,16 @@
+const router = require('express').Router();
+const mainController = require('../controllers/main.controller');
+
+
+// Home
+router.get('/', mainController.renderHome);
+
+// Artist'
+router.get('/artist-search', mainController.searchArtist);
+
+//Albums
+router.get('/albums/:artistId', mainController.getAlbums)
+
+//Album Tracks
+router.get('/albums/:albumId/tracks', mainController.getAlbumTracks)
+module.exports = router;

views/albums/albumTracks.hbs

@@ -0,0 +1,30 @@
+<div class="container">
+  <div class="row">
+    <div class="col-8 bg-secondary text-light">
+      <h2>Title</h2>
+    </div>
+    <div class="col bg-secondary text-light">
+      <h2>Listen</h2>
+    </div>
+
+    <div class="row mt-4">
+        <div class="row">
+            {{#each tracks}}
+            <div class="col-8 pt-3">
+            {{name}}
+            <a href="{{external_urls.spotify}}" target="_blank" class="text-decoration-none badge bg-success text-bg-success">Listen on Spotify</a>
+            {{#if explicit}}
+                <span class="badge bg-danger text-bg-danger">Explicit</span>
+            {{/if}}
+            </div>
+            <div class="col-2 mb-2">
+            <audio src="{{preview_url}}" controls />
+            </div>
+            {{/each}}
+        </div>
+    </div>
+  </div>
+  <p class="float-end mb-3">
+    <a href="/" class="btn btn-danger">Back to search</a>
+  </p>
+</div>

views/albums/albums.hbs

@@ -0,0 +1,23 @@
+<div class="container">
+  <p class="float-end mb-3 mt-4">
+    <a href="/" class="btn">Go search</a>
+  </p>
+  <h1 class="display-1 mb-3 text-center col">
+    Albums</h1>
+  <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
+    {{#each albums}}
+      <div class="col mb-4">
+        <div class="card h-100">
+          <img src="{{images.0.url}}" class="card-img-top h-100" alt="" />
+          <div class="card-body text-center p-4">
+            <h5 class="card-title mb-3">{{name}}</h5>
+            <a href="/albums/{{id}}/tracks" class="btn btn-danger btn-width ">View Traks</a>
+          </div>
+        </div>
+      </div>
+    {{/each}}
+  </div>
+  <p class="float-end mb-3">
+    <a href="#" class="btn btn-danger">Back to top</a>
+  </p>
+</div>

views/artists/artist-search-results.hbs

@@ -0,0 +1,22 @@
+<div class="container">
+  <p class="float-end mb-4 mt-4">
+    <a href="/" class="btn">Go search</a>
+  </p>
+  <h1 class="display-1 mb-3 text-center col">Artist</h1>
+  <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
+    {{#each artists}}
+      <div class="col mb-4">
+        <div class="card h-100">
+          <img src="{{images.0.url}}" class="card-img-top h-100" alt="" />
+          <div class="card-body text-center p-4">
+            <h5 class="card-title mb-3">{{name}}</h5>
+            <a href="/albums/{{id}}" class="btn btn-primary btn-width">View Albums</a>
+          </div>
+        </div>
+      </div>
+    {{/each}}
+  </div>
+  <p class="float-end mb-3">
+    <a href="#" class="btn btn-danger">Back to top</a>
+  </p>
+</div>

views/index.hbs

@@ -0,0 +1,17 @@
+<div class="container-background">
+  <div class=" form-container">
+    <form action="/artist-search" , method="GET">
+    <div class="mb-3 mt-1">
+      <input
+        name="artist"
+        type="text"
+        class="form-control"
+        id="exampleInputEmail1"
+        aria-describedby="emailHelp"
+      />
+    </div>
+    <button type="submit" class="btn btn-danger">Search for an artist</button>
+  </form>
+  </div>
+
+</div>

views/layout.hbs

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Spotify API</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link rel="stylesheet" href="./styles/style.css">
+</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>