Resumo
O site oficial do Centro Espiritualista Caboclo Tupinambá foi criado para dar presença digital a uma instituição religiosa que precisava de um canal para compartilhar informações, eventos e conteúdo educativo. O diferencial do projeto é o suporte PWA com acesso offline completo, essencial porque a instituição não tem acesso à internet durante alguns de seus encontros.
O Desafio
A comunicação da instituição era fragmentada e dependia de meios informais. O público precisava de um lugar único para consultar a agenda de eventos (giras), acessar conteúdo religioso e conhecer a história da casa. Além disso, o site precisava funcionar offline, já que os encontros acontecem em locais sem conexão à internet.
A Solução
Desenvolvi uma aplicação web com React e suporte a PWA, com cache dinâmico que permite o conteúdo funcionar como um aplicativo instalado no celular, acessível mesmo sem conexão.
Stack
| Tecnologia | Uso |
|---|---|
| React + TypeScript | Framework de UI com tipagem estática |
| Vite | Build tool e dev server |
| React Router | Roteamento client-side |
| Tailwind CSS | Estilização utilitária |
| Material-UI | Componentes de UI e ícones |
| Service Worker | Cache dinâmico para acesso offline completo (PWA) |
| Netlify | Hospedagem e deploy |
Estrutura do Projeto
caboclo-tupinamba-frontend/
├── public/ # Assets estáticos e dados
│ ├── giras.ts # Base de dados das giras (eventos)
│ └── biblioteca.ts # Acervo da biblioteca
├── src/
│ ├── Components/ # Componentes reutilizáveis
│ └── Pages/ # Páginas da aplicação
│ ├── Home
│ ├── O Centro
│ ├── História da Umbanda
│ ├── Biblioteca
│ └── Entidades
└── index.html # HTML base (meta tags, GA4)
Funcionalidades
- Calendário dinâmico de eventos mensais (giras)
- Galeria de eventos passados com fotos e descrições
- Conteúdo religioso (orações, cantos, entidades)
- PWA instalável com suporte offline usando cache dinâmico
- Design responsivo mobile-first, otimizado para o público que acessa pelo celular
Design e Experiência
O design foi guiado pela clareza e acolhimento. Trabalhei uma hierarquia visual simples, com tipografia legível e cores equilibradas que refletem a identidade da casa. As seções foram organizadas em blocos curtos e objetivos. Botões grandes, contrastes adequados e feedbacks visuais reforçam a acessibilidade em qualquer dispositivo.
Resultados
- O site se tornou o principal canal de comunicação da instituição
- O número de visitantes presenciais mais que dobrou após o lançamento
- O acesso offline permitiu consulta de conteúdo durante os encontros sem internet
- Redução significativa de dúvidas recorrentes sobre horários e eventos