Proyecto personal · Herramienta webProyectos y clientesPuertos y enlacesCompartir
Tu proyecto local.Listo para presentar.
Un panel para ordenar demos y compartir enlaces con clientes.
Las demos locales, con el enlace correcto para cada cliente.
- Next.js 14
- React 18
- TypeScript
- Tailwind CSS
Proyecto personal · Herramienta webProyectos y clientesPuertos y enlacesCompartirTu proyecto local.Listo para presentar.
Un panel para ordenar demos y compartir enlaces con clientes.
- Next.js 14
- React 18
- TypeScript
Las demos locales, con el enlace correcto para cada cliente.
- Next.js 14
- React 18
- TypeScript
- Tailwind CSS
La idea
El proyecto está en tu computadora. El cliente, no.
Mientras un sitio se está haciendo, solo existe en la computadora de quien lo desarrolla, en una dirección que nadie de afuera abre (localhost). Para que el cliente lo vea antes de publicarlo, un programa de túnel abre una puerta temporal y crea un enlace público. Abre y cierra la puerta para ver qué pasa.
http://localhost:3000https://minha-demo.loca.ltEnlace funcionando- 1El proyecto corre en la computadora
Cada proyecto está en un puerto (3000, 5173…), en una dirección que solo esa computadora ve.
- 2El túnel crea el enlace
Un programa como ngrok conecta ese puerto a internet y devuelve un enlace que cualquiera abre.
- 3El panel guarda todo
Proyecto, cliente, puerto y enlace quedan juntos, listos para enviar en el momento justo.
Ilustración de la idea. El túnel se abre en una terminal, fuera del panel; el panel organiza el resto.
El panel
Cada demo en su lugar, con cliente y enlace.
Quien muestra varios proyectos a la vez pierde la cuenta de qué enlace es de qué cliente. El panel guarda cada demo con el cliente, el puerto y el enlace público, cuenta cuántas están en línea y arma el comando del túnel. Registra una demo y abre la tarjeta.
- Sitio de la Panadería EjemploCliente Ejemplo · localhost:3000Comando para abrir el túnel (cópialo en la terminal):
ngrok http 3000 - Tienda EjemploOtro Cliente · localhost:5173
Demos de ejemplo, guardadas solo en este navegador, como en la app. Aquí la verificación es simulada; en la app, intenta abrir la dirección local hasta 3 segundos.
Del entorno local a la demostración.
Guías integradas para configurar túneles y ordenar los enlaces generados.
La configuración del túnel se hace fuera del panel.Abrir un túnel por primera vez asusta a quien nunca usó una terminal. La app trae una guía para cada servicio, con los comandos listos. Elige un túnel y el puerto del proyecto: los comandos ya salen con él.
- 1
Instala ngrok (o descárgalo del sitio de ngrok).
choco install ngrok - 2
Crea una cuenta gratis en el sitio de ngrok y toma tu token.
- 3
Configura el token:
ngrok config add-authtoken SEU_TOKEN_AQUI - 4
Abre el puerto del proyecto:
ngrok http 3000 - 5
Copia el enlace generado (ej.: https://abc123.ngrok.io) y pégalo en el panel.
- Mantén abierta la terminal del túnel mientras el cliente esté entrando.
- Si cierras la terminal, el enlace deja de funcionar.
- Para enlaces permanentes, conviene publicar el sitio de verdad.
- El plan gratis de ngrok permite 1 túnel a la vez.
Guías y consejos tomados de la app. Los nombres de los servicios son de las empresas que los mantienen.
El mensaje
El enlace listo, el mensaje también.
Mandar el enlace suelto en un chat parece descuidado. La app arma el mensaje con el nombre del cliente, el proyecto, la descripción y el enlace, para WhatsApp o correo. Edita los campos y mira cómo cambia la carta; los botones abren tu WhatsApp o tu correo con el texto ya escrito.
¡Hola Cliente Ejemplo! 🎉 ¡Tu demostración de Sitio de la Panadería Ejemplo está lista! 🔗 Entra aquí: https://panaderia-ejemplo.loca.lt 📝 Versión con el menú nuevo ¡Cualquier duda, me avisas! 😊
Los modelos de texto son los de la app (traducidos aquí). Nada se envía solo: WhatsApp o el correo se abren con el mensaje para que lo revises.
Menos enlaces sueltos. Más claridad para presentar.
Cliente, proyecto y dirección reunidos para facilitar cada demostración.
Una herramienta propia para mejorarel flujo de presentación.Copiar enlaceMensaje listoWhatsApp y correoInterfaz · Guardado local · CompartirRepresentación conceptual del flujo
Antes, cada enlace estaba en otro lugar: un chat, una nota, el historial del navegador. El panel junta los hilos. Y es una herramienta chica, hecha para un solo uso, por eso conviene decir también lo que no hace.
Lo que hace el panel
- Guarda cada demo con su cliente
Nombre del proyecto, descripción, cliente, puerto y enlace público, en una sola tarjeta.
- Cuenta lo que está en línea
Cuántas demos hay, cuántas respondieron en línea y cuántas ya tienen enlace.
- Arma el comando y el mensaje
El comando del túnel con el puerto correcto y el texto listo para WhatsApp y correo.
- Enseña el camino
Guías de ngrok, LocalTunnel y Cloudflare Tunnel dentro del propio panel.
Lo que queda afuera
- No abre el túnel
El túnel corre en una terminal; el panel solo guarda el enlace que crea.
- No verifica el enlace público
La verificación de estado mira la dirección local, no el enlace del cliente.
- No cuenta visitas
Hay un campo para eso en el código, pero nunca se completa.
- No sale de esta computadora
Las demos quedan en el navegador de quien lo usa; no hay cuenta ni nube.
Lista verificada en el código de la app (app/page.tsx).
Las tecnologías
De qué está hecho, pieza por pieza
Un panel que corre en el navegador de quien desarrolla, en un puerto propio (4500). No tiene servidor ni base de datos: lo que se registra queda guardado en el propio navegador. Elige una pieza para ver qué hace aquí y en qué archivo está.
9tecnologías, en 3 capas
Pantalla
Movimiento
Recursos
Las pantallas
El panel tal como es.
Las pantallas reales, en el tema oscuro con violeta y rosa. Elige una y haz clic en la imagen para verla completa.
El panel: los números, el botón de nueva demo y la lista todavía vacía.
Pantallas reales de la app.
Siguiente proyecto39 / 51
Herramientas de creación y desarrolloDemo Mode ManagerHerramienta que escanea las rutas de un proyecto Next.js e instala un modo demostración, liberando, bloqueando clics o bloqueando el acceso por rutaReact 18.2TypeScript 5.3Tailwind CSS 3.4Framer Motion 10.16
← AnteriorBiblioteca Pessoal de Design