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

🗓 2 de agosto de 2020 - ⏱ 5 minutos

¿Un error 😱 ? Edita con una Pull Request

🟢 vue 🔥 firebase 🌊 tailwind

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.

¿Te gusta el contenido?