Este projeto tem como objetivo servir de avaliação técnica para vaga de frontend pleno na empresa WeCode. O mesmo é uma re-imaginação do aplicativo Deezer, que tem como objetivo testar os conhecimentos práticos do aplicante.
A aplicação foi estruturada com duas principais funcionalidades em mente. São elas:
- Tela inicial, com busca e listagem de músicas e;
- Tela de favoritos.
Página inicial da aplicação, conta com as funcionalidades de listagem das músicas mais tocadas do momento, busca de músicas na API aberta do Deezer a partir de input de usuário. A listagem conta com interações nos botões de cada linha, tais como tocar a pausar prévia da música, adicionar ou retirar a música dos favoritos e abrir a música no Deezer a partir de url apropriada.
Segunda página da aplicação, com as funcionalidades interativas da tela inicial, com exceção da busca por músicas.
A aplicação em questão foi feita com o framework Next.JS, criado para a biblioteca ReactJS. Utiliza-se o mesmo para facilidade de roteamento, criação de páginas e renderização em servidor das páginas, diminuindo o impacto que o mesmo tem para o client da aplicação. Além de Next.JS, foram utilizados os seguintes pacotes e bibliotecas para facilitação da construção:
- TypeScript: Superset do JavaScript que permite tipagem, mostrando erros de compilação no código criado e garantindo que os dados enviados não se alterem de seu formato indicado;
- Axios: o pacote mais famoso para realização de promises e requisições HTTP para a linguagem JavaScript;
- Styled Components: Pacote para estilização CSS, que permite a inserção de props e lógica de código para estilos dinâmicos;
- React Icons: Biblioteca com vasta gama de ícones de fácil configuração e utilização;
- Redux: Pacote de gerenciamento de estado, que permite a criação de estados globais, de maneira localizada e previsível;
- Next-PWA: Pacote que permite configuração de funcionalidades PWA na aplicação Next.JS;
- Jest: Um dos pacotes mais famosos para criação de testes automatizados em JavaScript e;
- React Testing Library: Biblioteca com APIs de fácil uso para testagem de aplicações React.
A aplicação em questão foi criada para ser utilizada em navegadores modernos, entretanto a mesma pode ser instalada como um aplicativo para dispositivos mobile ou desktop a partir da configuração PWA inserida no projeto.
A pasta raíz do projeto é baseada em configuração inicial de um projeto Next.JS. Todo o código das telas e componentes se encontra na pasta src.
A pasta src contém o código da aplicação, sendo separada nas seguintes subpastas:
A pasta components possui os componentes utilizados em mais de uma tela ou funcionalidade. Cada componente possui uma pasta própria, contendo um arquivo index.tsx, para renderização do JSX de cada componente, styles.ts para declaração de cada estilo necessário para criação do componente e uma pasta tests, onde os testes unitários do componente são definidos.
A pasta features possui as views individuais do projeto. Foi criada para que se pudesse manter uma arquitetura de micro-frontends, de maneira a isolar cada trecho de código. Cada feature possui uma pasta própria, contendo um arquivo index.tsx, para renderização do JSX da feature principal, uma pasta components para a criação dos componentes únicos de cada feature e uma pasta interfaces para definição da tipagem utilizada apenas na feature em questão.
A pasta lib possui as declarações dos reducers e slices utilizados para a configuração dos estados globais da aplicação, a partir do Redux. A mesma possui sua própria pasta interfaces, uma pasta slices, onde são definidos os estados iniciais e funções de manipulação, o arquivo Provider.tsx, que irá englobar toda a aplicação e dar acesso aos estados, e um arquivo store.ts, que define e exporta os reducers.
A pasta pages possui os índexes de cada página, os quais chamam suas respectivas features, sendo que a página principal (rota '/') está declarada no arquivo index.tsx. Também possui os arquivos padrão do Next.JS, _app.tsx e _document.tsx, necessários para configuração e compilação das páginas principais.
- hooks: Define os hooks customizados da aplicação;
- services: Define a função de chamada de API;
- styles: Define os estilos utilizados globalmente;
- utils: Coleta e exporta funções utilizadas em variados componentes ou features.
Como requisito de aceitação, a aplicação deveria se conectar à API aberta do Deezer, afim de buscar e mostrar dados. Por isso, a aplicação não possui um backend próprio, utilizando a API do Deezer no lugar.
Duas rotas são consumidas, são elas:
- chart, rota que lista as músicas, artistas, playlists e álbuns mais famosos do momento. Dessa rota, a lista de músicas mais tocadas é capturada e mostrada ao usuário;
- search, rota utilizada para buscar músicas específicas, a partir de termos como nome da música, artista ou álbum.
As rotas são utilizadas no SSR (Server Side Rendering) do projeto, a partir da função getServerSideProps, nativa do Next.JS.
Foram criados dois tipos de testes automatizados:
- Testes unitários, que testam a renderização de determinados componentes da aplicação de acordo com condições específicas, bem como variações a partir de interações do usuário, e;
- Testes de integração, que testam a interação do usuário com funcionalidades específicas. Estes testes não foram completados e podem não funcionar corretamente, pois até o momento de realização desta seleção, o autor não possuía experiência e conhecimento suficientes para a criação de tais testes.
- Clone o repositório a partir desta url;
- Rode o comando yarn ou npm install para instalação de dependências;
- Rode o comando yarn dev ou npm run dev para compilação em modo de desenvolvedor;
- Rode o comando yarn build ou npm run build para compilação em modo de produção;
- Caso queira rodar os testes, rode o comando yarn test ou npm run test.