ironhack-labs · Jopen-89 · Sep 17, 2025
diff --git a/app.js b/app.js
@@ -5,6 +5,8 @@ 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');
@@ -13,6 +15,59 @@ 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
+});
+
+//extraer token de acceso
+spotifyApi
+  .clientCredentialsGrant()
+  .then(data => spotifyApi.setAccessToken(data.body['access_token']))
+  .catch(error => console.log('Something went wrong when retrieving an access token', error));
+
+//middleware
+
+
 // Our routes go here:
 
+app.get('/', (req, res) => 
+    res.render('index', {title: 'Spotify lab'})
+)
+
+app.get('/artist-search', (req, res) => {
+    const { artist } = req.query;
+
+    spotifyApi
+        .searchArtists(artist)
+        .then(data => {
+            console.log('The received data from the API: ', data.body);
+            res.render('artist-search-results', { artists: data.body.artists.items })
+        })
+        .catch(err => console.log('The error while searching artists occurred: ', err));
+})
+
+app.get('/albums/:artistId', (req, res) => {
+  const { artistId } = req.params;
+  spotifyApi
+    .getArtistAlbums(artistId)
+    .then(data => {
+      res.render('album', { albums: data.body.items }); //  busca views/album.hbs
+    })
+    .catch(err => console.log(err));
+});
+
+app.get('/view-tracks/:albumId', (req, res) => {
+  const { albumId } = req.params
+  spotifyApi
+    .getAlbumTracks(albumId, { limit: 20, market: 'ES'})
+    .then(data => {
+      console.log(data.body)
+      res.render('view-tracks', {tracks: data.body.items})})
+    .then(err => console.log('Algo fue mal', err))
+})
+
+
+
+
 app.listen(3000, () => console.log('My Spotify project running on port 3000 🎧 🥁 🎸 🔊'));
diff --git a/package.json b/package.json
@@ -11,6 +11,12 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "nodemon": "^2.0.2"
+    "nodemon": "^3.1.10"
+  },
+  "dependencies": {
+    "dotenv": "^17.2.2",
+    "express": "^5.1.0",
+    "hbs": "^4.2.0",
+    "spotify-web-api-node": "^5.0.2"
   }
 }
diff --git a/views/album.hbs b/views/album.hbs
@@ -0,0 +1,8 @@
+<h2>Albumes </h2>
+
+{{#each albums}}
+    <p>{{this.name}}</p>
+    <img src="{{this.images.[0].url}}" alt="{{this.name}}" width:"150">
+    <a href="/view-tracks/{{this.id}}">Ver Tracks</a>
+
+{{/each}}
diff --git a/views/artist-search-results.hbs b/views/artist-search-results.hbs
@@ -0,0 +1,16 @@
+<h1>Resultados de la busqueda sencillo</h1>
+
+{{#each artists}}
+    <div>
+        <h2>{{this.name}}</h2>
+        <img src="{{this.images.0.url}}" alt="{{this.name}}" width="150">
+        <a href="/albums/{{this.id}}">Ver álbumes</a>
+    </div>
+{{/each}}
+
+
+
+
+
+
+
diff --git a/views/index.hbs b/views/index.hbs
@@ -0,0 +1,7 @@
+
+<h1>Buscar artistas</h1>
+<form action="/artist-search" method="GET">
+    <label for="artist">Artist name:</label>
+    <input type="text" id="artist" name="artist">
+    <button type="submit">Search for an artist</button>
+</form>
diff --git a/views/layout.hbs b/views/layout.hbs
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>{{title}}</title>
+
+  {{!-- Si tienes CSS en /public --}}
+  <link rel="stylesheet" href="/stylesheets/style.css" />
+</head>
+<body>
+  {{!-- Aquí se inyecta la vista (index.hbs, artist-search.hbs, etc.) --}}
+  {{{body}}}
+</body>
+</html>
diff --git a/views/view-tracks.hbs b/views/view-tracks.hbs
@@ -0,0 +1,10 @@
+<h2>Tracks</h2>
+
+{{#each tracks}}
+<ul>
+    <li>{{this.name}}</li>
+    <li><audio src="{{this.preview_url}}" type="audio/mpeg" controls></audio></li>
+</ul>
+{{/each}}
+
+