Estoy emitiendo todos los viernes un live coding en mi canal de Youtube donde vamos a ir construyendo paso a paso y desde cero un clon de Twitter usando NextJS, el framework de React de Vercel.
{{< img align="center" src="/images/youtube-suscribirme.png" >}}Introducción a NextJS
{{< youtube id=“2jxc8DMzt0I” >}} {{< subscribe-to-youtube >}}
En esta primera clase aprendemos qué es NextJS, por qué creo que deberíamos usarlo, respondemos algunas preguntas frecuentes al respecto de este framework de React y, además, aprendemos a crear nuestras primeras rutas. También vemos qué es styled jsx y aprendemos a crear navegaciones SPA gracias a next/link.
Usando Styled JSX y login en GitHub con Firebase
{{< youtube id=“UlYGGCNFcWo” >}} {{< subscribe-to-youtube >}}
Para avanzar en nuestro clon de Twitter vamos a empezar a crear los primeros componentes con Styled JSX y afinar el diseño de nuestra aplicación con un diseño mobile-only.
Y avanzaremos también en el login, para que el usuario tenga que iniciar sesión con GitHub usando Firebase. Veremos cómo lo manejamos en nuestra app de NextJS.
Configurando Eslint y Prettier. Avanzando en la página Home.
{{< youtube id=“EEDRcolSHms” >}} {{< subscribe-to-youtube >}}
Vamos a configurar Eslint y Prettier en nuestro proyecto basándonos en las reglas de Standard. Explicaremos cómo hacerlo paso a paso e integrarlo en nuestro editor gracias a las extensiones de Visual Studio Code.
Seguiremos avanzando el proyecto creando nuestra página home creando algunos componentes. ¡También cambiamos el logo gracias a vuestras colaboraciones! Y nuestra aplicación va tomando forma.
Usando Firestore de Firebase para crear y leer tweets
{{< youtube id=“W5y79Je-Rfs” >}} {{< subscribe-to-youtube >}}
Para hacer un clon de Twitter debemos ser capaces de crear y leer tweets. En esta clase vamos a conseguirlo usando Firestore de Firebase.
Además, mejoraremos el layout de nuestra aplicación para evitar problemas con el scroll y que el header y el navbar se vean correctamente.
Subiendo imágenes a Firebase Cloud Storage y un timeAgo desde cero
{{< youtube id=“AiyiiXXChwo” >}} {{< subscribe-to-youtube >}}
En la anterior clase ya listábamos los tweets pero no se mostraba bien la fecha. En esta clase empezamos haciendo un Timeago desde cero, sin dependencias.
Y una vez tengamos eso, mejoramos un poco el layout de nuestra app y permitimos que los usuarios puedan subir una imagen con cada tweet. Veremos cómo podemos guardarlos en la Firebase Cloud Storage.
Rutas dinámicas y data fetching con NextJS
{{< youtube id=“i16PlS9aTJU” >}} {{< subscribe-to-youtube >}}
En esta clase vamos a querer tener una página para nuestro tweet. Para ello la ruta tendrá que indicarnos qué id debemos mostrar. A esto se le llama “ruta dinámica” ya que hay un segmento que cambiará para darnos información.
Una vez tengamos claro ese concepto, será el momento de pasar a recuperar la información de ese tweet en específico. Para ello conoceremos las diferentes opciones de Data Fetching que tenemos en NextJS como getServerSideProps, getStaticProps y getInitialProps.
Variables de entorno con archivos ENV y actualizaciones en tiempo real con Firestore
{{< youtube id=“8ZA2p1SBssk” >}} {{< subscribe-to-youtube >}}
Añadir la posibilidad de usar variables de entorno con archivos .env, gracias al soporte nativo que tiene Next.JS y también añadiremos actualizaciones de nuestros resultados en tiempo real con Firestore de Firebase.
Suscríbete a mi canal de Youtube para no perderte el siguiente 👇 {{< subscribe-to-youtube >}}