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.
- 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.
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.
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.
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]
Antes de iniciar a aplicação, é preciso instalar os node_modules e, para isso, basta seguir o tutorial abaixo.
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.
Agradecimento especial a todas as pessoas que contribuíram para este projeto.
![]() Víctor Donola Ferreira |
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!
A aplicação foi desenvolvida seguindo a série de vídeos do Manual do Dev.