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
Exemplo:
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.
Cade o prompt2?