Una Progresive Web App, un e-commerce, un template para hacer un e-commerce con React, con una Progresive Web App directamente, ¿vale?
Y esto, lo único que tienes que hacer es instalarlo y ya lo tendrías.
De hecho, no sé si este Get Started... Vale, lo voy a instalar ahora.
Esto lo que te hace es crearte justamente este template.
Pero lo que me parece más interesante, que me he quedado muy alucinado,
que es que no sé si este template, este template que veis aquí,
este template es alguno que ya está intentando copiar otro template.
Porque fíjate, si entramos aquí a Mercall, si entramos aquí a Mercall,
os fijáis aquí un poco el menú, ¿cómo es el menú?
Esto, Mercall es una tienda de zapatos de aquí de Barcelona, ¿vale?
Pero fíjate, ¿no? Que pone hombre... Y fíjate un poco cómo es el menú de arriba.
Pero si vas aquí, ¿no se parece mucho? ¿No se parece un montón esto?
Igual soy yo, ¿eh? Pero como que se parece mucho la línea y todo.
Es que, no sé, me recuerda un montón.
Me recuerda un montón.
También incluso los iconitos, no sé, me ha recordado y he dicho,
ostras, esto no será que hay un...
Son todos los e-commerce de ropa así.
Sí, hostia, no sé. A mí me parece...
De hecho, voy a mirar a ver si los filtros y todo se parecen, ¿eh?
Voy a mirar cómo los filtros... Bueno, los filtros...
No, los filtros no se parecen, coño.
No sé, me ha llamado la atención.
Digo, igual es un template que hay por ahí famoso, ¿sabes?
Hay un... Este sería justamente la página que te crea.
Que la verdad es que a Xca me recuerda tanto.
Pero por lo general los e-commerce de ropa son así.
Igual es eso, ¿eh?
Los iconos desde el mismo orden y mismos iconos.
Ya, ya. Es que es un poco raro.
Bueno, pues esto sería justamente el e-commerce que te crea.
Esto es un e-commerce que tiene Next.js,
que funciona con la búsqueda de Algolia.
Obviamente, eso faltaría, claro,
que la gente de Algolia no lo hiciera con su propio buscador.
La verdad es que va bastante fino.
Y se supone que es tan fácil como instalarlo y ya está.
Utiliza React Hooks con componentes funcionales,
optimizaciones de SEO.
Es una Progresive Web App.
Tienes las Core White Vitals por delante del 90%.
Utiliza TypeScript y Tailwind.
Todo lo que veis está hecho con Tailwind.
Y la verdad es que tiene unas cuantas cosas.
Creo que no tiene toda...
Hay alguna página mejor que no está hecha.
O sea, faltaría hacer más cosas.
Sí, os paso la...
Esta sería...
Sí, ¿te animas?
Sí, lo hago ahora.
Lo quiero instalar.
Quiero ver si funciona realmente y cómo funciona
y cómo lo hace y todo esto.
Claro que sí.
Vamos a instalarlo.
Y de hecho, cuando lo instale,
vamos a probar una cosa más.
Porque mira, pone que hay que hacer un fork.
Vale, vamos a intentar hacer el fork.
Vamos a hacer el fork.
Middle Dev.
Y voy a intentar hacerlo en Codespaces.
Voy a intentar hacerlo en Codespaces
para que no me pete el stream.
¿Vale?
TheRollishShark dice que Tailwind...
¡Es gratis!
Sí, es totalmente gratis lo que habéis visto.
Hombre, me parece muy interesante
sobre todo si tenéis que hacer una página web.
¿Sabes?
Si tenéis que hacer una...
Mira, use this template.
¿Y esto para qué es?
Ah, vale.
Esto es para...
Más que para hacer un fork.
Claro, es que esto tendría más sentido.
Es que pone aquí...
Algolia...
Esto es la primera vez que lo veo.
No sabía que existía.
¿Puedes crear templates en GitHub?
¿Vale?
Vamos a poner Algolia, Progressive Web App,
e-commerce.
¿Vale?
Público...
Ay, no me he copiado todas las branches.
Bueno, da igual.
Da igual.
Espero que no sea importante.
Es que es raro porque como pone Fork...
Creo que como Fork pierde un poco la gracia, ¿no?
Mira, generado.
Hostia, yo no tenía ni idea que...
No tenía ni idea que se puede hacer esto.
Vale, vamos a Codespaces.
Para hacerlo en la máquina virtual y así que no pete.
Vale.
Sí, lo puedes agregar a lo que falta del libro de Git.
Sí, la verdad es que no tenía ni idea que se puede hacer templates.
Y ahora vamos a hacer MPMistole y todo esto.
Y con el MPMistole voy a intentar...
Voy a intentar hacer una cosa.
Que es una cosa que os quería enseñar justamente.
Vale.
Os quería enseñar un comando, por si...
No sé si funcionará.
Y si no, lo probaré en mi máquina.
Quería probar un comando que es este de aquí.
Este de aquí.
Vale.
Este de aquí.
Sí, permitir copiar cosas.
npx benihill npm install.
Se ve que esto lo que...
Bueno, voy a ver.
Voy a darle a ver qué hace esto.
Vamos a ver qué hace.
No sé si sabéis que en benihill...
Vaya, pues empieza mal.
Empieza mal.
No ha servido para nada, ¿no?
Throw, NON, Spawn, Play...
Esto me parece...
A ver si funciona en mi máquina.
Voy a probar un momento.
Voy a probar en mi máquina un momento.
A ver si funciona.
Hostia, ¿qué ha pasado?
¿Qué es esto?
¿Qué está haciendo esto?
Juan, el myzsh.
Vamos a probar midudev.
Un momento.
Y vamos a hacer esto aquí.
A ver si aquí sí que funciona.
Sí, está la benihill.
A ver qué pasa.
LOL.
Vale, ya sé lo que hace.
No, no es virus.
He estado mirando antes el código.
Vale.
Lo que hace...
Es una tontería, pero ya habéis visto que es una chorrada.
Lo que hace es que mientras haces el MPM Stall, suena la canción de Benny Hill.
No sé si habéis visto cuál es la canción de Benny Hill.
No sé si alguna vez he visto a Benny Hill.
Yo es que soy muy, muy viejo.
Entonces he visto estas cosas.
Pero es esta canción de...
A ver.
Es un poco porno, ¿eh?
El Benny Hill.
Espero que no...
Es esta.
Es esta.
Esa.
Esa.
Esa canción.
La voy a quitar.
Me imagino que aquí, como es Linux, pues habrá petado por eso.
Porque no le gusta...
No tiene acceso al comando este y ya está.
Me imagino que será eso.
Vale.
MPM Stall.
Tentador.
Sí, la verdad es que está gracioso.
Lo que pasa es que nos ha dejado con las ganas.
Sinceramente.
Ha sido un momento, ¿sabes?
Ha sido como...
Y pum.
Se acabó.
Bueno.
Vamos a hacer MPM Stall.
Lo bueno de este MPM Stall es que no debería petarme nada porque esto es una máquina que no es la mía.
Muy bien.
Lo malo es que no tengo los alias de GitHub.
Pero bueno, no importa.
Vale.
Ya he hecho MPM Stall.
Dice...
Si quieres, puedes instalar la latency application.
Continúa con el siguiente paso.
Vale.
Configura las variables de entorno.
Bueno, que hay que configurar variables de entorno.
¡Madre mía!
Si hay un montón.
Hay un montón de variables de entorno que tengo que configurar.
Ah, bueno.
Pone que puedo utilizar las del demo.
Vale, vale.
Porque es que si no...
Si me tengo que poner a configurar ahora...
Uy, esto no.
Si me tengo que poner ahora configurar las variables de entorno, me puedo volver tarumba.
A ver dónde está la variable de entorno.
Vale, vale, vale.
Vale.
Pone que es para reemplazar las tuyas, pero se pueden utilizar estas.
Click credentials.
No sé qué son las click credentials.
Vamos a crear .env.
Vamos a ver si podemos utilizarlo sin necesidad de hacer nada.
No sé qué es esto.
Click app id.
Jury Algolia application.
Use it by the click to import and delete data assets.
Vale, eso es en el caso de que tengamos nuestra propia cosa en Algolia, ¿vale?
Variables de entorno.
Start development server.
Venga, vamos a probarlo.
Development server.
Stroquito, Stroquito.
NPM run dev.
Y le echamos un vistazo al proyecto.
A ver, opening browser.
Me parece increíble las code spaces, ¿eh?
Es increíble.
Por favor, hazlo en un proyecto que tenga muchos paquetes así de moral.
Lo haremos en uno en el futuro.
Vale, ¿está pensando esto todavía?
Está pensando demasiado esto, ¿eh?
You have a net with a net.
No sé si es que está compilando.
A ver, ¿compilar ha compilado?
Solo que no me funciona es el...
Ah, mira.
Aquí sí que ha funcionado.
Pero está tardando un montón.
Esto es...
Yo creo que esto es culpa de los puertos.
Ah, mira.
Parecía que había funcionado.
Pero no ha funcionado.
Ah, qué rabia.
Esto es el forwarded por test este.
Mira, ahora sí.
Ahora sí.
Bueno.
Pues ya lo tengo funcionando.
Lo malo es que con el forwarded no funciona tan bien en cuanto a rendimiento.
Pero bueno, ya lo estamos viendo funcionar, al menos.
Ya en un momento se ha levantado la cosa esta.
No está nada mal.
Vale.
Vamos a ver un poco qué es lo que trae esto.
Porque la verdad es que me parece una cosa muy interesante para hacer una tienda online
con ProxyWebApp desde cero.
Mira, y aquí justamente hay una cosa que pone dev.
Y si le doy aquí...
Ah, mira.
¿Esto qué es?
Esto no es una cosa de...
Esto está muy chulo.
¿Qué chulo es esto?
Esto no es de...
¿De qué es eso?
Esto no es de Next.
¿No?
Mira, fíjate.
Puedes cambiar aquí la ruta.
Puedes decirle, por ejemplo, me voy a Kit.
Esto me imagino que son temas visuales.
Mira, con todos los botones.
¿Qué chulo es esto?
¿Esto lo habéis visto en algún periodo?
Esto es la primera vez que lo veo y está súper chulo.
Esto es como para los componentes.
Ruta.
Esto es catálogo.
Layout.
Layout.
Ah, mira.
Layout sería con...
Con filters o no filters.
Grid.
Para ver la grid.
Y esto no sé qué es.
No sé, pero me gusta mucho esta idea.
No sé qué...
Mira, ¿lo puedes poner chiquitito o grande?
Es una librería que se llama GUI.
Ah, pues no...
Había visto esta librería, pero para otro tipo de cosas.
No para este tipo de...
De desarrollo.
Vale.
Me parece interesante.
Es como una debut part.
Efectivamente.
Muy chula, muy chula.
Bueno, pues está bien.
Está hecho con TypeScript.
Mira, me gusta que...
Vamos a hacerle un tu web a juicio a este proyecto.
Mira, tiene Framer Notion.
Animate Presence.
Esto es para animar algo.
Que es para animar justamente toda la página.
Entiendo que cada vez que navegas...
¿Ves que hace esa cosa extraña?
La verdad es que la animación...
Ah, esta animación.
Hace como un fade out y luego un fade in.
Está bastante chulo.
Bueno, es que está la página entera.
O sea, es que solo falta el add to card.
No sé si es que no se puede hacer el add to card porque no he iniciado sesión.
O lo que sea.
A ver qué cosas más tiene por aquí.
Bueno, esto sería el tema del document.
Esto es NextGS.
Vale.
Mira, las fuentes.
Pensaba que de las fuentes ahora NextGS tenía...
Creo que tiene una optimización o algo justamente para esto.
Mira, lo tiene en modo offline.
De hecho...
Mira.
Ah, no.
Pensaba que tenía lo de instalar la aplicación aquí.
Compartir esta página.
Guardar esta página.
Pensaba que saldría lo de instalar...
Progresive Web App.
Pero no lo tiene.
Vale.
El index.
Configure.
Mira, esto es lo de configurar.
Entiendo.
Ah, no.
¿Esto es la configuración de...?
Ah, esta es la configuración de React Instance Search.
Que es esto de aquí.
Que esto es lo de Algolia.
Uy, ¿y esto?
No me digas que esto funciona.
Oh, no funciona.
Esto es porque cada vez más se están haciendo este tipo de búsquedas.
En las que tú haces una foto o algo, por ejemplo, a unas zapatillas.
Y puedes buscar esas zapatillas.
O sea, está bastante bien.
Pero pensaba que funcionaba y digo, ostras.
Entonces, eso ya sí que es brutal, ¿eh?
Mira.
El producto.
Vale.
Similar a Metronic.
Metronic es un theme para Dashboard.
Hazle un tuveo a juicio también.
Vale.
Mira, GetServerSideProps, Page.
Mira, está interesante que el GetServerSide...
¿Cómo se aprende a veces viendo código de otra gente?
Está interesante lo que han hecho aquí porque para utilizar el GetServerSideProps de las páginas,
lo que veo que están haciendo aquí en este caso es que le pasa el componente.
Fíjate que le pasa el componente, le pasa el contexto y luego le pasa las props.
Es como recuperar GetServerSideProps de la página.
Y en este caso, el componente GetPropsPage.
¿Y para qué utiliza el componente?
GetResultsState.
Es que estoy...
O sea, tengo curiosidad.
¿Para qué utiliza el componente?
FindResultsState.
¿Para qué le pasa el componente por todos los lados?
¿Para qué le pasa el componente?
No sé para qué le pasa el componente.
¿Ves que le está pasando el componente hacia abajo todo el rato?
¿Para qué lo hará?
Bueno, lo que es interesante es que tiene como una utilidad.
Lo tiene fuera justamente para reutilizarlo en el GetServerSideProps.
Mira, Capitalize.
Hostia, una carpeta útils.
No puede fallar una carpeta útils en cualquier proyecto.
La carpeta cajón desastre, donde puedes meter cualquier mierda que no te quepa,
pues ahí lo puedes meter.
Ahí, sí, di que sí.
¿Tienes una carpeta útils en tu proyecto?
No, pues tu proyecto es una mierda.
Porque necesitas capitalizar, por supuesto.
Que me encanta como lo han hecho esto con las Regex.
A ver, que levante la mano quien no tenga una carpeta útils.
Que lo voy a banear.
Lo baneo ahora.
Ahora lo baneo.
Todos tenemos una carpeta útils.
Que encima, pues vas metiendo estas mierdas, ¿no?
Create initial values.
Mira, utilizan Jotai.
La verdad es que está interesante el proyecto, ¿eh?
Porque tiene que...
Bueno, helpers, es verdad, también.
Yo no tengo una carpeta útils.
Bueno, Mr. Carrot.
Dice, aún.
Vale, te has librado.
Una útils dentro de la útils.
Ya, ya.
Sí, sí.
Es que además me encanta como se...
Helpers también, es verdad.
Puede ser útils o helpers.
Mira, aquí tiene una de browser.
Para ver si es browser...
Mira, isomorphic Windows.
Si es browser, Windows.
Si no, undefined.
Si es browser, document.
Si no, undefined.
Me encanta esta.
GetScrollbarWith.
Hostia, este tiene mala pinta.
Este método tiene mala pinta.
Porque si lo tiene así...
A ver, si está dentro de un efecto, esto no debería haber ningún problema.
Dentro de un efecto tú puedes ejecutar código y no hace falta hacer esto.
O sea, si está dentro de un efecto, pues lo haces así y ya está.
Claro, lo que me imagino es que a veces, a lo mejor, por si acaso, por si acaso, pues haces esto, ¿no?
De hacerlo siempre isomórfico.
Puede ser una buena práctica.
Una de las cosas que a veces no me gusta de TypeScript es este tipo de código.
Este tipo de código en el que hay veces que de repente lees más tipos que código.
De repente, de initial values.
Entonces empiezas a leer de izquierda a derecha y hasta llegar a este punto.
No sé si en este tipo de causas hay veces que muchas veces lo mejor es sacar esto fuera.
Para que sea mucho más fácil de leer.
Y no leer, no tener los tipos tan mezclados.
Bueno, sí, pueden ser los genericos o no tiene por qué ser generics.
En este caso aquí tenemos los generics.
Pero fíjate este set, ¿eh?
Este genérico...
Ostras, no está mal, ¿eh?
No está mal.
¿Qué es eso isomórfico?
Que algo sea isomórfico quiere decir que funciona...
Le puedes decir isomórfico o le puedes decir universal.
Parecido, pero no exactamente igual.
Pero lo que puedes decir es que sea isomórfico es que funciona tanto en servidor como en cliente.
O sea, el código se puede ejecutar tanto en servidor como en cliente sin ningún tipo de problema.
¿Vale?
Eso sería básicamente.
Tener una aplicación isomórfica que se renderiza en el servidor y en el cliente.
Por ejemplo, este método, este método getScrollBarWith, esto lo puedes ejecutar en el servidor y no va a petar.
¿Por qué?
Porque hace justamente un check de que si está en el navegador, hace esto y si no, te vuelve cero.
Normalmente las aplicaciones de React son isomórficas porque se ejecutan en los dos entornos.
¿Vale?
Vale.
Mira.
Hostia, si es dev todo esto.
Veo que al menos me quedo más tranquilo con mi código muchas veces.
Por lo que veo.
Porque yo muchas de estas cosas las hago también.
¡Uh!
GetMapping.
Toma, mapping.
GetRefElement.
Dios, Dios.
Dios, Dios.
Esto es lo que hemos visto antes.
Mira, para ver si el objeto está vacío.
¡Uh!
Una carpeta más.
¡Uh!
Clamp.
Este es maravilloso también, ¿eh?
Este es maravilloso.
Pass URL.
Bueno, scroll to top.
Bueno, oye, tiene código interesante.
Este tipo de cosas me gustan.
A ver, y dónde tiene...
Vamos a ver dónde tiene los estilos porque decía que tenía Tailwind.
Mira, components, autocomplete, default.
Ah, pero...
¡Ostras!
¡Ostras!
La verdad, este es el tipo de uso que a mí personalmente no me gusta tanto...
No me gusta tanto de Tailwind.
¿Sabes?
Porque justamente la gracia de Tailwind está en el hecho de no tener que pensar clases.
Y además tienes que cambiar, hacer un...
O sea, tienes que cambiar de archivo para entonces hacer los applies.
¡Ay!
No me...
No soy muy fan.
Entonces, es como que pierde gracia a Tailwind.
La verdad.
Pero bueno, entiendo por qué se hace, obviamente.
Lo puedo llegar a entender.
Solo que...
Bueno, y encima una mezcla de que a veces lo tienes aquí y otras veces lo tienes en otro sitio.
No es como demasiado difícil, ¿sabes?
O sea, ¿dónde tengo que mirar?
Tengo que ver...
¿Los tengo aquí o tengo que mirar en el panel ClassName?
Ah, no.
Este no.
Pero bueno, ya habéis visto que aquí tiene CSS.
Hay algunos que son ClassNames.
O sea...
¡Ah!
Yo iría a por todas...
A por una.
O una u otra.
No...
50-50.
¿Cuando usas apply y mantienes el performance de Tailwind?
Sí, sí.
¿Y el critical CSS, por ejemplo?
¿Critical CSS, por ejemplo?
O sea, también.
Al final, sí.
¿Por qué esas carpetas tienen un arroba?
Muy buena pregunta.
Bueno, este no, porque esto es un paquete.
¿Vale?
Este, arroba Algolia, esto es normal porque como utiliza...
Esto es un paquete privado de la organización Algolia.
Si buscásemos en el NoModules, estaría.
Pero hemos visto en otro sitio...
A ver si lo encuentro ahora.
Esto, ¿no?
Tú dices esto.
Esto básicamente...
Esta línea de aquí que tiene el arroba, barra, config y tal...
Esto es muy interesante porque esto lo que hace es ir al root.
O sea, lo que hace aquí es arroba...
Esto sería el root del proyecto, barra y entraría este components.
Esto lo debería estar configurando en el...
Tsconfig este.
De hecho, ¿ves?
Lo tienes aquí.
Path, todo lo que sea, arroba, barra, asterisco.
Tiene que ir a buscarlo a punto, barra...
Hostia, pero veo...
Y aquí tendría el de components, barra, asterisco.
Tendría que ir a components.
Básicamente es esto.
Es como un alias, es como una especie de alias, algo así.
¿Vale?