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

Habilidades: AJAX, React.js, CSS

Veja mais: pet store logo designs, store inventory excel sheet, pet store templates, pet store design, sample picture store inventory, program hardware store inventory, hardware store inventory, logo design pet store, fabric store inventory weight yardage count, pet store website, medical store inventory system, medical store inventory system vbnet, gun store inventory, flash banners pet store, open source hardware store inventory linux, store inventory system using vbnet

Acerca do Empregador:
( 2 comentários ) Hamilton, Canada

ID do Projeto: #28283467

Concedido a:


Hello! Nice talking with you! The site design that you request is quite simple and I can get it done for you within one day. I've seen the backend file attached to this project and the CRUD operations seem fine. So, Mais

$20 CAD em 1 dia
(2 Comentários)

10 freelancers estão ofertando em média $31 nesse trabalho


Hello. I'm an expert of this field. Especially I have good skills in Js and React.js If you give me a chance, I will do my best for you. Thanks. Rustam.

$20 CAD in 3 dias
(1 Comentário)

Hi. This is a senior React developer who has more than 5 years of experience in React development. For over 5 years, I have developed many sites using React.js. I have strong knowledge of React routing, React redux, st Mais

$30 CAD em 1 dia
(1 Comentário)

MERN stack developer and currently doing mentorship at MERN webapps. In your project you have just to consume provided Node application. So it's a standart simple SPA in React. I write good and performant code and expl Mais

$100 CAD in 3 dias
(1 Comentário)

Hello there, as i read your project details "pet store inventory" , i will try to give you the best design. I am a freelancer working with many clients all over the world having 8 years of experience in CSS, React.js Mais

$28 CAD em 1 dia
(0 Comentários)

Hi, there I have checked your project details very carefully. I am 100% sure to complete this project perfectly as your requirements. I have rich experiences dealing with React.js. I can get started my coding work rig Mais

$20 CAD em 1 dia
(0 Comentários)

My name is Katerina and I am a full stack developer. You can see my work here: [login to view URL] First of all, I would love to collaborate on this project because my previous work experience was in working at a Mais

$20 CAD in 7 dias
(0 Comentários)

Hi Dear, I had gone throw your requirement detail it's pretty good. We can provide you like same things you wants in your online pet store. Let's connect here.....waiting for your quick response... Thanks & regards, Mais

$20 CAD in 3 dias
(0 Comentários)

Hello there, I am new here!! And looking opportunity to work as freelancer. I have 3 years experience in node and react.js

$30 CAD in 5 dias
(0 Comentários)

Hello, can take this by 20$.Work with ajax or fetch, understand new features of ES8 and ES9(experimental) know as well React.js, React [login to view URL] do your propose about 2-3 days with great styles and [login to view URL] i a Mais

$20 CAD in 3 dias
(0 Comentários)