Do lançamento à experiência de estudo
Desenvolvi o front-end do Modo Fluente, da Michela Ensina, conectando um site público de marketing e vendas a uma aplicação autenticada para acessar os materiais adquiridos. O trabalho freelance começou em maio de 2026, com a entrega inicial concluída em julho.
Meu escopo incluiu arquitetura front-end, componentes reutilizáveis, integração com a API, layouts responsivos e publicação das duas aplicações. Trabalhei com Marco Ryan, responsável pela API Laravel e pelos fluxos de compras, armazenamento e autorização no servidor. Adaptei as interfaces à identidade visual e aos conteúdos fornecidos e aprovados pela Michela.
Duas aplicações, necessidades diferentes
Organizei o front-end em um monorepo com npm workspaces e duas aplicações Next.js App Router, publicadas de forma independente na Vercel.
O marketing precisava dar espaço à oferta, aos mockups do produto, às seções editoriais e às chamadas para ação. A área do aluno precisava de navegação previsível, biblioteca, ferramentas de leitura e estados claros para uso recorrente. A separação permitiu tratar cada experiência sem impor o mesmo layout ou ciclo de publicação às duas.
Ambas consomem a mesma API REST. A interface de estudo apresenta os acessos e a disponibilidade de materiais retornados pelo servidor; elegibilidade de compra e autorização permanecem no contrato do backend.
Preparando o lançamento
Implementei a landing page de vendas, a página Sobre da professora e os estados de apresentação de pré e pós-lançamento. A jornada comercial reúne o guia, os materiais de apoio, o planner semanal e os links para o checkout externo da Hotmart.
Para a lista de espera, construí um endpoint server-side no Next.js entre o formulário e a API Laravel. Ele valida e normaliza os envios, transforma cadastros duplicados e falhas do serviço em feedback útil e integra a confirmação por e-mail via Resend quando habilitada. A configuração de lançamento permite passar da captação de interesse para o direcionamento à compra.
Uma interface de aprendizagem autenticada
Construí os fluxos de login, primeiro acesso, recuperação de senha e sessão, com cliente de API e camada de sessão compartilhados. Dentro da aplicação, o shell responsivo conecta dashboard, biblioteca, progresso e configurações da conta. Tokens semânticos sustentam os temas escuro e claro, enquanto a navegação mobile mantém as principais tarefas de estudo próximas.
O dashboard reúne progresso, materiais recentes e um ponto para continuar os estudos. Os filtros da biblioteca ajudam a localizar conteúdos por tipo e situação de conclusão. Concluir um material ou desfazer essa marcação atualiza o progresso pela API.
Para os PDFs, implementei um leitor na plataforma com PDF.js, renderização em canvas adaptada à largura disponível e à densidade de pixels, estados de carregamento e erro e liberação de recursos. Separei a leitura principal dos downloads de arquivos de apoio, seguindo as permissões retornadas pela API. As páginas de material também comportam vídeo incorporado e anexos complementares.
Manutenção do acervo
Implementei a interface administrativa para listar, criar e editar materiais, enviar arquivos, confirmar exclusões e vincular conteúdos a produtos. Os formulários conectam metadados, configurações de publicação e controles de download dos anexos à API existente, com feedback de carregamento, validação e falhas.
A entrega inicial colocou em produção o site comercial e a experiência de estudo. A iteração com a Michela orientou ajustes de layout, contraste, hierarquia dos componentes e comportamento mobile ao longo do trabalho.
