This activity was taken from a Challenge for practice, the description of it is below.
Create a React app that allows the user to make a supermarket list.
The app has 3 sections:
The item count (0) An "Add Item" button (1) A list of items (2) An item form within a modal (3) When the user clicks (1) it must show a modal (3) with an item form. The item is just a plain string so a text input with a saves and cancel button is enough. "Save" option must control that the input is not empty and add the item to the list and close the modal. "Cancel" just close the modal. Each element of the list (2) display the item text and also has a button with the option "Remove". Clicking that button removes the item from the list. When the list is empty, it should show a "List is empty" message. It's not posible to edit items in this version just add and remove.
It must be a project created with create-react-app. App must run with just npm/yarn start. Use just plain react (no state manager library). Persist items in memory, but prepare the app structure to add server-side communication when needed. (i.e.: You must have an api.js file that exposes functions to get all items, to add an item, and to remove an item. These functions must return promises but internally can just add and remove items from an array in memory or save them in local storage. You can also use the npm package delay to emulate async) Styles Use flexbox and plain CSS preferentially (*). Try to implement the given design as similarly as possible. *This means that can not use a UI library (like bootstrap) for this, but you can use a css preprocessor, css modules or styles-components if you like. Although we recommend to just use the default configuration for styles that come with create-react-app.
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.