Apoia.Dev é um micro SaaS construído com Next.js 15 e Stripe Connect, inspirado em plataformas como o Apoia.se e BuyMeACoffee, onde qualquer desenvolvedor pode criar sua página personalizada e receber doações via cartão ou Pix.
Este projeto foi desenvolvido com o objetivo de explorar e adquirir conhecimentos em React/Next.js, Stripe, SSR/SSG, e a estrutura moderna de um projeto fullstack com autenticação e webhooks (um pouco diferente do que estou habituado a fazer com Express e NestJS).
⚠️ Este é um projeto de estudo desenvolvido em um curso prático para meu aprendizado com alguns ajustes e personalizações feitas por mim para estilo próprio. Não é um produto comercial e não deve ser utilizado em produção sem as devidas adaptações e verificações de segurança.
- Autenticação via GitHub: Os desenvolvedores podem fazer login usando suas contas do GitHub através do NextAuth.
- Perfil Público: Cada desenvolvedor tem um perfil público com informações básicas (nome, bio, imagem).
- Sistema de Doações: Usuários podem doar valores mensais para desenvolvedores através do Stripe.
- Gestão de Assinaturas: Integração completa com Stripe para gerenciamento de pagamentos recorrentes.
- Webhooks: Tratamento de eventos do Stripe para atualização de status de pagamentos.
- Autenticação com NextAuth (Auth.js) e adaptador Prisma
- Banco de dados PostgreSQL com Prisma ORM
- Integração completa com Stripe (checkout, webhooks, assinaturas)
- Componentes UI com Radix UI e Tailwind CSS
- Validação de formulários com React Hook Form e Zod
- Notificações com Sonner
- TypeScript em todo o projeto
- Framework: Next.js 15
- Linguagem: TypeScript
- Autenticação: NextAuth (Auth.js)
- Banco de Dados: PostgreSQL com Prisma
- Pagamentos: Stripe
- UI: Tailwind CSS + Radix UI
- Node.js (v18 ou superior)
- Conta no Stripe (para configuração das chaves de API)
- Conta no GitHub (para OAuth)
- PostgreSQL
- Clone o repositório:
git clone https://github.com/guuisouza/apoia-dev.git
cd apoia-dev- Instale as dependências:
npm install
- Configure o arquivo .env seguindo o exemplo do arquivo .env.example mas com suas chaves:
## Configurações de ambiente
#AUTHJS - Autenticação
AUTH_SECRET="SECRET GERADO PELO NPX AUTH"
AUTH_GITHUB_ID=YOUR_AUTH_GITHUB_ID
AUTH_GITHUB_SECRET=YOUR_AUTH_GITHUB_SECRET
NEXT_PUBLIC_HOST_URL=http://localhost:3000 # Do next 15 pra frente NEXT_PUBLIC são variáveis que são acessiveis no componente client, sem o prefixo só são acessíveis dentro de component servers
HOST_URL=http://localhost:3000
#DATABASE - Banco de dados hospedado no neon
DATABASE_URL="postgresql://nome:senha@ep-bold-haze-achnlrgy-pooler.sa-east-1.aws.neon.tech/database_name?sslmode=require"
#STRIPE - Configuração de Pagamentos da plataforma
NEXT_PUBLIC_STRIPE_PUBLIC_KEY=pk_test_suakey
STRIPE_SECRET_KEY=sk_test_suakey
STRIPE_WEBHOOK_SECRET=seu_stripe_webhook_secret_gerado_pelo_stripe_CLI- Execute as migrations do Prisma:
npx prisma migrate dev --name init- Inicie o servidor de desenvolvimento:
npm run dev- (Opcional) Para testar webhooks do Stripe localmente, isso vai encaminhar os eventos de teste do Stripe para: POST /api/stripe/webhook
npm run stripe:listen/app
/api
/auth/[...nextauth]
route.ts ⬅️ Rota de autenticação configurada pelo NextAuth (login, logout, callback)
/stripe
webhook/route.ts ⬅️ Recebe os eventos do Stripe (ex: pagamento confirmado)
/creator/[slug]
page.tsx ⬅️ Página pública de doação do criador
/dashboard
page.tsx ⬅️ Página principal do usuário logado
/components
/ui ⬅️ Componentes reutilizáveis (input, button, form etc.)
/lib
auth.ts ⬅️ Configuração do NextAuth
stripe.ts ⬅️ Stripe SDK (server)
stripe-js.ts ⬅️ Stripe JS (client)
/types
next-auth.d.ts ⬅️ Tipagens globais customizadas do NextAuth (ex: campos extras no `user`)
🟢 Concluído para fins de estudo e portfólio.
🔒 Não é um projeto comercial.
🚀 Futuras melhorias podem ser feitas conforme o aprendizado evolui.