O desafio consiste em desenvolver uma aplicação Full-stack para salvar clientes em um banco de dados relacional MySQL e ler/editá-los em um dashboard Front-end React ou Angular.js. Além de outros requisitos técnicos como o uso de Websocket, SOLID, DRY, jsonwebtoken, Pipeline CI, Linter e Testes.
O Deploy da aplicação foi feito no Heroku utilizando de um Pipeline no GitHub Actions do repositório. Seguem os links de acesso da aplicação:
- Front-end: https://desafio-native-front.herokuapp.com/
- Back-end: https://desafio-native-back.herokuapp.com/
Instruções
Primeiramente você vai precisar clonar este repositório para qualquer diretório em sua máquina local.
Para isso você vai executar o seguinte comando no seu terminal:
git clone https://github.com/RafaelAugustScherer/desafioNative.gitAntes de inicializar o projeto, é importante configurar algumas variáveis de ambiente e instalar as dependências do projeto.
- Back-end
- Acesse o diretório
./back-end - Altere o arquivo
.env.examplecom as variáveis de ambiente indicadas:
PORT=3001 // Porta onde a aplicação vai ouvir requisições DATABASE_URL="mysql://root:root@esafio-native-db:3306/desafio_native" // URL onde o banco MySQL está rodando (Padrão Docker) JWT_SECRET=MySecretJWTSecret // Segredo usado para gerar tokens JWT (qualquer string)Apague os comentários indicados
// ...ao lado do valor da variável- Renomeie o arquivo para
.env
- Acesse o diretório
- Front-end
- Acesse o diretório
./front-end - Altere o arquivo
.env.examplecom as variáveis de ambiente indicadas:
REACT_APP_SERVER=http://localhost:3001 // URL de acesso à API (back-end) REACT_APP_WS_SERVER=ws://localhost:3001 // URL de acesso ao WebSocket (mesmo da API)Apague os comentários indicados
// ...ao lado do valor da variável- Renomeie o arquivo para
.env
- Acesse o diretório
- Na pasta
./front-endrode o comandonpm install
Inicialize o back-end e o front-end em terminais separados
Por padrão o back-end inicializa na porta 3001 Por padrão o front-end inicializa na porta 3000
- Back-end
- Acesse o diretório
./back-end - Rode o comando
npm run compose:uppara iniciar o banco MySQL e a API Dockerizados
- Acesse o diretório
- Front-end
- Acesse o diretório
./front-end - Rode o comando
npm startpara iniciar a aplicação React
- Acesse o diretório
- Back-end:
- Você pode testar a aplicação via Postman ou Insomnia - URL:
http://localhost:3001
- Você pode testar a aplicação via Postman ou Insomnia - URL:
- Front-end:
- No seu navegador, use a URL (padrão):
http://localhost:3000
- No seu navegador, use a URL (padrão):
Instruções
Primeiramente você vai precisar clonar este repositório para qualquer diretório em sua máquina local.
Para isso você vai executar o seguinte comando no seu terminal:
git clone https://github.com/RafaelAugustScherer/desafioNative.gitAntes de inicializar o projeto, é importante configurar algumas variáveis de ambiente e instalar as dependências do projeto.
- Back-end
- Acesse o diretório
./back-end - Altere o arquivo
.env.examplecom as variáveis de ambiente indicadas:
PORT=3001 // Porta onde a aplicação vai ouvir requisições DATABASE_URL="mysql://<USERNAME>:<PASSWORD>@localhost:<PORT>/desafio_native" // URL onde o banco MySQL está rodando JWT_SECRET=MySecretJWTSecret // Segredo usado para gerar tokens JWT (qualquer string)Apague os comentários indicados
// ...ao lado do valor da variável- Renomeie o arquivo para
.env
- Acesse o diretório
- Front-end
- Acesse o diretório
./front-end - Altere o arquivo
.env.examplecom as variáveis de ambiente indicadas:
REACT_APP_SERVER=http://localhost:<PORT> // URL de acesso à API (back-end) REACT_APP_WS_SERVER=ws://localhost:<PORT> // URL de acesso ao WebSocket (mesmo da API)Apague os comentários indicados
// ...ao lado do valor da variável- Renomeie o arquivo para
.env
- Acesse o diretório
- Nas pastas
./back-ende./front-endrode o comandonpm install
Inicialize o back-end e o front-end em terminais separados
Por padrão o back-end inicializa na porta 3001 Por padrão o front-end inicializa na porta 3000
- Back-end
- Acesse o diretório
./back-end - Rode o comando
npm run devpara iniciar a API
- Acesse o diretório
- Front-end
- Acesse o diretório
./front-end - Rode o comando
npm startpara iniciar a aplicação React
- Acesse o diretório
- Back-end:
- Você pode testar a aplicação via Postman ou Insomnia
- Front-end:
- No seu navegador, use a URL (padrão):
http://localhost:3000
- No seu navegador, use a URL (padrão):
Os testes foram desenvolvidos exclusivamente para a API (back-end)
Os testes necessitam que as dependências do projeto estejam instaladas (
npm install)
- Rode o comando
npm run test:unit
Configure a variável de ambiente em .env.test.example e renomeie o arquivo para .env.test
DATABASE_URL="mysql://<USERNAME>:<PASSWORD>@localhost:<PORT>/desafio_native_test" // URL onde o banco MySQL de testes vai rodar
- MySQL: Rode o comando
npm run test:integration - Docker: Rode o comando
npm run test:integration:docker
- Express
- TypeScript
- Jest
- Chai / chai-http
- JWT (jsonwebtoken)
- Bibliotecas JS: md5, cors, http-status-codes, faker
Neste projeto foram utilizados recursos e sintaxe de código inspirados em outros projetos pessoais que já fiz:
- 🏅 TrybeRank: Deploy Containerizado no Heroku; Front-end React
- 🚚 DeliveryApp: App Full-stack com MySQL, Express e JWT
- 🟨 TodoListChallenge: Desafio Técnico Fictício da Trybe
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent