Lista de Tarefas

Tecnologias • Sobre • Começando • Colaboradores • Contribuir

O projeto consiste em uma aplicação Full Stack com o objetivo de auxiliar no gerenciamento de atividades e tarefas.

🎨 Layout

💻 Tecnologias

HTML - Linguagem de marcação para estruturar a interface da aplicação.
CSS - Utilizado para estilizar a página, tornando-a atraente e responsiva.
JavaScript - Responsável pela lógica de interação e funcionalidades da aplicação.
Docker - Utilizado para facilitar a criação e o gerenciamento de contêiners da aplicação.
MySQL - Banco de dados para armazenar as informações das tarefas.
Nodemon - Ferramenta que auxilia no desenvolvimento, monitorando alterações no código e reiniciando automaticamente o servidor.
MySQL2 - Pacote que fornece uma interface para interagir com o banco de dados MySQL no NodeJS.
Cors - Pacote que habilita o acesso de recursos de outros domínios, garantindo a segurança da aplicação.
Express - Framework para NodeJS que simplifica o desenvolvimento da API da aplicaçaõ.
DotEnv - Módulo que carrega variáveis de ambiente a partir de um arquivo, facilitando a configuração.
ESLint - Ferramenta para identificar e corrigir problemas no código, garantindo um código limpo e padronizado.

Sobre

A Lista de Tarefas é um projeto que permite ao usuário gerenciar suas tarefas de forma eficiente. Com esta aplicação, é possível adicionar, editar e excluir tarefas de maneira simples e organizada.

Funcionalidades

Adicionar tarefas - Os usuários podem criar novas tarefas, atribuindo um título e status para cada uma delas.

Editar tarefas - É possível fazer alterações nas tarefas existentes, permitindo alterar o título e o status conforme necessário.

Excluir tarefas - Os usuários podem remover tarefas que já foram concluídas ou não são mais relevantes.

Gerenciamento de tarefas - A interface intuitiva e amigável facilita a visualização e organização das tarefas.

🚀 Começando

Clonando

Como clonar o projeto:

git clone https://github.com/vdonoladev/todoList-fullStack.git

Depois de clonar o repositório, é necessário criar o Banco de Dados junto com as colunas necessárias.

CREATE DATABASE database_name

A seguir, é necessário criar a tabela tasks que será utilizada pela aplicação.

CREATE TABLE tasks (
  id INT PRIMARY KEY AUTO_INCREMENT,
  title VARCHAR(45) NOT NULL,
  status VARCHAR(45) NOT NULL,
  created_at VARCHAR(45) NOT NULL
)

Na raiz do projeto, haverá um arquivo com o nome .env.example. Este arquivo contém cinco campos que deverão ser preenchidos em um arquivo com o nome .env. Basta criá-lo.

Depois, basta preencher os campos com os dados referentes ao seu banco de dados.

PORT=[Porta na qual o servidor será executado]
MYSQL_HOST=[O host da sua máquina, por padrão é "localhost"]
MYSQL_USER=[Seu nome de usuário, por padrão, o MySQL usa o usuário "root"]
MYSQL_PASSWORD=[A senha que você escolheu ao instalar o MySQL]
MYSQL_DB=[O nome do banco de dados criado anteriormente]

Iniciando

Antes de iniciar a aplicação, é preciso instalar os node_modules e, para isso, basta seguir o tutorial abaixo.

Como iniciar o projeto:

Entre na pasta raiz do projeto:

cd todoList-fullStack

Entre na pasta backend:

cd backend

Para instalar as dependências necessárias:

npm install

Para rodar o backend da aplicação:

npm start

O servidor estará rodando no http://localhost:3333

Para rodar o frontend da aplicação:

Abra o arquivo index.html com a extensão Live Server.
Agora você pode abrir o navegador e digitar: http:localhost:5500

Para rodar o frontend da aplicação, recomendo utilizar a extensão Live Server no VSCode.
Recomendo terem instalado no VSCode as extensões Docker e Database Client.
- Não vou falar sobre como instalar e usar cada uma delas.
- Presumo que já saiba usar o Docker.
Instale a imagem do MySQL no Docker.
- Lembrando que você tem que instalar o Docker em sua máquina.

🤝 Colaboradores

Agradecimento especial a todas as pessoas que contribuíram para este projeto.

_{Víctor Donola Ferreira}

📫 Contribuir

git clone https://github.com/vdonoladev/todoList-fullStack.git
git checkout -b feature/NAME-OF-FEATURE
Siga os Commit Patterns
Abra um Pull Request explicando o problema resolvido ou o recurso feito, se houver, anexe a captura de tela das modificações visuais e aguarde a revisão!

Documentações que podem ajudar

Créditos

A aplicação foi desenvolvida seguindo a série de vídeos do Manual do Dev.