Cómo crear un portal de empleo con AI

Antes de escribir prompts, define la versión mínima útil. La mayoría de los portales de empleo no necesitan un panel complejo para empleadores desde el primer día.

Una primera versión práctica suele incluir:

• una página de inicio con búsqueda y vacantes destacadas
• una página de listados con filtros
• una página de detalle de la vacante
• un formulario de postulación o un enlace externo para aplicar
• una página de información o precios si planeas cobrar a empleadores

Decide quiénes serán los usuarios:

• candidatos que navegan y se postulan
• empleadores que publican vacantes, si quieres permitir publicaciones autónomas más adelante
• un administrador, si quieres revisar envíos

Luego enumera los datos de cada publicación. Los campos habituales son:

• título del puesto
• nombre de la empresa
• ubicación
• modalidad remota o presencial
• rango salarial
• tipo de empleo
• categoría o equipo
• descripción
• URL de postulación o formulario de postulación
• fecha de publicación

Si solo quieres un portal curado, quizá no necesites inicio de sesión al principio. Si los empleadores deben enviar vacantes por sí mismos, entonces añade base de datos e inicio de sesión más adelante con Supabase.

Tu primer prompt debería leerse como una especificación breve. Sé específico sobre páginas, campos, diseño e interacciones. Moremade convierte una descripción en lenguaje natural en una vista previa de la app en vivo y escribe el código fuente para ello.

Un primer prompt útil nombra:

• el tipo de sitio
• las páginas necesarias
• los campos de datos para las vacantes
• los filtros y el comportamiento de búsqueda
• el estilo visual
• qué debe pasar cuando alguien hace clic en Postularse

Ejemplo de prompt:

Crea un sitio web de portal de empleo para roles de tecnología y diseño. Usa un diseño limpio y simple con una página de inicio, una página de listados de vacantes y una página de detalle de la vacante. Cada vacante debe mostrar título, empresa, ubicación, modalidad remota, rango salarial, tipo de empleo, categoría, fecha de publicación y un breve resumen. Añade búsqueda por palabra clave y filtros por ubicación, categoría, modalidad remota y tipo de empleo. En la página de detalle, incluye una descripción completa y un botón de Postularse. Por ahora, haz que Postularse abra una página de formulario de postulación en lugar de un enlace externo. Usa tipografía clara y tarjetas y formularios aptos para móvil.

Una vez que Moremade genere la primera versión, revísala como si fuera un prototipo funcional y no un producto terminado. Navega por las páginas, inspecciona los espacios, prueba los filtros y comprueba si la información de las vacantes es fácil de escanear.

Haz solicitudes de seguimiento pequeñas y concretas en lugar de reescribir todo el brief. Eso suele producir iteraciones más limpias.

Tres ejemplos de prompts de seguimiento:

• "Cambia la página de listados a un diseño de dos columnas en escritorio, con los filtros en una barra lateral izquierda y los resultados a la derecha. Mantén los filtros en un panel deslizable en móvil."
• "Añade distintivos para Remoto, Tiempo completo y rango salarial en cada tarjeta de vacante, y haz que el nombre de la empresa y la fecha de publicación tengan menos protagonismo visual que el título."
• "En la página de detalle de la vacante, sube el botón de Postularse, añade un panel de resumen fijo en escritorio y muestra ubicación, tipo de empleo y salario en una fila compacta de metadatos."

Si un elemento concreto no está bien, usa el inspector visual para señalarlo y describir el cambio. Si quieres revisar o ajustar detalles de implementación directamente, usa la vista de código.

Un portal estático con datos de ejemplo basta para el diseño y la estructura, pero un portal real normalmente necesita guardar datos de vacantes. En Moremade, Supabase es la opción integrada para base de datos, inicio de sesión y almacenamiento de archivos.

Usa Supabase si necesitas:

• que los empleadores envíen vacantes
• que los administradores revisen o editen listados
• que los candidatos creen cuentas
• subir logotipos o archivos adjuntos

Un siguiente paso sensato es pedir una tabla de vacantes y un flujo de envío simple. Por ejemplo, podrías pedirle a Moremade que conecte Supabase y cree un formulario que escriba nuevas vacantes en la base de datos.

No necesitas pagos a menos que los empleadores vayan a pagar para publicar. Si tu portal es gratuito, omite Stripe por ahora.

Añade Stripe solo si quieres un flujo de publicación de pago, como:

• el empleador elige un plan de publicación
• pago con un precio que tú defines
• el empleador obtiene acceso a un formulario de envío después del pago

Mantén simple la primera versión. La búsqueda, los filtros y un flujo de postulación fiable importan más que los sistemas de cuentas que la mayoría de los portales tempranos nunca usan.

Los portales de empleo reciben mucho tráfico móvil, así que revisa con cuidado la experiencia en pantallas pequeñas. Un diseño que se ve bien en escritorio a menudo se descompone cuando los filtros, los títulos largos y los formularios compiten por espacio.

Comprueba estos puntos:

• el campo de búsqueda y los controles de filtro son fáciles de usar con los pulgares
• las tarjetas no se vuelven demasiado altas ni visualmente ruidosas
• el salario, la ubicación y la modalidad remota siguen siendo legibles en pantallas estrechas
• el botón de Postularse es evidente en la página de detalle
• el formulario de postulación es corto y usable en móvil

Si algo se siente apretado, pide arreglos específicos. Por ejemplo:

• "Reduce el padding vertical en las tarjetas de vacantes en móvil y mantén los metadatos en dos filas compactas."
• "Convierte los chips de filtros de escritorio en un panel deslizante de filtros en móvil."
• "Haz que el formulario de postulación sea de una sola columna en todos los tamaños de pantalla y aumenta la altura de los campos para uso táctil."

Prueba también los estados vacíos. Un portal de empleo necesita un mensaje decente cuando no hay resultados y una acción clara para restablecer filtros.

Cuando el portal funcione, publícalo. Moremade puede publicar con un clic en un subdominio gratis yourname.moremade.ai. Eso es útil para revisión, pruebas internas o un lanzamiento temprano.

Si estás en un plan de pago, puedes conectar un dominio personalizado. También puedes comprar dominios dentro de Moremade.

Un despliegue práctico se ve así:

• publicar en un subdominio de Moremade
• probar el sitio en vivo en escritorio y móvil
• revisar formularios, enlaces y carga de páginas
• conectar tu dominio personalizado cuando la estructura esté definida

Como el proyecto es código real de React + Tailwind, puedes exportar el código fuente completo como ZIP en cualquier momento o enviarlo a GitHub. Eso importa si quieres cambiar de hosting, pasar el código a un desarrollador o ampliar el proyecto fuera del editor más adelante.

La mayoría de los problemas vienen de pedir demasiado en el primer intento o de añadir sistemas antes de que hagan falta.

Evita estos errores:

• Empezar con demasiados tipos de usuario. Si comienzas con candidatos, empleadores y administradores al mismo tiempo, la app se complica rápidamente.
• Prompts vagos. "Crea un portal de empleo moderno" no es suficiente. Nombra las páginas, los campos y las acciones.
• Sobrediseñar los pagos. Si todavía nadie paga, no añadas Stripe hasta que el flujo de publicación esté validado.
• Ignorar la estructura de los datos de vacantes. Los filtros solo funcionan bien si campos como ubicación, tipo de empleo y categoría están definidos de forma consistente.
• Omitir la revisión móvil. Los metadatos densos y los controles de filtro suelen volverse incómodos en teléfonos.
• Editar demasiado a la vez. Los cambios pequeños son más fáciles de validar que un rediseño completo en cada iteración.

Para un primer lanzamiento, apunta a la claridad: buena búsqueda, filtros útiles, páginas de detalle legibles y un flujo de postulación que funcione.