O Desafio: 5 Dias para Construir um Portal Interdimensional (e Conseguir um Emprego)

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.

Decifrando a Missão: Requisitos e Estratégia

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:

• Listagem de personagens e episódios, com paginação.
• Páginas de detalhes para cada item, acessadas via rotas.
• Uma barra de busca global que deveria funcionar em todas as listagens e manter o filtro ativo ao trocar de página.

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 Arquitetura: Construindo um Alicerce Sólido em Angular

A base de um bom projeto é sua arquitetura. Pensando na modularização e na performance, estruturei o projeto da seguinte forma:

• Serviços Dedicados: Centralizei todas as responsabilidades. Criei o 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.
• Lazy Loading de Componentes: Utilizei o loadComponent nas definições de rota para carregar as páginas sob demanda. Isso melhora o tempo de carregamento inicial da aplicação.
• Tipagem Forte: Desde o início, criei interfaces TypeScript para todas as respostas da API (Character, Episode, etc.), garantindo a integridade dos dados por toda a aplicação, um critério chave da avaliação.

O Diferencial: Indo Além do "Obrigatório" para se Destacar

O documento do teste dizia: "Qualquer funcionalidade extra é bem-vinda e será um diferencial". Para mim, essa foi a senha.

1. Autenticação e Rotas Protegidas

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!
},
// ...

2. Sistema de Favoritos

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.

O Resultado: Missão Cumprida

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!