Tudo começou com um e-mail: "Teste Prático - Front-end". Era o desafio da L5 Networks, uma SPA (Single Page Application) que consumiria a API pública de Rick & Morty. O prazo? 5 dias.
Para mim, não era apenas um teste, mas uma oportunidade de construir algo divertido e, principalmente, de mostrar como eu penso e trabalho. Mais do que apenas cumprir requisitos, meu objetivo era entregar um produto com a qualidade e o cuidado que eu teria se já fizesse parte do time.
O desafio era claro: criar uma aplicação no modelo de dashboard, com cabeçalho e menu lateral fixos, utilizando Angular 17+ e Bootstrap.
Os requisitos mínimos eram:
A avaliação seria baseada em clareza de código, modularização, documentação e, crucialmente, uma forte tipagem com TypeScript.
Minha estratégia foi simples: cumprir 100% dos requisitos obrigatórios com excelência e atacar os pontos opcionais para mostrar que eu podia ir além.
A base de um bom projeto é sua arquitetura. Pensando na modularização e na performance, estruturei o projeto da seguinte forma:
RickMortyService
para as chamadas à API, o AuthService
para o login e o SearchService
para gerenciar o estado da busca. Isso mantém o código organizado e fácil de manter.loadComponent
nas definições de rota para carregar as páginas sob demanda. Isso melhora o tempo de carregamento inicial da aplicação.Character
, Episode
, etc.), garantindo a integridade dos dados por toda a aplicação, um critério chave da avaliação.O documento do teste dizia: "Qualquer funcionalidade extra é bem-vinda e será um diferencial". Para mim, essa foi a senha.
O login era opcional, mas implementá-lo demonstrava conhecimento sobre segurança e gerenciamento de estado. Criei um AuthService
que gerencia a sessão do usuário usando sessionStorage
e um token com expiração.
Para proteger as rotas, implementei um AuthGuard
, como pode ser visto na nossa configuração de rotas:
// src/app/app.routes.ts
// ...
{
path: 'characters',
loadComponent: () => import('./pages/characters-list/characters-list.component'),
canActivate: [AuthGuard], // <-- Rota protegida!
},
// ...
Para adicionar um toque de produto e mostrar que penso na experiência do usuário, criei um FavoritesService
. Essa funcionalidade, que não foi pedida, permite que o usuário logado salve seus personagens favoritos, usando o localStorage
para persistir os dados.
Após os 5 dias de trabalho focado, subi o projeto para o GitHub e enviei o e-mail.
A combinação de uma base sólida que cumpria todos os requisitos, com funcionalidades extras que mostravam proatividade e conhecimento de produto, resultou na melhor resposta possível: a aprovação para a vaga na L5 Networks.
Este projeto é a prova de que um teste técnico é a sua chance de brilhar. Não encare como uma prova, mas como o seu primeiro projeto para a futura empresa.
Convido você a explorar o código-fonte no GitHub e a navegar pela aplicação em produção.
Nos próximos posts, farei um deep-dive em partes específicas deste projeto, como o serviço de API e a lógica de autenticação. Fique ligado!
Compartilhe com seus amigos!
Continue explorando conteúdos similares que podem interessar você
Uma visão completa do backend, frontend e lógica de negócio por trás do Selfcheckout, meu projeto focado em agilidade para pequenos comércios.
Do conceito à publicação: detalhes técnicos, decisões de stack, UI e o que aprendi com a primeira versão pública do Graninha.
Um dos meus primeiros projetos práticos: um agregador de links com light e dark mode. Veja o processo, as tecnologias e o código por trás deste projeto da Rocketseat.
Compartilhe suas ideias e participe da discussão