Next Level Week Return - Trilha Impulse

Um Projeto desenvolvido na Semana Next Level Week #8 da Rocketseat

Widget Feedback

Tecnologias usadas 💻️

Consulte tutorial de instalação feito pela Rocketseat.

• Node JS
• React JS
• React Native
• TypeScript
• TailwindCSS
• Prisma
• Jest
• PostgreSQL

Layout 📌️

Link para layout feito no Figma

Getting Started! 🚀️

Clone o repositório

user@pc:~$ #Clonando o projeto com o git!
user@pc:~$ git clone https://github.com/dosza/nlw-return

Configurando as variáveis de ambiente para o Frontend

Crie o arquivo .env.local em /web, nesse arquivo defina a variável VITE_API_URL="http://localhost:3333" ou com endereço IP de sua máquina!

Exemplo de arquivo web/.env.local

VITE_API_URL="http://192.168.1.2:3333"

Inicialização da Aplicação Frontend

user@pc:~$ cd web
user@pc:~$ #configuração de dependencias
user@pc:~$ npm
user@pc:~$ #Inicialização da aplicação web
user@pc:~$ npm run dev

Configuração do Backend

Para este projeto foi utilizado:

1. banco de dados PostgreSQL e ORM Prisma
2. Servidor de e-mails (simulado): Mailtrap

Configuração de banco de dados

Arquivo de configuração do Prisma Scheme
Nesse arquivo é possível trocar o servidor de banco de dados alterando o valor de provider

Leia a documentação do Prisma Scheme para saber mais!

	datasource db {
		provider = "postgresql"
		url = env("DATABASE_URL")
	}

Configurando as variáveis de ambiente do Backend

Crie o arquivo .env em /server

Nesse arquivo deverá conter as variáveis:

• DATABASE_URL : endereço do servidor de Banco de Dados
• MAILSERVER_URL: endereço do servidor de E-mail

Dica: substitua seu usuário e senha, caso esteja utitilizando maitrap e o postgresql!!

Exemplo de arquivo server/.env

DATABASE_URL="postgresql://user:password@localhost:5432/mydb?schema=db"
MAILSERVER_URL="smtp://user:password@smtp.mailtrap.io:2525"

Executando as Migrations

user@pc:~$ cd server
user@pc:~$ #configuração de dependencias
user@pc:~$ npm
user@pc:~$ #executa a migração em modo desenvolvimento
user@pc:~$ npm run migrateDev

Dica: Para executar as migrations em produção basta executar:

npm run migrateProd

---

Inicializando o servidor Web

user@pc:~$ cd server
user@pc:~$ #Inicialização Backend em modo desenvolvimento
user@pc:~$ npm run dev

API REST

Versão: v0.1.0
Esta API recebe os feedbacks.
Implementa ações com o método POST

Método POST

1. Enviar Feeback

http://localhost:3333/feeedbacks

Parâmetros	Tipo	Valor
type	string	'BUG' | 'IDEA' | 'OTHER'
comment	string	'Não funciona'
screenshot	string	'data:image/png;base64, '

Observações:

1. screenshot é opcional!
2. screenshot deve conter o prefixo: data:image/png;base64 e ser codificada em Base64.

Retorno Status:

• 201 para sucesso
• 500 para erro no servidor

Deploy 💻️

Widget Feedback Frontend
Widget Feedback Backend

Deploy com Docker Compose 💡️

Breaking news: Agora você pode executar o projeto usando o comando make

O arquivo compose.yaml configura os seguintes serviços:

• PostgreSQL
• Server
• Web

Instruções

1. Instale o docker

	sudo apt install docker docker-compose docker-buildx make -y

2. Na raiz do repositório crie um arquivo .env

MAILSERVER_URL=smtp://user:password@service.com
POSTGRES_PASSWORD=password
POSTGRES_DOCKER_PORT=5432
POSTGRES_LOCAL_PORT=5432
DATABASE_DOCKER_URL=postgresql://postgres:password@database:5432/nlwreturn_db?schema=db
POSTGRES_DB=nlwreturn_db
POSTGRES_SCHEMA=db
NODE_ENV=production

3. Crie o arquivo .env.local na pasta /web

VITE_API_URL=http://localhost:3333

4. Execute o projeto

	make

5. Acesse a página web em http://localhost:4173

6. Encerrando a execução

	make down

Desafios 🏆️

• Adicionar tema light/dark
• Substituir o Mailtrap por um serviço de e-mail real,
• Melhorar HTML/CSS do e-mail
• Criar um dashboard de Feedbacks
  • Autenticação com (Firebase/Auth)