Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mar-alv/ignite-todo-list
1st ReactJs challenge of Ignite, Rocketseat's programming course, a To Do List, where you can list, create and delete To Dos
https://github.com/mar-alv/ignite-todo-list
challenge css html javascript jest js react react-testing-library rocketseat storybook styled-components ts typescript vite
Last synced: about 1 month ago
JSON representation
1st ReactJs challenge of Ignite, Rocketseat's programming course, a To Do List, where you can list, create and delete To Dos
- Host: GitHub
- URL: https://github.com/mar-alv/ignite-todo-list
- Owner: mar-alv
- License: mit
- Created: 2023-01-01T18:33:06.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-14T16:05:15.000Z (2 months ago)
- Last Synced: 2024-12-14T17:18:46.332Z (2 months ago)
- Topics: challenge, css, html, javascript, jest, js, react, react-testing-library, rocketseat, storybook, styled-components, ts, typescript, vite
- Language: TypeScript
- Homepage:
- Size: 2.69 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Ignite ToDo List

[](https://opensource.org/licenses/MIT)[π¨ Design](https://www.figma.com/file/HV7C6SQl1SyA1mN8Xur2bv/ToDo-List-%E2%80%A2-Desafio-React-(Copy)?type=design&node-id=56-96&mode=design&t=MDvKh9d18LPYlRNA-0)
[π§π· PortuguΓͺs](./docs/README-pt.md)
## π Summary
- [β About](#about)
- [π Instructions](#instructions)
- [π₯ Install](#install)
- [π Run Locally](#locally)
- [π Run Unit Tests](#unit-tests)
- [π Run Storybook](#storybook)
- [π Structure](#structure)
- [π§° Technologies](#technologies)
- [πΈ Screenshots and π₯ Recordings](#screenshots-prints)
- [π€ Author](#author)
- [π License](#license)### β About
This is my implementation of the challenge project "ToDo List" from the first ReactJS module of [Ignite](https://www.rocketseat.com.br/ignite), an intermediate and advanced course in various programming languages and technologies offered by [Rocketseat](https://www.rocketseat.com.br/).It implements the following functionalities, which will be demonstrated in photos and videos later on:
- **Task Creation:** Describe in the text field and press Enter or click the adjacent button to create the task with the specified description.
- **Task Deletion:** Click on the trash can icon of the task to delete it.
- **Complete Tasks:** Check the box next to the text or click on it to mark the task as done.### π Instructions
#### π₯ Install
Paste the 1ΒΊ command into a terminal open within a folder of your preference to clone the project
```sh
git clone https://github.com/mar-alv/ignite-todo-list.git
```Then run one of the versions of the 2ΒΊ command to install the dependencies
```sh
npm i
```
```sh
npm install
```#### π Run Locally
Paste the command into a terminal, the application will be accessable through this [link](http://localhost:5173)```sh
npm run dev
```#### π Run Unit Tests
Paste the command into a terminal, they will be exectued one after the other mentioning if there were failed tests
```sh
npm run tests
```#### π Run Storybook
Paste the command into a terminal, the project's components documentation will be accessible through this [link](http://localhost:6006)
```sh
npm run storybook
```### π Structure
```
β .storybook/
β βββ ...
β .tests/
β βββ ...
β docs/
β βββ ...
β src/
β βββ assets/
β β βββ ...
β βββ components/
β β βββ componente x/
β β β βββ ...
β β βββ ...
β βββ contexts/
β β βββ ...
β βββ styles/
β β βββ ...
β βββ interfaces/
β β βββ ...
β βββ ...
β stories/
β βββ components/
β β βββ ...
β βββ ...
β tests/
β βββ ...
```### π§° Technologies
#### Build Tools
[](https://vitejs.dev/)#### Documentation
[](https://storybook.js.org/)#### Front-end Framework
[](https://reactjs.org/)
[](https://www.typescriptlang.org/)#### Styling
[](https://phosphoricons.com/)
[](https://styled-components.com/)#### Testing
[](https://testing-library.com/docs/react-testing-library/intro)
[](https://jestjs.io/)### πΈ Screenshots and π₯ Recordings
For a longer video demonstration click here and like my post on LinkedIn
Empty list
Filled list
Creating task
Removing task
Toggle task
Generic stories
Components stories### π€ Author
### π License
Licensed under [MIT](./LICENSE)