git clonethe repo- cd into the cloned repo
- run
npm install - run
npm start. The server should be running locally on port 3001 - This is a local server. You will need to have it running in order to make calls to it. - Navigate to the endpoint you're trying to request in the browser (ie if you want to GET users, navigate to http://localhost:3001/api/v1/animals in the browser).
In the client directory, there are some files we can use as a makeshift client.
- run
open client/index.htmlfrom your command line - Modify the code in
client/index.jsto practice error handling!
- Play around with the UI. Add new animals.
- When you successfully add a new animal, it will display on the FE UI and will also show if you refresh the backend endpoint (have this open in another browser tab)
- Try adding animals without putting information in all three inputs, what happens?
- Use your debugging skills to dig into the code and better understand what is happening here.
- There is no live reloading on this repo so you will have to refresh your browser any time you make changes to the js.
- Handle the 422 error that comes back when the form is submitted with an empty field(s), and display an informative message to the user.
- How can you prevent the user from submitting the form with an empty field to begin with. Update the form to accomplish that.
- Handle the use case where something is wrong with the server. Display an informative message to the user. (You can easily test this by shutting down the api server)
Finish early? Do the same thing for one of the other resources. ie. users or sports teams.
The following endpoints are documented below:
- GET all users
- POST a new user (you can verify this worked with another GET request)
- GET all animals
- POST a new animal
- GET all sports teams
- POST a new sports team
| url | verb | options | sample response |
|---|---|---|---|
http://localhost:3001/api/v1/users |
GET | not needed | Array of all existing users: [{ id: 1, name: 'Travis Rollins', status: 'online', interests: 'Music, Software, & Gaming' }] |
https://fe2-fetch-practice.herokuapp.com/api/v1/users |
GET | not needed | Array of all existing users: [{ id: 1, name: 'Travis Rollins', status: 'online', interests: 'Music, Software, & Gaming' }] |
http://localhost:3001/api/v1/users |
POST | { id: <Number>, name: <String>, status: <String>, interests: <String> } |
New user: { id: 1, name: 'Leta', status: 'online', interests: 'Science, Music, & Classic Films' } |
https://fe2-fetch-practice.herokuapp.com/api/v1/users |
POST | { id: <Number>, name: <String>, status: <String>, interests: <String> } |
New user: { id: 1, name: 'Leta', status: 'online', interests: 'Science, Music, & Classic Films' } |
| url | verb | options | sample response |
|---|---|---|---|
http://localhost:3001/api/v1/animals |
GET | not needed | Array of all existing animals: [{ id: 3, name: 'orcas', diet: 'birds, squid, octopuses, sea turtles, sharks, rays & fish', fun_fact: 'Orcas, also known as killer whales, are known to prey on other marine mammals, including dolphins and seals.' }] |
https://fe2-fetch-practice.herokuapp.com/api/v1/animals |
GET | not needed | Array of all existing animals: [{ id: 3, name: 'orcas', diet: 'birds, squid, octopuses, sea turtles, sharks, rays & fish', fun_fact: 'Orcas, also known as killer whales, are known to prey on other marine mammals, including dolphins and seals.' }] |
http://localhost:3001/api/v1/animals |
POST | { id: <Number>, name: <String>, diet: <String>, fun_fact: <String> } |
New animal: { id: 4, name: 'tigers', diet: 'chital, sambar, gaur & wild board', fun_fact: 'The main food of tigers are buffalos, antelopes, and rodents.' } |
https://fe2-fetch-practice.herokuapp.com/api/v1/animals |
POST | { id: <Number>, name: <String>, diet: <String>, fun_fact: <String> } |
New animal: { id: 4, name: 'tigers', diet: 'chital, sambar, gaur & wild board', fun_fact: 'The main food of tigers are buffalos, antelopes, and rodents.' } |
| url | verb | options | sample response |
|---|---|---|---|
http://localhost:3001/api/v1/sport-teams |
GET | not needed | Array of all existing sport teams: [{ id: 1, name: 'Dallas Cowboys', head_coach: 'Jason Garrett', sport: 'football' }] |
https://fe2-fetch-practice.herokuapp.com/api/v1/sport-teams |
GET | not needed | Array of all existing sport teams: [{ id: 1, name: 'Dallas Cowboys', head_coach: 'Jason Garrett', sport: 'football' }] |
http://localhost:3001/api/v1/sport-teams |
POST | { id: <Number>, name: <String>, head_coach: <String>, sport: <String> } |
New sport team: { id: 2, name: 'New York Yankees', head_coach: 'Aaron Boone', sport: 'baseball' }, |
https://fe2-fetch-practice.herokuapp.com/api/v1/sport-teams |
POST | { id: <Number>, name: <String>, head_coach: <String>, sport: <String> } |
New sport team: { id: 2, name: 'New York Yankees', head_coach: 'Aaron Boone', sport: 'baseball' }, |
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent