Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
zoelud authored Aug 18, 2020
1 parent 4963d5e commit 0580a88
Showing 1 changed file with 28 additions and 10 deletions.
38 changes: 28 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,21 @@ Topics:
* Promises
* Authentication tokens

## Project Description
## Instructions

### Task 1: Set Up

#### Initialize Project

* Run `npm install` inside the root directory of this project to install dependencies for the API server.
* Run `npm start` to start the API server.
* Run `npx create-react-app friends --use-npm` in a separate terminal window in the root directory of the project to create your starter application.
* If you experience issues with `npx`, you may create your starter application by running `create-react-app friends --use-npm`.
* `cd` into the _friends_ folder and type `npm install axios react-router-dom` which will install the needed dependencies.

### Task 2a: MVP

#### Project Description

* There is an API built that has authentication built into it. The API holds a list of friends and lets you add, edit, or remove friends from that list.
* All of the API endpoints (except the login endpoint) are considered "protected", meaning you have to make the request with an authentication token in the header or the API will send back a `401` error.
Expand All @@ -24,15 +38,8 @@ Topics:
* **[PUT]** to `/api/friends/:id`: updates the friend using the `id` passed as part of the URL. Send the an object with the updated information as the `body` of the request (the second argument passed to `axios.put`).
* **[DELETE]** to `/api/friends/123`: removes the friend using the `id` passed as part of the URL (123 in example).

## Initialize Project

* Run `npm install` inside the root directory of this project to install dependencies for the API server.
* Run `npm start` to start the API server.
* Run `npx create-react-app friends --use-npm` in a separate terminal window in the root directory of the project to create your starter application.
* If you experience issues with `npx`, you may create your starter application by running `create-react-app friends --use-npm`.
* `cd` into the _friends_ folder and type `npm install axios react-router-dom` which will install the needed dependencies.

## Build the App!
#### Build the App!
* Add a route for a login page and build out a simple login form with username and password inputs and a submit button (design this however you would like).
* The login function should save the returned token to localStorage. You can setup `isLoading` state in your Login component, and show a spinner on your form or in your button while the login request is happening.
* When the request returns, save the token to `localStorage`, then use the history object in your Login component to navigate your user to your FriendsList route
Expand All @@ -57,8 +64,19 @@ Topics:
* If you'd like, you can create multiple "view" components for your routes. You could have a component who's sole purpose is to render the login form; one for a form for updating a user; another component who's sole purpose is for creating users; and then another component who's sole purpose is to delete a user.
* It really is up to you how you build this project. I suggest writing down the flow you want to follow, and then writing down each individual piece you need for each step in the flow so that this process doesn't feel as overwhelming.

## Stretch Problem
### Task 2b: Exit Ticket

Once you begin, you will have 15 minutes to answer the questions [here](https://app.codesignal.com/public-test/HTCR4wnK3eu6Q94z9/cHkY6rNFiHbPFm).

The completion of these questions is mandatory for MVP. However, passing the quiz doesn't affect your standing as a Lambda School student whatsoever. This is Lambda School testing itself! Please answer honestly and to the best of your ability without using external references.


### Task 3: Stretch Problems

* In the requirements for this project, we implemented a login POST operation, a GET operation, and a "add friend" POST operation. Add two more functions, one for making a PUT request, and the other for making a DELETE request.
* Style the friends list and the input field and make everything look nice.
* Expand the number of properties that you put on each friend object. Feel free to remove the dummy data on the server or modify it in any way.

## Submission Format
* [ ] Submit a Pull-Request to merge `<firstName-lastName>` Branch into `main` (student's Repo). **Please don't merge your own pull request**
* [ ] Fill out your module retrospective form [here](https://forms.lambdaschool.com/module-retrospective) with a link to your PR

0 comments on commit 0580a88

Please sign in to comment.