Vue Js de Cero a Experto / Proyectos Reales

En esta nueva entrega del curso de Vue.js, aprenderemos a crear un formulario interactivo desde cero. Comenzaremos con la creación del proyecto y lo estructuraremos adecuadamente para manejar datos de manera efectiva. ?

? ¿Qué veremos hoy?

• Configuración inicial del proyecto para el formulario ?️

• Estructuración de carpetas y componentes ?

• Creación del formulario con campos básicos y su diseño ?

• Preparación para el manejo de datos dinámicos ? ?

¿Por qué es importante? Los formularios son fundamentales en cualquier aplicación web. Con este tutorial, aprenderás cómo diseñar y estructurar un formulario utilizando las mejores prácticas en Vue.js. ?✨

? ¿A quién va dirigido? Este video es perfecto para principiantes y desarrolladores intermedios que desean comprender cómo estructurar proyectos Vue.js y crear interfaces de usuario interactivas.

En esta entrega aprenderás a manejar el envío de formularios en Vue.js de manera eficiente utilizando la directiva @submit.prevent. Este enfoque evitará la recarga de la página y permitirá procesar los datos directamente en tu aplicación. ?

? ¿Qué veremos hoy?

• Cómo funciona @submit.prevent para formularios ?

• Captura y manejo de datos ingresados por el usuario ✏️

• Validación básica antes de enviar la información ✅

• Simulación del envío y procesamiento de datos ?

? ¿Por qué es importante? El manejo de formularios es una habilidad esencial en el desarrollo web. Con @submit.prevent, puedes controlar completamente el comportamiento de tus formularios, mejorando la experiencia del usuario y permitiendo validaciones personalizadas. ?✨

? ¿A quién va dirigido? Este video es ideal para quienes han seguido las partes anteriores del curso y desean implementar la funcionalidad de envío en sus formularios Vue.js.

En esta décima parte del curso de Vue.js, aprenderás a crear formularios dinámicos que envían datos y los capturan para mostrarlos de forma organizada en una tabla. Este enfoque es ideal para aplicaciones que requieren manejo de datos en tiempo real. ?✨

? ¿Qué veremos hoy?

• Creación de formularios dinámicos con Vue.js ?

• Manejo de datos ingresados por el usuario ✏️

• Captura y almacenamiento de datos en el estado ?

• Renderización de datos en una tabla dinámica ?

? ¿Por qué es importante? Entender cómo capturar y manejar datos en Vue.js te permitirá construir interfaces dinámicas y funcionales para aplicaciones más complejas, como sistemas de gestión y paneles interactivos. ?✨

? ¿A quién va dirigido? Este video es ideal para quienes desean llevar sus habilidades en Vue.js al siguiente nivel, aprendiendo a manejar datos de forma eficiente y presentarlos dinámicamente.

En este capítulo daremos nuestros primeros pasos para integrar datos externos mediante peticiones HTTP. Comenzaremos configurando un nuevo proyecto para aprender a consumir APIs en nuestras aplicaciones. ?

✨ ? ¿Qué veremos hoy?

• Creación del proyecto desde cero ?

• Configuración inicial para manejar peticiones HTTP ?️

• Explicación de cómo funcionan las APIs y las peticiones HTTP ?

? ¿Por qué es importante?

Dominar el consumo de datos mediante peticiones HTTP te permitirá conectar tus aplicaciones Vue.js con el mundo real, como obtener datos dinámicos desde APIs y servicios externos. ?✨

? ¿A quién va dirigido? Este video es perfecto para quienes están aprendiendo Vue.js y desean entender cómo interactuar con APIs y manejar datos externos en sus proyectos.

En esta doceava parte del curso de Vue.js, aprenderás a realizar peticiones HTTP utilizando Fetch API, una herramienta poderosa y sencilla para consumir datos desde APIs externas en tus proyectos Vue.js. ?

✨ ? ¿Qué veremos hoy?

• Introducción a Fetch API: qué es y cómo funciona ?

• Realización de peticiones HTTP para obtener datos de una API ?

• Integración de los datos obtenidos en tu aplicación Vue.js ? ?

¿Por qué es importante? El uso de Fetch API es una habilidad clave para interactuar con servicios externos, como obtener información dinámica o enviar datos a un servidor. Aprenderás a manejar datos en tiempo real y a integrarlos en tus componentes Vue. ✨

? ¿A quién va dirigido? Este video es ideal para quienes desean dominar la conexión de aplicaciones Vue.js con APIs y comprender cómo gestionar datos externos de forma eficiente.

En este capítulo aprenderás a trabajar con datos dinámicos obtenidos a través de Fetch API, lo que permitirá que tu aplicación Vue.js reaccione y se actualice en tiempo real con información externa. ?

✨ ? ¿Qué veremos hoy?

• Cómo usar Fetch API para obtener datos dinámicos ?

• Actualización de vistas en Vue.js con datos en tiempo real ?

• Renderizado dinámico de datos en componentes Vue.js ?

? ¿Por qué es importante? El manejo de datos dinámicos es esencial para aplicaciones interactivas y funcionales. Este conocimiento te permitirá construir proyectos Vue.js que se conecten con APIs, actualicen contenido y ofrezcan una experiencia fluida al usuario. ?✨

? ¿A quién va dirigido? Este video es ideal para desarrolladores que están avanzando en Vue.js y desean crear aplicaciones reactivas con manejo de datos externos.

En esta entrega del curso de Vue.js, exploraremos el uso de Axios para manejar datos dinámicos en tus aplicaciones. Este popular cliente HTTP simplifica las peticiones a APIs externas, ofreciendo una experiencia más fluida y herramientas avanzadas. ?

✨ ? ¿Qué veremos hoy?

• Configuración de Axios en tu proyecto Vue.js ?️

• Realización de peticiones HTTP para obtener y enviar datos ?

• Manejo de respuestas, estados y errores en Axios ⚠️

• Renderización dinámica de datos en componentes Vue.js ?

? ¿Por qué es importante? Axios es una herramienta versátil y robusta para interactuar con APIs en proyectos Vue.js. Ofrece un manejo simplificado de las solicitudes HTTP, permitiéndote trabajar con datos dinámicos de forma eficiente. ?

? ¿A quién va dirigido? Este video es ideal para desarrolladores que quieren aprender a integrar Axios en sus proyectos Vue.js y manejar datos dinámicos de manera profesional.

En esta entrega del curso de Vue.js, exploraremos cómo consumir datos dinámicos desde una API de criptomonedas utilizando Axios. Aprenderás a integrar esta información en un componente Vue.js que mostrará precios y datos relevantes en tiempo real. ?

✨ ? ¿Qué veremos hoy?

• Cómo usar Axios para consumir APIs de criptomonedas ?

• Procesamiento y manejo de datos dinámicos en Vue.js ?

• Creación de un componente personalizado para mostrar información ?

• Actualización automática de datos desde la API ?

? ¿Por qué es importante? El uso de APIs dinámicas te permitirá construir aplicaciones Vue.js más interactivas y útiles. En este video, descubrirás cómo integrar información del mundo real, como precios de criptomonedas, directamente en tus componentes Vue.js. ?

? ¿A quién va dirigido? Este video es perfecto para desarrolladores que desean llevar sus habilidades con Axios y Vue.js al siguiente nivel, aprendiendo a trabajar con datos externos de manera dinámica y profesional.

En este video haremos un repaso completo de lo aprendido, asegurándonos de consolidar todos los conceptos clave para manejar datos dinámicos en nuestras aplicaciones Vue.js. ?

✨ ? ¿Qué recapitularemos?

• Peticiones HTTP usando Fetch API ?

• Consumo de datos dinámicos con Axios ?

• Manejo de errores y estados de carga ⚠️

• Integración de datos en componentes Vue.js ?

• Creación de componentes interactivos con información dinámica ?️

? ¿Por qué es importante? Esta recapitulación te ayudará a conectar todos los conceptos, asegurando que domines las herramientas necesarias para consumir y mostrar datos externos con Vue.js. ¡La práctica hace al maestro! ?

? ¿A quién va dirigido? Este video es ideal para quienes han seguido toda la sección HTTP del curso y desean reforzar sus conocimientos antes de avanzar a nuevas funcionalidades en Vue.js.

En esta parte del curso, aprenderás a instalar y configurar Tailwind para aprovechar todo su poder en la creación de interfaces modernas y responsivas. ??

? ¿Qué veremos hoy?

1️⃣ Instalación de Tailwind CSS en Vue.js ?️

2️⃣ Configuración del archivo tailwind.config.js ?️

3️⃣ Uso básico de clases utilitarias en componentes Vue.js ?

4️⃣ Prueba en vivo: Crearemos un diseño rápido con Tailwind. ⚡

? ¿Por qué usar Tailwind CSS?

• Estilizado rápido y eficiente ?

• Clases utilitarias listas para usar ⚡

• Diseños responsivos sin esfuerzo ?

• Alta personalización ?️

? ¿A quién va dirigido? Este video es perfecto para quienes quieren llevar sus proyectos de Vue.js al siguiente nivel visualmente, utilizando Tailwind CSS como herramienta principal.

Hoy aprenderás a diseñar y estructurar cards dinámicos utilizando Tailwind CSS, dándole estilo profesional a tu proyecto Vue.js. ?

? ? ¿Qué aprenderás en este video?

1️⃣ Estructura del proyecto: Organizando carpetas y archivos para el criptocotizador. ?

2️⃣ Diseño de cards con Tailwind CSS: Aprende a crear componentes visuales atractivos y responsivos. ?

3️⃣ Preparación para mostrar datos dinámicos: Estructuramos los componentes para recibir información de una API. ?

? ¿Por qué es importante?

• Los cards son ideales para mostrar información de manera clara y organizada.

• Tailwind CSS te permite crear diseños modernos y estilizados en tiempo récord.

• Una buena estructura facilita el mantenimiento y escalabilidad del proyecto.

? ¿A quién va dirigido? Este video es perfecto para desarrolladores que quieren mejorar sus habilidades en Vue.js, Tailwind CSS, y diseño de interfaces dinámicas.

Hoy nos enfocaremos en la creación de formularios dinámicos y el uso de emit para enviar datos entre componentes en Vue.js. ?

? ¿Qué veremos hoy?

1️⃣ Creación del formulario principal: Diseñaremos un formulario sencillo pero funcional para capturar datos del usuario. ?

2️⃣ Comunicación entre componentes: Utilizaremos emit para enviar los datos del formulario al componente padre. ?

3️⃣ Preparación para procesar la información: Acomodaremos la estructura para manejar los datos en el criptocotizador. ?

? ¿Por qué es importante?

• Los formularios son esenciales para capturar interacciones del usuario.

• Aprender a usar emit mejora la comunicación y flexibilidad en proyectos Vue.js.

• Es un paso clave para trabajar con datos dinámicos provenientes de formularios.

? ¿A quién va dirigido? Este video es ideal para quienes están creando proyectos interactivos en Vue.js y necesitan mejorar su manejo de eventos y datos.

En esta entrega, llevamos nuestro criptocotizador al siguiente nivel. Utilizando los datos de una API, crearemos un componente dinámico para mostrar la información de criptomonedas de forma elegante y funcional. ?

? ¿Qué aprenderás hoy?

1️⃣ Configuración del componente: Diseñaremos la estructura base del componente que mostrará los datos. ?️

2️⃣ Integración de la API: Aprenderás cómo consumir datos de una API directamente desde el componente. ?

3️⃣ Mostrar datos dinámicos: Personalizaremos el componente para adaptarlo a los datos obtenidos. ?

? ¿Por qué es importante?

• Los componentes dinámicos hacen que tu proyecto sea más modular y fácil de mantener.

• Entenderás cómo conectar un componente Vue.js con datos externos en tiempo real.

• Esta habilidad es esencial para cualquier aplicación que requiera información actualizada de servicios externos.

? ¿A quién va dirigido? Este video es ideal para desarrolladores que quieren profundizar en la creación de componentes dinámicos y el manejo de datos en Vue.js.

En esta entrega, refinaremos la funcionalidad de nuestro criptocotizador, optimizando la integración de la API dinámica y mejorando la reactividad del componente para ofrecer una experiencia más fluida y profesional. ?

? ¿Qué veremos hoy?

1️⃣ Ajustes en la API dinámica: Mejoraremos cómo gestionamos los datos para asegurar precisión y rapidez. ?

2️⃣ Optimización del componente reactivo: Puliremos el diseño y comportamiento del componente para que sea más eficiente y responsivo. ?

3️⃣ Buenas prácticas en Vue.js: Aplicaremos técnicas avanzadas para escribir un código más limpio y escalable. ?️

? ¿Por qué es importante?

• Un componente optimizado mejora el rendimiento de la aplicación.

• Aprenderás técnicas avanzadas para manejar datos dinámicos de manera efectiva.

• Estas mejoras llevarán tu proyecto al nivel profesional que necesita para destacar.

? ¿A quién va dirigido? Este video es ideal para quienes desean perfeccionar sus habilidades en Vue.js, enfocándose en la reactividad y la optimización de componentes.

En este episodio, comenzamos a explorar las Progressive Web Apps (PWA). Aprenderás los fundamentos de estas aplicaciones modernas y cómo configurar una base sólida utilizando Vite en proyectos de Vue.js 3. ? 

? ¿Qué aprenderás hoy?

1️⃣ ¿Qué es una PWA?: Una breve introducción a las características y beneficios de las Progressive Web Apps. ?

2️⃣ Instalación de PWA con Vite: Configuraremos el entorno inicial para comenzar a transformar tu proyecto Vue.js en una PWA. ?️

3️⃣ Integración con Vue.js 3: Verás cómo Vite facilita la configuración para proyectos modernos. ?

? ¿Por qué es importante?

• Las PWA ofrecen una experiencia similar a las apps nativas, pero con la accesibilidad de la web.

• Aprenderás a aprovechar herramientas modernas como Vite para agilizar tu desarrollo.

• Este es el primer paso para crear aplicaciones más rápidas, confiables y envolventes.

? ¿A quién va dirigido? Desarrolladores interesados en combinar la potencia de Vue.js 3 con las capacidades de las PWA para construir aplicaciones de siguiente nivel.

En esta entrega del curso, seguimos profundizando en las Progressive Web Apps (PWA). Configuraremos el archivo manifest.json para personalizar tu PWA y crearemos los iconos específicos para dispositivos Apple, asegurando una experiencia impecable en cualquier plataforma.

? ¿Qué veremos hoy?

1️⃣ ¿Qué es el archivo manifest.json?: Entenderemos su propósito y cómo personalizarlo. ?

2️⃣ Configuración clave del manifiesto: Definiremos propiedades como nombre, descripción, colores y más. ?

3️⃣ Iconos para dispositivos Apple: Crearemos y configuraremos imágenes compatibles con iOS. ?

? ¿Por qué es importante?

• Un archivo manifest.json bien configurado asegura que tu PWA funcione correctamente en diferentes dispositivos.

• Los iconos personalizados mejoran la experiencia de usuario, especialmente en ecosistemas Apple.

• Aprenderás pasos esenciales para que tu app sea reconocida como PWA por navegadores y sistemas operativos.

? ¿A quién va dirigido? Este video es ideal para quienes buscan profesionalizar sus aplicaciones PWA y asegurarse de que luzcan increíbles en cualquier dispositivo.

En esta última etapa de nuestra sección sobre Progressive Web Apps (PWA), veremos cómo instalar la app en diferentes dispositivos y asegurarnos de que funcione perfectamente como una aplicación independiente. ?

? ¿Qué aprenderás hoy?

1️⃣ Instalación de la PWA: Cómo instalar la aplicación en escritorio y dispositivos móviles. ?

2️⃣ Verificación final: Comprobamos que la PWA cumpla con todos los estándares y ofrezca una experiencia fluida. ✅

3️⃣ Buenas prácticas finales: Ajustes para mejorar la usabilidad y compatibilidad en diversas plataformas. ?️

? ¿Por qué es importante?

• La instalación de tu PWA permite a los usuarios acceder a tu aplicación como si fuera nativa.

• Asegurar que tu app se vea y funcione bien en cualquier dispositivo es clave para la experiencia del usuario.

• Con esto, cerrarás con broche de oro tu proyecto Vue.js convertido en una PWA.

? ¿A quién va dirigido? Este video es para todos los que deseen desplegar y probar su PWA en dispositivos reales, garantizando calidad y profesionalismo en sus proyectos.

En esta lección, exploraremos Vue Router, la herramienta oficial para gestionar rutas en aplicaciones Vue.js. Aprende a configurar tu proyecto desde cero e implementar navegación entre diferentes vistas de forma fluida. ?

? ¿Qué aprenderás hoy?

1️⃣ ¿Qué es Vue Router?: Introducción a esta poderosa biblioteca y su uso en proyectos Vue.js. ?

2️⃣ Configuración inicial: Instalación y preparación del proyecto para integrar rutas. ?️

3️⃣ Primera implementación de rutas: Cómo crear y enlazar vistas para una navegación básica. ?

? ¿Por qué es importante?

• Vue Router es esencial para construir Single Page Applications (SPAs).

• Permite una experiencia de usuario dinámica y moderna sin recargas de página.

• Aprenderás a estructurar proyectos más complejos y escalables.

? ¿A quién va dirigido?

Desarrolladores que buscan dominar la navegación en aplicaciones Vue.js para crear experiencias de usuario fluidas y profesionales.

En esta lección, profundizaremos en las bases de Vue Router, explorando los componentes clave router-link y router-view, esenciales para la navegación y visualización dinámica en aplicaciones Vue.js. ?

? ¿Qué aprenderás hoy?

1️⃣ ¿Qué es router-link?: Aprende cómo crear enlaces dinámicos entre rutas. ?

2️⃣ ¿Qué es router-view?: Descubre cómo renderizar las vistas asociadas a cada ruta. ?️

3️⃣ Ejemplos prácticos: Implementaremos una navegación funcional con estos componentes. ?️

? ¿Por qué es importante?

• router-link simplifica la creación de enlaces sin necesidad de recargar la página.

• router-view asegura una renderización fluida de las vistas en función de la ruta seleccionada.

• Dominar estos elementos es fundamental para construir Single Page Applications (SPAs) eficientes.

? ¿A quién va dirigido?

Desarrolladores que quieren profundizar en la navegación dentro de aplicaciones Vue.js, creando interfaces dinámicas y modernas.

En esta lección, aprenderás a crear una barra de navegación interactiva (NavBar) y un footer funcional en tu proyecto Vue.js, utilizando router-view y rutas dinámicas con Vue Router. ?

? ¿Qué aprenderás hoy?

1️⃣ Creación de un NavBar: Implementa una barra de navegación que enlace diferentes vistas. ?

2️⃣ Diseño del Footer: Añade un pie de página estilizado y funcional a tu proyecto. ?

3️⃣ Integración con Vue Router: Conecta ambas secciones a las rutas de tu aplicación. ?️

? ¿Por qué es importante?

• Un NavBar bien diseñado mejora la experiencia de navegación del usuario.

• Un Footer agrega un toque profesional y puede incluir información clave como contactos o enlaces.

• Dominar la integración con Vue Router te ayudará a estructurar aplicaciones dinámicas y escalables.

? ¿A quién va dirigido?

A desarrolladores que buscan mejorar la navegación y diseño de sus aplicaciones Vue.js con componentes clave.

En esta lección, profundizamos en la creación de componentes reutilizables y funcionales en Vue.js. Aprende a diseñar una tarjeta (Card), un buscador (Search) y un indicador de carga (Loading) para optimizar la experiencia del usuario. ?

? ¿Qué aprenderás hoy?

1️⃣ Creación de un Card Component: Diseña un componente estilizado para mostrar información dinámica. ?

2️⃣ Search Component: Implementa un buscador interactivo que filtre resultados en tiempo real. ?

3️⃣ Loading Component: Agrega un indicador visual para mejorar la experiencia durante procesos de carga. ⏳

? ¿Por qué es importante?

• Los componentes reutilizables ahorran tiempo y facilitan el mantenimiento del código.

• Un search bien implementado mejora la accesibilidad y navegación.

• Un loading claro y atractivo eleva la experiencia de usuario, especialmente en aplicaciones con datos dinámicos.

? ¿A quién va dirigido?

A desarrolladores interesados en mejorar sus habilidades en la creación y gestión de componentes Vue.js.

En esta lección, nos enfocamos en perfeccionar componentes existentes y establecer una comunicación efectiva entre ellos. Aprende a optimizar el diseño y funcionalidad de tus componentes en Vue.js, asegurando que trabajen en conjunto de manera fluida. ?

? ¿Qué aprenderás hoy?

1️⃣ Refinamiento del Componente: Ajusta y mejora un componente para que sea más eficiente y dinámico. ✨

2️⃣ Paso de Información: Descubre cómo compartir datos entre componentes padre e hijo. ?

3️⃣ Buenas Prácticas: Implementa estrategias para mantener tus componentes limpios y reutilizables. ?️

? ¿Por qué es importante?

• Mejorar componentes existentes aumenta la escalabilidad de tu proyecto.

• Dominar el flujo de datos entre componentes es esencial para construir aplicaciones interactivas.

• Las buenas prácticas aseguran un desarrollo más eficiente y mantenible.

? ¿A quién va dirigido?

Desarrolladores que buscan perfeccionar sus habilidades en Vue.js y optimizar la comunicación entre componentes.

En este episodio final del proyecto buscador de GIFs, aprenderás a consumir la API de Giphy para traer contenido dinámico y a mostrar los resultados de manera efectiva en tu aplicación Vue.js. Utilizaremos Vue Router para gestionar las vistas y mejorar la experiencia del usuario.

? ¿Qué aprenderás hoy?

1️⃣ Consumo de la API de Giphy: Aprende a realizar peticiones para obtener GIFs dinámicos. ?

2️⃣ Presentación de Resultados: Diseña una interfaz atractiva para mostrar los GIFs al usuario. ?

3️⃣ Integración Final con Vue Router: Optimiza la navegación y funcionalidad del buscador. ?

? ¿Por qué es importante?

• Conocer el consumo de APIs es clave para trabajar con datos externos en tus proyectos.

• Presentar información de forma clara y atractiva mejora la experiencia del usuario.

• Finalizar un proyecto completo te prepara para enfrentar retos más avanzados en Vue.js.

? ¿A quién va dirigido?

A quienes deseen dominar el consumo de APIs y la construcción de aplicaciones dinámicas en Vue.js.

En este episodio especial, aprenderás a crear una página 404 personalizada para tu proyecto de Vue.js. Dale un toque único y profesional a tu app manejando errores de navegación de forma elegante.

? ¿Qué aprenderás?

1️⃣ Configuración de rutas para páginas no encontradas.

2️⃣ Diseño y estilo de una página 404 única.

3️⃣ Mejora la experiencia del usuario con un toque creativo.

?‍? Ideal para desarrolladores que buscan pulir sus aplicaciones y garantizar una navegación impecable.

¡Bienvenidos al siguiente paso en el aprendizaje de Vue.js! En esta lección, daremos una introducción a Vue.js, exploraremos sus capacidades y configuraremos un proyecto desde cero para comenzar a desarrollar.

¿Qué aprenderás?

1️⃣ Fundamentos básicos de Vue.js.

2️⃣ Configuración inicial del entorno de trabajo.

3️⃣ Creación de tu primer proyecto Vue.js.

?‍? Perfecto para principiantes que quieren dar sus primeros pasos en el desarrollo con Vue.js.

En esta lección, profundizaremos en la estructura y organización de un proyecto Vue.js declarando interfaces, configurando el store para la gestión de estado y desarrollando componentes dinámicos. ?

¿Qué aprenderás?

1️⃣ Cómo declarar interfaces para organizar tus datos.

2️⃣ Configuración y uso de Vuex o Pinia como store.

3️⃣ Integración del store con componentes para una experiencia dinámica.

?‍? Ideal para desarrolladores que buscan dominar el flujo de datos en aplicaciones Vue.js.

En este video aprenderás cómo estructurar tus stores y declarar interfaces en Vue.js para mantener un proyecto bien organizado y escalable. ?

¿Qué veremos?

1️⃣ Organización avanzada de stores para manejar el estado de tu aplicación.

2️⃣ Creación de interfaces para mejorar la tipificación de datos.

3️⃣ Mejores prácticas para estructurar un proyecto Vue.js.

?‍? Perfecto para desarrolladores que buscan claridad y eficiencia en sus proyectos Vue.js.

En esta lección, aprenderás a integrar TypeScript en tus componentes de Vue.js para un desarrollo más robusto y profesional. También exploraremos cómo implementar y estructurar funciones dentro de los componentes. ?

¿Qué aprenderás?

1️⃣ Configuración de TypeScript en Vue.js.

2️⃣ Declaración y uso de funciones con tipado estático.

3️⃣ Mejores prácticas para combinar TypeScript y Vue.

?‍? Ideal para desarrolladores que buscan aprovechar al máximo TypeScript en sus proyectos Vue.js

En esta lección, daremos un gran paso adelante combinando herramientas clave como Vue Router, Tailwind CSS, y explorando Pinia para gestionar el estado de nuestra aplicación. ¡Vamos a crear un proyecto desde cero con todo listo para escalar!

? ¿Qué veremos?

1️⃣ Configuración inicial del proyecto con Vue.js, Tailwind y Vue Router.

2️⃣ Introducción y creación del store con Pinia.

3️⃣ Mejores prácticas para estructurar un proyecto moderno en Vue.js.

?‍? Aprende a integrar estas potentes herramientas y a trabajar como un profesional del desarrollo frontend.

En esta lección, profundizamos en la creación y configuración del store utilizando Pinia. Aprende cómo gestionar el estado de tu aplicación de manera eficiente y escalable con esta poderosa librería. ?

¿Qué aprenderás?

1️⃣ Configuración inicial de Pinia en un proyecto Vue.js.

2️⃣ Creación y estructura básica de un store.

3️⃣ Cómo manejar estados y acciones en Pinia.

?‍? Este es un paso fundamental para cualquier desarrollador que busque optimizar la gestión de datos en Vue.js.

En este video, terminaremos de construir el store en nuestra aplicación Vue.js usando Pinia. Verás cómo consolidar todo lo aprendido para implementar un sistema de gestión de estados completo y funcional. ?

¿Qué veremos?

1️⃣ Finalización de la configuración del store.

2️⃣ Integración del store en los componentes de la app.

3️⃣ Ejemplos prácticos para manejar datos con Pinia.

?‍? Cierra esta sección con un manejo sólido del estado en Vue.js y sigue mejorando tus proyectos!

En esta lección, aprenderás a integrar Daisy UI con tu proyecto de Vue.js para llevar el diseño al siguiente nivel. ? Esta poderosa herramienta basada en Tailwind CSS simplificará la creación de interfaces modernas y atractivas.

¿Qué veremos?

1️⃣ Instalación y configuración de Daisy UI.

2️⃣ Personalización de estilos en el proyecto.

3️⃣ Ejemplos prácticos con componentes visualmente atractivos.

?‍? Crea diseños impresionantes de forma rápida y sencilla mientras aprendes a potenciar tu flujo de desarrollo!

En esta lección, te mostramos cómo estructurar un modelo y desarrollar un componente dinámico de Card Content para mostrar la información almacenada en los stores de tu proyecto. ¡Es hora de conectar la lógica con la interfaz de usuario!

¿Qué aprenderás?

1️⃣ Cómo definir modelos para estructurar datos en Vue.js.

2️⃣ Construcción de un componente reutilizable de tarjeta (Card Content).

3️⃣ Uso de la información almacenada en los stores para alimentar dinámicamente el contenido.

? Optimiza la organización de tu proyecto y mejora la experiencia del usuario con estas prácticas esenciales.

En este episodio, aprenderás a implementar un modal interactivo y funcional directamente en el NavBar de tu aplicación Vue.js. ?

¿Qué veremos en este video?

1️⃣ Creación del diseño del modal utilizando Vue.js y Tailwind CSS.

2️⃣ Configuración del estado del modal con Pinia para abrir y cerrar dinámicamente.

3️⃣ Prácticas recomendadas para integrar modales en tu NavBar de forma eficiente.

? Este componente mejorará la experiencia del usuario y te permitirá manejar contenido adicional sin complicaciones.

En esta lección, aprenderás a mostrar dinámicamente los productos de tu tienda utilizando datos almacenados en los stores y renderizando listas con Vue.js.

¿Qué cubriremos?

1️⃣ Configuración y extracción de datos desde el store.

2️⃣ Uso de directivas como v-for para renderizar listas dinámicas.

3️⃣ Diseño atractivo para mostrar los productos con Tailwind CSS.

? Empieza a dar vida a tu tienda online mostrando los productos con una interfaz clara y funcional.

En este capítulo, resolveremos uno de los problemas más comunes al trabajar con tablas en Vue.js: los errores de hidratación. Si has tenido problemas con las etiquetas table, td, th y tr, ¡este video es para ti!

¿Qué aprenderás?

1️⃣ Identificar y entender los errores de hidratación en Vue.js.

2️⃣ Soluciones prácticas para corregir problemas en la estructura de tablas.

3️⃣ Cómo trabajar de manera óptima con tablas dinámicas en proyectos modernos.

? Asegúrate de que tus tablas se rendericen correctamente en aplicaciones Vue.js con SSR o PWA.

En esta última parte de la funcionalidad del modal, integraremos una tabla dinámica para mostrar datos de forma interactiva y eficiente. Este video es clave para perfeccionar tu proyecto con Vue.js.

¿Qué aprenderás?

1️⃣ Configuración final del modal con estilos y funcionalidades.

2️⃣ Incorporación de una tabla dinámica para mostrar datos relevantes.

3️⃣ Consejos para optimizar el uso de tablas en proyectos con Vue.js.

? Completa tu proyecto con un modal profesional y funcional.

¡Llegamos al final del proyecto de la tienda en Vue.js! En este video, realizaremos los últimos ajustes para que todo funcione perfectamente y esté listo para su implementación.

¿Qué aprenderás?

1️⃣ Refinamiento de funcionalidades en el store.

2️⃣ Solución de errores y optimización de código.

3️⃣ Consejos para implementar el proyecto finalizado.

? Con esta última parte, tendrás un proyecto completamente funcional y listo para presumir o usar como base en nuevos desarrollos.

En esta serie, vamos a construir un Simulador de Instagram desde cero con tecnologías modernas:

✅ Vue 3 + Tailwind CSS 4 para un diseño ágil y atractivo.

? Clean Architecture para un código limpio y escalable.

? Firebase para la base de datos y autenticación.

? En esta primera parte, creamos la estructura del proyecto y preparamos todo para el desarrollo.

En esta parte del Simulador de Instagram, instalamos y configuramos DaisyUI 5.0.0 para mejorar el diseño con componentes estilizados y personalizados.

✅ Tailwind CSS 4.0.1 + DaisyUI 5.0.0

? Temas y estilos predefinidos

⚡️ Integración rápida con Vue 3

En esta parte 49 del desarrollo del Simulador de Instagram, implementamos el formulario de login, asegurándonos de que tenga un diseño limpio y moderno con Tailwind CSS 4.0.1 y DaisyUI 5.0.0. ?

¿Qué hacemos en este video?

✅ Creación del formulario de login

✅ Uso de Tailwind y DaisyUI para el diseño

✅ Validaciones básicas de usuario y contraseña

✅ Preparación para la integración con Firebase

Este proyecto sigue una arquitectura limpia (Clean Architecture) y usa Firebase para la autenticación. ¡No te pierdas esta parte del desarrollo!

En esta parte 50 del desarrollo del Simulador de Instagram, terminamos de implementar el login, asegurándonos de que funcione correctamente con Firebase Authentication y tenga un diseño optimizado con Tailwind CSS 4.0.1 y DaisyUI 5.0.0. ?

¿Qué hacemos en este video?

✅ Conexión del login con Firebase

✅ Manejo de errores y validaciones

✅ Optimización del diseño con Tailwind y DaisyUI

✅ Pruebas finales en el simulador

Este proyecto sigue una arquitectura limpia (Clean Architecture) y está diseñado para ofrecer una experiencia fluida en el login. ¡No te pierdas esta parte clave del desarrollo!

En esta parte 51, damos un gran paso en nuestro Simulador de Instagram al integrar Firebase en el proyecto. Esta implementación nos permitirá manejar la autenticación, base de datos y hosting de manera eficiente. ?

¿Qué hacemos en este video?

✅ Configuración de Firebase en el proyecto Vue 3

✅ Integración de Firebase Authentication para el login

✅ Configuración de Firebase Firestore (opcional para datos de usuario)

✅ Pruebas iniciales de autenticación

Con el stack de Vue 3 + Tailwind CSS 4.0.1 + DaisyUI 5.0.0, seguimos avanzando en este increíble proyecto con una arquitectura limpia (Clean Architecture).

En esta parte 52, seguimos avanzando en nuestro Simulador de Instagram, ahora enfocándonos en la creación del servicio de autenticación con Firebase. Este servicio nos permitirá gestionar el login, logout y registro de usuarios de manera modular y reutilizable. ?

¿Qué hacemos en este video?

✅ Creación de un servicio de autenticación en Vue 3

✅ Implementación de Firebase Authentication con email y password

✅ Configuración de Firebase para manejar sesiones de usuario

✅ Organización del código con arquitectura limpia (Clean Architecture)

Con Vue 3 + Tailwind CSS 4.0.1 + DaisyUI 5.0.0, seguimos construyendo una app moderna y escalable.

En esta parte 53, seguimos mejorando nuestro Simulador de Instagram, ahora aplicando Use Cases para estructurar mejor la lógica de la app. Con esto, lograremos una arquitectura más limpia y escalable en nuestra aplicación con Vue 3, Firebase y Tailwind CSS 4.0.1. ?

¿Qué hacemos en este video?

✅ Implementamos Use Cases para separar la lógica del negocio

✅ Mejor organización del código siguiendo Clean Architecture

✅ Refactorizamos el servicio de autenticación para mayor escalabilidad

✅ Preparamos la base para futuras funcionalidades ?

En esta parte 54, seguimos con la implementación de autenticación en nuestro Simulador de Instagram, ahora creando un Store con Pinia para manejar el estado de autenticación de manera eficiente en Vue 3 + Firebase + Tailwind CSS 4.0.1. ?

¿Qué hacemos en este video?

✅ Creamos un store de autenticación con Pinia

✅ Manejo centralizado del usuario autenticado

✅ Implementamos acciones y getters para mayor control

✅ Preparamos la integración con el sistema de login y logout

En esta parte 55, conectamos el login con email y contraseña en el frontend de nuestro Simulador de Instagram, utilizando Vue 3 + Firebase + Pinia + Tailwind CSS 4.0.1. ?

¿Qué hacemos en este video?

✅ Integramos el formulario de login con Firebase

✅ Conectamos el store de autenticación para gestionar el estado del usuario

✅ Manejo de errores y validaciones en el login

✅ Redirección y control de sesiones con Vue Router

En esta parte 55, integramos el login con Google en nuestro Simulador de Instagram, utilizando Vue 3 + Firebase + Pinia + Tailwind CSS 4.0.1. ?

¿Qué veremos en este video?

✅ Configuración de Firebase Authentication con Google

✅ Implementación del botón de Iniciar sesión con Google

✅ Manejo del estado del usuario con Pinia

✅ Redirección automática tras el inicio de sesión

En esta parte 57, implementamos la funcionalidad de logout (cierre de sesión) en nuestro Simulador de Instagram, utilizando Vue 3 + Firebase + Pinia + Tailwind CSS 4.0.1. ?

¿Qué veremos en este video?

✅ Implementación del logout con Firebase Authentication

✅ Actualización del estado global de autenticación con Pinia

✅ Redirección tras el cierre de sesión

✅ Buenas prácticas para manejar la sesión del usuario

En esta parte 58, seguimos avanzando en la construcción de nuestro Simulador de Instagram, estructurando el manejo de usuarios con Vue 3, Firebase, Pinia y Tailwind CSS 4.0.1. ?

¿Qué veremos en este video?

✅ Creación del modelo de usuario

✅ Implementación del store de usuario con Pinia

✅ Desarrollo del repository para gestionar datos del usuario

✅ Mejores prácticas en arquitectura limpia

En esta parte 59, continuamos con el desarrollo del Simulador de Instagram, enfocándonos en la gestión de usuarios mediante Vue 3, Firebase y Pinia. ?

¿Qué veremos en este video?

✅ Creación del User Store con Pinia

✅ Manejo de estado global para usuarios autenticados

✅ Integración con Firebase Authentication

✅ Aplicación de Clean Architecture con repositorios

En esta parte 60 del desarrollo del Simulador de Instagram, agregamos un NavBar dinámico que muestra los datos del usuario autenticado y lo integramos con Pinia y Firebase. ?

¿Qué veremos en este video?

✅ Implementación del NavBar dinámico

✅ Inicialización del User Store en la app Vue

✅ Consumo de datos en tiempo real desde Firebase

✅ Aplicación de Clean Architecture con repositorios

En esta parte 61 del desarrollo del Simulador de Instagram, implementamos el registro de usuarios utilizando Firebase Authentication con email y contraseña. ?

¿Qué veremos en este video?

✅ Creación del formulario de registro

✅ Integración de Firebase Auth para registrar usuarios

✅ Manejo de errores y validaciones

✅ Uso de Pinia para gestionar el estado del usuario

En esta parte 62, diseñamos el Modelo Entidad Relación (MER) para los posts en nuestro clon de Instagram. Definimos cómo se relacionarán las publicaciones con los usuarios, comentarios, likes y otros elementos clave del sistema. ?

¿Qué veremos en este video?

✅ Estructura de la base de datos para los posts

✅ Relación entre usuarios, posts, comentarios y likes

✅ Uso de Firebase Firestore para almacenar publicaciones

✅ Optimización del modelo para futuras mejoras

En esta parte 63, creamos el Upload Post Service, encargado de manejar la subida de publicaciones en nuestra app. Conectaremos los datos del usuario con las imágenes y el contenido del post para almacenarlos en Firebase Firestore y Storage. ?

¿Qué veremos en este video?

✅ Creación del servicio de subida de posts

✅ Integración con Firebase Firestore y Storage

✅ Asociación del post con el usuario autenticado

✅ Optimización y manejo de errores

En esta parte 64, implementamos los métodos clave para subir un post correctamente. Nos aseguramos de manejar bien los datos y optimizar la subida con funciones reutilizables. ?

¿Qué veremos en este video?

✅ Formateo de fecha para mostrar cuándo se publicó el post

✅ Post Format: estructura organizada del post antes de guardarlo

✅ getURL: obtener la URL del archivo subido

✅ getFile: recuperar archivos desde Firebase Storage

En esta parte 65, comenzamos a construir la vista principal del feed en nuestro Simulador de Instagram ?. Implementamos la estructura base y preparamos la integración de los posts dinámicos. ?

¿Qué aprenderás en este video?

✅ Creación de la vista principal del feed

✅ Implementación del diseño con Tailwind CSS y Daisy UI

✅ Integración con los datos de Firebase

En esta parte 65, continuamos con la construcción del feed en nuestro Simulador de Instagram ?. Mejoramos la presentación de los posts y la integración con los datos dinámicos. ?

¿Qué aprenderás en este video?

✅ Implementación del diseño final del feed

✅ Ajustes de estilos con Tailwind CSS y Daisy UI

✅ Conexión con Firebase para mostrar los posts en tiempo real

En esta parte 68, configuramos y optimizamos el índice en Firebase Storage para mejorar el manejo y acceso a nuestras imágenes en el Simulador de Instagram ?.

? ¿Qué aprenderás en este video?

✅ Configurar correctamente Firebase Storage

✅ Crear reglas de seguridad y definir permisos ?

✅ Optimizar el almacenamiento de imágenes ?

En esta parte 69, damos los toques finales al Simulador de Instagram ? implementando indexación para mejorar el rendimiento y la eficiencia de las consultas en Firebase. ?

¿Qué aprenderás en este video?

✅ Implementar indexación en Firestore para consultas rápidas ?

✅ Mejorar la optimización del feed con datos bien estructurados ?

✅ Ajustes finales para una experiencia fluida en la app ✨

En esta parte 70, llevamos nuestro Simulador de Instagram ? a producción, desplegándolo en Vercel para que cualquiera pueda acceder a la app desde cualquier dispositivo. ?

¿Qué aprenderás en este video?

✅ Configurar Vercel para proyectos Vue.js ?

✅ Desplegar el simulador de Instagram con Firebase ?

✅ Configuración de variables de entorno para producción ?️

✅ Consejos para un deployment exitoso ?

En esta parte 71, damos los primeros pasos en pruebas unitarias con Vite Test en nuestro proyecto de Vue.js. ?✅

? ¿Qué aprenderás en este video?

✅ Configurar Vite Test en un proyecto Vue.js ?️

✅ Instalación y setup inicial de Vitest ⚡

✅ Crear los primeros test unitarios ?

✅ Ejecutar pruebas y analizar resultados ?

En esta parte 72, nos enfocamos en realizar pruebas unitarias a un componente en Vue.js utilizando Vitest. ?✅

? ¿Qué aprenderás en este video?

✅ Configurar y ejecutar pruebas en componentes Vue ?️

✅ Probar propiedades (props), eventos (emit) y estado reactivo ?

✅ Usar Vue Test Utils para facilitar el testing ?

✅ Mejorar la calidad del código con pruebas automatizadas ✅

En esta parte 73, realizamos las pruebas finales al store de Vue con un componente, asegurándonos de que todo funcione correctamente. ?️

? ? ¿Qué veremos en este video?

✅ Pruebas unitarias a Pinia Store ?

✅ Test de integración con componentes Vue ?️

✅ Simulación de cambios en el estado global y validaciones ?

✅ Uso de Vitest + Vue Test Utils para testear reactividad ?

En esta parte 74, iniciamos un nuevo proyecto con Vue.js para construir un portafolio web moderno y dinámico. ?✨

? ¿Qué veremos en este video?

✅ Inicialización del proyecto con Vite + Vue 3 ⚡

✅ Configuración de Tailwind CSS para estilos ?

✅ Estructura base del proyecto con Clean Architecture ?

✅ Creación de los primeros componentes reutilizables ?️

En esta parte 75, damos estilo y personalización a nuestro portafolio con DaisyUI y Tailwind CSS. ?✨

? ¿Qué aprenderás en este video?

✅ Instalación y configuración de DaisyUI ?️

✅ Implementación de temas oscuros y personalizados ??

✅ Uso de componentes predefinidos para un diseño más rápido y eficiente ⚡

En esta parte 76, diseñamos y estructuramos la barra de navegación de nuestro portafolio con Vue.js y Tailwind CSS. ✨

? ¿Qué aprenderás en este video?

✅ Creación del NavBar con DaisyUI ?️

✅ Implementación de enlaces dinámicos con Vue Router ?

✅ Modo oscuro y responsive para mejorar la experiencia ??

En esta parte 77, implementamos el cambio de idioma en nuestro portafolio usando Vue I18n. ?✨ ?

¿Qué aprenderás en este video?

✅ Instalación y configuración de Vue I18n ?

✅ Creación de archivos de traducción ?

✅ Implementación del toggle de idioma en el NavBar ?

En esta parte 78, implementamos el cambio de tema en nuestro portafolio usando DaisyUI y Tailwind CSS. ?✨

?¿Qué aprenderás en este video?

✅ Configuración de temas en DaisyUI ?

✅ Implementación de un toggle para cambiar entre modo claro y oscuro ?☀️

✅ Almacenamiento de la preferencia del usuario en LocalStorage ?️

En esta parte 79, trabajamos en la sección principal (Hero Section) del portafolio y aplicamos mejoras generales al proyecto. ?✨

? ¿Qué aprenderás en este video?

✅ Estructurar y diseñar un Hero Section atractivo ?️

✅ Uso de Tailwind CSS + DaisyUI para mejorar el estilo ?

✅ Ajustes generales para optimizar la responsividad y UX ?

En esta parte 80, terminamos la sección Hero del portafolio y la personalizamos con más detalles para que tenga un aspecto profesional y único. ?✨

? ¿Qué aprenderás en este video?

✅ Mejorar la tipografía, colores y estilos ?

✅ Añadir animaciones y efectos para mayor dinamismo ?

✅ Ajustar la responsividad para todos los dispositivos ??

En esta parte 81, optimizamos las traducciones en nuestra app usando Vue i18n para mejorar la experiencia de los usuarios en múltiples idiomas. ?✨

? ¿Qué aprenderás en este video?

✅ Refactorizar las traducciones para mayor organización ?

✅ Agregar nuevos idiomas y mejorar la UX ?

✅ Implementar placeholders dinámicos y formatos de fecha/hora ⏳

En esta parte 82, desarrollamos el componente de estadísticas para nuestro portafolio en Vue.js. ?️✨

? ¿Qué aprenderás en este video?

✅ Implementar un componente dinámico de estadísticas ?

✅ Usar props y computed properties para calcular valores ?

✅ Aplicar estilos con TailwindCSS y DaisyUI ?

En esta parte 83, conectamos nuestro contador de visitas del portafolio directamente con Firebase para llevar el seguimiento en tiempo real. ?

? ¿Qué haremos en este video?

✅ Crear y leer un contador desde Firestore

✅ Conectar Firebase con Vue usando servicios

✅ Mostrar el número de visitas en el componente de estadísticas

En esta parte 84, dejamos totalmente operativo el contador de visitas del portafolio con conexión a Firebase. Perfecto para mostrar cuántas veces se ha visto tu sitio. ?

? ¿Qué hicimos en este video?

✅ Incrementamos correctamente los datos desde Firebase

✅ Evitamos múltiples actualizaciones con lógica inteligente

✅ Mostramos el contador en el componente de estadísticas

✅ Proyecto listo para producción ?

En esta parte 85, integramos una Timeline (línea de tiempo) usando Flowbite para mostrar de forma visual y atractiva la trayectoria profesional o educativa en el portafolio.

?️ ¿Qué aprendiste en este video?

✅ Cómo integrar Flowbite con Vue y Tailwind

✅ Crear una sección de Timeline dinámica y responsiva

✅ Personalizar íconos, fechas y descripciones

✅ Dejar tu portafolio más profesional y moderno ?

En esta parte 86, llevamos la línea de tiempo al siguiente nivel: ?

¿Qué hicimos en este video?

✅ Personalizamos el componente de trayectoria profesional

✅ Ajustamos colores, íconos y estructura para que encaje con el tema del portafolio

✅ Añadimos props dinámicos para reutilizar el componente fácilmente

✅ Mejoramos el diseño responsive con Tailwind

En esta parte 87, dejamos listo el componente de trayectoria profesional, ahora con soporte completo para i18n: ?️

¿Qué implementamos?

✅ Adaptamos el componente para que los datos sean dinámicos

✅ Integramos traducciones automáticas usando vue-i18n

✅ Permitimos mostrar la trayectoria en diferentes idiomas sin perder estilo ni estructura

✅ Optimizamos el diseño y mejoramos la organización del código

En esta parte 88 del curso seguimos mejorando la sección de trayectoria profesional:

? ¿Qué hicimos?

✅ Refinamos el diseño del timeline usando Flowbite + Tailwind para una experiencia visual más limpia

✅ Ajustamos animaciones, íconos y espaciados para mayor claridad

✅ Dejamos preparado el terreno para introducir un nuevo componente: ¡la sección de proyectos destacados! ?

En esta parte 89 del curso, damos vida a la sección de Proyectos Destacados con un componente totalmente reutilizable:

? ¿Qué hicimos?

✅ Creamos el componente ProjectCard.vue

✅ Recibe props dinámicos como: título, descripción, imagen, tags y enlace

✅ Estilizado con TailwindCSS y tematizado con DaisyUI

✅ Soporte para traducciones vía vue-i18n ?

En esta parte 90, agrupamos los proyectos en una vista organizada y moderna: ?

¿Qué implementamos?

✅ Creamos el componente ProjectStack.vue

✅ Usamos un v-for para renderizar múltiples ProjectCard desde un array de proyectos

✅ Aplicamos estilos responsivos con TailwindCSS para que se adapten a cualquier dispositivo

✅ Integramos transiciones animadas y espaciado uniforme con Grid & Flex

✅ Traducciones integradas para los textos principales

En esta parte 91, armamos la página principal de proyectos donde mostramos todas nuestras creaciones con estilo: ?️

¿Qué hicimos?

✅ Creamos el componente ProjectsView.vue

✅ Importamos y usamos el componente ProjectStack para listar todos los proyectos

✅ Agregamos un título dinámico traducido usando vue-i18n

✅ Aplicamos clases de Tailwind para lograr un diseño limpio, ordenado y responsivo

✅ Añadimos scroll suave y margen adecuado para una experiencia de usuario fluida

En esta parte 92, creamos una página de error 404 para mejorar la experiencia de navegación en nuestro portafolio: ?

¿Qué implementamos?

✅ Componente NotFoundView.vue con diseño limpio y minimalista

✅ Mensaje de error amigable y botón para volver al inicio

✅ Rutas mal escritas redirigen automáticamente a esta página

✅ Integración con Vue Router y traducciones dinámicas con vue-i18n

✅ Estilizado con Tailwind CSS y Daisy UI para mantener la coherencia visual

En esta parte 93, construimos la vista “Sobre mí” o “About Me”, clave para conectar con quienes visitan tu portafolio: ?

¿Qué desarrollamos?

✅ Componente AboutMe.vue desde cero

✅ Texto dinámico con soporte multilenguaje (vue-i18n)

✅ Estilizado con Tailwind CSS y Daisy UI para un diseño profesional

✅ Contenido centrado en tu historia, habilidades y objetivos

✅ Diseño adaptable (responsive) y con animaciones suaves

En la parte 94, incorporamos una animación de texto en movimiento (tipo marquee) para dar un toque visual dinámico y moderno al portafolio: ?

¿Qué trabajamos?

✅ Instalación de la librería vue-marquee-3

✅ Configuración e integración del componente en Vue 3

✅ Personalización del mensaje marquee multilenguaje con vue-i18n

✅ Estilizado con Tailwind CSS para una animación fluida y elegante

✅ Implementación responsiva para todo tipo de dispositivos

En la parte 95, damos vida a la nueva sección de certificaciones en nuestro portafolio personal: ?️

¿Qué hicimos?

✅ Creación de la vista “Certificaciones” dentro del proyecto

✅ Desarrollo de un componente reutilizable para cada certificado

✅ Uso de props para pasar nombre, fecha, plataforma y enlace

✅ Diseño responsivo y atractivo con Tailwind CSS + DaisyUI

✅ Integración con i18n para mostrar la info en múltiples idiomas

✅ Añadido al Navbar y a la navegación principal

En esta última parte de la sección de certificaciones, pulimos todos los detalles para dejarla lista y profesional: ?

¿Qué hicimos?

✅ Ajustes finales de diseño con Tailwind para mejorar el responsive

✅ Añadimos animaciones suaves con DaisyUI y transiciones

✅ Optimización del componente de certificados para múltiples idiomas

✅ Incluimos íconos, enlaces clicables y validación de props

✅ Conectamos esta sección a la navegación general del portafolio

✅ ¡Y revisamos toda la vista completa para dejarla lista para producción!

En esta parte, construimos el formulario de contacto para nuestro portafolio personal, ¡con diseño moderno y totalmente funcional! ?

¿Qué hicimos?

✅ Creamos el componente ContactForm.vue con campos para nombre, correo y mensaje

✅ Usamos v-model y validaciones básicas de Vue

✅ Estilizamos con TailwindCSS + componentes de DaisyUI

✅ Añadimos soporte para múltiples idiomas con vue-i18n

✅ Creamos una función para gestionar el envío (placeholder para integración futura con servicios como EmailJS o Firebase Functions)

¡Ya tenemos el formulario visual, ahora toca hacerlo funcional! ?

¿Qué hicimos en esta parte?

✅ Añadimos el evento submit con @submit.prevent="handleSubmit"

✅ Creamos la función handleSubmit para manejar los datos del formulario

✅ Mostramos mensajes de éxito o error dinámicamente

✅ Implementamos un pequeño loading state al enviar

✅ Preparamos la lógica para conectar con un servicio externo (como EmailJS, Firebase Functions o backend propio)

¡Último componente visual del portafolio: el Footer! ?

¿Qué hicimos en esta parte?

✅ Creamos un nuevo componente Footer.vue

✅ Usamos TailwindCSS + DaisyUI para un diseño responsivo y elegante

✅ Añadimos enlaces de navegación, redes sociales y un mensaje final

✅ Integramos traducciones dinámicas con Vue I18n

✅ Mostramos el año actual automáticamente con JavaScript (new Date().getFullYear()) Este componente le da el toque final profesional a nuestra app, cierra la estructura y mantiene la consistencia de diseño ?

¡Llegamos al gran final! ? En esta parte número 100 desplegamos todo el proyecto de portafolio usando Vercel de forma rápida y gratuita. ?

¿Qué hicimos?

✅ Subimos el código a GitHub

✅ Conectamos el repositorio a Vercel

✅ Configuramos variables de entorno si fueron necesarias

✅ Elegimos framework: Vue + Vite

✅ Esperamos a que Vercel construya y… ¡listo! ? Tu portafolio ahora es accesible desde cualquier parte del mundo con un dominio personalizado de Vercel (o uno propio si ya lo configuraste antes).

Ahora que ya tienes tu portafolio desplegado, es momento de profesionalizar tu proyecto conectando un dominio personalizado en Vercel. ??️

? ¿Qué hicimos en esta parte?

✅ Entramos al dashboard de Vercel

✅ Seleccionamos nuestro proyecto

✅ Agregamos un dominio propio (por ejemplo, desde DonDominio u otro proveedor)

✅ Actualizamos los registros DNS (A o CNAME) desde el panel del dominio

✅ Esperamos propagación y… ¡listo! ?

Con esto, tu portafolio pasa de ser

usuario.vercel.app a tudominio.com ?

Un paso esencial para tu marca personal y demostrar profesionalismo ?

¡Llegamos al final! ? En esta última parte te presento cómo quedó el portafolio construido paso a paso con Vue.js, Tailwind CSS, Firebase, Vercel y muchas herramientas modernas. Un recorrido que comenzó con componentes simples y terminó en una web profesional, lista para mostrar al mundo. ??

? ¿Qué mostramos aquí?

✅ Vista general del portafolio

✅ Navegación fluida entre secciones

✅ Cambio de idioma y tema en tiempo real

✅ Proyectos, trayectoria, estadísticas y contacto

✅ Integración con Firebase y despliegue en Vercel

✅ Dominio propio conectado ? Gracias por seguir todo el curso.

Si te fue útil, suscríbete al canal, compártelo con alguien que quiera aprender y muéstrame tu portafolio en los comentarios. Me encantaría verlo. ?