🚀 Oferta especial: 60% OFF no CrazyStack - Últimas vagas!Garantir vaga →
CrazyStack
Voltar para Home
Guia SaaS

Guia Completo Plataforma SaaS com AI Code

Construa sua própria plataforma de cursos empresariais com autenticação, organização e embed de vídeos usando Claude Code e Supabase.

SaaS com AI Code

Passo a Passo Criação de Plataforma Completa

Construa uma plataforma SaaS multiempresa completa com autenticação, gerenciamento de cursos, sistema de vídeos e administração avançada usando tecnologias modernas.

100%
AI Coding
2 dias
de Desenvolvimento
Multi-org
Empresarial
2 MPCPs
Supabase + UI Libs
cloud-code.ts
npx create vite@latest my-app --template react-ts && cd my-app && npm install

O que é uma Plataforma SaaS com AI Code

Plataforma de ensino criada com foco em empresas, permitindo múltiplas organizações, controle de usuários, categorias de cursos, embed de vídeos (Vimeo/YouTube), uso de Supabase como backend e interface feita com Claude Code e Certainty UI.

Funcionalidades Principais Recursos

Veja porque essa plataforma entrega tanto em tão pouco tempo

Multi-organizações

Cada empresa acessa apenas seus cursos, usuários e progresso controlado pelo ID da companhia.

Cursos e Categorias

Crie cursos com níveis de dificuldade e categorias customizadas para públicos técnicos e não técnicos.

Embeds via URL

Adicione aulas com vídeos do Vimeo ou YouTube, configurando duração e ativando visibilidade com um clique.

Administração Segura

Acesso dividido entre admins e alunos, com autenticação Supabase e painel de controle integrado.

Build em Claude Code

Interface inteira criada com código assistido usando Claude Code e Certainty UI para performance e agilidade.

Deploy com Vite

Projeto inicial criado com Vite JS + TS, garantindo estrutura moderna e leve desde o início.

Começo do Projeto

Etapas fundamentais da criação: estrutura front-end, banco de dados e conexão no deploy.

Criar Projeto Vite

npm create vite@latest my-saas-app -- --template react-ts && cd my-saas-app && npm install

Instalar Certainty UI

npm install certainty-ui

Conectar Supabase

npm install @supabase/supabase-js

Customizados Componentes

UI
tutorial

Sidebar Interativa

Crie um menu lateral responsivo com hover e curvatura superior usando Certainty UI.

#ui#menu#sidebar
3 min
MCPF
tutorial

Autenticação Supabase

Configure login básico por e-mail e senha com Supabase Authentication.

#auth#supabase
2 min
Funcionalidade
tutorial

Gerenciar Cursos

Crie e publique cursos categorizados e privados para cada organização.

#curso#admin
3 min
Video
tutorial

Embed de Aulas

Adicione vídeos de YouTube ou Vimeo com tempo de duração e descrição personalizável.

#video#embed
2 min
Integração
guide

Uso de MCPs

Combine Supabase com Magic UI ou Certainty UI para integração rápida no no-code.

#mcp#supabase#ui
2 min

Arquitetura Técnica

Estrutura técnica da plataforma SaaS: banco de dados, autenticação, arquitetura frontend e integrações de terceiros.

Estrutura do Banco de Dados

CREATE TABLE organizations ( id UUID PRIMARY KEY, name TEXT NOT NULL, created_at TIMESTAMP DEFAULT NOW() ); CREATE TABLE courses ( id UUID PRIMARY KEY, organization_id UUID REFERENCES organizations(id), title TEXT NOT NULL, category TEXT, difficulty TEXT ); CREATE TABLE lessons ( id UUID PRIMARY KEY, course_id UUID REFERENCES courses(id), title TEXT NOT NULL, video_url TEXT, duration INTEGER );

Autenticação e Segurança

// Configuração Supabase Auth const supabase = createClient(url, key); // RLS (Row Level Security) CREATE POLICY "Users can only see their org data" ON courses FOR SELECT USING (organization_id = auth.jwt() -> 'organization_id'); // Middleware de autenticação const authMiddleware = (req, res, next) => { const token = req.headers.authorization; if (!token) return res.status(401).json({ error: 'Unauthorized' }); next(); };

Exemplos Práticos

Sistema de Embed de Vídeos

const VideoEmbed = ({ url, title }) => { const getEmbedUrl = (url) => { if (url.includes('youtube.com')) { const videoId = url.split('v=')[1]; return `https://www.youtube.com/embed/${videoId}`; } if (url.includes('vimeo.com')) { const videoId = url.split('/').pop(); return `https://player.vimeo.com/video/${videoId}`; } return url; }; return ( <iframe src={getEmbedUrl(url)} title={title} width="100%" height="315" frameBorder="0" allowFullScreen /> ); };

Controle de Progresso

const useProgress = (courseId, userId) => { const [progress, setProgress] = useState(0); useEffect(() => { const fetchProgress = async () => { const { data } = await supabase .from('user_progress') .select('completed_lessons') .eq('course_id', courseId) .eq('user_id', userId) .single(); const totalLessons = await supabase .from('lessons') .select('id') .eq('course_id', courseId); const progressPercentage = (data?.completed_lessons?.length || 0) / totalLessons.data.length * 100; setProgress(progressPercentage); }; fetchProgress(); }, [courseId, userId]); return { progress }; };

Links Referência

Tecnologias Utilizadas

Recursos Adicionais

Aprenda a Criar SaaS Incríveis

Descubra como criar plataformas completas com as melhores ferramentas de desenvolvimento assistido por IA.