Summary
The official website for the Centro Espiritualista Caboclo Tupinambá was created to establish a digital presence for a religious institution that needed a channel to share information, events and educational content. The standout feature is PWA support with full offline access — essential because the institution has no internet connectivity during some of its gatherings.
The Challenge
The institution's communication was fragmented and relied on informal channels. The community needed a single place to check the events calendar (giras), access religious content, and learn about the history of the center. The site also needed to work offline, as gatherings take place in locations without internet access.
The Solution
I built a web application with React and PWA support, using dynamic caching to allow content to function like an installed mobile app, accessible even without a connection.
Stack
| Technology | Purpose |
|---|---|
| React + TypeScript | UI framework with static typing |
| Vite | Build tool & dev server |
| React Router | Client-side routing |
| Tailwind CSS | Utility-first styling |
| Material-UI | UI components & icons |
| Service Worker | Dynamic caching for full offline access (PWA) |
| Netlify | Hosting & deployment |
Project Structure
caboclo-tupinamba-frontend/
├── public/ # Static assets and data
│ ├── giras.ts # Spiritual sessions dataset
│ └── biblioteca.ts # Library books dataset
├── src/
│ ├── Components/ # Reusable components
│ └── Pages/ # Page-level components
│ ├── Home
│ ├── O Centro
│ ├── História da Umbanda
│ ├── Biblioteca
│ └── Entidades
└── index.html # HTML shell (meta tags, GA4)
Features
- Dynamic calendar of monthly events (giras)
- Religious content (prayers, songs, entities)
- Installable PWA with offline support using dynamic caching
- Responsive, mobile-first design, optimized for mobile users
Design & Experience
The design was guided by clarity and warmth. I worked on a simple visual hierarchy with readable typography and balanced colors that reflect the institution's identity. Sections were organized into short, focused blocks. Large buttons, adequate contrast and visual feedback reinforce accessibility on any device.
Results
- The site became the institution's primary communication channel
- In-person visitors more than doubled after launch
- Offline access allowed content to be consulted during gatherings without internet
- Significant reduction in recurring questions about schedules and events