Project description: Recipe CRUD A CRUD application allows a user to create, read, update or delete selected data. For this project, you will build the interface of a food recipe CRUD app. The interface won't use a database or an API to store the data; it will require you to use React's useState() hook.
For detailed instructions on how to complete this project, consult the Instructions document in the Qualified assessment interface.
Learning objectives This project is designed to test your ability to work with rendering and state management using React. Before taking on this project, you should be comfortable with the learning objectives listed below:
Installing packages via NPM
Running tests from the command line
Writing React function components
Using hooks like useState()
Debugging React code through console output
Project steps to complete To complete this project, you must do the following:
Write code that passes all the tests in the Qualified assessment in this lesson.
Write code that passes all of the requirements outlined below, and submit your GitHub repo link in the next lesson.
Remember to sync this Qualified project with your local machine so that you can commit it to GitHub in the next lesson.
Requirements to pass For your project to pass, all of the following statements must be true. These criteria are reflected in the rubric in the next lesson.
All tests are passing in Qualified.
A user can create new recipes.
A list of the existing recipes is displayed to the user.
A user can delete a recipe.
The app uses the useState() hook.
Data is displayed in a table (such as the one provided in the starter code).
The app looks like the provided mockup.
Project feedback Below you'll find some examples of feedback that you might receive on your project. They are presented to you here for learning purposes.
Remember, it's most important to meet the requirements listed above. But if you do any of the things listed here, you'll receive feedback that you've done exceptional work:
Use of any pure functions.
Use of any clear and informative variable or function names.
If you do any of the following, the Chegg Skills team may suggest improvements you can make. However, doing any of these won't cause you to fail the assessment or require that you produce revisions.
Styling that doesn't resemble the provided mockup. Matching the exact design isn't required, but the styling should look similar to the provided mockup.
Use of any non-pure functions that could be changed into pure functions.
Use of any variable or function names that could be improved (such as highly abbreviated names).
Use of components with multiple reasons to re-render.
Use of components with multiple responsibilities. Most logic should be broken out into small, single-responsibility pure functions that mutate the state as necessary.