Como criar uma área de membros com Payload CMS e IA

Quem vende curso online quase sempre começa na Hotmart, na Kiwify ou em alguma plataforma pronta parecida. Funciona bem no início, mas chega um momento em que a empresa cresce, a taxa sobre cada venda começa a doer e a falta de personalização atrapalha. É aí que faz sentido ter uma plataforma própria.

Neste vídeo eu crio uma área de membros completa do zero, sem escrever uma linha de código na mão e sem gastar um real, nem para desenvolver nem para publicar. E o mais importante: em cima de uma base sólida, não um software improvisado que você tem medo de colocar em produção.

Por que não pedir direto para a IA "criar uma área de membros"?

Quem está começando costuma abrir o Claude Code e mandar: "crie para mim uma área de membros". Ele vai criar. O problema vem depois, quando bate a desconfiança: isso está seguro mesmo para colocar no ar?

Autenticação, controle de acesso, sessão, permissão por usuário: isso é a parte que mais dá problema quando é construída do zero sem critério. Então em vez de partir do nada, o caminho é partir de uma base que já resolve tudo isso, e usar a IA para construir a regra de negócio em cima dela.

Essa base, neste projeto, é o Payload.

O que é o Payload CMS?

O Payload é um CMS construído em Next.js, open source, que se apresenta como a alternativa moderna ao WordPress headless. Ele já entrega painel administrativo, autenticação, banco de dados e API prontos. Você começa o projeto com essa fundação e constrói só o que é específico da sua aplicação.

O foco dele é experiência do desenvolvedor e segurança, além de uma modelagem de banco bem mais organizada que a do WordPress.

E por que não usar WordPress para isso?

Eu já criei área de membros em WordPress várias vezes, antes de existir IA. Naquela época fazia sentido: o painel pronto adiantava muito o trabalho e customizar por ali era mais rápido do que programar.

Hoje a conta virou. Programar com IA ficou mais rápido do que configurar plugin, e o WordPress não foi feito para esse tipo de sistema. Uma área de membros grande em WordPress fica pesada por causa da forma como o banco é construído. A comparação detalhada entre Payload e WordPress fica para outro vídeo, mas o resumo é esse.

O que preciso para instalar o Payload?

O pré-requisito é o Node.js na versão 20 ou superior. Confira com:

node -v

Crie a pasta do projeto e rode o instalador:

mkdir ead-payload
cd ead-payload
npx create-payload-app

O assistente faz algumas perguntas importantes:

Pergunta	O que respondi no vídeo
Nome do projeto	ead-payload
Template	website (existe um de e-commerce também, mas não é o caso aqui)
Banco de dados	SQLite, para ser rápido na gravação
Agente de IA	Claude Code, para instalar a skill oficial do Payload

Sobre o banco: usei SQLite porque é rápido de subir, e ele nem é um banco de verdade no sentido tradicional, funciona em cima de um arquivo. Para produção, use PostgreSQL. Em ambiente serverless, como a Vercel, o arquivo do SQLite nem sobrevive entre execuções.

Para que serve a skill do Payload no Claude Code?

Essa é a parte que muda o resultado. A skill coloca a documentação do Payload dentro do Claude Code: como fazer as coisas do jeito certo, quais são as boas práticas do framework e o que não deve ser tocado.

Sem isso, o Claude sai modificando arquivo padrão do framework, arquivo que não é para modificar. Com a skill instalada, ele sabe onde mexer, e o resultado é uma aplicação segura e funcional.

Dá para confirmar se ela foi mesmo instalada usando o comando de plugins dentro do Claude Code:

/plugin

E o MCP do Payload?

O Payload também oferece um MCP. Ele entra em cena depois, com a área de membros já pronta: você conecta sua IA (ChatGPT, Claude, o que preferir) ao sistema e consulta os dados conversando.

Na prática é chegar no chat e pedir: "consulte o aluno XYZ, veja se ele está cadastrado e se a matrícula está ativa". A IA vai no seu sistema e responde. É a mesma ideia do MCP que usei no projeto do CRM aqui do canal.

Como subir o projeto pela primeira vez?

Depois da instalação, entre na pasta do projeto e rode:

npm run dev

Atenção a um detalhe: o instalador cria uma pasta dentro da pasta. Se o comando reclamar, é porque você está um nível acima do projeto. Entre na pasta interna e rode de novo.

Com o servidor no ar, acesse o endereço local. O site padrão do template aparece, e o link do dashboard leva ao painel em /admin. No primeiro acesso o Payload pede para criar o superadministrador: e-mail, senha e nome.

Dentro do painel você encontra as collections. Para quem vem do WordPress, collection é o equivalente ao post type. Para quem não vem, pense em cada collection como uma tabela do banco. O template já traz páginas, posts, mídias, usuários e formulários.

O que uma área de membros precisa ter?

Antes de pedir qualquer coisa para a IA, vale desenhar o que o sistema precisa. No vídeo eu fiz isso no quadro branco, e a lista ficou assim:

• Admin. Quem cadastra os cursos e as aulas.
• Aluno. Quem consome o conteúdo.
• Cursos.
• Módulos. Um curso tem vários.
• Aulas. Cada módulo tem as suas.
• Matrículas. O que liga o aluno ao curso.
• Progresso do aluno. Qual aula ele concluiu e onde parou.
• Mídia. O vídeo e os materiais da aula.
• Acesso controlado. Quem pode ver o quê.

A hierarquia é essa: curso, dentro dele os módulos, dentro dos módulos as aulas, e o progresso registrando o que foi concluído.

Cada item desses vira uma collection separada. Isso não é preciosismo: se você jogar tudo numa tabela só, ela vira uma tabela gigante e o sistema fica pesado com o tempo.

Qual prompt usei para começar?

Não dá para chegar no Claude Code e mandar construir a plataforma inteira numa única mensagem. Não é assim que se trabalha com IA, pelo menos por enquanto. O caminho é pedir primeiro um plano e depois implementar uma parte de cada vez.

Por isso o primeiro prompt roda em modo plano (alterna com Shift + Tab) e termina pedindo explicitamente para não alterar arquivo nenhum:

@payload

Analise completamente este projeto Payload antes de modificar qualquer arquivo.

Quero transformar esta aplicação em uma área de membros para cursos online.

Antes de implementar, crie um plano técnico detalhado considerando:

1. Uma collection autenticável chamada admins, utilizada exclusivamente para acesso ao painel administrativo do Payload.

2. Uma collection autenticável chamada students. Os alunos devem fazer login por uma página personalizada do frontend, mas nunca poderão acessar o painel administrativo do Payload.

3. Collections para:
- media
- courses
- modules
- lessons
- enrollments
- lesson-progress

4. Um curso possui vários módulos.
5. Um módulo pertence a um curso e possui várias aulas.
6. Uma aula pertence a um módulo e também deve possuir uma relação direta com o curso para facilitar consultas e controle de acesso.
7. Um aluno somente poderá visualizar cursos, módulos e aulas quando possuir uma matrícula ativa.
8. O progresso deve ser individual por aluno e por aula.
9. O aluno deve conseguir concluir uma aula e continuar de onde parou.
10. O administrador deve conseguir gerenciar tudo pelo painel do Payload.
11. O frontend do aluno será construído dentro da mesma aplicação Next.js.
12. A autenticação deve utilizar os recursos nativos do Payload e cookies HTTP-only. Não utilize JWT personalizado e não armazene token no localStorage.
13. Qualquer operação feita com a Local API em nome do aluno deve respeitar access control.
14. Não invente APIs ou propriedades. Consulte a skill oficial e os arquivos do projeto.

Mostre:
- arquitetura proposta
- collections e principais campos
- relações
- regras de acesso
- rotas do frontend
- ordem de implementação
- riscos técnicos

Não altere os arquivos ainda.

Por que duas collections de autenticação?

Porque são dois públicos diferentes. O admins existe só para o painel do Payload. O students existe só para a área do aluno, com login numa página personalizada do front-end, e nunca deve conseguir entrar no painel administrativo.

O Payload trabalha bem com isso: o painel é liberado para uma collection autenticável específica, e as demais ficam de fora.

Onde está a segurança no prompt?

Nos itens 12 e 13, que são os mais importantes do texto todo:

• Autenticação nativa do Payload com cookies HTTP-only. Nada de JWT feito na mão.
• Token nunca no localStorage. Token guardado no navegador é token exposto.
• Access control respeitado também na Local API. Não adianta proteger a rota e deixar a consulta interna passar por cima da regra.

É isso que separa uma plataforma que você publica com confiança de uma que você fica com receio de colocar no ar.

Quais perguntas o Claude fez antes de planejar?

Ele leu o projeto, consultou a skill do Payload e voltou com perguntas. As respostas que dei foram:

Pergunta	Resposta
O que fazer com o conteúdo do template de blog?	Remover tudo. Apaguei e recriei o banco, que é o caminho mais limpo.
Como a aula será entregue?	Vídeo externo, não upload.
A aula terá corpo em rich text?	Sim, além do vídeo.
Terá anexos e materiais para download?	Sim.
Quem cadastra os alunos?	Somente o admin.

Sobre a entrega do vídeo: dava para escolher upload direto, mas eu não recomendo. Vídeo hospedado no seu próprio servidor pesa e encarece rápido.

Depois das respostas ele montou o plano completo, com a arquitetura, as collections, as relações e a ordem de implementação. Aí sim é hora de dar o play.

Como deixar a implementação rodando sozinha?

Essa etapa demora bastante. A dica é ativar o modo que dispensa a confirmação a cada ação e ir fazer outra coisa:

claude --dangerously-skip-permissions

Com isso o Claude trabalha no automático, sem parar a cada arquivo esperando aprovação. Vale para um projeto novo como este, onde não existe nada em produção para quebrar.

Esse prompt único adiantou muito mais do que eu esperava. Vários prompts que eu tinha preparado para as etapas seguintes acabaram não sendo necessários.

Como ficou o painel administrativo?

Ele recriou o banco, então o superadministrador criado no início do vídeo foi substituído por um novo. O painel ficou organizado em grupos:

• Administradores e Alunos, separados, cada um com sua autenticação.
• Conteúdo: cursos, módulos, aulas e mídia.
• Matrículas.
• Progresso das aulas.
• Material de aula, com a parte de material protegido, para que o anexo de uma aula não fique acessível a quem não deveria ver.

Na prática: cadastro o curso, dentro dele crio os módulos, dentro do módulo crio as aulas, e em cada aula coloco o vídeo e os anexos.

Como ficou a área do aluno?

Ele criou dois alunos de teste, um matriculado e um sem matrícula, justamente para mostrar o controle de acesso funcionando.

Com o aluno matriculado, a área de membros abre com o curso, o botão para continuar de onde parou, o player do vídeo e a lista de aulas. Ao marcar uma aula como concluída, o progresso é gravado e ele já avança para a próxima.

Com o aluno sem matrícula, a mensagem é a esperada: nenhum curso disponível. Cada aluno enxerga apenas o que a matrícula dele permite.

E no painel, criar uma matrícula nova é questão de selecionar o estudante, escolher o curso e salvar. O aluno que estava sem acesso passa a ver o conteúdo na hora.

Onde hospedar os vídeos das aulas?

No vídeo eu usei o YouTube para demonstrar, e funciona. Para algo mais profissional, muita gente vai para o Vimeo, que cobra mensalidade e nem sempre compensa.

O que eu uso na minha operação é o Bunny.net. A diferença é o modelo de cobrança: não é mensalidade, é crédito. Você só paga pelo que foi assistido, numa porcentagem pequena, o que costuma valer bem mais a pena que as outras plataformas de vídeo. Dá para testar 14 dias antes de decidir.

Como sempre, só indico o que eu uso, testei e validei antes. O link também está na descrição do vídeo.

Como publicar na Vercel de graça?

Com o projeto pronto, o deploy tem dois passos.

1. Subir para o GitHub. Peça ao Claude Code para criar o repositório como privado e publicar o código. Eu uso o MCP do GitHub, o que deixa tudo em um comando só, mas dá para criar o repositório manualmente pelo site e subir pelos comandos que o próprio GitHub mostra.

2. Importar na Vercel. Com a conta da Vercel já conectada ao GitHub, o repositório aparece na lista. Clique em importar e o deploy da aplicação inteira começa ali mesmo.

A Vercel tem plano gratuito, com limites e regras de uso que vale a pena ler antes de escalar. Para um projeto novo, atende bem. Depois é só comprar um domínio e conectar ao projeto.

Conclusão

Em um vídeo saímos do zero e chegamos a uma área de membros publicada: dois tipos de login, cursos, módulos, aulas, matrículas, progresso individual por aluno, material protegido e controle de acesso, tudo sem escrever código na mão e sem custo.

O ponto que faz a diferença não é a IA sozinha, é a combinação: uma base sólida (o Payload, com autenticação e access control nativos), a skill oficial ensinando a IA a respeitar o framework, e um prompt que planeja antes de implementar e trata segurança como requisito desde a primeira linha.

E isso aqui é só o começo. A partir dessa base você melhora, personaliza e transforma no que a sua operação precisar.