Next.js 15 na prática: Crie uma plataforma de Cursos - 2025

Integramos o Clerk para autenticação e gestão de usuários.

Configuramos banco de dados local com Prisma e Docker.

docker run --name codelab-db \

-e POSTGRES_USER=postgres \

-e POSTGRES_PASSWORD=postgres \

-e POSTGRES_DB=codelab-db \

-p 5432:5432 \

-d postgres

Conectamos o Clerk com o banco via Prisma e uso do Ngrok para webhooks.

Mostramos os dados do usuário autenticado na interface.

Adicionamos validação de autenticação e permissões de acesso.

Criamos os modelos do banco que representam cursos, módulos e aulas.

Popularmos o banco com dados fictícios de cursos e tags.

Implementamos a exibição dos cursos com seus respectivos filtros por tag.

Renderizamos os cursos com layout visual pronto para navegação.

Iniciamos a página que mostra detalhes completos de um curso.

Finalizamos layout e informações dinâmicas do curso.

Criamos a lógica de rota para páginas de aula usando regex.

const isCoursePage = /^\/courses\/(?!details\/).+/.test(pathname);

Listamos os módulos e aulas na tela do curso.

Usamos Zustand para armazenar preferências do aluno localmente.

Criamos o sistema de salvamento automático de progresso.

Instalamos e configuramos o Tanstack Query para gerenciar requisições.

Conectamos o progresso ao banco de dados de forma dinâmica.

Criamos redirecionamento automático para próxima aula não finalizada.

Refinamos a lógica para garantir precisão nos dados de progresso.

Implementamos o formulário e estrutura de comentários em cada aula.

Listamos comentários e adicionamos suporte a respostas.

Começamos o fluxo de compra e estrutura inicial do carrinho.

Criamos a interface para pagamento com cartão.

Adicionamos suporte ao pagamento com Pix.

Criamos conta no Asaas e realizamos integração com API.

Finalizamos a lógica de pagamento usando Pix.

Concluímos o fluxo de pagamento via cartão.

Aprimoramos validações e UX do checkout.

Recebemos notificações de pagamento do Asaas.

Criamos verificação se o curso foi realmente comprado.

Listamos os cursos liberados para o aluno.

Adicionamos gráficos para estatísticas de cursos e alunos.

Criamos página administrativa com todos os cursos cadastrados.

Iniciamos o formulário para criação de novos cursos.

Adicionamos upload de imagem com visual moderno.

Integramos o editor TipTap para descrição dos cursos.

Listamos módulos criados dinamicamente no admin.

Permitimos a criação e edição dos módulos e aulas.

Criamos botões e lógica para alterar/remover aulas.

Implementamos ordenação com drag-and-drop.

As aulas são salvas no banco com suporte a edição.

Integramos com o R2 da Cloudflare para armazenar arquivos.

# Cloudflare R2

CLOUDFLARE_ACCOUNT_ID=""

CLOUDFLARE_ACCESS_ID=""

CLOUDFLARE_ACCESS_KEY=""

CLOUDFLARE_R2_BUCKET_NAME=""

CLOUDFLARE_FILE_BASE_PATH=""

Permitimos edição dos dados gerais de um curso.

[

  {

    "AllowedOrigins": [

      "http://localhost:3000"

    ],

    "AllowedMethods": [

      "PUT",

      "GET"

    ],

    "AllowedHeaders": [

      "Content-Type"

    ],

    "ExposeHeaders": [

      "ETag"

    ]

  }

]

Finalizamos os campos restantes da edição.

Criamos os controles de ativação e exclusão de curso.

Listamos e gerenciamos os usuários da plataforma.

Permitimos moderação dos comentários feitos nas aulas.

Criamos a base de notificações push internas.

Criamos componente visual de notificação interativa.

Automatizamos envio de alerta quando um comentário é respondido.

Criamos um ranking com os alunos mais engajados.

Aprendemos a usar cache para melhorar performance.

Configuramos metadados e estrutura para SEO.

Realizamos checklist final para publicação do projeto.

Subimos o projeto com banco remoto via Neon.

Conectamos o projeto a um domínio personalizado.