Projeto pessoal · Ferramenta webProjetos e clientesPortas e linksCompartilhamento
Seu projeto local.Pronto para apresentar.
Um painel para organizar demos e compartilhar links com clientes.
As demos do computador, com o link certo para cada cliente.
- Next.js 14
- React 18
- TypeScript
- Tailwind CSS
Projeto pessoal · Ferramenta webProjetos e clientesPortas e linksCompartilhamentoSeu projeto local.Pronto para apresentar.
Um painel para organizar demos e compartilhar links com clientes.
- Next.js 14
- React 18
- TypeScript
As demos do computador, com o link certo para cada cliente.
- Next.js 14
- React 18
- TypeScript
- Tailwind CSS
A ideia
O projeto está no seu computador. O cliente, não.
Enquanto um site está sendo feito, ele só existe no computador de quem desenvolve, num endereço que ninguém de fora abre (o localhost). Para o cliente ver antes de publicar, um programa de túnel abre uma porta temporária e cria um link público. Ligue e desligue a porta para ver o que acontece.
http://localhost:3000https://minha-demo.loca.ltLink funcionando- 1O projeto roda no computador
Cada projeto fica numa porta (3000, 5173…), num endereço que só aquele computador enxerga.
- 2O túnel cria o link
Um programa como o ngrok liga essa porta à internet e devolve um link que qualquer pessoa abre.
- 3O painel guarda tudo
Projeto, cliente, porta e link ficam juntos, prontos para mandar na hora certa.
Ilustração do conceito. O túnel é aberto num terminal, fora do painel; o painel organiza o resto.
O painel
Cada demo no seu lugar, com cliente e link.
Quem mostra vários projetos ao mesmo tempo perde a conta de qual link é de qual cliente. O painel guarda cada demo com o cliente, a porta e o link público, conta quantas estão no ar e monta o comando do túnel. Cadastre uma demo e abra o cartão.
- Site da Padaria ExemploCliente Exemplo · localhost:3000Comando para abrir o túnel (copie no terminal):
ngrok http 3000 - Loja ExemploOutro Cliente · localhost:5173
Demos de exemplo, guardadas só neste navegador, como no app. Aqui a verificação é simulada; no app, ele tenta abrir o endereço local por até 3 segundos.
Do ambiente local à demonstração.
Guias integrados para configurar túneis e organizar os links gerados.
Configuração do túnel realizada fora do painel.Abrir um túnel pela primeira vez assusta quem nunca usou um terminal. O app traz um guia para cada serviço, com os comandos prontos. Escolha um túnel e a porta do projeto: os comandos já saem com ela.
- 1
Instale o ngrok (ou baixe no site do ngrok).
choco install ngrok - 2
Crie uma conta grátis no site do ngrok e pegue o seu token.
- 3
Configure o token:
ngrok config add-authtoken SEU_TOKEN_AQUI - 4
Abra a porta do projeto:
ngrok http 3000 - 5
Copie o link gerado (ex.: https://abc123.ngrok.io) e cole no painel.
- Mantenha o terminal do túnel aberto enquanto o cliente estiver acessando.
- Se fechar o terminal, o link para de funcionar.
- Para links permanentes, vale hospedar o site de verdade.
- O plano grátis do ngrok tem limite de 1 túnel por vez.
Guias e dicas tirados do app. Os nomes dos serviços são das empresas que os mantêm.
A mensagem
O link pronto, a mensagem também.
Mandar o link solto num chat parece descuido. O app monta a mensagem com o nome do cliente, o projeto, a descrição e o link, para WhatsApp ou e-mail. Edite os campos e veja a carta mudar; os botões abrem o seu WhatsApp ou o seu e-mail com o texto já escrito.
Olá Cliente Exemplo! 🎉 Sua demonstração do Site da Padaria Exemplo está pronta! 🔗 Acesse aqui: https://padaria-exemplo.loca.lt 📝 Versão com o cardápio novo Qualquer dúvida, é só chamar! 😊
Os modelos de texto são os do app. Nada é enviado sozinho: o WhatsApp ou o e-mail abre com a mensagem para você conferir.
Menos links soltos. Mais clareza para apresentar.
Cliente, projeto e endereço reunidos para facilitar cada demonstração.
Uma ferramenta própria para melhoraro fluxo de apresentação.Copiar linkMensagem prontaWhatsApp e e-mailInterface · Persistência local · CompartilhamentoRepresentação conceitual do fluxo
Antes, cada link ficava num lugar: uma conversa, uma anotação, o histórico do navegador. O painel junta os fios. E é uma ferramenta pequena, feita para um uso só, por isso vale dizer também o que ela não faz.
O que o painel faz
- Guarda cada demo com o cliente
Nome do projeto, descrição, cliente, porta e link público, num cartão só.
- Conta o que está no ar
Quantas demos existem, quantas responderam online e quantas já têm link.
- Monta o comando e a mensagem
O comando do túnel com a porta certa e o texto pronto para WhatsApp e e-mail.
- Ensina o caminho
Guias de ngrok, LocalTunnel e Cloudflare Tunnel dentro do próprio painel.
O que fica fora dele
- Não abre o túnel
O túnel roda num terminal; o painel só guarda o link que ele cria.
- Não confere o link público
A verificação de status olha o endereço local, não o link do cliente.
- Não conta visitas
Existe um campo para isso no código, mas ele nunca é preenchido.
- Não sai deste computador
As demos ficam no navegador de quem usa; não há conta nem nuvem.
Lista conferida no código do app (app/page.tsx).
As tecnologias
Do que é feito, peça por peça
Um painel que roda no navegador de quem desenvolve, numa porta própria (4500). Não tem servidor nem banco: o que se cadastra fica guardado no próprio navegador. Escolha uma peça para ver o que ela faz aqui e em que arquivo está.
9tecnologias, em 3 camadas
Tela
Movimento
Recursos
As telas
O painel como ele é.
As telas reais, no tema escuro com roxo e rosa. Escolha uma e clique na imagem para ver em tela cheia.
O painel: os números, o botão de nova demo e a lista ainda vazia.
Telas reais do app.
Próximo projeto39 / 51
Ferramentas para criação e desenvolvimentoDemo Mode ManagerFerramenta que escaneia as rotas de um projeto Next.js e instala um modo demonstração, liberando, bloqueando cliques ou bloqueando acesso por rotaReact 18.2TypeScript 5.3Tailwind CSS 3.4Framer Motion 10.16
← AnteriorBiblioteca Pessoal de Design