Parabéns por chegar até aqui. Agora, seguem algumas instruções para o teste:
- Você deverá clonar o projeto para seu git, seja ele diretamente, ou clonando para sua máquina e inserindo outra origem;
- Existem arquivos de lint dentro do projeto que devem ser utilizados para organização do seu código. Para isso, verifique as extensões do seu VSCode se suportam os mesmos;
- É importante que, na pasta public, você insira seu nome juntamente à aplicação e altere as imagens da logo da plataforma para alguma do seu gosto.
- Utilize ao máximo os componentes do Bootstrap que achar necessário, podendo estilizá-los da sua maneira.
Na aplicação teste, você deverá executar os comandos oferecidos pelo yarn como install, start, e etc. Por padrão, a aplicação será executada em http://localhost:3000.
A aplicação possui uma arquitetura intuitiva e genérica para os diversos tipos de componentes, sendo estes separados por pastas e arquivos com nomes sugestivos, como mostram os exemplos dentro do projeto.
- components: Pastas de componentes criados na aplicação. Um conjunto de componentes forma um container;
- containers: Pastas de containers que agrupam um conjunto de components;
- css: Folhas de estilo de componentes das dependências da aplicação;
- data: Arquivos utilizados dentro da aplicação;
- environment: Informações como versão da aplicação e variáveis de ambiente;
- fonts: Fontes de terceiros utilizadas na aplicação;
- images: Imagens utilizadas na aplicação;
- routes: Rotas públicas e privadas da aplicação;
- services: Serviços para a aplicação como auth para autenticação, functions para funções genéricas, mask para máscaras de inputs, types para tipos de dados e validation para validações;
- store: Redux com Ducks Pattern, caso ache necessário.
- common: Componentes de estilo que serão herdados na aplicação como um todo, como body, font-family e etc;
- mixin: Cores e efeitos que serão importadas nos arquivos de estilização de cada componente caso necessário.
Cada componente e container criado dentro da aplicação deve conter a mesma estrutura dos modelos de exemplo, sendo eles o componente Example e o container ExampleExample.
Para estilização, caso prefira utilizar Styled Components ao invés de Sass, o uso será permitido.
Baseado na geografia de João Pessoa - PB, você receberá na pasta data um arquivo em JSON contendo uma lista de zonas que possuem um conjunto de bairros únicos da cidade. As zonas são representadas pela sua numeração de id, sendo "9ª zona" a zone de número 9, por exemplo, e o bairro dentro da zona representado pelo seu nome, como "Varadouro".
Para identificar um morador da cidade, o sistema deverá conter uma área para login, que autentica um usuário e permite que ele envie uma mensagem para um dos bairros listados pela plataforma. Haverá uma área para o usuário autenticado visualizar seu nome caso esteja logado na plataforma, validando assim seu login.
O usuário não logado na plataforma poderá pesquisar (numa barra de pesquisa) por algum bairro de forma genérica estilo Google, ou seja, você receberá a informação do campo pesquisa e fará uma busca genérica dentro dos dados fornecidos.
Ao selecionar um bairro de determinada zona, o usuário poderá escrever uma mensagem e enviar para o respectivo bairro apenas se o mesmo estiver logado no sistema. Caso não esteja, o sistema deve solicitar que seja feito o login através de uma modal e, após feito o login, permitir o envio da mensagem.
O objetivo do sistema é coletar uma mensagem sobre um bairro selecionado pelo usuário autenticado na plataforma, permitindo que ele encontre o bairro através de listagem dos dados com zonas como categorias e os bairros sendo subcategorias, e utilizando barra de busca para todos os dados existentes nas informações fornecidas, inserindo estas informações no formulário de envio de mensagem após o usuário selecionar.
A mensagem deve ser exibida em uma modal, identificando a zona selecionada, o id e nome do bairro, o nome do usuário e a respectiva mensagem.
- A autenticação é estática, ou seja, você irá inventar um login e senha para acessar a área privada da plataforma que exiba seu nome.
- O login pode ser feito utilizando armazenamento de informações na LocalStorage, para que haja atualização da página e não perca o acesso;
- Existe um arquivo chamado auth na pasta services que contém um modelo funcional de validação de login (se está logado ou não) baseado em token;
- Dentro da store, existe um componente de usuário base usando Redux para que você insira as ações ou informações que desejar;
- É aconselhável que a autenticação seja feita utilizando Redux ou ContextAPI;
- Todas as variáveis e funções deverão ser nomeadas em inglês, de modo que seja – minimamente – compreensível;
- A arquitetura da aplicação base deve ser respeitada para criar os componentes de sua aplicação;
- É fundamental que os comentários no código sejam o mais compreensível e menos verboso possível.