solved lab

app.js

@@ -1,18 +1,70 @@
-require('dotenv').config();
-
-const express = require('express');
-const hbs = require('hbs');
+require("dotenv").config();
 
+const express = require("express");
+const hbs = require("hbs");
+const SpotifyWebApi = require("spotify-web-api-node");
 // require spotify-web-api-node package here:
 
 const app = express();
 
-app.set('view engine', 'hbs');
-app.set('views', __dirname + '/views');
-app.use(express.static(__dirname + '/public'));
+app.set("view engine", "hbs", "ejs");
+app.set("views", __dirname + "/views");
+app.use(express.static(__dirname + "/public"));
+hbs.registerPartials(__dirname + "/views/partials");
+hbs.registerHelper("eq", function (a, b) {
+  return a === b;
+});
 
 // 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(`/`, (req, res) => {
+  res.render(`index`);
+});
+
+app.get(`/artist-search`, (req, res) => {
+  spotifyApi
+    .searchArtists(req.query.artist)
+    .then((data) => {
+      console.log(data.body.artist.items);
+      res.render(`artist-search-results`, { artists: data.body.artists.items });
+    })
+    .catch((err) => res.send(`something went wrong`)
+    );
+});
+
+app.get("/albums/:artistId", (req, res) => {
+  spotifyApi
+    .getArtistAlbums(req.params.artistId)
+    .then((data) => {
+      res.render("albums", { albums: data.body.items });
+    })
+    .catch((err) => res.send(`something went wrong`)
+    );
+});
+
+app.get("/tracks/:albumId", (req, res) => {
+  spotifyApi
+    .getAlbumTracks(req.params.albumId)
+    .then((data) => {
+      res.render("traks", { traks: data.body.items });
+    })
+    .catch((err) => res.send(`something went wrong`)
+    );
+});
 
-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

@@ -1,16 +1,22 @@
 {
   "name": "starter-code",
   "version": "1.0.0",
-  "description": "",
+  "description": "![logo_ironhack_blue 7](https://user-images.githubusercontent.com/23629340/40541063-a07a0a8a-601a-11e8-91b5-2f13e4e6b441.png)",
   "main": "app.js",
   "scripts": {
-    "dev": "nodemon app.js",
+    "dev": "nodemon app.js -e hbs,js,css",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "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"
   }
 }

views/albums.hbs

@@ -0,0 +1,19 @@
+<div>
+    <h2 class="text-2xl text-center mb-2">
+        Albums for:
+        {{albums.0.artist.0.name}}
+    </h2>
+    <div class="grid grid-cols-3 gap-3">
+        {{#each albums}}
+        <div class="flex flex-col items-center justify-center">
+            {{#if this.images.length}}
+            <img src="{{this.images.0.url}}" alt="image" width="300" />
+            {{/if}}
+            <p>{{this.name}}</p>
+            <button class="bg-blue-500 p-3 rounded mt-2 text-white hover:bg-blue-800">
+                <a href="/tracks/{{this.id}}">View Tracks</a>
+            </button>
+        </div>
+        {{/each}}
+    </div>
+</div>

views/artist-search-results.hbs

@@ -0,0 +1,13 @@
+<div class="grid grid-col-3 gap-3">
+    {{#each artist}}
+    <div class="flex flex-col items-center justify-center">
+        {{#if this.images.length}}
+        <img src="{{this.images.0.url}}" alt="image" width="300" />
+        {{/if}}
+        <p>{{this.name}}</p>
+        <button class="bg-blue-500 p-3 runded mt-2 text-white hover:bg-blue-800">
+            <a href="/albums/{{this.id}}">View Albums</a>
+        </button>
+    </div>
+    {{/each}}
+</div>

views/index.hbs

@@ -0,0 +1,10 @@
+<div class="flex items-center justify-center">
+
+    <form action="/artist-search" method="get" class="flex flex-col justify-center items-center">
+
+        <input type="text" placeholder="Choose an artist" id="artist" name="artist"
+            class="border-2 border-black rounded p-2">
+        <button type="submit" class="bg-black text-white hover:bg-red-700 mt-3 p-3 rounded">
+            Search for an artist</button>
+    </form>
+</div>

views/layout.hbs

@@ -0,0 +1,13 @@
+<!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">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <title>Document</title>
+</head>
+<body>
+    {{{body}}}
+</body>
+</html>

views/tracks.hbs

@@ -0,0 +1,17 @@
+<div class="flex flex-col">
+    {{#each tracks}}
+    <div class="flex justify-between items-center even:bg-gray-200 odd:bg-white p-2">
+        <p>{{this.name}}</p>
+        {{#each this.artist}}
+        <p>{{this.name}}</p>
+        {{/each}}
+        {{#if this.preview_url}}
+        <audio controls>
+            <source src="{{this.preview_url}}" />
+        </audio>
+        {{else}}
+        <p>No preview available</p>
+        {{/if}}
+    </div>
+    {{/each}}
+</div>