Rodar o projeto
Para rodar o projeto so executar os comandos abaixo
git git clone https://github.com/kscastro/live-search-js.git
cd live-search-js
Pré requisitos
Docker e docker-compose
Para instalar os pré requisitos, execute o comando abaixo:
make install-dependencies
Instruções
Para rodar o projeto, execute o comando abaixo:
make run
History
Separei o projeto em pastas front, back .
Back-end
No back end escolhi como linguagem node e usei o framework fastify, vendo um comparativo(https://github.com/fastify/benchmarks) o fastify tinha um desempenho melhor do que os frameworks listados nesse benchmarks. Vi que no decorrer do desnvolvimento o codigo ficou mais limpo.
O Desenvolvimento do Back-end
Inicie importando o arquivo exemplo.json para dentro da pasta backend como para ser usado como leitura e não como escrita.
Separei o projeto em uma pasta src dentro dela ficou separado em pastas os controller e middleware.
No arquivo index.js que fica na raiz fica o start da aplicação contento as rotas e as configurações de cors. Separei os metodos que são chamados no arquivo search.js dentro da pasta utils para facilitar os testes.
Criei um healthcheck para verificar se aplicação está de pé
Foi criado um arquivo na pasta middleware para verificar se esta sendo passado o query strings para rota do controller do search.js
Nos teste optei em usar o jest para fazer os testes dos meus metodos.
Front-end
O front-end foi todo densenvolvimento sem o uso de um framework javasript
Criei primeiro a estrutura de pastas e o index.html
No desenvolvimento do box de resultado criei primeiro todo o html junto com css para partir pro javascript.
No javascript usei bastante a criação de elementos e o append.
Me atentei bastante em deixar o front funcionando em todos os navegadores usei bastante o site Can i use(https://caniuse.com/) para saber se o que estava fazendo daria suporte a outros navegadores.
Adicionei um teste com cypress que testa a funcionalidade de live search
Usei o fastify-static para servir o meu front-end.
Infra
Inicialmente tinha criado uma pasta de infra e adicionado os dockerfile nessa pasta, mas mudei e deixei os dockerfile na pasta do back e do front. O docker-compose coloquei na raiz do projeto.
Problemas no dercorrer do desenvolvimento
Ao começar o densenvolvimento do front-end tive problemas com o cors, voltei ao back e configurei o cors no projeto.
Ao montar o docker compose tive alguns problemas com o caminho dentro do dockerfile então preferi colocar o dockerfile em nas suas respectivas pastas
Pontos a melhorar
*Segurança
Globo.com: coding challenge
====================
Considerações Gerais
Você deverá usar este repositório como o repo principal do projeto, i.e., todos os seus commits devem estar registrados aqui, pois queremos ver como você trabalha.
Registre tudo: testes que forem executados, ideias que gostaria de implementar se tivesse mais tempo (explique como você as resolveria, se houvesse tempo), decisões que forem tomadas e seus porquês, arquiteturas que forem testadas e os motivos de terem sido modificadas ou abandonadas. Crie um arquivo COMMENTS.md ou HISTORY.md no repositório para registrar essas reflexões e decisões.
=====================
O Desafio: Live Search
Desenvolva um componente de Live Search baseado na imagem abaixo (o visual não precisa ser exatamente igual). Você pode escolher as tecnologias que quiser (mas não vale usar plugins prontos de Live Search). Avaliaremos tanto a parte client-side como a de backend.
O componente deve exibir os dados correspondentes à busca feita pelo usuário, de acordo com a especificação exemplificada neste JSON.
============================
Requisitos
- O live search deve ser atualizado conforme o usuário digita o termo de busca no campo de texto;
- A busca deve ignorar a diferença entre letras maiúsculas/minúsculas (case insensitive) e acentos;
- Caso algum item da seção "highlights" no JSON de resultado seja compatível com a busca do usuário através da chave "queries", o mesmo deve ser exibido como no exemplo "Pop & Arte" acima, com a logo, e clicável para sua URL;
- Caso algum termo da seção "suggestions" seja compatível com a busca, o mesmo deve aparecer como "Sugestões de busca", com um link para
http://g1.globo.com/busca/?q=<TERMO PESQUISADO>; - De preferência não use nenhum framework (javascript);
- As teclas (↓, ↑) devem navegar pelos links de sugestão e autocompletar o texto já digitado;
- O JSON de resultado deve ser servido por um servidor, preferencialmente escrito em python, ruby ou node;
- A página deve ser responsiva;
- (Opcional, bônus) Diferenciar os caracteres que deram match no resultado do live search aplicando negrito.
- (Opcional, bônus) Ao navegar pelos links de sugestão usando ↓, ↑, deve retornar imagens relacionadas à sugestão no body;
- (Opcional, bônus) As teclas (→, ←) preenchem ou removem, respectivamente, o termo com o termo sugerido. Por exemplo: Digitou fla e usuário apertou →, então preenche com flamengo. Se após completar com flamengo, o usuário apertar ←, volta para o termo fla.
O projeto deve estar "pronto para produção" em termos de:
- Formatação e estruturação do código;
- Performance (client e server);
- Segurança.
Envie as instruções necessárias para rodar o projeto localmente, incluindo todas as dependências. Devemos ser capazes de executar o seu código em uma VM ou máquina limpa com os seguintes comandos, ou algo similar:
git clone seu-repositorio
cd seu-repositorio
make setup
make run
===============================================
O que será avaliado na sua solução?
- As funcionalidades listadas anteriormente devem estar presentes na sua solução.
- Seu código será observado por uma equipe de desenvolvedores que avaliarão a simplicidade e clareza da solução, a arquitetura, documentação, estilo de código, testes automatizados, o design da interface e a implementação do código.
=============
Dicas
- Use ferramentas e bibliotecas open source, mas documente as decisões e os porquês;
- Automatize o que for possível;
- Em caso de dúvidas, pergunte.