Add e2e tests with cypress to a React application

Imagine the following.
You join a new project and after getting access to the repo you notice that there's no tests.
You decide to ask the team whether they are in different repo or something and unfortunately the answer is:
We don't have any tests, we didn't have the time.

In this collection we're going to learn how to add e2e tests with cypress.io to an existing React app in order to do two things:
Ensure that our app currently works as intended
Allow us to add features to it with a technique called "Cypress Driven Development"
In less than 20 minutes we're going to go through:
⚡️Adding cypress.io setup to an existing project
⚡️Testing search functionality with data-cy properties
⚡️Using "Cypress Driven Development" to add a new feature to an app
⚡️Use Cypress UI to debug an API response
⚡️How to use cy.only and cy.skip in order for us to build our e2e test suite faster
and much more!

• Adding cypress to an existing project in order to start writing e2e tests
• Write a basic cypress test to ensure that the app is not entirely broken
• Enable intelligent code completion for cypress tests in VSCode
• Use data-cy property to select elements in cypress tests to write more resilient e2e tests
• Add a beforeEach function to cypress tests to avoid copying and pasting needless code
• Test a search input in an e2e test with cypress
• Use "Cypress Driven Development" in order to add a feature to a React app
• Use cypress UI in order to debug an API response
• Use cy.server() and cy.route() to control API response in a cypress test
• Use cy.only in order to run only a single test in a cypress test suite
• Use cy.skip in order to skip a test in a cypress suite
• Change a viewport width and height in a cypress test