Extrapolar e hidratar

Lecciones

Proyecto Idea Box

Creación y recorrido del proyecto

Creación de la estructura

Extrapolar e hidratar

Agregar autentificación

Escuchar ideas en tiempo real

Restringir votos

Añadir animación y color

Despliegue en Firebase Hosting

Proyecto Markdown Notes

Creación del proyecto

Layout base y configuración de Vuex

Visualizar notas

Estilos base con Tailwind

Editar y guardar notas

Cerrar la nota activa

Convertir Markdown en HTML

Extrapolar a componente ActiveNoteHTML

Extrapolar a componente ActiveNoteMD

Crear componente modal para eliminar notas

Mostrar información de las notas

Buscar notas (y dentro de las notas)

Agregar Firebase 🔥

Agregar Firebase Auth 🔐

Cargar notas desde Cloud Firestore

Guardar y editar notas desde Cloud Firestore

Eliminar notas y Lodash debounce

Layout responsive

Transiciones y animaciones

Reglas de seguridad y deploy en Firebase Hosting

Proyecto Trello Clone

Presentación del proyecto

Estructura del proyecto y datos locales (seed)

Rutas y vistas esenciales

Crear módulos Vuex

Crear componentes UserAvatar y NavBar

Componentes ColumnList y AppColumn

Componentes CardList y BoardCard

Drag & Drop con Vue Draggable

Implementar autentificación con Firebase

Proteger las rutas de la aplicación

Conectar con Firebase Cloud Firestore

Crear y guardar columnas

Renombrar columnas

Guardar el orden de las columnas

Eliminar columnas

Listar tarjetas

Reordenar tarjetas del tablero

Visualizar y validar tarjetas

Crear componente AppCard

Editar tarjetas

Cerrar y eliminar tarjetas

Destacar tarjetas completadas y caducadas

Editar el nombre del tablero

Cambiar el color de fondo del tablero

Buscar tarjetas con RegExp

Adaptación a móvil

Reglas de Seguridad via CLI

Deploy en Beta Channel

Creación de la estructura

Agregar autentificación

Continuamos desarrollando IdeaBox, en esta lección extrapolando el primer componente e hidratándolo con JSON

Storyblok: el primer CMS headless tanto para desarrolladores como para marketers

El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

Código inicial

Curso Vue en Escuela Vue

¿Tienes alguna pregunta sobre esta lección de Construye 3 proyectos con Vue 3?

Resuelve todas tus dudas sobre Vue en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.

Participa en la Comunidad

Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.

Twitter: Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.
Discord: En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.