🎓 Portfólio: Clubinho Academy (Corações Preciosos)

Papel no Projeto: Desenvolvedor(a) Front-end / Full-stack (ajuste conforme necessário) Tipo de Projeto: Plataforma de E-learning (SaaS / Área de Membros) Tecnologias principais: React, TypeScript, Tailwind CSS, Supabase, shadcn/ui.

📌 Visão Geral do Projeto

O Clubinho Academy (Corações Preciosos) é uma área de membros exclusiva voltada para a comunidade Pais com Propósito. O objetivo da plataforma é oferecer um ambiente digital seguro, educativo e familiar onde os pais encontram recursos e conteúdos em vídeo para auxiliar na criação dos filhos fundamentada na fé cristã.

A plataforma foi concebida para atender dois públicos distintos:

1. Os Membros (Pais e Filhos): Que precisam de uma interface acolhedora, amigável e de fácil navegação para consumir o conteúdo (cursos, trilhas de aprendizagem e vídeos).
2. Os Administradores: Que precisam de um dashboard completo e robusto para gerenciar usuários, trilhas de cursos da vitrine, acesso, métricas de engajamento (analytics), feedbacks e logs de sistema.

🎯 O Desafio

O principal desafio do projeto foi desenhar e construir do zero uma plataforma de streaming educacional que equilibrasse complexidade técnica com um design lúdico e intuitivo. Era crucial garantir alta performance com carregamento fluido de vídeos, além de implementar um forte sistema de controle de acesso (Grupos de Acesso/Roles) e segurança de dados dos membros.

🛠️ A Solução & Funcionalidades Desenvolvidas

A arquitetura da plataforma foi dividida em dois grandes módulos: Área do Membro e Painel Administrativo.

👩‍💻 Experiência do Membro (Member Area)

• Dashboard & Biblioteca: Uma interface limpa onde os usuários visualizar as trilhas de aprendizado disponíveis.
• Player de Cursos: Um player de vídeo engajador com lista de aulas interativas na lateral, barra de progressão em tempo real e foco total no aprendizado.
• Perfil Customizável: Páginas de gerenciamento de perfil completas, seguras e com fluxos de UX amigáveis.
• Dark Mode / Light Mode: Suporte nativo à preferência do usuário, mantendo as diretrizes de acessibilidade e legibilidade.

⚙️ Painel de Administração (Admin Area)

• Dashboard de Analytics: Telas de acompanhamento de KPIs utilizando gráficos interativos (recharts) para mensurar acesso e engajamento das famílias.
• CMS e Gestão de Vitrine: Módulos robustos para cadastro de cursos, lições (ModuleLessons) e gerenciamento dos eixos temáticos na vitrine do usuário.
• Gestão de Controle de Acesso: Sistema de Grupos de Acesso (Access Groups) determinando de forma granulada o que cada perfil de membro pode consumir.
• Gestão de Comunidade: Visualização de Logs de Sistema, disparo de notificações em massa e gestão de membros e feedbacks diretamente do painel.

🎨 Design System e UX/UI

Sendo uma plataforma para o nicho "família e fé", a premissa do design foi a criação de um ambiente seguro e acolhedor:

• Formas Arredondadas e Suaves: Uso intenso de bordas arredondadas (radius customizados) em botões e cards para transmitir receptividade.
• Paleta de Cores Vibrante e Semântica: O "Azul Vibrante" atua como cor principal guiando o progresso, enquanto o "Verde Esmeralda" recompensa ações de conclusão de aulas.
• Tipografia Estratégica: A combinação de Nunito para títulos (trazendo um ar lúdico e amigável) e Inter para o corpo de texto (garantindo máxima legibilidade).

💻 Stack Tecnológico

O projeto foi estruturado utilizando as ferramentas mais modernas do ecossistema front-end para garantir tipagem forte, manutenção e escalabilidade:

• Core: React 18, Vite e TypeScript.
• Estilização e UI: Tailwind CSS acoplado ao shadcn/ui (Radix UI) para componentes acessíveis e facilmente personalizáveis. Animações fluidas com Framer Motion.
• Roteamento e Estado: React Router DOM para controle de rotas privadas/públicas e @tanstack/react-query para gerenciamento de estados assíncronos e cache.
• Formulários e Validação: React Hook Form em conjunto com Zod blindando a plataforma contra erros de input de usuário.
• Back-end & Autenticação: Supabase fornecendo banco de dados (PostgreSQL), Auth, Edge Functions (para a API segura integrando metadados) e Storage de mídia.

🚀 Resultados e Lições Aprendidas

Construir o Clubinho Academy me permitiu aprofundar drasticamente conhecimentos na estruturação de grandes aplicações SPA com React. A padronização da estrutura de pastas, a separação rigorosa entre as lógicas de negócio dos administradores e dos membros, e a integração com o Supabase RLS (Row Level Security) garantiram um produto final não apenas muito bonito visualmente, mas incrivelmente rápido e seguro. Hoje o projeto está com 10.000 usuários ativos