pet store inventory

Create a Single Page Application using React, React Router, and AJAX. The application will allow users to view, search and manage a pet store inventory. • Your application should have the following features: Your application should have three pages: Search, Edit, and About. • When users view your application in the browser, going from the top of the page to bottom of the page, o it should have a common header on each page, containing a basic image logo and navigation menu allowing the user to access each page, o followed by a body of content that is unique to each individual page, o followed by a footer section containing copyright information ("Copyright2020"). • The navigation menu and footer section should be styled nicely, at a minimum with a distinctive background colour. The header and footer sections should be identical from one page to the next (except for navigational highlighting). Do not use Twitter Bootstrap, create your own CSS styles (or find some online you like, and cite your source in the comments). • From the perspective of the user, when they click on each navigation bar link, they should be entering a new page of content in the sense that... o The body of the page should change to reflect the content for that page. o The navigation link that they have clicked should be highlighted to reflect which page the user is on. o The browser URL should change to reflect which page the user is on. Use React Router to implement this functionality. • Use the backend code provided below to act as the server for your single page application. Do not modify the backend code, there is no need to modify it. The backend code provided will allow you to retrieve, add, delete, update and search pets in a pet store inventory via AJAX calls. You can use fetch to carry out these AJAX calls, as in the example code also provided below. • The About page should present the user with a short amount of text describing the purpose of the application ("A Pet store management system for...."). The about page should also include an image of some kind. • The Search page should contain an input text box that is initially blank, and a table of the inventory, initially the table should contain all the animals. The table of animals can be sorted however you prefer. Each time users alter the input textbox contents by entering or deleting a character, the table should be filtered to contain only pet records that have some field that contains the search term in the input text box. If the user requests the URL yourappbaseurl/Search/someterm,i.e. the Search page with an added URL parameter, then the Search page should load with someterm in the input text box, and the inventory filtered for someterm. • The Edit page should present the user with a table of all the pets and the ability to: o Delete pets, o Insert new pets with customized values for all fields, o Edit any pet by altering any field value. You can decide how to implement this functionality, but a suggested approach is to have edit and delete links on each table row, and a form for manipulating pet information that can be used for adding or editing pet information as the case may be. Each time the user deletes, inserts or edits a pet, an AJAX call to the backend should take place that carries out the action. However you decide to implement this functionality, it should be very obvious to a non-technical user how it works. Use create-react-app to create your solution. User will start the back end running on port 3001, and then run npm start in your solution folder to test your application in the browser . Check the word file for details on how project should look like