Curso sobre cómo crear una aplicación vue desde cero

Después de unos cuantos directos en Twitch creando una aplicación para la gestión de nuestras plantas desde cero, he creado este post donde voy a dejar un listado explicando que se ha hecho en cada vídeo para que sea más fácil seguir el curso.

Primer paso

Suscríbete a mi canal de Youtube y Twitch para no perderte ningún video.

Segundo paso

Disfruta del curso y cualquier feedback será bienvenido ✌️.

¿Qué hemos usado para desarrollar la aplicación?

• ➡️ Vue
• ➡️ Tailwind
• ➡️ Firebase
• ➡️ Vuex
• ➡️ Vee Validate
• ➡️ Axios
• ➡️ Google Analytics

Parte 1 | Primeros pasos

Esta es la primera clase sobre cómo crear una aplicación Vue. En este episodio instalamos el proyecto con vue-cli, configuramos prettier + eslint, instalamos y configuramos tailwind, estuvimos organizando la estructura de carpetas a seguir y empezamos a crear la vista de añadir planta.

Parte 2 | Testear y configurar la aplicación

En esta clase configuramos el entorno de testing unitario y el coverage. Además estuvimos testeando los componentes desarrollados hasta ahora y creamos un formulario para añadir nuevas plantas en firebase.

Parte 3 | Crear proyecto en firebase y guardar datos

En esta clase terminamos de crear un componente autocomplete custom para buscar plantas en una api externa, configuramos axios para hacer peticiones a esa api, estuvimos creando el proyecto en firebase y guardamos nuestra primera planta.

Parte 4 | Abstracción de componentes

En esta clase solucionamos el error de CORS y estuvimos componentizando y abstrayendo componentes.

Parte 5 | Testing con Jest

Esta clase la dedicamos toda a realizar testing unitario con Jest.

Parte 6 | Validación de formulario y recuperar datos de firestore

En esta clase instalamos una fuente nueva con google fonts, añadimos validación al formulario con la nueva versión de vee validate y terminamos mostrando el listado de plantas almacenadas en firestore en la home.

Parte 7 | Crear una nueva vista e integrarla con firestore

En esta clase creamos la vista del detalle de una planta y la integramos con los datos almacenados en firestore.

Parte 8 | Configurar google analytics y desplegar en Netlify

En esta clase nos dió tiempo a muchas cosas. Primero configuramos google analytics, después desplegamos la aplicación usando Netlify, a continuación creamos la funcionalidad de registrar un día de riego en firestore.

Parte 9 | Integrando componentes externos

En esta clase integramos un componente externo para visualizar los días de riego registrados en la clase anterior.

Parte 10 | Crear login y registro con Firebase

En esta clase estuvimos creando la página del login con su formulario, también creamos la página del registro de usuario y creamos la funcionalidad tanto de hacer login con email y contraseña en firebase como de registrarse. Además, hicimos la funcionalidad de bloquear ciertas rutas si no estás logeado.

Parte 11 | Mejorando la aplicación

En esta clase hemos solucionado algunos bugs 🐛 visuales, hemos creado nueva lógica para que cada usuario tenga sus propias plantas y hemos actualizado el perfil del usuario en firebase para mostrar posteriormente su nombre en la home.