Jesus' Corner — Web PWA
App bíblico progressivo (PWA) construído com React + Vite.
Stack
| Camada | Tecnologia |
|---|
| UI | React 18 |
| Build | Vite 5 |
| PWA | vite-plugin-pwa |
| Tipografia | Montserrat (Google Fonts) |
| Estilo | CSS Variables custom |
| Estado | useState / useEffect |
Setup rápido
# 1. Instalar dependências
npm install
# 2. Rodar em desenvolvimento
npm run dev
# 3. Build para produção
npm run build
# 4. Testar build de produção (com PWA)
npm run preview
Abrir http://localhost:5173 no navegador.
Para instalar como PWA no celular:
- Abrir no Chrome ou Safari
- Menu → "Adicionar à tela inicial"
Estrutura do projeto
src/
├── App.jsx # Raiz: estado global e navegação entre abas
├── main.jsx # Entry point React
├── index.css # Design system completo (variáveis CSS)
│
├── components/
│ ├── BottomNav.jsx # Barra de navegação inferior
│ ├── acts/
│ │ └── ActsCard.jsx # Card expansível ACTS (acordeão)
│ └── prayer/
│ └── PrayerRequests.jsx # Sistema de pedidos de oração
│
├── screens/
│ ├── HomeScreen.jsx # Início: anel %, sessão do dia, stats
│ ├── PrayerScreen.jsx # Oração: timer + ACTS + pedidos
│ ├── JourneyScreen.jsx # Jornada: mapa dos 8 blocos + cronograma
│ ├── ReadingScreen.jsx # Leitura: lista de sessões
│ ├── ProgressScreen.jsx # Progresso: anel grande + barras por bloco
│ └── ProfileScreen.jsx # Perfil: dados + configurações
│
└── data/
└── bibleBlocks.js # Dados dos 8 blocos + sessões + planos
Backend — Supabase
O app já usa Supabase (Postgres + Auth) para autenticação e sincronização de
progresso entre dispositivos — não é mais localStorage-only. Para rodar
localmente:
- Crie um projeto gratuito em supabase.com.
- Em Project Settings → API, copie a Project URL e a chave anon.
- Copie
.env.example para .env e preencha VITE_SUPABASE_URL /
VITE_SUPABASE_ANON_KEY.
- No SQL Editor do projeto, rode a migração em
supabase/migrations/0001_user_data.sql.
- Em Authentication → Email Templates, configure o template de
recuperação de senha no formato OTP numérico (o app usa um código de 6
dígitos, não um link mágico).
Próximos passos para produção
1. Texto bíblico NVI
- API licenciada:
https://scripture.api.bible
- Ou banco de dados próprio (requer licença da Biblica)
2. Deploy
# Vercel (mais simples)
npm install -g vercel
vercel
# Ou Netlify
npm install -g netlify-cli
netlify deploy --prod --dir=dist
6. Ícones do app
Adicionar em public/icons/:
icon-192.png (192×192px)icon-512.png (512×512px)
Usar o logo do Jesus' Corner como base.
Variáveis CSS do Design System
--or: #9D4300 /* Marrom-queimado principal (cor da logo) */
--olt: #F5E9DE /* Tom claro (backgrounds) */
--bk: #121212 /* Preto principal */
--g1 a --g6 /* Escala de cinzas */
--gr: #16A34A /* Verde (pedidos atendidos) */
--re: #DC2626 /* Vermelho (pedidos negados) */
Algoritmo de sessões por palavras (NVI)
A divisão das sessões segue a regra:
- Sempre começa no início de um capítulo
- Nunca interrompe um capítulo no meio
- Soma capítulos consecutivos até atingir a meta
- Se ultrapassar, conclui o capítulo inteiro
- Próxima sessão começa no capítulo seguinte
Implementar em src/utils/sessionAlgorithm.js com base na contagem de
palavras por capítulo da NVI (requer licença da Biblica).
