Melissa's Recipe - CRUD App

This site was built using Vercel.

Instructions

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.

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.

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.

Additional Notes:

After completing the project, I updated the following:

• Added styling to page throughout
• Updated project name
• Added framer motion for animation of page
• Deployed using Vercel

Prerequisutes

Before you begin, ensure you have the latest version of Node.js and npm installed.

Setup and Installation

git clone https://github.com/melissametz/Recipe-App.git
cd new-clean-website
npm install

To start the development server and view the project in your browser:

npm start

Navigate to http://localhost:3000 to view it in the browser. The page will reload if you make edits. You may also see any lint errors in the console.

To build the app for production to the build folder:

npm run build