# Prompt Replit para Aplicação Web Lista de Links

> Source: <https://gist.github.com/gabrielfroes/54face94c295e092314f3ffd7ad46e29>
> Published: 2026-07-07 18:10:51+00:00

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.