Enlace con el diseño del proyecto: https://stitch.withgoogle.com/projects/7508115667617706440

👨‍💻 Diseñando nuestro Proyecto FullStack con Stitch

En esta clase, vamos a ver cómo podemos empezar a darle forma visual a nuestro proyecto DevJobs utilizando una herramienta muy potente de Google llamada Stitch. Esto nos ayudará a tener una base de diseño sólida para luego construir con código.

🚀 Presentando Stitch de Google

Para crear el diseño de DevJobs, utilizaremos Stitch (stitch.withgoogle.com). Esta herramienta te permite generar diseños de interfaz de usuario de forma rápida y gratuita, utilizando inteligencia artificial.

Generación de diseños: Puedes especificar en un prompt el tipo de diseño que quieres. Por ejemplo, “Crea un diseño para crear la web de DevJobs, una plataforma de búsqueda de empleo para programadores”.
Modos y dispositivos: Stitch te permite elegir entre aplicaciones móviles o páginas web, y puedes trabajar en un “Modo Experimental” (recomendado) o “Modo Estándar”.
Peticiones gratuitas: Tienes alrededor de 100 a 150 peticiones gratuitas al mes para generar diseños.

🎨 Diseñando DevJobs con Stitch

Al generar el diseño para DevJobs, Stitch nos propondrá varias pantallas clave que serán la base de nuestra plataforma:

Página de inicio: Una pantalla de bienvenida con un campo de búsqueda destacado y categorías populares para que los usuarios empiecen a buscar rápidamente.
Resultados de búsqueda: Mostrará una lista de ofertas de empleo basada en los criterios de búsqueda, con filtros para refinar los resultados y opciones de ordenación.
Detalles del empleo: Presentará una descripción completa de una oferta de empleo específica, incluyendo requisitos, responsabilidades e información de la empresa.
Perfil del usuario/CV: Permitirá a los programadores crear y gestionar su perfil profesional o subir su currículum.
Panel de control de la empresa: Para que las empresas puedan publicar nuevas ofertas, gestionar las existentes y ver las solicitudes de los candidatos.

Iteración y personalización

Una vez generado el diseño, no es la versión final. Puedes iterar sobre él, ajustar el tema para cambiar los colores, verlo en pantalla completa o incluso abrirlo en Figma si trabajas con esa herramienta de diseño.

💻 Obteniendo el Código de Stitch

Lo más interesante es que Stitch no solo te da el diseño visual, sino que también puedes recuperar el código (HTML y CSS) de las páginas generadas. Aunque utiliza tecnologías como Tailwind CSS, el código es un excelente punto de partida para que empecemos a construir nuestro Frontend.

⚙️ ¿Qué construiremos?

Para nosotros crear este diseño y hacerlo funcional, vamos a tener que aprender diferentes lenguajes:

HTML: Para estructurar nuestra página de inicio y todas las demás.
CSS: Para darle el estilo y la apariencia deseada, basándonos en el diseño de Stitch.
JavaScript: Después, para añadir interactividad a nuestro diseño, ¡tendremos que aprender JavaScript!

Nos enfocaremos en hacer realidad la página de inicio de DevJobs. Verás lo fácil que es crearlo paso a paso, y te explicaré cada una de las cosas que vamos a hacer.