Dígitro

Desafio Técnico Front-end

Call Control

Projeto proposto pela Dígitro para o Desafio Técnico referente ao processo seletivo, onde foi solicitado a criação de uma aplicação de conversas de chat utilizando ReactJS e Socket.io.

Tecnologias Utilizadas

1. ViteJS¹

• Ferramenta para criação do ambiente de desenvolvimento.

2. ReactJS²

• Biblioteca JavaScript para criação de interfaces de usuário.

3. React Router Dom³

• Biblioteca JavaScript para trabalhar com rotas no React.

4. Socket.io⁴

• Biblioteca JavaScript para trabalhar com WebSockets.

5. ESLint⁵

• Ferramenta para padronização do código.

6. Prettier⁶

• Ferramenta para formatação do código.

7. Bootstrap⁷

• Biblioteca para estilização CSS do layout.

Preview da Aplicação

• Github Pages

Rodando a Aplicação

Requisitos

1. Para rodar locamente:

• NodeJS: v16+⁸
• NPM: v8+⁹

2. Para rodar com Docker

• Docker: v20+¹⁰
• Docker Compose: v2+¹¹

Passo a Passo

Para Rodar Localmente

1. Faça o clone do repositório:

git clone git@github.com:flaviojoaofelix/dt-frontend-digitro.git

2. Acesse o diretório do projeto

cd dt-frontend-digitro

2. Instale as dependências:

npm install

3. Inicie a aplicação:

• Em modo desenvolvedor:

  npm run dev

  E acesse a aplicação pelo URL: http://127.0.0.1:5173/

• Em modo produção:

  npm run build

  npm run preview

  E acesse a aplicação pelo URL: http://127.0.0.1:4173/

Para Rodar com Docker

1. Faça o clone do repositório:

git clone git@github.com:flaviojoaofelix/dt-frontend-digitro.git

2. Acesse o diretório do projeto

cd dt-frontend-digitro

2. Mude para o Branch 'docker':

git checkout docker

3. Inicie o container Docker:

  docker-compose up -d
  ou
  docker compose up -d

4. Acesse a aplicação pelo URL: http://127.0.0.1:5173/

5. Para parar o container Docker:

  docker-compose down
  ou
  docker compose down

Requisitos do Desafio

Funcionalidades da Aplicação

1. Permitir informar um nome de usuário e a quantidade de chats simultâneos que serão atendidos.
2. Exibir a lista de conversas em andamento com a identificação de cada uma delas,
3. Exibir os dados da conversa ao clicar sobre uma conversa em andamento.

Funcionalidades do Usuário

1. Poderá conectar e desconectar o usuário. - No momento da conexão informará o nome de usuário e o número máximo de chats simultâneos que o servidor poderá enviar para o usuário. - Quando estiver desconectado não vai receber chats;
2. Poderá alternar entre os chats em andamento;
3. Poderá finalizar uma chamada;

Informações Técnicas

1. A interface se comunicará com o servidor via websocket (socket.io) que está hospedado em um domínio da Dígitro: http://dev.digitro.com/callcontrol
2. Documentação da API disponível no arquivo API.md
3. Uma vez o usuário conectado, o servidor começará a enviar eventos de nova chamada para ele até atingir o máximo simultâneo pré-definido na conexão do usuário. - O servidor enviará um evento USER_CONNECTED caso a conexão tenha sido feita com sucesso. - Estas chamadas serão enviadas em intervalos de tempo aleatórios entre 0 e 15 segundos. ⚠Portanto, se na conexão informar o máximo de 1 chamada, fique atento que poderá levar até 15 segundos para o evento com esta chamada ser enviado.⚠

Entrega

1. O candidato deverá disponibilizar o link do seu projeto no GitHub com a documentação de como configurar e colocar o projeto para rodar.

Deploy

1. Digitar o seguinte comando para gerar a build:

npm run build

2. Se desejar ver o preview, digitar o seguinte comando:

npm run preview

Passos utilizados no desenvolvimento para configuração do ambiente

Comandos utilizados para iniciar a aplicação

1. npm create vite@latest

Instalação do ViteJS com React JavaScript

2. npm install

Instalação e configuração inicial das dependências do Vite

3. npm install eslint

Instalação do ESLint utilizado afim de padronizar o código desenvolvido.

4. npm install prettier

Instalação do Prettier para formatação do código.

5. npm install eslint-config-prettier

Instalação da biblioteca que integra o ESLint com o Prettier.

6. npm install eslint-plugin-import

Plugin que aponta ao ESLint como resolver as importações

7. npm install eslint-plugin-jsx-a11y

Plugin que verifica problemas de acessibilidade do JSX com ESLint

8. npm install eslint-plugin-react

Regras específicas de React para ESLint

9. npm install socket.io-client

Biblioteca websocket para trabalhar com a API

10. npm install react-router-dom

Biblioteca para trabalhar com rotas no React

11. npm install gh-pages --save-dev

Ferramenta para publicar o projeto no GitHub Pages

Comandos utilizados para configuração da aplicação

1. Criar o arquivo .eslintrc.js na raiz do projeto

Configuração do ESLint

2. Criar o arquivo .eslintignore na raiz do projeto

Configuração do ESLint para ignorar arquivos

3. Adicionar o comando "lint" ao package.json

Configuração do ESLint para rodar o comando lint através do NPM

4. Criar o arquivo .prettierrc na raiz do projeto

Configuração do Prettier

5. Criar o arquivo .prettierignore na raiz do projeto

Configuração do Prettier para ignorar arquivos

Referências

Footnotes

1. ViteJS ↩

2. ReactJS ↩

3. React Router Dom ↩

4. Socket.io ↩

5. ESLint ↩

6. Prettier ↩

7. Bootstrap ↩

8. NodeJS ↩

9. NPM ↩

10. Docker ↩

11. Docker Compose ↩