ironhack-labs · TunaBonaudi · Jun 13, 2024
diff --git a/app.js b/app.js
@@ -4,15 +4,50 @@ 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('index');
+    });
+
+app.get('/artist-search', (req, res) => {
+    spotifyApi
+        .searchArtists(req.query.artist)
+        .then(data => {
+            console.log('The received data from the API: ', data.body.artists.items);
+            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) => {
+    spotifyApi
+        .getArtistAlbums(req.params.artistId)
+        .then(data => {
+            console.log('Artist albums', data.body.items);
+            res.render('albums', { albums: data.body.items });
+        })
+        .catch(err => console.log('The error while searching albums 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.4.5",
+    "express": "^4.19.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,82 @@
+/* Reset default styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* Set background color */
+body {
+    background-color: #000;
+}
+
+/* Set font and text color */
+body, h1, p {
+    font-family: Arial, sans-serif;
+    color: #fff;
+}
+
+/* Set container styles */
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+/* Set header styles */
+.header {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.header h1 {
+    font-size: 36px;
+    margin-bottom: 10px;
+}
+
+.header p {
+    font-size: 18px;
+}
+
+/* Set navigation styles */
+.navbar {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+}
+
+.navbar a {
+    margin: 0 10px;
+    text-decoration: none;
+    color: #fff;
+    font-size: 18px;
+}
+
+/* Set main content styles */
+.main-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 400px;
+}
+
+.main-content h2 {
+    font-size: 24px;
+    margin-bottom: 10px;
+}
+
+.main-content p {
+    font-size: 16px;
+}
+
+/* Set footer styles */
+.footer {
+    text-align: center;
+    margin-top: 20px;
+}
+
+.footer p {
+    font-size: 14px;
+}
+
+/* Add additional styles as needed */
diff --git a/views/albums.hbs b/views/albums.hbs
@@ -0,0 +1,8 @@
+{{#each albums}}
+    <div class="album">
+        <img src="{{cover}}" alt="{{name}} Cover">
+        <h3>{{name}}</h3>
+        <a href="/albums/{{id}}/tracks">See Tracks</a>
+    </div>
+{{/each}}
+
diff --git a/views/artist-search-results.hbs b/views/artist-search-results.hbs
@@ -0,0 +1,4 @@
+{{!-- artist-search-results.hbs --}}
+{{#each artists}}
+   <a href="/albums/someArtistIdGoesHere">View Albums</a>
+{{/each}}
diff --git a/views/index.hbs b/views/index.hbs
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Music Streaming Webpage</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <header>
+        <h1>Welcome to the Music Streaming Webpage</h1>
+    </header>
+
+    <main>
+        <section class="featured">
+            <h2>Featured Songs</h2>
+            {{!-- Display featured songs here --}}
+        </section>
+
+        <section class="popular">
+            <h2>Popular Songs</h2>
+            {{!-- Display popular songs here --}}
+        </section>
+
+        <section class="new-releases">
+            <h2>New Releases</h2>
+            {{!-- Display new releases here --}}
+        </section>
+    </main>
+
+    <form action="/artist-search" method="GET">
+    <input type="text" name="artist" placeholder="Enter artist's name">
+    <button type="submit">Search</button>
+</form>
+
+    <footer>
+        <p>&copy; 2022 Music Streaming Webpage. All rights reserved.</p>
+    </footer>
+
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/views/layout.hbs b/views/layout.hbs
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>{{pageTitle}}</title>
+    <link rel="stylesheet" href="/styles/style.css">
+</head>
+<body>
+    <header>
+        <nav>
+            <ul>
+                <li><a href="/">Home</a></li>
+                <li><a href="/browse">Browse</a></li>
+                <li><a href="/search">Search</a></li>
+                <li><a href="/playlists">Playlists</a></li>
+                <li><a href="/profile">Profile</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <main>
+        {{{body}}}
+    </main>
+
+    <footer>
+        <p>&copy; {{currentYear}} Music Streaming Website. All rights reserved.</p>
+    </footer>
+
+    <script src="/js/main.js"></script>
+</body>
+</html>