TODO_APP

A simple full stack todo web app with testing using Typescript. This is used to demonstrate the Cypress end-to-end testing framework.

---

Cypress Setup for a React Project

Prerequisites

1. A React project initialized using create-react-app or other setups.
2. Node.js and npm/yarn installed on your system.

Installation

1. Redirect to the working directory.
2. Run the following command to add Cypress

npm install cypress --save-dev

Open Cypress

After installation, open Cypress for the first time to initialize its configuration

npx cypress open

This command creates a cypress folder in your project and adds a default cypress.config.ts file.

Update Cypress Config

Edit cypress.config.ts to customize the base URL for the React app:

import { defineConfig } from "cypress";

export default defineConfig({
  e2e: {
    baseUrl: "http://localhost:5173", // Enter base URL here
  },
});

Update package.json

Update the package.json file with the following script.

"scripts": {
    "cy:open": "cypress open"
},

Make sure to remove the following part from the package.json file.

{
  "type": "module"
}

Start Frontend Server

We can use the following CLI to start the frontend server

npm start

Start Backend Server

We can use the following CLI to start the backend server

npm start

Start Cypress

We can use the following CLI to start the Cypress

npm run cy:open

---

Technology Stack

* FrontEnd - React + Vite

* BackEnd - Node + Express

* Database - MongoDB

* Testing - Cypress