gabrielss187 / modern-to-do-list

A aplicação Modern-To-Do-List consiste em ser uma to-do list com um design moderno e atraente. Após você realiza o cadastro e o login na página você poderá criar, apagar e atualizar o estatus de suas to-dos....

Modern-To-Do-List

Sobre o projeto

Link: Modern-To-Do-List

Api Doc: Api-Modern-To-Do-List

Modern-To-Do-List É uma one-page full stack web moderna, acessível é responsiva para todos os tamanhos de tela.

A aplicação Modern-To-Do-List consiste em ser uma to-do list com um design moderno e atraente. Após você realiza o cadastro e o login na página você poderá criar, apagar e atualizar o estatus de suas to-dos. E além disso você poderá arrasta e soltar suas to-dos para qualquer posição da sua lista para que você possa ter mais controle sobre elas. Tudo isso com uma interface de usuário fluida, interativa e animada para dar mais vida ao site.

Layout Desktop. Com demostração

20230211_205618.2.mp4

Layout Mobile e Tablet. Com demostração

20230211_205723.2.mp4

Métricas lighthouse

Modelagem Conceitual de Dados

Competências

• Semântica
• Responsividade
• Acessibilidade
• Drag and Drop / Arrastar e soltar elementos
• Boas Práticas
• Princípios S.O.L.I.D
• Design Patterns
• Clean Code
• Deploy na nuvem
• Gerenciamentos de estados e cache

Tecnologias utilizadas

Conteiner

• Docker

Banco de dados

• Postgres Sql

Deploy na nuvem

• Aplicação web : Vercel
• Back end : Render
• Banco de dados : Railway / AWS

Front end

• HTML / CSS / JS / TypeScript
• React JS/TS
• Vite.js
• React-query
• Tailwind Css
• Axios
• Swiper
• React-DnD
• React-dnd-html5-backend
• React-dnd-touch-backend
• React-hook-form
• React-Modal
• React-text-mask
• React-toastify
• React-device-detect
• React-awesome-reveal
• Immutability-helper
• Tailwind-scrollbar

Back end

• Node Js
• TypeScript
• Cors
• Express Js
• Knex Js
• Tsup
• Tsx
• Jsonwebtoken
• Zod
• Bcryptjs
• pg

Como executar o projeto na sua máquina

1 - Container com ( Docker )

Pré-requisitos: Docker instalado na sua máquina

# 1 - clonar repositório
git clone https://github.com/GabrielSS187/Modern-To-Do-List.git

# 2 - entrar na pasta
cd Modern-To-Do-List.

# 3 - rodar o docker
docker-compose up --build

Caso tudo de certo o projeto deverá esta rodando no endereço: http://localhost:5173/

2 - Localmente

Pré-requisitos: npm / yarn, postgresSql

É preencher as variáveis de ambiente das pastas back-end é front-end

# 1 - clonar repositório
git clone https://github.com/GabrielSS187/Modern-To-Do-List.git

# 2 - Back-end ============================================================================================================
# 1 - entrar na pasta Modern-To-Do-List e depois back-end
cd Modern-To-Do-List/back-end

# 2 - instalar as dependências
npm install

# 3 - Gerar as migrações para o banco de dados
npm run migrate:latest

# 4 - executar o projeto e depois espere o servidor aparecer a messagem: "Server is running in http://localhost:8000"
npm run dev
# ===========================================================================================================================

# 5 - voltar para a pasta pai que é Modern-To-Do-List
cd ..

# 6 - Front-end ============================================================================================================
# 1 -Entrar na pasta front-end
cd front-end

# 2 - instalar as dependências
npm install

# 3 - executar o projeto
npm run dev
# ===========================================================================================================================

Caso tudo de certo o projeto deverá esta rodando no endereço: http://localhost:5173/

Autor

Gabriel Silva Souza

https://www.linkedin.com/in/gabriel-silva-souza-developer