https://github.com/tassio-med/react-todo-list

https://github.com/tassio-med/react-todo-list

Last synced: about 5 hours ago
JSON representation

• Host: GitHub
• URL: https://github.com/tassio-med/react-todo-list
• Owner: Tassio-Med
• Created: 2022-10-19T15:31:47.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-01-25T00:20:19.000Z (almost 2 years ago)
• Last Synced: 2023-03-09T08:03:09.269Z (over 1 year ago)
• Language: CSS
• Size: 354 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Bem-vindo ao To Do List!

Este projeto foi desenvolvido com o intuito de colocar em prática meus conhecimentos de Front-end, focando em **[ReactJS](https://react.dev)**. Aqui você pode conhecer um pouco sobre minhas hard skills. 

#### As principais habilidades colocadas prática nesse projeto foram:

* **React.JS**.

* **Javascript**;

* **CSS3**;

* **Firebase**;

* **Deploy com Netlify**;

* **ESLint**;

![javascript](https://img.shields.io/badge/javascript-yellow.svg?style=for-the-badge&logo=javascript&logoColor=white) ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) ![ESLint](https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge&logo=eslint&logoColor=white)  ![NPM](https://img.shields.io/badge/NPM-%23000000.svg?style=for-the-badge&logo=npm&logoColor=white) ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)  ![React-icons](https://img.shields.io/badge/react--icons-red.svg?style=for-the-badge&logo=react&logoColor=white)  ![Netlify](https://img.shields.io/badge/netlify-%23000000.svg?style=for-the-badge&logo=netlify&logoColor=#00C7B7) 

## Usabilidade

O projeto consiste em um [To Do List](https://tazmed-todo-list.netlify.app) simples com a funcionalidade adicionar e excluir uma tarefa. A quantidade de tarefas é atualizada sempre que uma atividade é adicionada ou excluída na aplicação.

Toda a aplicação se concentra em apenas uma página, um toque pessoal que coloquei em prática foi o video de background. O video está dsponível na platafroma [Pexels](https://www.pexels.com) para uso gratuito. Como complemento também utilizei a fonte [Space Age](http://go.to/disneyfonts) disponível gratuitamente para uso livre.

## Instalação

Para testar o projeto na sua máquina pessoal siga os seguintes passos:

1. Clone o repositório:

```sh

[email protected]:Tassio-Med/react-todo-list.git

```

2. Instale os pacotes npm:

```bash

npm install

```

## Design

Para a construção visual do projeto foi utilizado CSS3 e a biblioteca React-icons para adicionar ícones SVG. 

No projeto foi utilizada a seguinte paleta de cores:



  

  |    HEX     | RGB         |Cor          |

  | ---         |---            | ---                                                        |

  | `#ffffff`   |`255, 255, 255`| ![#ffffff](https://placehold.co/300x50/ffffff/ffffff.png)  |

  | `#02b502`   |`2, 181, 2`    | ![#02b502](https://placehold.co/300x50/02b502/02b502.png)  |

  | `#117311`   |`17, 115, 17`  | ![#117311](https://placehold.co/300x50/117311/117311.png)  |

  | `#0000ff`   |`0, 0, 255`    | ![#0000ff](https://placehold.co/300x50/0000ff/0000ff.png)  |

  | `#ff2e2e`   |`255, 46, 46`  | ![#ff2e2e](https://placehold.co/300x50/ff2e2e/ff2e2e.png)  |



## Autor

- [@tassio medeiros](https://github.com/Tassio-Med)

[![LinkedIn](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://linkedin.com/in/tassiomed98) 

[![Instagram](https://img.shields.io/badge/Instagram-E4405F?style=for-the-badge&logo=instagram&logoColor=white)](https://instagram.com/tassio.med?igshid=ZDdkNTZiNTM=) 

## EsLint

Neste projeto foi utilizado o [ESLint](https://eslint.org/) para fazer a análise estática do código. Ajudando a garantir a qualidade do código de forma a tê-lo mais legível, de mais fácil manutenção e seguindo as boas práticas de desenvolvimento.