Week 08 - Day 4 - Finish the Safari

[mdewey]

Finish the Safari

For this assignment, you should take your safari API that was already created, and create a simple react app that consumes that API.

Objectives

• Work with an API that you created

Requirements

• Add Endpoints with more verbs
• Create a React app that consumes an API that you created

Explorer Mode (C#)

• [ ] Add 3 the endpoints to the Safari API

  • [ ] Create a GET /Animal/{location} that returns animals of only that location
  • [ ] Create a PUT /Animal/{id} endpoint that adds 1 to the count of times seen for that animal (given by id)
  • [ ] Create a DELETE /Animal/{id} endpoint that deletes that animal id from the database

• [ ] Create a simple react app, that uses some css make it looks friendly.

• [ ] The react app should:

  • [ ] Display all animals the user has seen
  • [ ] Display all animals seen in the Jungle
  • [ ] Remove all animals that I have seen in the Desert.
  • [ ] Add all the CountOfTimesSeen and get a total number of animals seen
  • [ ] Get the CountOfTimesSeen of lions, tigers and bears

Don't be afraid to add endpoints to make your life easier.

Explorer Mode (Ruby)

IMPORTANT To add a react app we need to update our Rails application a little.

Setup for adding a React app

• [ ] In the Gemfile, uncomment the line containing rack-cors
• [ ] In the terminal, inside your project, run bundle
• [ ] In the file cors.rb change the text origins 'example.com' to origins '*'
• [ ] In the file cors.rb uncomment lines 8 through 16. (Line 8 should say Rails.application.config.middleware.insert_before 0, Rack::Cors do and line 16 should be an end

Assignment

• [ ] Add these features to the Safari API

  • [ ] Create a GET /animals?location={location} that returns animals of only that location
  • [ ] Create a PUT /animals/count/{id} endpoint that adds 1 to the count of times seen for that animal (given by id)

• [ ] Create a simple react app, that uses some CSS make it looks friendly.

• [ ] The react app should:

  • [ ] Display all animals the user has seen
  • [ ] Have a button next to each animal to delete it.
  • [ ] Below the list of all animals, show the total of seen_count
  • [ ] Get the total of seen_count for lions, tigers and bears

Don't be afraid to add endpoints to make your life easier.

Adventure Mode

• [ ] Work on your capstone' front end. This should include, creating the react app, adding react-router and also start thing about the AJAX (axios/fetch) calls your app needs.

[Ahseeah]

https://github.com/Ahseeah/safari

https://github.com/Ahseeah/safari-frontend

[Ahseeah]

https://github.com/Ahseeah/safari-frontend

updated version