Don't Forget! - React Todo w/ Testing

DEMO LINK on Netlify

Description

The todo app is so prevalent for a reason! I built this one to brush up on some JavaScript Array Methods, vanilla CSS and implement my new Cypress and React Testing Library skills.

Technologies Used

• Cypress Testing
• React Testing Library
• Vanilla CSS (w/ Flexbox)
• JavaScript ES6+
• JSX
• React
• Git and Github
• Netlify

Features

• Add new list
• Add item
• Check item as done/not done
• Edit item
• Delete item
• Delete all completed items
• Delete list
• Persists data in local storage

Lessons Learned During Development

• End to End Testing with Cypress
• Component testing with React Testing Library

Testing Demonstration

To run Cypress tests:

• Clone
• npm install
• npx cypress open
• E2E tests > todo.cy.js

To run React-Testing-Library tests:

• Clone
• npm install
• npm test