Tawnya wessar

.gitignore

@@ -22,5 +22,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+yarn.lock
 
 .vercel

README.md

@@ -2,89 +2,101 @@
 
 **Read these instructions carefully. Understand exactly what is expected _before_ starting this Sprint Challenge.**
 
-This challenge allows you to practice the concepts and techniques learned over the past sprint and apply them in a concrete project. This sprint explored **advanced web applications**. During this sprint, you studied **React testing, client-side auth, HTTP methods, and Vercel**. 
+This challenge allows you to practice the concepts and techniques learned over the past sprint and apply them in a concrete project. This sprint explored **advanced web applications**. During this sprint, you studied **React testing, client-side auth, HTTP methods, and Vercel**.
 
 In your challenge this week, you will demonstrate your mastery of these skills by creating **a login page** and **basic CRUD application.**
 
-This is an individual assessment. All work must be your own. Your challenge score is a measure of your ability to work independently using the material covered through this sprint. You need to demonstrate proficiency in the concepts and objectives introduced and practiced in preceding days.
-
-You are not allowed to collaborate during the sprint challenge. However, you are encouraged to follow the twenty-minute rule and seek support from your TL if you need direction. 
-
-_You have **three hours** to complete this challenge. Plan your time accordingly._
+This is an individual assessment. All work must be your own. All projects will be submitted to codegrade for automated review. You will also be given feedback by code reviewers the Monday after challenge submissions. For more information on the review process [click here.](https://www.notion.so/lambdaschool/How-to-View-Feedback-in-CodeGrade-c5147cee220c4044a25de28bcb6bb54a)
 
+You are not allowed to collaborate during the sprint challenge. However, you are encouraged to follow the twenty-minute rule and seek support by dropping a :wave: in your help channel when needed.
 
 ## Introduction
 
 In this project you will create a login page and request a token from the server that you'll use to send all other requests to the server. You will then be able to fetch the color data array, update data, and delete data, and watch the fun happen!
 
-**Note** You can use the sites like the following to get color hex codes:
-
-* [Color-Hex](https://www.color-hex.com/)
-
-### Commits
-
-Commit your code regularly and meaningfully. This helps both you (in case you ever need to return to old code for any number of reasons) and your team lead as the evaluate your solution.
-
 ## Instructions
 
-### Task 1: Project Set Up
+### Task 1: Project Setup
 
-- [ ] Create a forked copy of this project
-- [ ] Clone your OWN version of the repository (Not Lambda's by mistake!)
-- [ ] Create a new branch: git checkout -b `<firstName-lastName>`.
-- [ ] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly
-- [ ] Push commits: git push origin `<firstName-lastName>`
- - [ ] **LOOK** at the files in your root directory and notice it' is just a plain ol' React App that we've built using create-react-app.
- - [ ] **RUN** npm install install your dependences
- - [ ] **RUN** npm start to fire up your React application.
+* [x] Fork and clone this repository.
+* [x] Create a new branch with the 
+- [x] Create a new branch: git checkout -b `<firstName-lastName>`.
+- [x] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
+- [x] Push commits: git push origin `<firstName-lastName>`.
+* [x] **RUN** `npm install` to install your dependencies.
+* [x] **RUN** `npm start` to start your application.
 
- **Setting up the CodeGrade webhook**
-Go [here](./CodeGrade-webhook.md) to setup the CodeGrade webhook before you begin.
+### Task 2: CodeGrade Setup
 
+* [x] Open the assignment in Canvas and click on the "Set up git" option.
+* [x] Follow instructions to set up Codegrade's Webhook and Deploy Key, making sure your deployment is set to your `<firstName-lastName>`.
+* [x] Push your first commit: `git commit --allow-empty -m "first commit" && git push`
+* [x] Check to see that Codegrade has accepted your git submission.
 
-### Task 2: Project Requirements
-Your finished project must include all of the following requirements.
+### Task 3: Project Requirements
 
-#### Stage 1 - Authentication
-Build a login form to authenticate your users.
+Your finished project must include all of the following requirements. **Unlike other projects, the local server used here can not be accessed through the browser. It is started automatically and without the need for starting a server.js file. Feel free to ignore any messages related to MSW or mock service workers. For this and the rest of your sprint challenges, test the functioning of the server directly through your http calls.**
 
-- [ ] Construct an AXIOS request to retrieve a token from the server. You'll use this token to interact with the API
-- [ ] Save the token to localStorage
-- [ ] Build a `axiosWithAuth` module to create an instance of axios with the authentication header
-- [ ] Build a `PrivateRoute` component and use it to protect a route that renders the `BubblesPage` component
+**See reference materials at the bottom of the this document for details on use the API.**
 
-#### Stage 2 - Consuming the API
+#### Authentication
+> *Build a login form to authenticate your users along with all the components and utilities needed to support authentication.*
 
-- [ ] When `BubblePages` renders, make a GET request to fetch the color data for your bubbles.
-- [ ] In `ColorList.js`, complete the `saveEdit` and `deleteColor` functions to make AJAX requests to the API to edit/delete data
-- [ ] Watch and enjoy as your app responds to updates in the data. Check out `Bubbles.js` to see how this is built.
+* [x] In `Login.js`, build all UI and state functionality needed to capture a username and password.
+* [x] **Make sure that the input for your username and password includes the id="username" and id="password" attributes. Also make sure the submit button for this form contains the id="error" attribute. Codegrade autotests will fail without them.**
+* [x] Build in functionality that would allow an error to be displayed in the provided p tag if either the username or password is incorrect.
+* [x] **Make sure your error p tag has an id="error" attribute attached. Codegrade autotests will fail without them.**
+* [x] Construct an http request that retrieves an auth token from the server when the username `Lambda` and the password `School` is passed into the request.
+* [x] Save the token to localStorage.
+* [x] Build a `axiosWithAuth` module within the helpers folder to create an instance of axios with the authentication header.
+* [x] Build a `PrivateRoute` component within the components folder and use it to protect the route that renders the `BubblesPage` component.
+* [ ] In `App.js`, build the backend to the logout button. When pressed, send an http request to the logout endpoint and remove the authentication token from localStorage. Use window.location.href to redirect to the login page.
 
-#### API Documentation
-
-  * **[POST]** * to `http://localhost:5000/api/login`: returns a token to be added to the header of all other requests. Pass in the following credentials as the `body` of the request: `{ username: 'Lambda School', password: 'i<3Lambd4' }`
-  * **[GET]** to `http://localhost:5000/api/colors`: returns the list of colors and their hex codes.
-  * **[POST]** to `http://localhost:5000/api/colors`: creates a new color object. Pass the color as the `body` of the request (the second argument passed to `axios.post`).
-  * **[PUT]** to `http://localhost:5000/api/colors/:id`: updates the color using the `id` passed as part of the URL. Send the color object with the updated information as the `body` of the request (the second argument passed to `axios.put`).
-  * **[DELETE]** to `http://localhost:5000/api/colors/123`: removes the color using the `id` passed as part of the URL (123 in example).
+#### Consuming the API
+> *Add in the http requests and state changes needed to connect our api to the web application. Consider the effect of authentication on your api requests.*
 
-#### Stage 3 Testing
-- [ ] Finish the test in `BubblePage.test.js` to test that your app is fetching the bubble data from the API
+* [x] In `services/fetchColorServices.js`, build out fetchColorService function to make a GET request to fetch the color data for your bubbles.
+* [x] When `BubblePages` mounts, call fetchColorServices and save it's result in state.
+* [x] In `BubblePage.js`, complete `saveEdit`, and `deleteColor` functions to make API requests for to editing and delete data.
+* [x] Watch and enjoy as your app responds to updates in the data. Check out `Bubbles.js` to see how this is built.
 
-In your solution, it is essential that you follow best practices and produce clean and professional results. You will be scored on your adherence to proper code style and good organization. Schedule time to review, refine, and assess your work and perform basic professional polishing including spell-checking and grammar-checking on your work. It is better to submit a challenge that meets MVP than one that attempts too much and does not.
+#### Testing
+* [x] Finish the test in `Color.test.js`, `ColorList.test.js`, `BubblePage.test.js`. You will need to use rerendering, function mocking and spies in order to complete.
 
-### Task 3: Stretch Goals 
+**Notes:**
+* You are welcome to create additional files but **do not move or rename existing files** or folders.
+* Do not change your `package.json` file except to install additional libraries.
+* In your solution, it is essential that you follow best practices and produce clean and professional results.
+* Schedule time to review, refine, and assess your work and perform basic professional polishing including spell-checking and grammar-checking on your work.
+* It is better to submit a challenge that meets MVP than one that attempts too much and does not.
 
-After finishing your required elements, you can push your work further. These goals may or may not be things you have learned in this module but they build on the material you just studied. Time allowing, stretch your limits and see if you can deliver on the following optional goals:
+### Reference Materials
 
-* [ ] Build out another form to add a new color to your color list
-* [ ] Build a custom hook called `useApi` that you can use to make all of your API calls
-* [ ] Add more tests to give you further confidence in the code you're shipping
+#### API Documentation
+* **[POST]** * to `http://localhost:5000/api/login`: returns a token to be added to the header of all other requests. Pass in the following credentials as the `body` of the request: `{ username: 'Lambda', password: 'School' }`
+* **[POST]** * to `http://localhost:5000/api/logout`: returns a token to be added to the header of all other requests.
+* **[GET]** to `http://localhost:5000/api/colors`: returns the list of colors and their hex codes. This endpoint canYeah only be accessed by an autheticated user.
+* **[POST]** to `http://localhost:5000/api/colors`: creates a new color object. Pass the color as the `body` of the request (the second argument passed to `axios.post`). This endpoint can only be accessed by an autheticated user.
+* **[PUT]** to `http://localhost:5000/api/colors/:id`: updates the color using the `id` passed as part of the URL. Send the color object with the updated information as the `body` of the request (the second argument passed to `axios.put`). This endpoint can only be accessed by an authenticated user.
+* **[DELETE]** to `http://localhost:5000/api/colors/123`: removes the color using the `id` passed as part of the URL (123 in example). This endpoint can only be accessed by an autheticated user.
+
+#### Hex Color Examples
+**Note** You can use the sites like the following to get color hex codes:
+* [Color-Hex](https://www.color-hex.com/)
 
 ## Submission format
 
-Follow these steps for completing your project.
+* [x] Submit via Codegrade by committing and pushing any new changes.
+* [x] Submit a pull-request to merge <firstName-lastName> branch into main. **Please don't merge your own pull request and make sure you are on your own repo**
+* [x] Check codegrade for automated feedback.
+* [x] Check codegrade on Monday following the Sprint Challenge for reviewer feedback.
+* [x] Any changes pushed to your <firstName-lastName> branch will resubmitted to codegrade if pushed before the sprint challenge deadline. Changes after the deadline will not be reviewed.
+
+## Interview Questions
+
+Be prepared to demonstrate your understanding of this week's concepts by answering questions on the following topics. Add your answers to the questions within `interview_answers.md` file. These will not be counted as a part of your sprint score but will be helpful for preparing you for your endorsement interview, and enhancing overall understanding.
 
-- [ ] Ensure that your projects are complete on your <firstName-lastName> branch.
-- [ ] Merge your <firstName-lastName> branch into your main branch.
-- [ ] Push your main branch to github and check that it is registers within codegrade.
-- [ ] Check your personal feedback the following Monday. For more information check [here](https://www.notion.so/lambdaschool/How-to-View-Feedback-in-CodeGrade-Student-facing-c5147cee220c4044a25de28bcb6bb54a)
+1. Explain what a token is used for.
+2. What steps can you take in your web apps to keep your data secure?
+3. Describe how web servers work.
+4. Which HTTP methods can be mapped to the CRUD acronym that we use when interfacing with APIs/Servers.

interview_answers.md

@@ -0,0 +1,18 @@
+# Interview Answers
+Be prepared to demonstrate your understanding of this week's concepts by answering questions on the following topics. These will not be counted as a part of your sprint score but will be helpful for preparing you for your endorsement interview, and enhancing overall understanding.
+
+
+1. Explain what a token is used for.
+- A token is the response sent back from a server after a successful auth request. It is transferred in the form of a JSON string to ensure universal communication between coding languages. The token can be stored locally or via a secure cookie to maintain authorization on the client side without the user needing to re-enter their login credentials.
+
+2. What steps can you take in your web apps to keep your data secure?
+- Utilizing secure cookies would be one way to ensure token security. I will be studying more on the HttpOnly flag and how to set a token within a cookie.
+
+3. Describe how web servers work.
+- Web servers are able to assign a specific DNS record to a specific URL. 
+
+4. Which HTTP methods can be mapped to the CRUD acronym that we use when interfacing with APIs/Servers.
+-PUT (update)
+-POST (create)
+-GET (read)
+-DELETE (delete)