To-Do List App (React + Node.js)

Uma aplicação Full Stack de lista de tarefas que permite aos usuários se registrarem, fazerem login e gerenciarem suas próprias tarefas pessoais.

Este projeto foi desenvolvido como uma demonstração prática da criação de uma aplicação web moderna, integrando um front-end reativo com um back-end robusto e um banco de dados relacional.

Funcionalidades

• Autenticação de Usuário: Sistema completo de registro e login.
• Segurança: Senhas criptografadas e rotas de tarefas protegidas por token JWT.
• Gerenciamento de Tarefas (CRUD):
  • Criar novas tarefas.
  • Ler (listar) todas as tarefas do usuário logado.
  • Atualizar o status da tarefa (marcar como concluída/pendente).
  • Deletar tarefas.
• Interface Reativa: Front-end construído em React para uma experiência de usuário fluida e moderna.
• Persistência de Dados: As tarefas e usuários são salvos em um banco de dados MySQL.

Tela Principal

(Nota: Para usar seu próprio screenshot, tire uma foto da sua aplicação rodando, faça o upload em um site como o Imgur e substitua o link acima.)

Tecnologias Utilizadas

Este projeto foi construído com as seguintes tecnologias:

• Front-end:

  • React
  • Axios
  • HTML5 & CSS3

• Back-end:

  • Node.js
  • Express.js
  • MySQL2
  • JSON Web Token (JWT) para autenticação
  • Bcrypt.js para hashing de senhas
  • CORS

• Banco de Dados:

  • MySQL

🚀 Como Executar o Projeto

Siga os passos abaixo para executar a aplicação em seu ambiente local.

Pré-requisitos

Antes de começar, você vai precisar ter instalado em sua máquina:

• Git
• Node.js
• Um servidor MySQL (recomendo XAMPP, WAMP ou Docker).

1. Clonar o Repositório

git clone [https://github.com/seu-usuario/nome-do-repositorio.git](https://github.com/seu-usuario/nome-do-repositorio.git)
cd nome-do-repositorio

2. Configurando o Back-end

# Navegue até a pasta do back-end
cd backend

# Instale as dependências
npm install

# Crie um arquivo .env na raiz da pasta 'backend'
# e adicione suas credenciais do banco de dados:
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=sua_senha_aqui
DB_DATABASE=todo_app
JWT_SECRET=qualquer_frase_secreta

# Execute os seguintes comandos no seu cliente MySQL para criar o banco e as tabelas:
# CREATE DATABASE todo_app;
# USE todo_app;
# CREATE TABLE users (id INT AUTO_INCREMENT PRIMARY KEY, username VARCHAR(50) NOT NULL UNIQUE, password VARCHAR(255) NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP);
# CREATE TABLE tasks (id INT AUTO_INCREMENT PRIMARY KEY, user_id INT NOT NULL, title VARCHAR(255) NOT NULL, completed BOOLEAN DEFAULT FALSE, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE);

# Inicie o servidor do back-end
node src/index.js
# O servidor estará rodando na porta: http://localhost:5000

3. Configurando o Front-end

# Abra um novo terminal
# Navegue até a pasta do front-end
cd frontend

# Instale as dependências
npm install

# Inicie a aplicação React
npm start
# O app abrirá automaticamente em: http://localhost:3000

4. Acessando a Aplicação

Após seguir todos os passos, abra seu navegador e acesse http://localhost:3000. Crie uma conta, faça login e comece a gerenciar suas tarefas!

📝 Endpoints da API

O servidor back-end expõe os seguintes endpoints:

Método	Rota	Descrição	Requer Autenticação
POST	/api/auth/register	Registra um novo usuário.	Não
POST	/api/auth/login	Autentica um usuário e retorna um token.	Não
GET	/api/tarefas	Lista todas as tarefas do usuário.	Sim
POST	/api/tarefas	Cria uma nova tarefa.	Sim
PUT	/api/tarefas/:id	Atualiza uma tarefa existente.	Sim
DELETE	/api/tarefas/:id	Exclui uma tarefa.	Sim

📄 Licença

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

---

Autor

Feito por [Markin95]