diff --git a/app.js b/app.js index 6612cd5..e4650f5 100644 --- a/app.js +++ b/app.js @@ -1,12 +1,23 @@ require('dotenv').config(); + +const { response } = require('express'); const express = require('express'); const hbs = require('hbs'); +const router = express.Router(); // require spotify-web-api-node package here: - +const SpotifyWebApi = require('spotify-web-api-node'); // then invoke the spotify API here with CLIENT keys +const spotifyApi = new SpotifyWebApi({ + clientId: process.env.CLIENT_ID, + clientSecret: process.env.CLIENT_SECRET +}); + +spotifyApi.clientCredentialsGrant() + .then(data => spotifyApi.setAccessToken(data.body['access_token'])) + .catch(error => console.log('Something went wrong when retrieving an access token', error)); const app = express(); @@ -16,6 +27,51 @@ app.use(express.static(__dirname + '/public')); // setting the spotify-api goes here: + // Our routes go here: +/* GET home page */ +app.get("/", (req, res) => { + res.render("index.hbs") +}); + +app.get("/artist-search",(req,res,next)=> { + let {artist} = req.query + console.log(artist) + spotifyApi.searchArtists(artist) + .then((data) => { + let artists = data.body.artists.items + res.render('results.hbs', {artists}) + }).catch((err) => { + console.log('Failed',err) + }); +}) + +app.get('/albums/:id', (req, res, next) => { + // .getArtistAlbums() code goes here + const {id} = req.params + spotifyApi.getArtistAlbums(id) + .then((result) => { + let albums = result.body.items + res.render('albums.hbs', {albums}) + }).catch((err) => { + console.log(err) + }); + +}); + +app.get('/tracks/:id', (req, res, next) => { + const id = req.params.id + + spotifyApi.getAlbumTracks(id) + .then((result) => { + let tracks = result.body.items + res.render('tracks.hbs', {tracks}) + }).catch((err) => { + console.log(err) + }); + +}); + + app.listen(3000, () => console.log('My Spotify project running on port 3000 🎧 🥁 🎸 🔊')); diff --git a/package.json b/package.json index c9f4085..f071cda 100644 --- a/package.json +++ b/package.json @@ -12,5 +12,11 @@ "license": "ISC", "devDependencies": { "nodemon": "^2.0.2" + }, + "dependencies": { + "dotenv": "^16.0.3", + "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 index e69de29..9dcc9c3 100644 --- a/public/styles/style.css +++ b/public/styles/style.css @@ -0,0 +1,22 @@ +body { + padding: 50px; + font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; + } + + img { + height: 200px; + + } + a { + color: #00B7FF; + } + + .container { + display: flex; + flex-wrap: wrap; + margin: 10px; + } + + .card { + padding: 20px + } \ No newline at end of file diff --git a/views/albums.hbs b/views/albums.hbs new file mode 100644 index 0000000..a0eb469 --- /dev/null +++ b/views/albums.hbs @@ -0,0 +1,16 @@ + + Go Back +

+ +
+{{#each albums}} +
+ ... +
+
{{name}}
+ View Tracks +
+
+{{/each}} +
+ diff --git a/views/index.hbs b/views/index.hbs new file mode 100644 index 0000000..d971010 --- /dev/null +++ b/views/index.hbs @@ -0,0 +1,8 @@ +

Spotify Express

+
+
+ + +
+ +
\ No newline at end of file diff --git a/views/layout.hbs b/views/layout.hbs index 12d9bd1..23b1ded 100644 --- a/views/layout.hbs +++ b/views/layout.hbs @@ -4,7 +4,13 @@ - Document + Spotify + + + + + + {{{body}}} diff --git a/views/results.hbs b/views/results.hbs new file mode 100644 index 0000000..71ea655 --- /dev/null +++ b/views/results.hbs @@ -0,0 +1,16 @@ + + Go Back +

+ +
+{{#each artists}} +
+ ... +
+
{{name}}
+ View Album +
+
+{{/each}} +
+ diff --git a/views/tracks.hbs b/views/tracks.hbs new file mode 100644 index 0000000..96b4a44 --- /dev/null +++ b/views/tracks.hbs @@ -0,0 +1,34 @@ + + + +{{!--
+{{#each tracks}} +
+ // ... +
+
{{name}}
+ View Tracks +
+
+{{/each}} +
--}} + + + +{{#each tracks}} + + + + + +{{/each}} +
{{images.2.url}}{{name}} +
+
Listen to the T-Rex:
+ +
+