Projeto Fullstack: Tropa dos Lanternas Verdes!

Estava assistindo a série dos Lanternas na HBO Max, e como não tinha nada para fazer na sexta-feira a noite decidi desenvolver um projeto FullStack baseado nos 3 Lanternas Verdes da série.

Primeiro desenvolvi a API Rest para consumir as informações no Frontend da página web.

Arquitetura & Tecnologias Utilizadas

Frontend (SPA - Single Page Application):

• Vite: Build tool ultrarrápida para desenvolvimento ágil.
• HTML5 & CSS3: Design responsivo com CSS Grid, variáveis globais, animações e estilo Neon/Glassmorphism.
• JavaScript (ES6+): Consumo assíncrono de API via fetch(), manipulação dinâmica do DOM, modal interativo e tratamento de estados (loading e erros).

Backend (API REST):

• Node.js + Express 5: Servidor HTTP robusto e modular.
• Arquitetura em Camadas: Organização limpa separando Controllers, Services, Repositories, Routers, Middlewares e Utils.
• Segurança & Boas Práticas: Suporte a CORS, gestão de credenciais com dotenv e padrão CommonJS.
• Deploy na Nuvem: API publicada em ambiente de produção no Render.

Principais Funcionalidades

• Interface 100% responsiva para desktop e mobile.
• Cards dinâmicos com perfil e resumo dos heróis.
• Modal detalhado exibindo a biografia completa ao clicar no card.
• Endpoints RESTful com busca por ID e filtragem via Query Parameters (?nome=...).

Links do Projeto

• API em Produção: https://lnkd.in/eHFEeye6
• Repositório no GitHub: https://lnkd.in/eFcuA4qt
• Site: https://lnkd.in/ev57HG7k
• Linkedin: https://www.linkedin.com/in/natalvides-neto/
• GitHub: https://github.com/natalvidesneto