Initial commit

.circleci/config.yml

@@ -0,0 +1,76 @@
+version: 2.1
+
+orbs:
+  cypress: cypress-io/cypress@1.28.0
+
+executors:
+  node-pg-executor:
+    docker:
+      - image: cimg/node:15.11.0
+        environment:
+          PORT: 3345
+          PG_USER: postgres
+          PG_HOST: localhost
+          PG_PORT: 5432
+          PG_DATABASE: tuner
+          TEST_DATABASE_URL: postgresql://postgres@localhost/tuner
+      - image: circleci/postgres:9.6.2-alpine
+        environment:
+          POSTGRES_DB: tuner
+          POSTGRES_USER: postgres
+
+commands:
+  backend_initialization:
+    description: Setup database and run server
+    steps:
+      - checkout
+      - run:
+          name: Install backend deps
+          command: cd ./back-end && npm install
+      # Install dockerize
+      - run:
+          name: install dockerize
+          command: wget https://github.com/jwilder/dockerize/releases/download/$DOCKERIZE_VERSION/dockerize-linux-amd64-$DOCKERIZE_VERSION.tar.gz && sudo tar -C /usr/local/bin -xzvf dockerize-linux-amd64-$DOCKERIZE_VERSION.tar.gz && rm dockerize-linux-amd64-$DOCKERIZE_VERSION.tar.gz
+          environment:
+            DOCKERIZE_VERSION: v0.3.0
+      # Wait for Postgres connection to open.
+      - run: dockerize -wait tcp://$PG_HOST:$PG_PORT -timeout 1m
+      # Install psql client
+      - run: sudo apt-get update
+      - run: sudo apt-get install postgresql-client
+      # Create schema and seed the database
+      - run: psql -d $TEST_DATABASE_URL -f ./back-end/db/schema.sql
+      - run: psql -d $TEST_DATABASE_URL -f ./back-end/db/seed.sql
+      - run:
+          name: Start server
+          command: node ./back-end/server.js
+          background: true
+      # Wait for server
+      - run: dockerize -wait http://localhost:3345 -timeout 1m
+
+jobs:
+  build_and_test_backend:
+    executor: node-pg-executor
+    working_directory: ~/repo
+    steps:
+      - checkout
+      - backend_initialization
+      - run:
+          command: cd back-end && npm test
+          name: Test backend
+
+workflows:
+  build_and_test:
+    jobs:
+      - build_and_test_backend
+      - cypress/run:
+          executor: node-pg-executor
+          working_directory: front-end
+          cache-key: cache-v2-{{ arch }}-{{ .Branch }}-{{ checksum "front-end/package.json" }}
+          start: PORT=3000 npm start
+          wait-on: http://localhost:3000
+          pre-steps:
+            - backend_initialization
+            - run: sudo apt-get install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
+            # the last line ^^ is for cypress:
+            # https://docs.cypress.io/guides/continuous-integration/introduction#Dependencies

.github/pull_request_template.md

@@ -0,0 +1,43 @@
+# How did this assignment go?
+
+## Completion 1 -5
+
+My self-assessed completion score is \_\_\_\_
+
+5: I did everything required and attempted at least one bonus
+
+4: I attempted all parts of the lab and completed most/all of the required parts of the assignment
+
+3: I was able to attempt most parts of the lab and got some of the required parts done
+
+2: I was only able to make a little progress
+
+1: I got completely stuck and/or did not have enough time to work on this assignment
+
+## Comfort 1- 5
+
+My self-assessed comfort score is \_\_\_\_
+
+5: This assignment was a breeze! I want more challenges
+
+4: This assignment was a bit challenging but I learned a lot
+
+3: There were some required parts of this assignment that were too hard for me to complete
+
+2: I really struggled to understand what to do for this assignment, but I think I still made some progress
+
+1: I feel completely lost and I was not able to further my understanding
+
+## Wins
+
+Please list any wins:
+
+## Struggles
+
+Please list any specific struggles
+
+## Other comments
+
+Please add any other things you'd like us to know about this assignment
+
+quicktest

README-FE.md

@@ -0,0 +1,102 @@
+# Tuner Front-End
+
+## Getting Started
+
+- keep the back-end running, open a new tab and navigate out of the back-end repository
+- `npx create-react-app@5 tuner-front-end`
+
+> _Note_: Remember to `git add`, `git commit` and `git push` regularly
+
+Using the [Tuner API that you built](https://github.com/joinpursuit/tuner-api/blob/main/README.md), you are going to create a frontend-only app.
+
+Don't forget to keep your back-end API running during this build.
+
+#### Nav Bar
+
+At the top of your app you should have a navigation bar.
+
+- It displays a links to the route (`/songs`) at the top of the page.
+
+Your app should also include the following routes:
+
+<hr />
+
+### `/songs`
+
+- Displays a list of `song.title`, `song.is_favorite`, `song.artist` and `song.time` that are clickable to take the user to **`/songs/:id`** IMPORTANT - be sure it goes to the song's `id` **NOT** the array position. Since we are now using a database you should use the `id`.
+- Has a button that takes users to the `/songs/new` view
+
+<details><summary>Inspiration</summary>
+
+![](./assets/index.png)
+
+</details>
+
+**IMPORTANT**
+
+Your page should
+
+### `/songs/:index`
+
+- Displays the details of each song
+  - name
+  - artist
+  - album
+  - is_favorite
+  - time
+- Displays two buttons
+
+  - <kbd>back</kbd>, takes the user back to the `/songs` view
+  - <kbd>delete</kbd>, deletes the log and takes the user back to the `/songs` view
+
+- button for `edit` - which takes the user to the edit form for this song
+
+<details><summary>Inspiration</summary>
+
+![](./assets/show.png)
+
+</details>
+
+### `/songs/new`
+
+- Displays a form with the following inputs and appropriate labels:
+
+  - name (text)
+  - artist (text)
+  - album (text)
+  - is_favorite (boolean)
+  - time (text)
+
+<details><summary>Inspiration</summary>
+
+![](./assets/new.png)
+
+</details>
+
+## Delete Functionality
+
+Make this functionality available on the show page
+
+## Edit Functionality
+
+Make a link to the edit form on the show page
+
+- Add an edit route `/songs/:id/edit`
+- Add an edit form that is pre-filled with the log to edit
+
+<details><summary>Inspiration</summary>
+
+![](./assets/edit.png)
+
+</details>
+
+### Bonuses
+
+- Style the app
+  - Look into the [holy grail layout](https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/)
+- It's annoying to have to use the edit form in order to update whether a song `is_favorite` or not. Make the star ⭐️ clickable from the Index page to toggle the value (both front and back end)
+- Use react-bootstrap
+- Use react-transition-group to transition between pages [Demo](https://reactrouter.com/web/example/animated-transitions)
+- write your own tests addtional tests for any new features you implement
+- add a 404 page
+- add functionality that when a user presses the delete button a confirmation appears first

README.md

@@ -0,0 +1,135 @@
+# Tuner Full Stack Application
+
+Let's make our own music playlist app!
+
+![](https://media4.giphy.com/media/4T7zBzdeNEtjThYDWn/giphy.gif?cid=790b76114ee03ef7f860492a9083d77f86191a7bf340002c&rid=giphy.gif&ct=g)
+
+## 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 for parts 1, 2 and 3:
+
+|  #  | Action  |    URL     | HTTP Verb |    CRUD    |              Description               |
+| :-: | :-----: | :--------: | :-------: | :--------: | :------------------------------------: |
+|  1  |  Index  |   /songs   |    GET    |  **R**ead  |   Get a list (or index) of all songs   |
+|  2  |  Show   | /songs/:id |    GET    |  **R**ead  | Get an individual view (show one song) |
+|  3  | Create  |   /songs   |   POST    | **C**reate |           Create a new song            |
+|  4  | Destroy | /songs/:id |  DELETE   | **D**elete |             Delete a song              |
+|  5  | Update  | /songs/:id |    PUT    | **U**pdate |             Update a song              |
+
+While there are no unit tests, you should first determine the expected resources and behavior of your app and then 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 React.
+
+If you feel like you are falling behind, reach out to an instructor.
+
+## Part 1
+
+- 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    | **R**ead | 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, required
+- artist: string, required
+- 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
+
+### 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    |  **R**ead  | Get an individual view (show one song) |
+|  3  | **Create** |   /songs   |   POST    | **C**reate |           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
+- Add validation that `name` and `artist` are required and that `is_favorite` is a boolean
+
+### Bonuses
+
+Improve the error handling, so that you can have more helpful error messages for yourself as a dev, and for future users of the app.
+
+Anytime you encounter an error, especially user error, handle it - send back a response code and possibly a helpful message.
+
+## 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   | **D**elete | Delete a song |
+|  5  | **Update**  | /songs/:id |    PUT    | **U**pdate | 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
+- add appropriate validation and error handling
+
+### 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
+
+# [Part 4 is a React App, see other readme for more details](./README-FE.md)
+
+## Part 5
+
+You should build at least one one-to-many resource. Choose one of the following:
+
+- Build a One-to-Many so that `One Playlist has many songs` for both the back and front end
+- Build a One-to-Many so that `One Album has many songs` for both the front end and the back end
+- Build a One-to-Many so that `One Artist has many songs` for both the front end and the back end
+
+### Bonuses
+
+- Build a way to see the Songs on an Album
+- Tidy up the UI/UX so this app is easy to use for anyone
+
+For addtional practice keep building out the app. Learning to work with a more complex app is an important skill.
+
+## SUPER BONUS Part 6
+
+Upgrade the app so that a playlist can have many songs and a song can belong to many playlists
+Add users so that users can have many playlists
+Add the ability for users to like songs (many songs can be liked by users, users can like many songs)