🎯 Spark Boilerplate

Um boilerplate moderno e completo para React com TypeScript, equipado com sua biblioteca de componentes UI e autenticação Supabase.

✨ Características

• React 18 com TypeScript
• Vite como bundler para performance máxima
• @alanssant0s/spark-ds - Biblioteca de componentes UI moderna
• Supabase para autenticação e backend
• Tailwind CSS para estilização
• React Query para gerenciamento de estado e cache
• React Router para navegação
• Sistema de roles integrado
• Tema escuro/claro automático
• Totalmente responsivo

🚀 Começando

Pré-requisitos

• Node.js 18+
• npm ou yarn
• Conta no Supabase

Instalação

1. Clone o repositório

git clone https://github.com/seu-usuario/spark-boilerplate.git
cd spark-boilerplate

2. Instale as dependências

npm install

3. Configure as variáveis de ambiente

cp env.example .env.local

Edite o arquivo .env.local com suas credenciais do Supabase:

VITE_SUPABASE_URL=sua_url_do_supabase
VITE_SUPABASE_ANON_KEY=sua_chave_anonima

4. Configure o Supabase

Execute o arquivo supabase/boilerplate-setup.sql no SQL Editor do Supabase para configurar as tabelas de usuários e roles.

5. Execute o projeto

npm run dev

O projeto estará disponível em http://localhost:5173

📁 Estrutura do Projeto

src/
├── components/          # Componentes React
│   ├── auth/           # Componentes de autenticação
│   ├── layouts/        # Layouts da aplicação
│   ├── ui/             # Componentes UI locais (se necessário)
│   └── errors/         # Componentes de erro
├── contexts/           # Contextos React
├── hooks/              # Hooks customizados
├── pages/              # Páginas da aplicação
│   ├── auth/           # Páginas de autenticação
│   └── errors/         # Páginas de erro
├── config/             # Configurações
├── lib/                # Utilitários e configurações
├── types/              # Definições de tipos TypeScript
└── utils/              # Funções utilitárias

🎨 Componentes UI

Este boilerplate usa a biblioteca @alanssant0s/spark-ds que inclui:

• Formulários: Input, Textarea, Select, Checkbox, Switch, Radio
• Navegação: Button, Link, Breadcrumb, Tabs, Menu
• Layout: Card, Container, Grid, Separator
• Feedback: Toast, Alert, Progress, Skeleton
• Data Display: Table, Badge, Avatar, Tooltip
• Overlay: Modal, Drawer, Popover, Tooltip

Uso dos Componentes

import { Button, Card, Input } from '@alanssant0s/spark-ds'

function MyComponent() {
  return (
    <Card>
      <Input placeholder="Digite algo..." />
      <Button>Clique aqui</Button>
    </Card>
  )
}

🔐 Autenticação e Roles

O sistema de autenticação inclui:

Roles Disponíveis

• admin: Acesso total ao sistema
• user: Usuário padrão
• moderator: Usuário com permissões intermediárias

Verificação de Permissões

import { useAuth } from '@/contexts/AuthContext'

function ProtectedComponent() {
  const { user, hasPermission } = useAuth()
  
  if (!hasPermission('admin')) {
    return <div>Acesso negado</div>
  }
  
  return <div>Conteúdo protegido</div>
}

Proteção de Rotas

import { ProtectedRoute } from '@/components/auth/ProtectedRoute'

// No App.tsx
<Route element={<ProtectedRoute />}>
  <Route path="/dashboard" element={<Dashboard />} />
</Route>

🎯 Páginas Incluídas

• Home (/) - Página inicial do boilerplate
• Users (/users) - Gestão de usuários (apenas admin)
• Profile (/profile) - Perfil do usuário
• Login (/auth/login) - Página de login
• Register (/auth/register) - Página de registro
• Forgot Password (/auth/forgot-password) - Recuperação de senha

🛠️ Scripts Disponíveis

npm run dev          # Desenvolvimento
npm run build        # Build de produção
npm run build:dev    # Build de desenvolvimento
npm run preview      # Preview do build
npm run lint         # Linting

🔧 Configurações

Tailwind CSS

O projeto usa Tailwind CSS com configurações customizadas. As classes estão organizadas por:

• Layout: Container, Grid, Flexbox
• Typography: Text, Headings, Fonts
• Colors: Primary, Secondary, Muted
• Components: Buttons, Cards, Forms

TypeScript

Configurações otimizadas para:

• Strict mode habilitado
• Path mapping configurado
• Tipos automáticos do Supabase

📱 Responsividade

O boilerplate é totalmente responsivo com breakpoints:

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

🌙 Tema Escuro/Claro

O sistema de temas é automático e detecta a preferência do usuário:

import { useTheme } from 'next-themes'

function ThemeToggle() {
  const { theme, setTheme } = useTheme()
  
  return (
    <Button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
      Alternar tema
    </Button>
  )
}

🚀 Deploy

Netlify (Recomendado)

O Spark Boilerplate já está configurado para deploy no Netlify com todas as otimizações necessárias.

Deploy Rápido

1. Conecte seu repositório ao Netlify
2. Configure as variáveis de ambiente:

   VITE_SUPABASE_URL=sua_url_do_supabase
   VITE_SUPABASE_ANON_KEY=sua_chave_anonima

3. Deploy automático - O netlify.toml já está configurado!

Configurações Incluídas

• ✅ Build otimizado: npm run build
• ✅ SPA redirects: Configurados automaticamente
• ✅ Headers de segurança: XSS, CORS, etc.
• ✅ Cache otimizado: Assets com cache de 1 ano
• ✅ HTTPS automático: SSL/TLS configurado
• ✅ CDN global: Performance otimizada

Guia Completo

Consulte o arquivo DEPLOY_NETLIFY.md para instruções detalhadas.

Vercel

1. Conecte seu repositório ao Vercel
2. Configure as variáveis de ambiente
3. Deploy automático

🤝 Contribuindo

1. Fork o projeto
2. Crie uma branch para sua feature (git checkout -b feature/AmazingFeature)
3. Commit suas mudanças (git commit -m 'Add some AmazingFeature')
4. Push para a branch (git push origin feature/AmazingFeature)
5. Abra um Pull Request

📄 Licença

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

🙏 Agradecimentos

• Supabase - Backend e autenticação
• Vite - Build tool
• Tailwind CSS - CSS framework
• React Query - Gerenciamento de estado

📞 Suporte

Se você encontrar algum problema ou tiver dúvidas:

• Abra uma issue
• Entre em contato: [[email protected]]

Criado com ❤️ por Alan Santos