SubHub 🎯

Your subscription hub - all your recurring payments in one place

SubHub is a modern and intuitive subscription management application built with React, TypeScript and Tailwind CSS. Keep track of all your recurring expenses, monitor monthly spending, and never miss a renewal date again.

🚀 Funcionalidades

• Dashboard Financeiro: Visualize seu gasto mensal total e gastos por categoria
• Gerenciamento de Assinaturas: Adicione, edite e exclua assinaturas com facilidade
• Assinaturas Compartilhadas: Calcule automaticamente o valor individual para assinaturas compartilhadas
• Lembretes: Configure lembretes personalizados para renovações
• Filtros e Ordenação: Organize suas assinaturas por status, categoria, nome ou valor
• Export/Import: Faça backup dos seus dados exportando para JSON
• Onboarding: Fluxo de boas-vindas intuitivo com dados de exemplo
• Armazenamento Local: Dados salvos no navegador (localStorage)

🛠️ Tecnologias

• React 19 com React Compiler
• TypeScript em modo strict
• Vite 7 para build ultrarrápido
• Tailwind CSS v4 para estilização
• shadcn/ui componentes acessíveis com Radix UI
• date-fns para manipulação de datas

📦 Instalação

# Instalar dependências
npm install

# Iniciar servidor de desenvolvimento
npm run dev

# Build para produção
npm run build

# Preview da build de produção
npm run preview

# Executar linter
npm run lint

🚀 Deploy

Vercel

1. Conecte seu repositório ao Vercel
2. O vercel.json já está configurado
3. Deploy automático a cada push

Netlify

1. Conecte seu repositório ao Netlify
2. O netlify.toml já está configurado
3. Build command: npm run build
4. Publish directory: dist

📁 Estrutura do Projeto

src/
├── components/          # Componentes React
│   ├── ui/             # Componentes shadcn/ui
│   ├── Dashboard.tsx   # Dashboard principal
│   ├── SubscriptionList.tsx
│   ├── SubscriptionForm.tsx
│   ├── SubscriptionCard.tsx
│   ├── DeleteConfirmDialog.tsx
│   ├── DataManagement.tsx
│   ├── LocalStorageWarning.tsx
│   └── Onboarding.tsx
├── hooks/              # Custom React hooks
│   ├── useSubscriptions.ts
│   └── useOnboarding.ts
├── lib/                # Utilitários e helpers
│   ├── storage.ts      # Camada de persistência
│   ├── calculations.ts # Cálculos financeiros
│   └── utils.ts        # Utilitários gerais
├── types/              # Definições TypeScript
│   ├── subscription.ts
│   └── config.ts
├── data/               # Dados mock
│   └── mockSubscriptions.ts
├── App.tsx             # Componente raiz
└── main.tsx            # Entry point

💾 Armazenamento de Dados

Os dados são armazenados localmente no navegador usando localStorage. Isso significa:

• ✅ Privacidade total - seus dados nunca saem do seu navegador
• ✅ Funciona offline
• ⚠️ Limpar cache do navegador apaga os dados
• ⚠️ Dados não são sincronizados entre dispositivos

Recomendação: Exporte seus dados regularmente usando a função de backup na aba Configurações.

🎨 Personalização

O projeto usa Tailwind CSS v4 e pode ser facilmente personalizado editando o arquivo de configuração.

📄 Licença

MIT

🤝 Contribuindo

Contribuições são bem-vindas! Sinta-se à vontade para abrir issues e pull requests.