Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pedrohenriquebs/to-do-list
A to-do list project created in react.
https://github.com/pedrohenriquebs/to-do-list
javascript react styled-components
Last synced: 23 days ago
JSON representation
A to-do list project created in react.
- Host: GitHub
- URL: https://github.com/pedrohenriquebs/to-do-list
- Owner: PedroHenriqueBS
- Created: 2024-11-18T16:35:18.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2025-01-03T21:02:00.000Z (26 days ago)
- Last Synced: 2025-01-06T16:18:43.611Z (23 days ago)
- Topics: javascript, react, styled-components
- Language: JavaScript
- Homepage: https://to-do-list-brown-mu-32.vercel.app/
- Size: 14.1 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# To-Do List
Este é um projeto simples de lista de tarefas (to-do list) desenvolvido em **React**. O objetivo principal foi aplicar conceitos fundamentais do React, como gerenciamento de estado, efeitos colaterais e memoização, além de proporcionar uma experiência de usuário agradável com temas **Dark** e **Light**.
## 🛠️ Tecnologias e Ferramentas Utilizadas
- **React**
- **Styled Components** (para estilização)
- **Local Storage** (para persistência dos dados)
- **React Hooks**:
- `useState`
- `useEffect`
- `useMemo`
- `useRef`
## 🎯 Funcionalidades
- Adicionar, editar e remover tarefas.
- Alternância entre temas **Dark** e **Light**.
- Persistência de tarefas no navegador utilizando **Local Storage**.
- Interface responsiva e estilizada com **Styled Components**.
## 🖼️ Pré-visualização
## **THEME DARK**
## **THEME LIGHT**
## 🚀 Como Executar o Projeto
1. **Clone o repositório**:
```bash
git clone https://github.com/PedroHenriqueBS/to-do-list.git
cd to-do-list
```
2. **Instale as dependências**:
Certifique-se de ter o **Node.js** e o **npm** (ou **yarn**) instalados.
```bash
npm install
# ou
yarn install
```
3. **Inicie o projeto**:
```bash
npm start
# ou
yarn start
```
**Deploy do projeto**:
Projeto disponível em: [https://to-do-list-brown-mu-32.vercel.app/](https://to-do-list-brown-mu-32.vercel.app/).
## 🧠 Conceitos de React Aplicados
- **useState**: Para gerenciar estados das tarefas e tema (Dark/Light).
- **useEffect**: Para sincronizar os dados com o **Local Storage**.
- **useMemo**: Para melhorar a performance em cálculos ou filtros pesados.
- **useRef**: Para manipular referências diretas, como o foco em inputs.
## 👤 Autor
- **Pedro Henrique**
- LinkedIn: [Meu Perfil](https://www.linkedin.com/in/pedro-henrique-23418b213/)
- Instagram: [Meu Instagram](https://www.instagram.com/pedroohbs_/)