/music-api

MUSIC-API/ using sql-sequalize/GOOD WEBPACK & PACKAGE JSON EXAMPLE / POSTICO/ POSTGRES

Primary LanguageJavaScript

Music API

Your goal is to build a music API using youtube links. Your API should have the below endpoints and simple user interface:

Setup:

  • fork and clone this repo
  • download Postico or pgAdmin if you haven't already
  • make sure Postgres.app is open and running in the background
  • use either Postico or pgAdmin to create a new database called 'music-db'
  • run npm install from your terminal (make sure you cd into the correct directory first)
  • in the db.js file, there's a string that's being passed in as an argument to Sequelize. In that string, change 'natemaddrey' to your username (the exact username you use for your computer)
  • run node seed.js from your terminal to setup the database
  • start the app by running npm start (see the package.json file for the exact 'start' script)
  • test the app using Postman

API Endpoints:

Edit the server.js file to create an api with the following endpoints:

  1. /api/songs GET all songs
  2. /api/songs/id/:id GET specific song by id
  1. /api/songs/name/:name GET specific song by name
  2. /api/songs/sort/by-date GET all songs and order by date created
  1. api/songs/sort/a-z GET all songs sorted alphabetically by title
  2. api/songs/count GET the count of the number of songs in the database
  1. api/songs/first-five GET the first five songs, ordered by date created. You should return exactly five songs.
  1. /api/artists GET all artists
  2. /api/artists/sort/a-z GET all artists sorted alphabetically
  3. /api/artists/id/:id GET specific artist by id
  4. /api/artists/name/:name GET specific artist by name
  5. /api/artists/no-jungle GET all artists except for 'Jungle'
  1. /api/songs-with-artists GET all songs with artist fully populated (in other words, the full artist information should be displayed, including artist name and id)
  1. go back and refactor all of your previous endpoints to include the full artist info
  2. /api/artists/frank-or-chromeo GET all songs where the artist is either 'Frank Ocean' OR 'Chromeo'
  1. /api/artists POST (aka create) a new artist
  1. /api/artists/:id DELETE an artist
  1. /api/artists/:id PUT (update) an artist
  1. /api/songs POST a new song. The song should have an id for its artist as the 'artistId' field. In other words, if I created I have a 'Frank Ocean' entry in my 'artists' table that has an id of '1', a new Frank Ocean song would look like {title: 'Sweet Life', artistId: 1}. You should use findOrCreateto either find or create the artist, then use the id from that artist when you're creating your song:

User Interface:

  1. Edit the script tag in the 'all-artists.html' page (in the 'views' folder) to do the following: When you go to 'localhost:8888/view/all-artists' in your browser (the route is already set up for you in the server.js file), the page should display all the artists in your database as a list. You should only edit the script tag (and not the actual HTML). You can use either native DOM methods or jQuery.
  2. Edit the script tag in the 'all-songs.html' page (in the 'views' folder) to do the following: When you go to 'localhost:8888/view/all-songs' in your browser (the route is already set up for you in the server.js file), the page should display all the songs in your database as a list. The list should show artist, title, and youtube link (for example, Frank Ocean - Pyramids YouTube Link). You should only edit the script tag (and not the actual HTML). You can use either native DOM methods or jQuery.
  3. Edit the script tag in the 'artists-search.html' page (in the 'views' folder) to do the following: When you go to 'localhost:8888/view/artists-search' in your browser (the route is already set up for you in the server.js file) and type something into the input box and hit enter, you should get all the songs by the artist that you typed into the input box, and display the songs in a list on the page. For example, if you type 'Frank Ocean' into the input box and hit enter, you should see a list of all of Frank Ocean's songs as a result. Your list should include both title and artist. You should only edit the script tag (and not the actual HTML). You can use either native DOM methods or jQuery.
  4. Edit the script tag in the 'youtube-search.html' page (in the 'views' folder) to do the following: When you go to 'localhost:8888/view/youtube-search' in your browser and you type something into the input box and hit enter, you should make an AJAX request to the YouTube API to search for video titles that match the input text. Display the search results on your page. You just need to display the title, not the actual video.
  1. add a '+' button to your list of youtube search results (in other words, each youtube video title in the search results should have a '+' button next to it). When you click the '+' button that specific song should be added to your database as a new song.

Bonuses:

  • on the 'all-songs' page embed the youtube videos along with the search results (in other words, instead of just the link, embed the entire video)
  • refactor your API to use express router