Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/christianjtr/todo-app
A basic TODO application written in React, Typescript, Bulma CSS (React Testing Libraries, Cypress)
https://github.com/christianjtr/todo-app
bulma bulma-css cookie cypress javascript react react-testing-library todo todo-app todo-list todolist typescript vite vitejs
Last synced: about 1 month ago
JSON representation
A basic TODO application written in React, Typescript, Bulma CSS (React Testing Libraries, Cypress)
- Host: GitHub
- URL: https://github.com/christianjtr/todo-app
- Owner: christianjtr
- Created: 2023-12-21T01:28:41.000Z (11 months ago)
- Default Branch: master
- Last Pushed: 2024-03-18T17:56:27.000Z (8 months ago)
- Last Synced: 2024-10-01T01:41:09.680Z (about 1 month ago)
- Topics: bulma, bulma-css, cookie, cypress, javascript, react, react-testing-library, todo, todo-app, todo-list, todolist, typescript, vite, vitejs
- Language: TypeScript
- Homepage:
- Size: 11.5 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# My TODO Application
It's just a proof of concept.
> :bulb: Feel free to add any improvement/suggestion you consider.
### Comments
This is a conceptual test using the following technologies:
- [React](https://react.dev/).
- [TypeScript](https://www.typescriptlang.org/).
- [Vite](https://vitejs.dev/).
- [Bulma](https://bulma.io/).
### 🎯 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](https://nodejs.org/).
Clone the repository:
```shell
git clone https://github.com/christianjtr/todo-app.git
```
### Demo
https://github.com/christianjtr/todo-app/assets/13179028/51fc976a-abcf-48a7-b231-7642e74d65f7
### 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](https://eslint.org/).
```
npm run lint
```
### Run tests
Tools used for testing:
- [React Testing Library](https://testing-library.com/).
- [Cypress](https://www.cypress.io/).
```
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. ``.
:memo: 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.