ironhack-labs · Jukeheim · Nov 2, 2023 · Mar 20, 2024
diff --git a/app.js b/app.js
@@ -3,16 +3,68 @@ require('dotenv').config();
 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();
 
 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:
 
+
+app.get('/', (req, res)=>{
+    res.render('home-page')
+})
+
+
+app.get('/artist-search',(req,res)=>{
+
+    const { artist } = req.query
+
+    spotifyApi
+        .searchArtists(artist)
+        .then(data => {
+            res.render('artist-search-results', {artists: data.body.artists.items})
+        })
+        .catch(err => console.log('The error while searching artists occurred: ', err));
+
+
+})
+
+app.get('/albums/:id', (req, res)=>{
+    const { id } = req.params
+    spotifyApi
+        .getArtistAlbums(id)
+        .then(dataElm => {
+            res.render('album', { albums: dataElm.body.items })
+        })
+        .catch(err => console.log('The error while searching artists occurred: ', err))
+
+
+})
+
+app.get('/songs/:id', (req, res) => {
+    const { id } = req.params
+    spotifyApi
+        .getAlbumTracks(id)
+        .then(dataElement => {
+            res.render('songs', { songs: dataElement.body.items })
+        })
+        .catch(err => console.log('The error while searching artists occurred: ', err))
+
+
+})
+
+
 app.listen(3000, () => console.log('My Spotify project running on port 3000 🎧 🥁 🎸 🔊'));
diff --git a/package.json b/package.json
@@ -12,5 +12,11 @@
   "license": "ISC",
   "devDependencies": {
     "nodemon": "^2.0.2"
+  },
+  "dependencies": {
+    "dotenv": "^16.3.1",
+    "express": "^4.18.2",
+    "hbs": "^4.2.0",
+    "spotify-web-api-node": "^5.0.2"
   }
 }
diff --git a/public/styles/style.css b/public/styles/style.css
@@ -0,0 +1,9 @@
+
+body{
+    background-image: url("./../images/spotify-background.jpeg");
+    background-size: cover; 
+    height: 100vh;
+
+}
+
+
diff --git a/views/album.hbs b/views/album.hbs
@@ -0,0 +1,15 @@
+<div class="container">
+    <div class="row">
+        {{#each albums}}
+        <div class="col-md-4">
+            <div class="card mb-4">
+                <img src="{{images.[0].url}}" class="card-img-top" alt="{{name}}">
+                <div class="card-body">
+                    <h5 class="card-title">{{name}}</h5>
+                    <a href="/songs/{{id}}" class="btn btn-primary">View Songs</a>
+                </div>
+            </div>
+        </div>
+        {{/each}}
+    </div>
+</div>
diff --git a/views/artist-search-results.hbs b/views/artist-search-results.hbs
@@ -0,0 +1,17 @@
+<div class="container">
+    <h1>Artist</h1>
+
+    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
+        {{#each artists}}
+        <div class="col">
+            <div class="card h-100">
+                <img src="{{images.[0].url}}" class="card-img-top" alt="{{name}}">
+                <div class="card-body">
+                    <h5 class="card-title">{{name}}</h5>
+                    <a class="btn btn-danger" href="/albums/{{id}}">View albums</a>
+                </div>
+            </div>
+        </div>
+        {{/each}}
+    </div>
+</div>
diff --git a/views/home-page.hbs b/views/home-page.hbs
@@ -0,0 +1,12 @@
+
+<div id ="home" class="d-flex justify-content-center align-items-center">
+
+<form action="/artist-search" method="get">
+
+
+    <input type="text" name="artist"> 
+    <input type="submit" value="search for an artist">
+
+</form>
+</div>
+</div>
diff --git a/views/layout.hbs b/views/layout.hbs
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Spotify Ironhack</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
+    <link rel="stylesheet" href="/styles/style.css">
+</head>
+
+<body>
+    {{{body}}}
+</body>
+
+</html>
diff --git a/views/songs.hbs b/views/songs.hbs
@@ -0,0 +1,6 @@
+<div class="container">
+    {{#each songs}}
+    <p>{{name}}</p>
+    <audio controls src="{{preview_url}}"></audio>
+    {{/each}}
+</div>