• ❕ About
• 📖 Instructions
  • 📥 Install
  • 🚀 Run Locally
  • 📋 Run Unit Tests
  • 📔 Run Storybook
• 📂 Structure

This is my implementation of the challenge project "ToDo List" from the first ReactJS module of Ignite, an intermediate and advanced course in various programming languages and technologies offered by Rocketseat.

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.

Paste the 1º command into a terminal open within a folder of your preference to clone the project

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

npm i

npm install

Paste the command into a terminal, the application will be accessable through this link

npm run dev

Paste the command into a terminal, they will be exectued one after the other mentioning if there were failed tests

npm run tests

Paste the command into a terminal, the project's components documentation will be accessible through this link

npm run storybook

│ .storybook/
│   └── ... files to keep Storybook working
│ .tests/
│   └── ... files to keep tests working
│ src/
│   ├── assets/
│   │     └── ... svgs used
│   ├── components/
│   │     ├── componente x/
│   │     │     ├── index.tsx
│   │     │     └── styles.ts
│   │     └── ...
│   ├── contexts/
│   │     └── ... contexts and providers
│   ├── styles/
│   │     └── ... global styles and default theme
│   ├── interfaces/
│   │     └── ... interfaces used
│   └── ...
│ stories/
│   ├── components/
│   │     └── ... stories of the components
│   ├── ... generic stories (color, icons e typography)
│   └── ... stories-utils.tsx // util functions for stories
│ tests/
│   ├── ... unit tests
│   └── ... tests-utils.tsx // util functions for tests

• ❕ Sobre
• 📖 Instruções
  • 📥 Instalar
  • 🚀 Rodar Localmente
  • 📋 Rodar Testes Unitários
  • 📔 Rodar Storybook
• 📂 Estrutura

Esta é a minha implementação do desafio "ToDo List" do primeiro módulo de ReactJS do Ignite, um curso intermediário e avançado de diversas linguagens de programação e tecnologias oferecido pela Rocketseat.

Nela, foram implementadas as seguintes funcionalidades, que serão demonstradas em fotos e vídeos mais adiante:

• Criação de tarefas: Descreva no campo de texto e pressione Enter ou clique no botão ao lado para criar a tarefa com a descrição especificada.
• Deleção de tarefas: Clique no ícone de lixeira da tarefa para deletá-la.
• Completar tarefas: Marque a caixa ao lado do texto ou clique nela para marcar a tarefa como concluída.

Cole o 1º comando em um terminal aberto dentro de uma pasta de sua preferência para clonar o projeto

git clone https://github.com/mar-alv/ignite-todo-list.git

Em seguida rode uma das versões do 2º comando para instalar as dependências

npm i

npm install

Cole o comando em um terminal, a aplicação estará acessível através desse link

npm run dev

Cole o comando em um terminal, eles serão executados um atrás do outro apontando se houve testes falhos

npm run tests

Cole o comando num terminal, a documentação dos componentes do projeto estará acessível através desse link

npm run storybook

│ .storybook/
│   └── ... arquivos que mantém o funcionamento do Storybook
│ .tests/
│   └── ... arquivos que mantém o funcionamento dos testes
│ src/
│   ├── assets/
│   │     └── ... svgs usados
│   ├── components/
│   │     ├── componente x/
│   │     │     ├── index.tsx
│   │     │     └── styles.ts
│   │     └── ...
│   ├── contexts/
│   │     └── ... contextos e providers
│   ├── styles/
│   │     └── ... estilos globais e default
│   ├── interfaces/
│   │     └── ... interfaces usadas
│   └── ...
│ stories/
│   ├── components/
│   │     └── ... stories dos componentes
│   ├── ... stories genéricos(cor, ícones e tipografia)
│   └── ... stories-utils.tsx // funções utilitárias pros stories
│ tests/
│   ├── ... testes unitários
│   └── ... tests-utils.tsx // funções utilitárias pros testes

For a longer video demonstration click here and like my post on LinkedIn

Marcelo Alvarez
Front-end Developer
"Some AI generated funny quote here 😗"
LinkedIn

Licensed under MIT