> For the complete documentation index, see [llms.txt](https://salvatore-academy.gitbook.io/dev-fullstack-web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://salvatore-academy.gitbook.io/dev-fullstack-web/empresa/mural-de-projetos/gerenciamento-de-tarefas.md).

# Gerenciamento de Tarefas

<figure><img src="/files/rxL7saCttl2pUXsj1eiz" alt=""><figcaption></figcaption></figure>

## Figma

{% embed url="<https://www.figma.com/design/FjPz5QnCyx2PvEp8gGx8mA/Todo-List?node-id=0-1&t=DI4ZGDQLw33j20SK-1>" %}

**Link direto:** <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**: Utilize 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**: Utilize 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

1. **MongoDB**: Utilize MongoDB para armazenar os dados das tarefas.

## Passos para Conclusão

1. **Configuração do Ambiente**: Configure seu ambiente de desenvolvimento com ReactJS, ExpressJS e MongoDB.
2. **Configuração do Backend**:
   * Crie um novo projeto Node.js.
   * Instale e configure o Express.
   * Defina os modelos de dados para as tarefas.
   * Crie os endpoints para manipulação dos dados.
3. **Configuração do Frontend**:
   * Crie um novo projeto React.
   * Desenvolva os componentes necessários (formulário de criação/atualização de tarefas, lista de tarefas, botão de deleção).
   * Conecte o frontend ao backend utilizando axios ou fetch.
4. **Testes**: Teste todas as funcionalidades para garantir que estão funcionando corretamente.
5. **Deploy**: Faça o deploy da aplicação em um serviço de hospedagem como Heroku, Netlify ou Vercel.

## 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!


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://salvatore-academy.gitbook.io/dev-fullstack-web/empresa/mural-de-projetos/gerenciamento-de-tarefas.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.