React work
Budget: $10 – $30 CAD
A complete project that is already done. Require to create again in a different name. The purpose of this assignment is to:
• Build an Express Rest API
• Build a React front-end that utilizes an Express REST API
• Perform CRUD operations
1) Express App with MongoDB
Create an Express Rest API which exposes CRUD functionalities for managing Students. Create a student model that describes student information (student number, first name, last name, address, city, phone number, email, program). The information should be stored in a MongoDB database.
2) React App
• Create a React front end that allows users to search, add, edit or delete the student records. React app must use the express api that you have developed.
• You must use routes to achieve these requirements.
• There must be a home page where all students are listed and against each students, you must have edit, delete buttons. Home page must also have ‘add student’ button and a find button with input text box to find a student based on ID.
• When delete button is clicked – app should display a popup model asking ‘You are about to delete a student record. Are you sure?’. When clicks on ‘confirm’ in popup model, react app must send a http delete request to the express api.
Apply MVC principles for the Express API. Use functional components, composition, and React Hooks for the React front-end. Design a nice and friendly UI.
• Build an Express Rest API
• Build a React front-end that utilizes an Express REST API
• Perform CRUD operations
1) Express App with MongoDB
Create an Express Rest API which exposes CRUD functionalities for managing Students. Create a student model that describes student information (student number, first name, last name, address, city, phone number, email, program). The information should be stored in a MongoDB database.
2) React App
• Create a React front end that allows users to search, add, edit or delete the student records. React app must use the express api that you have developed.
• You must use routes to achieve these requirements.
• There must be a home page where all students are listed and against each students, you must have edit, delete buttons. Home page must also have ‘add student’ button and a find button with input text box to find a student based on ID.
• When delete button is clicked – app should display a popup model asking ‘You are about to delete a student record. Are you sure?’. When clicks on ‘confirm’ in popup model, react app must send a http delete request to the express api.
Apply MVC principles for the Express API. Use functional components, composition, and React Hooks for the React front-end. Design a nice and friendly UI.