README-pt-BR.md

🇺🇸 Read in English (en-US)

💡 Google Keep Clone

💡 App web de notas inspirado no Google Keep 📝

🚀 Finalizado! 🚀

Tabela de conteúdos

• Autor
• Sobre o projeto
• Funcionalidades
• Layout
  • Web
• Como executar o projeto
  • Pré-requisitos
  • Rodando o Backend (servidor)
  • Rodando a aplicação web (Frontend)
• Tecnologias
  • Website
  • Server
  • Utilitários
• Como contribuir no projeto
• Licença

🦸 Autor

_{Lucas Barzan}

---

💻 Sobre o projeto

💡 O Google Keep Clone é um app web de notas inspirado no Google Keep, que visa reproduzir os principais aspectos e funcionalidades da famosa aplicação utilizando ReactJS e Node.js.

---

⚙️ Funcionalidades

• Interface responsiva
• Cadastro e login com e-mail e senha do usuário
• Busca, criação, atualização e exclusão de notas
• Infinite scrolling na listagem de notas no frontend
• Possibilidade de criar tags (categorias) e associá-las a notas
• Possibilidade de listar notas por tag
• Personalização da cor das notas
• Recuperação de senha em caso de esquecimento

---

🎨 Layout

O layout do Google Keep Clone traz vários elementos da aplicação original, como é possível visualizar nas capturas de tela abaixo:

Web

---

🚀 Como executar o projeto

Este projeto é dividido em duas partes:

1. Backend (pasta server)
2. Frontend (pasta web)

💡 O Frontend precisa que o Backend esteja sendo executado para funcionar.

Pré-requisitos

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js.

Além disso, é bom ter um editor para trabalhar com o código como VSCode.

🎲 Rodando o Backend (servidor)

# Clone este repositório
$ git clone [email protected]:lucasbarzan/google-keep-clone.git

# Acesse a pasta do projeto no terminal/cmd
$ cd google-keep-clone

# Vá para a pasta server
$ cd server

# Instale as dependências
$ npm install OU yarn

# Crie um arquivo com as configurações do banco de dados a partir do arquivo de exemplo
# (você pode modificar os dados caso necessário)
$ cp ormconfig.example.json ormconfig.json

# Crie um arquivo com as variáveis de ambiente a partir do arquivo de exemplo
$ cp .env.example .env

# A aplicação utiliza banco de dados MySQL. Caso não tenha um ainda, recomendo criar um container mysql usando o Docker.
# Com o Docker instalado e rodando, execute o comando abaixo para criar o container "keep_clone"
$ docker run --name keep_clone -e MYSQL_ROOT_PASSWORD=docker -p 3306:3306 -d mysql:8.0.22

# Crie um banco de dados chamado "keep_clone" (ou o nome que você deu nas configurações).
# Você pode usar um software como o DBeaver para fazer isso, por exemplo.

# Rode as migrations do banco de dados
$ yarn typeorm migration:run

# A aplicação utiliza banco Redis. Caso não tenha um ainda, recomendo criar um container redis usando o Docker.
# Com o Docker instalado e rodando, execute o comando abaixo para criar o container "keep_clone_redis"
$ docker run --name keep_clone_redis -p 6379:6379 -d -t redis:alpine

# Execute a aplicação em modo de desenvolvimento
$ npm run dev:server OU yarn dev:server

# O servidor inciará na porta 3333 - acesse http://localhost:3333 

🧭 Rodando a aplicação web (Frontend)

# Clone este repositório (caso ainda não o tenha feito!)
$ git clone [email protected]:lucasbarzan/google-keep-clone.git

# Acesse a pasta do projeto no seu terminal/cmd
$ cd google-keep-clone

# Vá para a pasta da aplicação Frontend
$ cd web

# Instale as dependências
$ npm install OU yarn

# Execute a aplicação em modo de desenvolvimento
$ npm run start OU yarn start

# A aplicação será aberta na porta 3000 - acesse http://localhost:3000

---

🛠 Tecnologias

As seguintes ferramentas foram usadas na construção do projeto:

• EditorConfig
• ESLint
• Prettier

Website (React + TypeScript)

• React Router Dom
• Styled Components
• polished
• react-spring
• Axios
• query-string
• Unform
• create-react-app
• react-icons
• react-infinite-scroll-component
• react-modal
• yup

Veja o arquivo package.json

Server (NodeJS + TypeScript)

• Express
• bcryptjs
• uuid
• jsonwebtoken
• celebrate
• handlebars
• class-transformer
• date-fns
• dotenv
• CORS
• mysql2
• TypeORM
• redis
• ioredis
• nodemailer
• aws-sdk
• helmet
• tsyringe
• Jest
• Sentry

Veja o arquivo package.json

Utilitários

• Editor: Visual Studio Code
• Teste de API: Insomnia
• Fontes: Montserrat e Roboto

---

💪 Como contribuir no projeto

1. Faça um fork do projeto.
2. Crie uma nova branch com as suas alterações: git checkout -b my-feature
3. Salve as alterações e crie uma mensagem de commit contando o que você fez: git commit -m "feature: My new feature"
4. Envie as suas alterações: git push origin my-feature

---

📝 Licença

Este projeto esta sob a licença MIT.

Feito com ❤️ por Lucas Barzan 👋🏽