Deliverables - Projects

React CRUD

Worth 20% of your final grade

Due before 11:00 pm on Monday November 8, 2021.

Background

Building on what you have practiced in earlier assignments, create a two-page React App that allows CRUD operations on a list of things. You can choose the topic for your list. Choose something different than the sample images below.

Setup

• Use create-react-app to scaffold out a new local project folder.
• Create a private, empty GitHub repo called mad9135-p1-react-crud-list.
• Add the new GitHub repo as a remote to your local project. Use the commands that GitHub displays after creating the empty repo in the section titled push an existing repository from the command line, e.g.

git remote add origin git@github.com:<Your Username>/mad9135-p1-react-crud-list.git
git branch -M main
git push -u origin main

• Add React Router to your project

yarn add react-router-dom
#or
npm i react-router-dom

Requirements

TIP

Check out the cuid package on NPM (opens new window)

• Each item in the list needs a unique id property, and at least two other relevant properties.
• The list must be stored in the state at the top level <App /> component.
• Use a context object to carry out the add, edit, and delete operations on the data.
• The application state data should be cached to localStorage, and ONLY retrieved on a browser refresh. This means that localStorage is like the backup data for the app.
• The application runs off the data in state, coming from the Context object.
• In addition to the <App /> component, you will need at least the following components:
  • <AppHeader />
  • <NewItemView />
  • <ListView />
  • <ListItem />
• The properties of each list item should be editable. Meaning that clicking the edit button will change the appearance to allow for editing in place of that item. The rest of the list should still be visible.
• The component that is used for editing a ListItem should be the same component that is used within the NewItemView component. Don't duplicate your form. Use the same form in both places.
• The form will know if it is to be used for an add or an edit, based on the object that is passed to the Edit component. If the id in the object is empty or falsey, then it is an add operation. If the id in the object is valid, then it is an edit operation.
• Each list item should have an option to remove it from the list (A delete button).
• Delete operations should always have a confirmation dialog.
• Use React Router <HashRouter> to navigate between the List View and the New Item View.

See these screen captures for the basic idea of the functionality.

Remember

Make commits as you complete each requirement. They should be atomic and have a meaningfully descriptive message.

Design

To avoid having to write all the CSS yourself, use ReactStrap (opens new window) or MUI (opens new window) to build your interface components. This is NOT required, just a suggestion. We recommend MUI over ReactStrap.

In the Week 7 section, on the Style page you will see notes about MUI and theme-ui. In class we will discuss how to utilize them.

Submission

• Deploy the production build to Netlify.
• Refer to the React production deployment guide.
• Invite GitHub user prof3ssorSt3v3 as a collaborator on your private repo.
• Submit both the URL of the GitHub code repo and the Netlify public URL to the BS LMS assignment page.