🎉 Bem-vindo(a) ao Sistema de Gestão de Voluntários da COMQ!

🗂️ Visão Geral do Projeto

Este é um Sistema de Gestão de Voluntários desenvolvido em React Router V7 (framework mode), TypeScript, TailwindCSS e Firebase. O objetivo é ajudar líderes e voluntários a organizar e controlar as horas de trabalho.

🏗️ Principais Componentes & Arquitetura

• Frontend:

  • Feito com React + TypeScript
  • Utiliza React Router V7 para navegação.
  • Estilização com TailwindCSS.

• Backend:

  • Utiliza Firebase para autenticação e banco de dados em produção.
  • Em desenvolvimento, usa um arquivo db.json local para simular o banco.

• Renderização:

  • Suporte a Server-side Rendering (SSR) para melhor performance.

• Build & Deploy:

Scripts prontos para build (npm run build) e deploy via Docker.

⚙️ Configuração do Projeto

🛠️ Instalação

Primeiro, instale as dependências do projeto:

npm install

✅ Rodando o Projeto Localmente

Ambientes Específicos

Para diferentes ambientes de desenvolvimento:

# Ambiente local (utiliza o arquivo db.json como banco de dados local)
npm run dev:local

# Ambiente de staging (utiliza variáveis de ambiente definidas no arquivo .env)
npm run dev:staging

Nota para usuários Windows: Se você encontrar problemas com os comandos de ambiente, utilize os comandos abaixo:

# Ambiente local
npm run dev:local:win

# Ambiente de staging
npm run dev:staging:win

📁 Configuração do Banco Local

1. Crie o arquivo db.json na pasta app/.server/db/. Esse arquivo não será versionado.
2. A aplicação estará disponível em http://localhost:5173.

🚀 Build para Produção

Para gerar a build de produção, execute:

npm run build

Para iniciar o servidor de produção:

npm run start

🚢 Deployment

Docker Deployment

Para construir e rodar a aplicação usando Docker:

docker build -t comq-app .

# Execute o container
docker run -p 3000:3000 comq-app

🛠️ Tecnologias Utilizadas

Frontend

• React (^19.1.0) - Biblioteca de interface
• React Router (^7.5.3) - Roteamento e framework
• TypeScript (^5.8.3) - Tipagem estática
• TailwindCSS (^4.1.4) - Framework CSS

Backend

• Firebase (^11.7.1) - Banco de dados e autenticação
• Firebase Admin (^13.3.0) - SDK administrativo
• Node.js - Runtime do servidor

Build & Dev Tools

• Vite (^6.3.3) - Bundler e dev server
• @react-router/dev - Ferramentas de desenvolvimento

📝 Convenções e Boas Práticas

TypeScript

• Sempre utilize tipos e interfaces para garantir segurança e clareza no código.

Organização

• Separe componentes, rotas e lógica de servidor em pastas distintas.
• Use nomes claros e descritivos para arquivos, funções e variáveis.

Estilização

• Prefira classes utilitárias do TailwindCSS.
• Evite estilos inline.

Controle de Versão

• Não versionar arquivos sensíveis ou de dados locais (db.json, .env).

🔧 Solução de Problemas

Problemas com Variáveis de Ambiente (Windows)

Se você estiver no Windows e encontrar problemas com os scripts dev:local ou dev:staging, instale o cross-env:

npm install --save-dev cross-env

Depois atualize os scripts no package.json:

{
  "scripts": {
    "dev:local": "cross-env ENV=local react-router dev",
    "dev:staging": "cross-env ENV=staging react-router dev"
  }
}

Problemas de Porta

Se a porta 5173 estiver ocupada, o Vite automaticamente tentará usar a próxima porta disponível.

---

Construído com ❤️ usando React Router e Firebase. 💻🚀👍