My TODO Application

It's just a proof of concept.

💡 Feel free to add any improvement/suggestion you consider.

Comments

This is a conceptual test using the following technologies:

• React.
• TypeScript.
• Vite.
• Bulma.

🎯 Goals

Authorization

• Simple /login page to perform a submit operation, a fake authorization, and finally we set a cookie.
• Redirects to /home and persist the session even if we close the browser's tab/app.

TODO app

Basic TODO app that allows you to: Add, Edit, List, and Delete tasks.

About the tasks:

• Whenever we close the browser's tab/app, the tasks should persist.
• Task should be removed as soon as we sign out of the app.

Tasks are being persisted in LocalStorage.

Installation and running the project

The project requires Node.js.

Clone the repository:

git clone https://github.com/christianjtr/todo-app.git

Demo

demo.mp4

Live Demo

Click on the following link (GitHub page project):

https://christianjtr.github.io/todo-app

Compiles and hot-reloads for development

npm run dev

Compiles and minifies for production

npm run build

Linting and fixes

Here, we are using ESLint.

npm run lint

Run tests

Tools used for testing:

• React Testing Library.
• Cypress.

npm run test
npm run cy:e2e

Coverage report example

Samples:

• Testing a custom react hook.
• A faked API service call.
• Mounting and rendering a component. <Login />.

📝 In case you need to update a snapshot, run this command:

npm run test -- -u

Cypress test sample

Samples:

• Visit /login page.
• Perform a submit operation:
  • Visiting page.
  • Filling in login form.
  • Setting the cookie.
  • Check URL change.

Technologies

React, TypeScript, Bulma, Vite, React Testing Library, Cypress.