Deliverables - Projects

React CRUD

Worth 20% of your final grade

Due before 11:59 pm on Sunday November 15, 2020.

Background

Building on what you have practised 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.

Setup

• Use create-react-app to scaffold out a new local project folder.
• Create a private, empty GitHub repo called mad9135-f20-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:rlmckenney/mad9135-f20-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

Requirements

TIP

Check out the cuid package on NPM

• 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 belonging to the top level <App /> component.
• The application state should be cached to localStorage, and retrieved on a browser refresh.
• 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.
• Each list item should have an option to remove it from the list.
• Use React Router 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.

Submission

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