midudev
NextJS: Login en GitHub con Firebase y más Styled JSX
¡UPS! Para ver vídeos en la web debes estar registrado, es totalmente gratuito.
1.324 visualizaciones
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. Veremos cómo lo manejamos en nuestra app de NextJS.
REPOSITORIO 📝: https://github.com/midudev/curso-nextjs-twitter-clone
SEGMENTOS 📹
00:00 - Bienvenida y presentación de la clase y recursos
03:35 - Diseño mobile-only
04:55 - Instalando la última versión de NextJS
06:55 - Extensión vscode-styled-jsx para usar con styled jsx
09:53 - Creando la carpeta styles para extraer los tokens del theme
12:32 - Creando el fondo con CSS y background radial gradient
20:12 - Caja flotante para el contenido de la app usando display grid
26:37 - Extrayendo estilos de styled jsx a un fichero externo
29:50 - Extrayendo estilos globales de styled jsx
32:48 - Preguntas y respuestas I
38:57 - Añadiendo el logo de nuestra app y creando la home
44:15 - ¡Truco! Crea un archivo en VSCode dentro de una carpeta fácilmente
44:55 - Creando el componente Button
48:05 - Transformar un SVG a un componente de React
52:06 - Estilar en styled jsx elementos que son children
56:19 - Preguntas y respuestas II
01:00:00 - ¿Cuándo usar div y cuándo usar React.Fragment?
01:01:36 - Diferencias entre em y rem
01:02:59 - ¿Qué es Firebase?
01:04:59 - Iniciando nuestro proyecto de Firebase y GitHub Auth
01:10:52 - Registrando nuestra app en Firebase y obteniendo la config
01:12:13 - Instalando y añadiendo Firebase en nuestra app de React
01:18:04 - Login en GitHub al hacer click en el botón
01:25:27 - Problema de Firebase y React Fast Refresh
01:28:00 - La estrategia de carga del contenido que seguiremos
01:29:40 - Mostrar el botón de Login sólo cuando es necesario
01:49:40 - Preguntas y respuestas III
-~-~~-~~~-~~-~-
¡No te pierdas mi último vídeo! "Variables de entorno con archivos ENV y actualizaciones en tiempo real con Firestore"
https://www.youtube.com/watch?v=8ZA2p1SBssk
-~-~~-~~~-~~-~-
Y avanzaremos también en el login, para que el usuario tenga que iniciar sesión con GitHub. Veremos cómo lo manejamos en nuestra app de NextJS.
REPOSITORIO 📝: https://github.com/midudev/curso-nextjs-twitter-clone
SEGMENTOS 📹
00:00 - Bienvenida y presentación de la clase y recursos
03:35 - Diseño mobile-only
04:55 - Instalando la última versión de NextJS
06:55 - Extensión vscode-styled-jsx para usar con styled jsx
09:53 - Creando la carpeta styles para extraer los tokens del theme
12:32 - Creando el fondo con CSS y background radial gradient
20:12 - Caja flotante para el contenido de la app usando display grid
26:37 - Extrayendo estilos de styled jsx a un fichero externo
29:50 - Extrayendo estilos globales de styled jsx
32:48 - Preguntas y respuestas I
38:57 - Añadiendo el logo de nuestra app y creando la home
44:15 - ¡Truco! Crea un archivo en VSCode dentro de una carpeta fácilmente
44:55 - Creando el componente Button
48:05 - Transformar un SVG a un componente de React
52:06 - Estilar en styled jsx elementos que son children
56:19 - Preguntas y respuestas II
01:00:00 - ¿Cuándo usar div y cuándo usar React.Fragment?
01:01:36 - Diferencias entre em y rem
01:02:59 - ¿Qué es Firebase?
01:04:59 - Iniciando nuestro proyecto de Firebase y GitHub Auth
01:10:52 - Registrando nuestra app en Firebase y obteniendo la config
01:12:13 - Instalando y añadiendo Firebase en nuestra app de React
01:18:04 - Login en GitHub al hacer click en el botón
01:25:27 - Problema de Firebase y React Fast Refresh
01:28:00 - La estrategia de carga del contenido que seguiremos
01:29:40 - Mostrar el botón de Login sólo cuando es necesario
01:49:40 - Preguntas y respuestas III
-~-~~-~~~-~~-~-
¡No te pierdas mi último vídeo! "Variables de entorno con archivos ENV y actualizaciones en tiempo real con Firestore"
https://www.youtube.com/watch?v=8ZA2p1SBssk
-~-~~-~~~-~~-~-