☑️ Gerenciamento de Tarefas

Figma

https://www.figma.com/design/FjPz5QnCyx2PvEp8gGx8mA/Todo-List?node-id=0-1\&t=DI4ZGDQLw33j20SK-1

Descrição do Projeto

Este projeto envolve a criação de uma aplicação completa de gerenciamento de tarefas utilizando ReactJS para o frontend e Express para o backend. O objetivo é permitir que os usuários criem, leiam, atualizem e deletem tarefas, além de exibir todas as tarefas.

Objetivos

• Criação de tarefas: Permitir que os usuários criem novas tarefas.
• Leitura de tarefas: Mostrar uma lista de todas as tarefas.
• Atualização de tarefas: Permitir que os usuários atualizem tarefas existentes.
• Deleção de tarefas: Permitir que os usuários deletem tarefas.
• Exibição de tarefas: Mostrar todas as tarefas criadas.

Requisitos

Frontend

1. ReactJS: React para construir a interface do usuário.
2. Componentes:
   • Formulário para criação e atualização de tarefas.
   • Lista de tarefas.
   • Botão para deleção de tarefas.

Backend

1. ExpressJS: Express para construir a API.
2. Endpoints:
   • POST /tasks: Criação de uma nova tarefa.
   • GET /tasks: Recuperar todas as tarefas.
   • PUT /tasks/:id: Atualizar uma tarefa existente.
   • DELETE /tasks/:id: Deletar uma tarefa.

Banco de Dados

MongoDB: armazena os dados das tarefas.

Scripts

Backend

"scripts": {
  "start": "node .",
  "dev": "nodemon .",
  "test": "jest"
}

Frontend

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

Configuração do Projeto

Configuração do Backend

1. Navegue até a pasta do backend:

   cd backend

2. Instale as dependências:

   npm install

3. Copie o arquivo .env.example para .env e ajuste as configurações conforme necessário.

4. Inicie o servidor:

   npm start

   Ou para iniciar em modo de desenvolvimento com nodemon:

   npm run dev

Configuração do Frontend

1. Navegue até a pasta do frontend:

   cd frontend

2. Instale as dependências:

   npm install

3. Inicie o servidor de desenvolvimento:

   npm start

Fluxo de Desenvolvimento

1. Crie uma issue no repositório do GitHub e atribua a pessoa responsável.
2. Crie uma nova branch a partir da interface do GitHub.
3. Utilize o GitHub Codespace ou clone o projeto localmente para trabalhar na issue.
4. Realize commits frequentemente na branch criada para a issue.
5. Ao finalizar o desenvolvimento, abra um Pull Request da branch da issue para a branch main e solicite revisão de um colega.

Dicas de Desenvolvimento

• Utilize um terminal para rodar o backend:

  cd backend
  npm run dev

• Utilize outro terminal para rodar o frontend:

  cd frontend
  npm start

• Mantenha um terminal separado na raiz do projeto para comandos diversos como git, etc.

Testes

Backend

• Os testes são realizados utilizando o Jest. Para rodar os testes, use:

  npm test

Nota: O frontend ainda não possui testes configurados.

IDE Recomendada

• Recomendamos o uso do VSCode como IDE para o desenvolvimento deste projeto.

Conclusão

Este projeto fornece uma oportunidade prática para aplicar os conhecimentos de ReactJS, ExpressJS e MongoDB, desenvolvendo uma aplicação web completa. Siga os passos fornecidos para concluir o projeto com sucesso. Boa sorte!