Description

Develop the front-end for the MongoDB drugs/meds database we created during a class exercise. You will also need to install axios for your app to send requests and retrieve data from the backend.

Instructions 

1. Create a React App project and name it something like “mern-app”. You should adopt the folder/subfolder structure of the class demos. 

2. You may use Bootstrap (can be imported into your app) for styling as well as leverage React components. 

3. As indicated in the demo HTML, your front-end show a top navigation menu with two links: one called “Home” and the other called “Admin”. The admin link has two drop-down menu items: “Add new” and “Edit/Delete”. 

4. The home page should display all the records in the database when your app starts in a tabular format as indicated in the demo HTML. 

5. Your app should have a search capability on the home page. Given that we do not have a lot of content, instead of displaying search results in a new page, the search capability you should implement is just filtering data “in place”. As shown in the demo HTML, below each field heading is a search box (i.e., a user should be able to filter data either by drug company name, or by drug brand name, or by drug generic name. When a user types a valid entry (i.e., there is a matching record) the data should be filtered to display only what matches what the user typed into any of those search fields.