Tone Monte
InícioBlogServiçosPortfólioSobreContato
TM
Tone Monte

Desenvolvedor Full Stack apaixonado por criar experiências digitais incríveis e compartilhar conhecimento através do blog.

Menu

  • Blog
  • Projetos
  • Portfólio
  • Sobre mim
  • Produtos
  • Serviços
  • Todos os Posts

Categorias

  • Business
  • Design
  • Inglês
  • Lifestyle
  • Livros
  • Projetos
  • Tecnologia

Contato

Disponível para projetos:
Desenvolvimento Full Stack, Consultoria Técnicatonelopes.dev@gmail.com

Entrar em contato →

© 2025 Tone Monte. Todos os direitos reservados.

Política de PrivacidadeTermos de Serviço
    O Projeto Angular que me Garantiu uma Vaga na L5 Networks: Um Case de Sucesso
    Projetos & Código
    Projetos & Código

    O Projeto Angular que me Garantiu uma Vaga na L5 Networks: Um Case de Sucesso

    Tone Lopes
    Tone Lopes
    20 de maio de 2025
    9 min de leitura
    Recebi um teste prático com prazo de 5 dias. O resultado? Uma vaga de desenvolvedor. Aqui, detalho a estratégia, as decisões técnicas e os diferenciais do projeto que me aprovou na L5 Networks.

    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.

    Texto Alternativo da Imagem

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

    Texto Alternativo da Imagem

    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.

    Texto Alternativo da Imagem

    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.

    Texto Alternativo da Imagem

    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!

    Gostou do post?

    Compartilhe com seus amigos!

    Posts Relacionados

    Continue explorando conteúdos similares que podem interessar você

    Estudo de caso: criando um sistema de autoatendimento com Next.js + Prisma
    Projetos & Código
    19 de setembro de 2025

    Estudo de caso: criando um sistema de autoatendimento com Next.js + Prisma

    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.

    Ler Mais15 min de leitura
    Graninha App — como criei meu primeiro SaaS de finanças pessoais
    Projetos & Código
    19 de setembro de 2025

    Graninha App — como criei meu primeiro SaaS de finanças pessoais

    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.

    Ler Mais12 min de leitura
    DevLinks: Como Criei Minha Árvore de Links com o Curso da Rocketseat
    Projetos & Código
    28 de dezembro de 2022

    DevLinks: Como Criei Minha Árvore de Links com o Curso da Rocketseat

    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.

    Ler Mais6 min de leitura

    Comentários

    Compartilhe suas ideias e participe da discussão