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, focusing on testing, client-side authentication, hosting web apps, and PUT and DELETE requests.
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 animal data array, update the data, and delete data, and watch the fun happen!
Follow these steps to set up and work on your project:
- Create a forked copy of this project.
- Clone your OWN version of Repo
- Create a new Branch on the clone: git checkout -b
<firstName-lastName>
. - Implement the project on this Branch, committing changes regularly.
- Push commits: git push origin
<firstName-lastName>
. - RUN
npm install
at the root to retrieve all the dependencies for the node server. You will not need to create any react apps here nor will you need to install any other dependencies. You should have all you need in this repo. - LOOK at all the files you've been given for this project. One important file to note is
server.js
. This file contains an API that you are going to be interfacing with. Below is documentation on how to interact with the API. - RUN
npm start
to get your API up and running onhttp://localhost:5000
. This is the URL you're going to need to use within your React app in order to make AJAX requests for data. - LOOK at your
animal
directory and notice it's just a plain ol' React App that we've built usingcreate-react-app
. - cd into
animal
and runnpm install
to retrieve the client side dependencies. - RUN
npm start
to fire up your React application.
The MVP of this project will be broken up between 3 stages. Follow each step.
Build a login form to authenticate your users.
- Construct an AXIOS request to retrieve a token from the server after users log in. You'll use this token to interact with the API and access protected/private routes.
- Save the token to localStorage.
- Build a
axiosAuth
module to create an instance of axios with the authentication header. - Build a
PrivateRoute
component and use it to protect the routes that render theAnimalDashboard
component andAddAnimal
component.
- When
AnimalDashboard.js
renders, make a GET request to fetch the data for your animals. - In
AddAnimal.js
, finish setting up the useState, handleChanges, and handleSubmit functions to make a POST request to create a new animal. Hint: Because species lives as a key-value pair inside the classification object, you won't be able to use the handleChanges function on the onChange input field for species. - In
AnimalForm.js
, complete thesaveUpdate
anddeleteAnimal
functions to make AJAX requests to the API to edit/delete data - Watch and enjoy as your app responds to updates in the data. Pay special attention to how
AnimalDashboard.js
,AddAnimal.js
,AnimalForm.js
, andAnimalList.js
, all interact to make full CRUD functionality possible
- Write a test using the rerender function after your props have been updated in one of your components.
- Write a test that mocks an asynchronous function in your app and checks for the data being rendered.
- Add more styling to the app using a styling/component library.
- Add images to each of the animals.
- [POST] * to
/api/login
: returns a token to be added to the header of all other requests. Pass in the following credentials as thebody
of the request:{ username: 'test', password: 'test' }
- [GET] to
/api/animals
: returns the list of animals. - [POST] to
/api/animals
: creates a new animal object. Pass the animal as thebody
of the request (the second argument passed toaxios.post
). - [PUT] to
/api/animals/:id
: updates the animal using theid
passed as part of the URL. Send the animal object with the updated information as thebody
of the request (the second argument passed toaxios.put
). - [DELETE] to
/api/animals/:id
: removes the animal using theid
passed as part of the URL.