Projeto de refatoração de um site estático para uma ONG, convertendo-o em uma Single Page Application (SPA) moderna, utilizando JavaScript puro para manipulação avançada do DOM e modularização.
🔗 Acesse a versão ao vivo aqui!
O principal desafio deste projeto foi aplicar conceitos avançados de JavaScript para atender aos seguintes requisitos:
- Manipulação eficiente do DOM.
- Implementação de um sistema de Single Page Application (SPA) básico.
- Criação de um sistema de templates em JavaScript.
Para construir a aplicação, desenvolvi alguns sistemas centrais do zero:
Um roteador customizado, escrito em JavaScript puro, que:
- "Escuta" as mudanças na URL (
window.location.hash) para saber qual página o usuário quer ver. - Busca dinamicamente o conteúdo (HTML, CSS e JS) da rota solicitada.
- Injeta o conteúdo na tag
<main id="spa-content">sem recarregar a página.
Para páginas com conteúdo dinâmico (como a de "Projetos"), criei um sistema de templates para separar a estrutura (HTML/JS) dos dados:
- Um "molde" em JavaScript (
templateProjetos) define a estrutura do componente. - Os dados brutos ficam separados em (
projetos-data.js). - Ao acessar
/projetos, o roteador busca o template, combina-o com os dados e gera o HTML final em tempo de execução. - Para páginas estáticas (Home, Cadastro), o roteador apenas utiliza
fetchpara buscar o HTML parcial.
Para otimizar o desempenho, os scripts e estilos são carregados sob demanda:
- O
script.js(responsável pelo carrossel) não é carregado na Home. Ele só é importado dinamicamente quando o usuário entra na página/projetos. - O mesmo vale para o
cadastro-validation.jse os arquivos CSS específicos de cada página. Isso economiza recursos e torna o carregamento inicial muito mais rápido!
- JavaScript (ES6+): O herói da festa! 🦸♂️
- Módulos (import/export)
- Fetch API
- Promises e Async/Await
- Template Literals
- Manipulação avançada do DOM
- HTML5 Semântico
- CSS3
- Flexbox
- Grid
- Variáveis CSS
Feito por Romario Costa 👋
Vamos nos conectar!
