Prompt Replit para Aplicação Web Lista de Links

O de1.click é uma plataforma SaaS brasileira para criação de páginas de links para redes sociais, similar ao Linktree, focada em simplicidade e mobile first. O MVP inclui login com Google, criação de página pública com username único, temas visuais, botões com ícones, subpastas, contagem de visitas e cliques, e sistema de planos grátis/pago com integração ao gateway AppMax.

O de1.click é uma plataforma em português do Brasil para criação de páginas de links para redes sociais, semelhante a uma versão mais simples, rápida e objetiva do Linktree. O público-alvo são empresários, freelancers, desenvolvedores, criadores de conteúdo, profissionais de marketing, jovens empreendedores e pessoas que precisam divulgar vários links em um único lugar. A principal proposta do produto é simplicidade. O usuário deve conseguir criar sua página pública em poucos minutos, com uma experiência moderna, mobile first e intuitiva. O fluxo principal do usuário deve ser: - Acessar o de1.click. - Fazer login usando Google Account - Criar automaticamente sua conta. - Escolher um nome de usuário público. - Escolher um tema visual pré-pronto. - Cadastrar seus primeiros botões/links. - Publicar a página. - Copiar a URL pública para usar no Instagram, TikTok, YouTube, WhatsApp, LinkedIn e outras redes sociais. A URL pública deve seguir o padrão: Exemplo: O SaaS inteiro deve estar em português do Brasil. Todos os textos da interface, botões, mensagens de erro, mensagens de sucesso, labels, menus, onboarding e páginas públicas devem estar em PT-BR. A experiência visual deve ser moderna, jovem e mobile first. A interface deve funcionar muito bem no celular, pois o principal uso será por jovens e criadores que acessam o sistema pelo smartphone. Use um design limpo, atual, com boa hierarquia visual, animações sutis, botões grandes, cards arredondados, boa legibilidade e aparência profissional. A navegação deve ser simples e direta. Funcionalidades principais do MVP: - Login com Google Account. - Cadastro automático no primeiro login. - Dashboard do usuário. - Onboarding inicial após o cadastro. - Criação de uma página pública por usuário no plano grátis. - Escolha de username único. - Edição do nome público. - Edição da bio curta. - Upload ou definição de foto/avatar. - Escolha de tema pré-pronto. - Cadastro de botões/links. - Edição de botões/links. - Exclusão de botões/links. - Ativação e desativação de botões/links. - Reordenação dos botões/links. - Escolha de ícone para cada botão a partir de uma lista de ícones existentes. - Criação de uma subpasta no plano grátis. - Cadastro de botões/links dentro da subpasta. - Página pública responsiva e otimizada para mobile. - Contagem básica de visitas na página. - Contagem básica de cliques por botão/link. - Sistema de planos: grátis e pago. - Estrutura preparada para integração com o gateway de pagamento AppMax. - Área administrativa básica para visualizar usuários, páginas criadas e assinaturas. No cadastro ou edição de um botão/link, o usuário deve poder configurar: - Título do botão. - URL de destino. - Ícone do botão. - Status ativo/inativo. - Ordem de exibição. - Se o botão aparece na página principal ou em uma subpasta. A escolha de ícone deve ser feita a partir de uma lista de ícones existentes. Use uma biblioteca de ícones moderna, como Lucide Icons, React Icons ou equivalente. A lista inicial de ícones deve incluir opções para: - Link genérico. - Instagram. - TikTok. - YouTube. - WhatsApp. - LinkedIn. - X/Twitter. - GitHub. - Site. - Loja. - E-mail. - Telefone. - Mapa/localização. - Calendário/agenda. - Pix/pagamento. - Download. - Portfólio. - Curso. - Comunidade. - Podcast. - Vídeo. - Música. - Documento. - Cupom. - Produto. - Serviço. A página pública do usuário deve conter: - Foto/avatar. - Nome público. - Bio curta. - Lista de botões principais. - Acesso para uma subpasta, quando criada. - Tema visual escolhido. - Rodapé com a marca de1.click no plano grátis. - Layout moderno, responsivo e otimizado para mobile. A subpasta deve funcionar como uma segunda lista de links dentro da mesma página pública. Exemplo: Página principal: - YouTube - Consultoria - Materiais gratuitos Ao clicar em “Materiais gratuitos”, o visitante acessa uma lista secundária de links. A URL da subpasta pode seguir o padrão: https://de1.click/username/subpasta https://de1.click/username/subpasta Exemplo: https://de1.click/gabriel/parceiros https://de1.click/gabriel/parceiros No plano grátis, cada usuário pode ter: - Apenas uma página pública. - Até 5 botões de links - Apenas uma subpasta. - Limite configurável de botões/links. - Temas básicos. - Estatísticas simples. - Marca de1.click no rodapé. No plano pago, o usuário deve poder ter: - Links ilimitados. - Mais subpastas. - Remoção da marca de1.click. - Temas premium. - Estatísticas mais completas. - Possibilidade futura de domínio personalizado. - Possibilidade futura de integração com Google Analytics. - Possibilidade futura de integração com Meta Pixel. - Possibilidade futura de links agendados. - Possibilidade futura de destaque visual para botões importantes. Crie o sistema de planos de forma que seja fácil alterar limites no futuro. A integração com AppMax deve ser estruturada inicialmente para permitir: - Upgrade do plano grátis para o plano pago. - Registro da assinatura no banco de dados. - Recebimento futuro de webhooks de pagamento. - Ativação ou desativação do plano pago conforme status da assinatura. - Tela de planos dentro do dashboard. Não é necessário implementar toda a integração real com AppMax no MVP se as credenciais não estiverem disponíveis, mas a arquitetura deve estar preparada para isso. Crie também uma área administrativa simples para o dono do SaaS, com: - Lista de usuários cadastrados. - Lista de páginas criadas. - Visualização do plano de cada usuário. - Status da assinatura. - Quantidade de links criados. - Quantidade de visitas. - Quantidade de cliques. - Possibilidade futura de bloquear usuários ou páginas. Use uma stack adequada para rodar no Replit, preferencialmente com: - Next.js. - React. - TypeScript. - Tailwind CSS. - PostgreSQL. - Prisma ou Drizzle ORM. - Autenticação preparada para login social. - Componentes reutilizáveis. - Separação clara entre dashboard privado, área administrativa e páginas públicas. - Código organizado, limpo e fácil de expandir. Crie a estrutura de banco de dados com entidades como: - User. - Page. - Theme. - LinkButton. - Folder. - PageView. - LinkClick. - Plan. - Subscription. - PaymentEvent. A entidade LinkButton deve ter pelo menos: - ID. - ID da página. - ID da subpasta, opcional. - Título. - URL. - Ícone escolhido. - Ordem. - Status ativo/inativo. - Data de criação. - Data de atualização. A entidade Page deve ter pelo menos: - ID. - ID do usuário. - Username. - Nome público. - Bio. - Avatar. - Tema escolhido. - Status publicada/não publicada. - Data de criação. - Data de atualização. A entidade Folder deve ter pelo menos: - ID. - ID da página. - Nome da subpasta. - Slug da subpasta. - Ordem. - Status ativo/inativo. - Data de criação. - Data de atualização. A interface do dashboard deve ter as seguintes seções: - Visão geral. - Minha página. - Botões/links. - Subpasta. - Temas. - Estatísticas. - Plano e assinatura. - Configurações. Na visão geral, mostre: - Link público da página. - Botão para copiar o link. - Botão para visualizar a página. - Total de visitas. - Total de cliques. - Status do plano atual. - Sugestão para fazer upgrade, se estiver no plano grátis. No editor de botões/links, crie uma experiência simples: - Lista dos botões já cadastrados. - Botão “Adicionar novo link”. - Modal ou tela de cadastro. - Campo para título. - Campo para URL. - Seletor visual de ícone. - Opção para ativar/desativar. - Opção para escolher se o link fica na página principal ou na subpasta. - Reordenação por drag and drop, se possível. O seletor visual de ícones deve mostrar uma grade de ícones com busca simples. Exemplo: - Buscar por “Instagram”. - Buscar por “WhatsApp”. - Buscar por “Loja”. - Buscar por “GitHub”. Cada ícone deve ter um nome amigável em português. Crie pelo menos 5 temas visuais iniciais: - Claro minimalista. - Escuro moderno. - Neon jovem. - Profissional. - Criador de conteúdo. Cada tema deve alterar cores de fundo, cores dos botões, bordas, sombras e estilo visual geral da página pública. O design deve ser especialmente otimizado para mobile: - Botões grandes. - Espaçamento confortável. - Tipografia legível. - Layout centralizado. - Página pública rápida para carregar. - Dashboard utilizável no celular. - Menu simples. - Poucos cliques para executar ações principais. Crie também telas de estado vazio, por exemplo: - Quando o usuário ainda não criou links. - Quando ainda não tem visitas. - Quando ainda não configurou a subpasta. - Quando ainda não escolheu tema. Use mensagens amigáveis, jovens e diretas, como: - “Seu link da bio está quase pronto.” - “Adicione seu primeiro botão.” - “Copie seu de1.click e coloque nas suas redes.” - “Sua página já está no ar.” - “Escolha um visual que combine com você.” O tom da interface deve ser simples, positivo e direto. Evite linguagem técnica para o usuário final. A aplicação deve ser criada com foco em: - Simplicidade. - Velocidade. - Mobile first. - Boa experiência para jovens. - Facilidade de publicação. - Código organizado. - Possibilidade de expansão futura.