Giter Site home page Giter Site logo

tuner-api's Introduction

Tuner-API

Let's make our own music playlist app!

Multiple Session Lab/Activity

While you will start this lab/activity today, you will have many sessions to build it out.

The different parts should align with what you are learning in lecture.

By the end, your app should have the following functionality

# Action URL HTTP Verb CRUD Description
1 Index /songs GET Read Get a list (or index) of all songs
2 Show /songs/:id GET Read Get an individual view (show one song)
3 Create /songs POST Create Create a new song
4 Destroy /songs/:id DELETE Delete Delete a song
5 Update /songs/:id PUT Update Update a song

There are currently no unit tests. Use Postman to test your app.

If you finish ahead of time you can try the bonus challenges in each section, or start to build a front-end with create-react-app.

If you feel like you are falling behind, reach out to an instructor.

Part 1

  • fork and clone this repo

  • Get a basic express app working

  • Then implement the index route that uses pg-promise to query your db

# Action URL HTTP Verb CRUD Description
1 Index /songs GET Read Get a list (or index) of all songs

Build a schema for Postgres in a schema.sql file with the following columns/data types:

  • name string
  • artist: string
  • album: string
  • time: string
  • is_favorite: boolean

Add a seed.sql file that will insert a few songs into your database

Don't forget to update your environmental variables to that you can connect to your Postgres database.

  • create a route / that says something like Welcome to Tuner
  • create a route /songs that shows the array of songs you've created
  • create a 404 route that when a user tries to access a route that doesn't exist, they will see this page

Note the original /songs route should be unaffected by these additions

Bonus

Typing "psql -U postgres -f db/schema.sql" and "psql -U postgres -f db/seed.sql" is a bit annoying and you probably have to look it up every time.

Research how to upgrade your package.json and add two scripts one called dbinit to run the first command and dbseed to run the second command. Then run them using npm run dbinit and npm run dbseed

Part 2

Do not start Part 2 until your previous routes work as expected. If you are stuck, be sure to ask for help.

# Action URL HTTP Verb CRUD Description
2 Show /songs/:id GET Read Get an individual view (show one song)
3 Create /songs POST Create Create a new song

IMPORTANT Since you now have a database, you should use the id of the songs instead of array positions. Be sure to update your logic to fit.

Ie, if your first song in an array (array index of 0) has an id of 4, /songs/4 should be how you get the show view. NOT /songs/0

  • add routes for create and show
  • add some logic so that if someone goes to an invalid id they will be redirected to the 404 route you had written in the last part

Bonuses

Be sure to set up appropriate error handling, so that you can have more helpful error messages for yourself as a dev, and for future users of the app.

Part 3

Do not start Part 3 until your show and create routes work as expected. If you are stuck, be sure to ask for help.

# Action URL HTTP Verb CRUD Description
4 Destroy /songs/:id DELETE Delete Delete a song
5 Update /songs/:id PUT Update Update a song

IMPORTANT Since you now have a database, you should use the id of the songs instead of array positions. Be sure to update your logic to fit.

Ie, if your first song in an array (array index of 0) has an id of 4, /songs/4 should be how you get the delete route. NOT /songs/0. The same for your `edit route.

  • add routes for delete and update

Bonuses

  • Go back and try any of the previous Bonuses
  • Start building a create-react-app front end

SUPER Bonus

Add functionality where if a user goes to

  • /songs?order=asc it will organize the songs alphabetically
  • /songs?order=desc it will organize the songs in reverse alphabetical order
  • /songs?is_favorite=true it will only show the songs where the value of is_favorite is true
  • /songs?is_favorite=false it will only show the songs where the value of is_favorite is false

tuner-api's People

Contributors

krafalski avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.