diff --git a/app.js b/app.js index 5ea8eb4db..058c8f40e 100644 --- a/app.js +++ b/app.js @@ -2,6 +2,7 @@ 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: @@ -12,7 +13,19 @@ 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, //no se la paso para que al subirlo no aparezca el .env no se sube + 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.listen(3000, () => console.log('My Spotify project running on port 3000 🎧 🥁 🎸 🔊')); diff --git a/config/spoty.config.js b/config/spoty.config.js new file mode 100644 index 000000000..e69de29bb diff --git a/controllers/spoty.controller.js b/controllers/spoty.controller.js new file mode 100644 index 000000000..d837f62ad --- /dev/null +++ b/controllers/spoty.controller.js @@ -0,0 +1,47 @@ +onst 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)) +} \ No newline at end of file diff --git a/package.json b/package.json index c9f4085ba..afa2ec0c1 100644 --- a/package.json +++ b/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" } } diff --git a/public/styles/style.css b/public/styles/style.css index e69de29bb..ef36a2d26 100644 --- a/public/styles/style.css +++ b/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; +} \ No newline at end of file diff --git a/routes/routes.js b/routes/routes.js new file mode 100644 index 000000000..60b1b8ea2 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/views/albums/albumTracks.hbs b/views/albums/albumTracks.hbs new file mode 100644 index 000000000..d565bc5e7 --- /dev/null +++ b/views/albums/albumTracks.hbs @@ -0,0 +1,30 @@ +
+
+
+

Title

+
+
+

Listen

+
+ +
+
+ {{#each tracks}} +
+ {{name}} + Listen on Spotify + {{#if explicit}} + Explicit + {{/if}} +
+
+
+ {{/each}} +
+
+
+

+ Back to search +

+
\ No newline at end of file diff --git a/views/albums/albums.hbs b/views/albums/albums.hbs new file mode 100644 index 000000000..abc977081 --- /dev/null +++ b/views/albums/albums.hbs @@ -0,0 +1,23 @@ +
+

+ Go search +

+

+ Albums

+
+ {{#each albums}} +
+
+ +
+
{{name}}
+ View Traks +
+
+
+ {{/each}} +
+

+ Back to top +

+
\ No newline at end of file diff --git a/views/artists/artist-search-results.hbs b/views/artists/artist-search-results.hbs new file mode 100644 index 000000000..a8e635a5b --- /dev/null +++ b/views/artists/artist-search-results.hbs @@ -0,0 +1,22 @@ +
+

+ Go search +

+

Artist

+
+ {{#each artists}} +
+
+ +
+
{{name}}
+ View Albums +
+
+
+ {{/each}} +
+

+ Back to top +

+
\ No newline at end of file diff --git a/views/index.hbs b/views/index.hbs new file mode 100644 index 000000000..c34671c38 --- /dev/null +++ b/views/index.hbs @@ -0,0 +1,17 @@ +
+
+
+
+ +
+ +
+
+ +
\ No newline at end of file diff --git a/views/layout.hbs b/views/layout.hbs new file mode 100644 index 000000000..9c6916777 --- /dev/null +++ b/views/layout.hbs @@ -0,0 +1,16 @@ + + + + + + + Spotify API + + + + + {{{body}}} + + + + \ No newline at end of file