From 79990ecf3cfe5ba04cc1e0952a2921463709b506 Mon Sep 17 00:00:00 2001 From: nachodiezgarcia Date: Thu, 4 Jun 2026 11:44:09 +0200 Subject: [PATCH] fix: correcting misspellings --- 00-claude-code/00-chat-gpt-idea.md | 4 ++-- 01-fundamentos-desarrollo/00-inmutabilidad.md | 20 +++++++++---------- .../01-spread-operator.md | 10 +++++----- 02-fundamentos-react/00-creacion-proyecto.md | 2 +- 02-fundamentos-react/01-estado.md | 6 +++--- .../00-creando-el-proyecto/README.md | 2 +- 03-tan-stack-start/01-skills/README.md | 6 +++--- .../02-pagina-principal-arranque/README.md | 16 +++++++-------- .../03-pagina-principal-layout/README.md | 10 +++++----- .../README.md | 6 +++--- .../README.md | 2 +- .../06-calendario-disponibilidad-ui/README.md | 8 ++++---- 03-tan-stack-start/07-reserva/README.md | 10 +++++----- 03-tan-stack-start/08-streaming/README.md | 4 ++-- 03-tan-stack-start/09-ssg/README.md | 8 ++++---- 03-tan-stack-start/10-better-auth/README.md | 14 ++++++------- 03-tan-stack-start/11-intranet/README.md | 6 +++--- 17 files changed, 67 insertions(+), 67 deletions(-) diff --git a/00-claude-code/00-chat-gpt-idea.md b/00-claude-code/00-chat-gpt-idea.md index eba6811..6a42e23 100644 --- a/00-claude-code/00-chat-gpt-idea.md +++ b/00-claude-code/00-chat-gpt-idea.md @@ -3,8 +3,8 @@ ## Prompt 1 quiero que me generes un diseño de una página que ponga una casa en alquiler vacacional en la -costa, en español, la primera pagina debe de ser presentando la propiedad con un carrusel de fotos, el nombre de la villa, donde se encuentra,descripcion, características (lo que tu veas), y ahí un calendario de disponibilidad de los tipicos que te marcan si esta ocupada o no y puedes elegir un rango de fechas, lo colores que sean mediterraneos, algo que transmita tranquilidad +costa, en español, la primera página debe de ser presentando la propiedad con un carrusel de fotos, el nombre de la villa, donde se encuentra, descripción, características (lo que tu veas), y ahí un calendario de disponibilidad de los típicos que te marcan si está ocupada o no y puedes elegir un rango de fechas, los colores que sean mediterráneos, algo que transmita tranquilidad ## Prompt 2 -Me haces también la segunda página de cuando le das a consultar disponibilidad donde pides nombre, apellidos, email de contacto, telefono, rango de fechas (ya seleccionado si ya se seleccionó en la página anterior), comentarios, y botón de informarme que enviaría correo y una vez que se pinche se le indica que será contactado por email \ No newline at end of file +Me haces también la segunda página de cuando le das a consultar disponibilidad donde pides nombre, apellidos, email de contacto, teléfono, rango de fechas (ya seleccionado si ya se seleccionó en la página anterior), comentarios, y botón de informarme que enviaría correo y una vez que se pinche se le indica que será contactado por email \ No newline at end of file diff --git a/01-fundamentos-desarrollo/00-inmutabilidad.md b/01-fundamentos-desarrollo/00-inmutabilidad.md index 7f3ad21..476073a 100644 --- a/01-fundamentos-desarrollo/00-inmutabilidad.md +++ b/01-fundamentos-desarrollo/00-inmutabilidad.md @@ -2,13 +2,13 @@ ## Crear proyecto -Vamos a ver porque es importante la inmutabilidad, así como conceptos clave. +Vamos a ver por qué es importante la inmutabilidad, así como conceptos clave. ```bash pnpm create vite pruebas --template vanilla-ts ``` -> Si no tienes pnpm, puedes instalarlo:npm install -g pnpm +> Si no tienes pnpm, puedes instalarlo: npm install -g pnpm Podemos arrancarlo @@ -24,7 +24,7 @@ Nos cargamos lo que hay en main.ts Vamos a empezar a jugar con objetos. -Imaginate que tengo esto: +Imagínate que tengo esto: _./main.ts_ @@ -54,7 +54,7 @@ const creaClienteVIP = (nombre: string, apellidos: string): Cliente => { }; ``` -¿Que pasa si hacemos esto? +¿Qué pasa si hacemos esto? ```ts // Paso 1 ver por consola @@ -75,13 +75,13 @@ Pues que al modificar el nuevo cliente, también hemos modificado el cliente pla Esto es un ejemplo de por qué la inmutabilidad es importante: si no queremos que los cambios en un objeto afecten a otros, debemos crear copias en lugar de modificar directamente los objetos existentes. -Varias temas a tener en cuenta de esta cagada: +Varios temas a tener en cuenta de esta cagada: - Siempre es mejor crear un nuevo objeto en lugar de modificar uno existente, nunca sabes quién más lo está usando (**efecto colateral**). -- Siempre que puedas intenta que una **función sea pura**, es decir, que no tenga efectos colaterales y que su salida dependa solo de sus entradas ¿Qué quiere decir esto? Que para mismos parametros de entrada siempre devuelva el mismo resultado, sin modificar nada fuera de la función. +- Siempre que puedas intenta que una **función sea pura**, es decir, que no tenga efectos colaterales y que su salida dependa solo de sus entradas ¿Qué quiere decir esto? Que para mismos parámetros de entrada siempre devuelva el mismo resultado, sin modificar nada fuera de la función. -- No suele ser buena idea modificar parametros de entrada, mejor crear un nuevo objeto a partir de ellos. +- No suele ser buena idea modificar parámetros de entrada, mejor crear un nuevo objeto a partir de ellos. ## Asignación inmutable @@ -104,7 +104,7 @@ const creaClienteVIP = (nombre: string, apellidos: string): Cliente => { }; ``` -Si ahora probamos esto funciona ¿Pero le véis algún problema a esta aproximación? +Si ahora probamos esto funciona ¿Pero le veis algún problema a esta aproximación? Vamos a simplificar, para ello vamos a usar el _spread operator_ de JavaScript. @@ -128,8 +128,8 @@ const creaClienteVIP = (nombre: string, apellidos: string): Cliente => { ¿Qué estamos haciendo aquí? - Creamos un objeto con las llaves. -- Con los tres puntitos es como si abrieramos la lata de clientePlantilla y copiáramos todas sus propiedades dentro del nuevo objeto. -- Una vez copiada, sobreescribimos el campo descuento. +- Con los tres puntitos es como si abriéramos la lata de clientePlantilla y copiáramos todas sus propiedades dentro del nuevo objeto. +- Una vez copiada, sobrescribimos el campo descuento. De hecho podríamos haber escrito esto de forma aún más corta: diff --git a/01-fundamentos-desarrollo/01-spread-operator.md b/01-fundamentos-desarrollo/01-spread-operator.md index da7cac7..9326775 100644 --- a/01-fundamentos-desarrollo/01-spread-operator.md +++ b/01-fundamentos-desarrollo/01-spread-operator.md @@ -1,6 +1,6 @@ # Spread operator -Vamos a entender como funciona el spread operator de JS. +Vamos a entender cómo funciona el spread operator de JS. Con cliente plantilla: @@ -12,7 +12,7 @@ const clientePlantilla: Cliente = { }; ``` -¿Que pasa si hago esto? +¿Qué pasa si hago esto? ```ts const nuevoCliente = { @@ -35,7 +35,7 @@ nuevoCliente.descuento = 30; ¿Cambia el original? -Vamos a meter un poco más de complejidad, imaginate que descuento es un objeto: +Vamos a meter un poco más de complejidad, imagínate que descuento es un objeto: ```ts interface Cliente { @@ -77,7 +77,7 @@ const creaClienteVIP = (nombre: string, apellidos: string): Cliente => { }; ``` -¿Que pasa ahora si hago? +¿Qué pasa ahora si hago? ```ts const cliente1 = creaClienteVIP("Pepe", "Perez"); @@ -91,7 +91,7 @@ console.log("Cliente plantilla:", clientePlantilla); ¿Qué está pasando aquí? Que el spread operator hace una copia superficial, es decir sólo el primer nivel, si tenemos objetos anidados, el spread no hace una copia profunda, por lo que si modificamos un objeto anidado, estamos modificando el original. Esto es algo a tener en cuenta cuando trabajamos con objetos complejos. -¿Coomooo? Si, y esto es bueno ya que a nivel de rendimiento va como una moto y también sirve para ver si tenemos que repintar un componentes o no. +¿Coomooo? Sí, y esto es bueno ya que a nivel de rendimiento va como una moto y también sirve para ver si tenemos que repintar un componente o no. ¿Cómo podríamos arreglarlo? diff --git a/02-fundamentos-react/00-creacion-proyecto.md b/02-fundamentos-react/00-creacion-proyecto.md index 73ba297..071aa7e 100644 --- a/02-fundamentos-react/00-creacion-proyecto.md +++ b/02-fundamentos-react/00-creacion-proyecto.md @@ -8,7 +8,7 @@ Vamos a usar Vite, que es una herramienta de construcción rápida para proyecto pnpm create vite mi-proyecto --template react-ts ``` -> Si no tienes pnpm, puedes instalarlo:npm install -g pnpm +> Si no tienes pnpm, puedes instalarlo: npm install -g pnpm Esto creará un nuevo proyecto llamado "mi-proyecto" con la plantilla de React y TypeScript. Luego, puedes navegar a la carpeta del proyecto e instalar las dependencias: diff --git a/02-fundamentos-react/01-estado.md b/02-fundamentos-react/01-estado.md index 4e76364..a538979 100644 --- a/02-fundamentos-react/01-estado.md +++ b/02-fundamentos-react/01-estado.md @@ -1,6 +1,6 @@ # Estado en React -En React los componentes son funciones, y esto afecta mucho a como trabajamos. +En React los componentes son funciones, y esto afecta mucho a cómo trabajamos. Vamos a crear nuestro primer componente: @@ -12,7 +12,7 @@ export const MiComponente = () => { }; ``` -Vamos a ahora a utilizar este componente en nuestra aplicación: +Vamos ahora a utilizar este componente en nuestra aplicación: ```diff import React from "react"; @@ -62,7 +62,7 @@ export const MiComponente = () => { }; ``` -Si te fijas si intentamos ejecutra esto, al teclear no pasa nada, el valor del input no cambia, y el nombre tampoco. +Si te fijas si intentamos ejecutar esto, al teclear no pasa nada, el valor del input no cambia, y el nombre tampoco. Esto es normal, a fin de cuentas tenemos una función, que al volver a renderizarse el componente se vuelve a ejecutar, y el valor de nombre se vuelve a establecer a "Pepe", por lo que no cambia. diff --git a/03-tan-stack-start/00-creando-el-proyecto/README.md b/03-tan-stack-start/00-creando-el-proyecto/README.md index ebcc133..7cc98c4 100644 --- a/03-tan-stack-start/00-creando-el-proyecto/README.md +++ b/03-tan-stack-start/00-creando-el-proyecto/README.md @@ -1,6 +1,6 @@ # Creando un proyecto desde cero -La forma más rápida de crear un proyecto basada con Tan Stack Start +La forma más rápida de crear un proyecto basado con Tan Stack Start ```bash pnpm dlx @tanstack/cli@latest create diff --git a/03-tan-stack-start/01-skills/README.md b/03-tan-stack-start/01-skills/README.md index ad11dd6..ec5ee1c 100644 --- a/03-tan-stack-start/01-skills/README.md +++ b/03-tan-stack-start/01-skills/README.md @@ -12,15 +12,15 @@ Lo primero vamos a instalar el skill de Claude para Front End: Ahora vamos a copiar una serie de skills del repositorio de demos de este curso. -Aquí tienes una guía de para que sirven, y conforme avancemos con el proyecto, iremos tocando alguno. +Aquí tienes una guía de para qué sirven, y conforme avancemos con el proyecto, iremos tocando alguno. -Lo copiaremos la ruta del proyecto +Lo copiaremos en la ruta del proyecto ``` .claude/skills ``` -El único que no vamos a usar es el de "project setup" que a su vez tira de blueprints, y que configuraría nuestros proyecto de una forma concreta. +El único que no vamos a usar es el de "project setup" que a su vez tira de blueprints, y que configuraría nuestro proyecto de una forma concreta. # Guía de skills — `skills-para-copiar` diff --git a/03-tan-stack-start/02-pagina-principal-arranque/README.md b/03-tan-stack-start/02-pagina-principal-arranque/README.md index 0de80cc..864c64b 100644 --- a/03-tan-stack-start/02-pagina-principal-arranque/README.md +++ b/03-tan-stack-start/02-pagina-principal-arranque/README.md @@ -2,9 +2,9 @@ Vamos a darle caña a la página principal. -Antes de ponernos a promptear como si no hubier un mañana, pensemos en que la cagamos al ir en modo prototipo: +Antes de ponernos a promptear como si no hubiera un mañana, pensemos en que la cagamos al ir en modo prototipo: -- Lo primero fue la configuracíon de ShadCN, que se lió y por si solo bajo a tailwind 3, así que vamos a investigar un poco como configurar ShadCN con Tailwind 4 +- Lo primero fue la configuración de ShadCN, que se lió y por sí solo bajo a tailwind 3, así que vamos a investigar un poco cómo configurar ShadCN con Tailwind 4 > ShadCN es un proyecto "especial" si quieres ver como funciona: https://www.youtube.com/watch?v=hhudoSMM0yU @@ -26,7 +26,7 @@ Le voy a decir a chatGPT que haga un doble check Vamos a hacer una cosa, como parece que está claro con la documentación le vamos a pedir a claude que cree un skill para poder instalar shadCN, le indicamos que la info que tiene es antigua y que la ha cagado antes, después comprobaremos si tiene sentido e iremos a por ese skill -Así que abrimos claude le pedimos que vaya en modo plan, o si no estamo seguros, /grill-me y le decimos +Así que abrimos claude le pedimos que vaya en modo plan, o si no estamos seguros, /grill-me y le decimos ``` Me hace falta hacer setup de shadCN con Tailwind 4 (que ya está instalado en el proyecto), pasa una cosa, en otro proyecto te lo pedí pero la cagaste, porque tenías documentación antigua y me llegaste a hacer un downgrade a tailwind 3, así que he buscado la documentación oficial, aquí la tienes: https://ui.shadcn.com/docs/installation/tanstack quiero que me crees un skill para poder integrar shadCN en un proyecto tanStackStart con Tailwind 4, siguiendo la documentación oficial, hazlo paso a paso y con comandos concretos, no te olvides de nada, y si hay algo que no entiendes me lo preguntas antes de crear el skill, ese skill se puede llamar setup-shadcn-tanstack-tailwind4 @@ -41,7 +41,7 @@ Vamos a probar el skill que acabas de crear, dale caña Una vez que vemos que todo ok le indicamos que revise y mejor el skill con lo que ha aprendido, y que lo deje perfecto para que lo pueda usar cualquiera ``` -Ahora que han funcionado, mejor el skill con lo que has aprendido, hazlo perfecto para que lo pueda usar cualquiera, revisa que no te hayas dejado nada, y que todo esté correcto, hazlo paso a paso y con comandos concretos +Ahora que han funcionado, mejora el skill con lo que has aprendido, hazlo perfecto para que lo pueda usar cualquiera, revisa que no te hayas dejado nada, y que todo esté correcto, hazlo paso a paso y con comandos concretos ``` Otro tema interesante es instalar lucide-icons @@ -58,7 +58,7 @@ _./CLAUDE.md_ - Siempre que necesites usar un icono, busca en lucide-react y úsalo, no te olvides de importarlo ``` -Para aprender tengo el contenido estático en un Headless CMS así directamnete puedo darle acceso al propietario de la villa para que pueda modificar contenido. +Para aprender tengo el contenido estático en un Headless CMS así directamente puedo darle acceso al propietario de la villa para que pueda modificar contenido. Estando modo "IA a tope" podríamos directamente indicarle que creara el layout e incluso hiciera todo el setup para Content Island etc... @@ -74,7 +74,7 @@ Lo primero que vamos a hacer es meter la variable de entorno con el token de lec CONTENT_ISLAND_ACCESS_TOKEN=d2e92c0f5bc6b23e86cc901026fd51c3 ``` -Lo segundo vamos a iniciailizar el cliente de Content Island +Lo segundo vamos a inicializar el cliente de Content Island _./src/lib/content-island.ts_ @@ -207,7 +207,7 @@ export interface FullMainPage { } ``` -Vamos a crear un modelo de la vista que de momento va a ser igual que el modelo de datos, así que crearemo un type y a futuro podrías hacer especializaciones. +Vamos a crear un modelo de la vista que de momento va a ser igual que el modelo de datos, así que crearemos un type y a futuro podrías hacer especializaciones. _./src/pods/home/home.vm.ts_ @@ -297,7 +297,7 @@ function App() { } ``` -Y ahora nos traemos la llamada a la api y lo metemose en el loader: +Y ahora nos traemos la llamada a la api y lo metemos en el loader: _./src/routes/index.tsx_ diff --git a/03-tan-stack-start/03-pagina-principal-layout/README.md b/03-tan-stack-start/03-pagina-principal-layout/README.md index 64c4827..0606e20 100644 --- a/03-tan-stack-start/03-pagina-principal-layout/README.md +++ b/03-tan-stack-start/03-pagina-principal-layout/README.md @@ -1,10 +1,10 @@ # Página principal Layout -Todo esto que hemos hecho, podríamos haberlo generado utilizando Claude Code, pero es bueno conocer porque se hacen las cosas, de hecho volveremos a este código cuando querramos optimizar el rendimiento de la página. +Todo esto que hemos hecho, podríamos haberlo generado utilizando Claude Code, pero es bueno conocer por qué se hacen las cosas, de hecho volveremos a este código cuando querramos optimizar el rendimiento de la página. -Para montar la maquetacíon vamos a partir del JSX inicial que nos genero Chat GPT (aquí podéis usar Pencil, o Figma o lo que mejor os venga), y vamos a pedir que utilice ShadCN, que sea responsivo y que ademas lo mezcle con el contenido de Content Island para que una persona no técnica pueda modificarlo. +Para montar la maquetación vamos a partir del JSX inicial que nos generó Chat GPT (aquí podéis usar Pencil, o Figma o lo que mejor os venga), y vamos a pedir que utilice ShadCN, que sea responsivo y que además lo mezcle con el contenido de Content Island para que una persona no técnica pueda modificarlo. -IMPORTANTE (1) COPIATE LOS SKILLS DE 01 y pegalos en `./claude/skills/` +IMPORTANTE (1) CÓPIATE LOS SKILLS DE 01 y pégalos en `./claude/skills/` IMPORTANTE (2) Nos instalamos el skill de diseño de front end de claude @@ -527,7 +527,7 @@ export default function VillaMediterraneaLanding() { ``` Con este tenemos la página principal, pero nos quedan varias cosas en el tintero: - - No es buena idea leer de content island el contenido estatico cada vez que se cargue una página lo suyo es que esté cacheado globalmente o generado estaticamente. - - Lo mismo pasas con el header y el footer, es más aquí igual nos podríamos plantear opciones más drasticas. + - No es buena idea leer de content island el contenido estático cada vez que se cargue una página lo suyo es que esté cacheado globalmente o generado estáticamente. + - Lo mismo pasa con el header y el footer, es más aquí igual nos podríamos plantear opciones más drásticas. Pero en vez de meternos en el agujero de gusano, vamos a tener esto anotado para más adelante y avanzar en la funcionalidad básica (el principio de la "bronca"... si te metes a arreglar una arista pero no avanzas en el objetivo principal, la bronca que te vas a llevar es monumental). \ No newline at end of file diff --git a/03-tan-stack-start/04-calendario-diponibilidad-infra/README.md b/03-tan-stack-start/04-calendario-diponibilidad-infra/README.md index 3b13970..fb084db 100644 --- a/03-tan-stack-start/04-calendario-diponibilidad-infra/README.md +++ b/03-tan-stack-start/04-calendario-diponibilidad-infra/README.md @@ -2,14 +2,14 @@ Vamos ahora a por el calendario de disponibilidad, aquí tenemos lógica de negocio y datos propios que guardar. -Desafios: +Desafíos: - Tenemos que modelar esto (no es Front End, pero nos toca como emprendedores que somos). - Tenemos que crear un entorno dockerizado para la BBDD y que sea fácil usarlo para todos. - Tenemos que crear un console runner para alimentar con los datos iniciales. Empezamos por definir un mongoDB en un dockerfile para poder levantarlo y que cualquier desarrollador pueda trabajar con el sin tener que instalar mongo en su máquina local. -Vamos con un prompt en planning (Esto lo podría sacar también con chatp gpt): +Vamos con un prompt en planning (Esto lo podría sacar también con chat GPT): ``` /grill-me Vamos por pasos, primero quiero tener un docker compose para levantar un mongodb que persista los datos en el disco duro local, y los comandos en el package.json para levantarlo etc, y más adelante (no en este paso) crearemos un console runner para crear BBDD y alimentar datos de prueba, pero de primeras el docker file @@ -204,7 +204,7 @@ Consulta principal: ``` --- -## Apendice: Base de datos local (MongoDB) +## Apéndice: Base de datos local (MongoDB) Requisitos: Docker Desktop instalado. diff --git a/03-tan-stack-start/05-calendario-disponibilidad-backend/README.md b/03-tan-stack-start/05-calendario-disponibilidad-backend/README.md index 5d95834..7c21fc8 100644 --- a/03-tan-stack-start/05-calendario-disponibilidad-backend/README.md +++ b/03-tan-stack-start/05-calendario-disponibilidad-backend/README.md @@ -1,6 +1,6 @@ # Calendario - Backend -Ya tenemos la infra, siguiente paso vamos a crear una server function dentro nuestro proyecto de tan stack start (si, para proyectos simples no nos hace falta crear un proyecto de backend), el que vamos a leer los datos de diposnibilidad para un mes dado, y eso lo leeremos en la página principal, y de momento lo mostraremos por consola. +Ya tenemos la infra, siguiente paso vamos a crear una server function dentro nuestro proyecto de tan stack start (si, para proyectos simples no nos hace falta crear un proyecto de backend), en el que vamos a leer los datos de disponibilidad para un mes dado, y eso lo leeremos en la página principal, y de momento lo mostraremos por consola. ¿Qué prompt usaríamos? diff --git a/03-tan-stack-start/06-calendario-disponibilidad-ui/README.md b/03-tan-stack-start/06-calendario-disponibilidad-ui/README.md index e3be7f3..040c220 100644 --- a/03-tan-stack-start/06-calendario-disponibilidad-ui/README.md +++ b/03-tan-stack-start/06-calendario-disponibilidad-ui/README.md @@ -1,6 +1,6 @@ # Calendario - UI -Ya tengo una server function que me carga la diponibilidad de un mes dado, ahora quiero conectar el UI con esa función para mostrar la disponibilidad en el calendario, y después permitir que el usuario pueda elegir rangos de fechas, quiero reservar desde este día a este otro día. +Ya tengo una server function que me carga la disponibilidad de un mes dado, ahora quiero conectar el UI con esa función para mostrar la disponibilidad en el calendario, y después permitir que el usuario pueda elegir rangos de fechas, quiero reservar desde este día a este otro día. Así que vamos por pasos, primer prompt @@ -10,7 +10,7 @@ Así que vamos por pasos, primer prompt Antes de ponernos con la selección hay un detalle que sería bueno arreglar: Debajo de disponibilidad siempre pone "Mayo de 2026" lo suyo es que ponga el mes que se está mostrando. -Este es muy facil +Este es muy fácil ```md Debajo de disponibilidad siempre pone "Mayo de 2026" lo suyo es que ponga el mes que se está mostrando. @@ -18,8 +18,8 @@ Debajo de disponibilidad siempre pone "Mayo de 2026" lo suyo es que ponga el mes ## Seleccion -Ahora vamos a por la selección, quiero que el usario pueda realizar la selección y que al pulsar en el botón de consultar diposnibilidad, de momento me muestre un console.log con la seleccion de fechas +Ahora vamos a por la selección, quiero que el usuario pueda realizar la selección y que al pulsar en el botón de consultar diposnibilidad, de momento me muestre un console.log con la selección de fechas ```md -/grill-me Ahora vamos a por la selección, quiero que el usario pueda realizar la selección y que al pulsar en el botón de consultar disponibilidad, de momento me muestre un console.log con la seleccion de fechas +/grill-me Ahora vamos a por la selección, quiero que el usuario pueda realizar la selección y que al pulsar en el botón de consultar disponibilidad, de momento me muestre un console.log con la selección de fechas ``` diff --git a/03-tan-stack-start/07-reserva/README.md b/03-tan-stack-start/07-reserva/README.md index 9c6bfdd..31fda92 100644 --- a/03-tan-stack-start/07-reserva/README.md +++ b/03-tan-stack-start/07-reserva/README.md @@ -1,6 +1,6 @@ # Página de reservas -Vamos a por la página de reservas vamos a dar un primer paso, armar la página con los parametros adecuados, y mostrar por consola la seleccion. +Vamos a por la página de reservas vamos a dar un primer paso, armar la página con los parámetros adecuados, y mostrar por consola la selección. ```md /grill-me Ahora desde la página principal si selecciono las fechas y le doy a consultar disponibilidad, quiero que navegue a otro página con el mismo estilo y responsiva, que muestra la seleccion de fecha realizada (con opción de cambiarla), y pida los datos del huesped (nombre, apellido, email, teléfono, numero de huespedes, y un campo de text libre para comentarios adicionales) y un botón para enviar correo al dueño de la propiedad para confirmar la reserva. @@ -13,9 +13,9 @@ A tener en cuenta los datos de las fechas de reserva los podemos pasar por query Empezamos con la validación del formulario: ``` -/grill-me Como siguiente paso quiero validar el formulario, vamos a empezar facil, de primeras vamos a validar que el nombre este bien informado, vamos a usar TanStack Form y Zod para esto, y vamos a mostrar un mensaje de error debajo del campo de nombre si el nombre no es correcto, el mensaje de error debe desaparecer cuando el usuario corrija el error. +/grill-me Como siguiente paso quiero validar el formulario, vamos a empezar fácil, de primeras vamos a validar que el nombre esté bien informado, vamos a usar TanStack Form y Zod para esto, y vamos a mostrar un mensaje de error debajo del campo de nombre si el nombre no es correcto, el mensaje de error debe desaparecer cuando el usuario corrija el error. -Tan Stack Form obliga a crear unos wrappers alrededor de los componentes, no quiero ir repetiendolos, para ello vamos a crear dentor de src/components una carpeta que llamaremos form donde vamos a poner los wrappers por ejemplo de el input del campo nombre +Tan Stack Form obliga a crear unos wrappers alrededor de los componentes, no quiero ir repetiendolos, para ello vamos a crear dentro de src/components una carpeta que llamaremos form donde vamos a poner los wrappers por ejemplo de el input del campo nombre ``` En el siguiente paso cubrimos todos los campos y se crean todos los wrappers @@ -23,10 +23,10 @@ En el siguiente paso cubrimos todos los campos y se crean todos los wrappers ``` /grill-me Vamos a completar la validación para todos los campos del formulario, para ello vamos a crear los wrappers necesarios para cada campo, y vamos a mostrar un mensaje de error debajo de cada campo si el campo no es correcto, el mensaje de error debe desaparecer cuando el usuario corrija el error. -Además cuando se pulse en el botón de solicitar reserva, si el formulario no es correcto, tiene que aparece un aviso para que chequee los campos, acuerdate que estamos usando shadcn +Además cuando se pulse en el botón de solicitar reserva, si el formulario no es correcto, tiene que aparecer un aviso para que chequee los campos, acuerdate que estamos usando shadcn ``` -Como último paso, si el formulario es correcot vamos a usar Resend para enviar un correo al dueño de la propiedad con los datos de la reserva, para ello vamos a crear una función en el backend que se encargue de enviar el correo, y vamos a llamar a esa función desde el frontend cuando se pulse en el botón de solicitar reserva, pasando los datos del formulario como parámetros. +Como último paso, si el formulario es correcto vamos a usar Resend para enviar un correo al dueño de la propiedad con los datos de la reserva, para ello vamos a crear una función en el backend que se encargue de enviar el correo, y vamos a llamar a esa función desde el frontend cuando se pulse en el botón de solicitar reserva, pasando los datos del formulario como parámetros. ``` /grill-me Como último paso, si el formulario es correcto vamos a usar Resend para enviar un correo al dueño de la propiedad con los datos de la reserva, para ello vamos a crear una función en el backend que se encargue de enviar el correo, y vamos a llamar a esa función desde el frontend cuando se pulse en el botón de solicitar reserva, pasando los datos del formulario como parámetros. diff --git a/03-tan-stack-start/08-streaming/README.md b/03-tan-stack-start/08-streaming/README.md index 48b417b..3322793 100644 --- a/03-tan-stack-start/08-streaming/README.md +++ b/03-tan-stack-start/08-streaming/README.md @@ -10,7 +10,7 @@ Una cosa muy chula que nos ofrece Tan Stack Start es el streaming, es decir, que Vamos a simular que por ejemplo la sección de disponibilidad tarda mucho en cargar, y queremos que el usuario pueda ver la info sobre la villa cuanto antes, sin tener que esperar a que cargue toda la información. -Vamos a simular que hay un lag de 5000 segundos en cargar la disponiblidad. +Vamos a simular que hay un lag de 5000 segundos en cargar la disponibilidad. _./src/pods/home/availability.api.ts_ @@ -74,7 +74,7 @@ export const Route = createFileRoute("/")({ }); ``` -Tengo que hacer un build o tener funcionando el server y refactoizar el pod de home +Tengo que hacer un build o tener funcionando el server y refactorizar el pod de home _src/pods/home/home.pod.tsx_ diff --git a/03-tan-stack-start/09-ssg/README.md b/03-tan-stack-start/09-ssg/README.md index 1fb87c5..8ef01a8 100644 --- a/03-tan-stack-start/09-ssg/README.md +++ b/03-tan-stack-start/09-ssg/README.md @@ -11,12 +11,12 @@ Queremos que la página cargue como un tiro y no depender de la velocidad del He Pero aquí en la home tenemos un problema: - Hay una parte que no cambia nunca. -- Hay otra para que es es la gestión de disponiblidad que si tiene que estar al día. +- Hay otra parte que es la gestión de disponibilidad que sí tiene que estar al día. Vamos a por una solución de compromiso: - Prerrendizo la parte que no cambia nunca. -- La parte que si cambia la muevo como client only. +- La parte que sí cambia la muevo como client only. Empezamos por generar la página de forma estática: @@ -54,9 +54,9 @@ const config = defineConfig({ Si hacemos un build podemos ver que tenemos en `.output/public/index.html` el HTML generado. -Pero tenemo un problema y es que la disopniblidad si la quiero en tiempo real ¿Qué podemos hacer? Pues mover esa parte a un componente client only. +Pero tenemos un problema y es que la disponibilidad sí la quiero en tiempo real ¿Qué podemos hacer? Pues mover esa parte a un componente client only. -Para ello quitamos del hompe page la parte de disponibilidad y la movemos a un componente client only. +Para ello quitamos del home page la parte de disponibilidad y la movemos a un componente client only. _./src/routes/index.tsx_ diff --git a/03-tan-stack-start/10-better-auth/README.md b/03-tan-stack-start/10-better-auth/README.md index 8ead7d7..b7a2fbd 100644 --- a/03-tan-stack-start/10-better-auth/README.md +++ b/03-tan-stack-start/10-better-auth/README.md @@ -1,10 +1,10 @@ # Area privada -Vamos a crear un area privada para permitir al dueño de la propiedad poder ver el calendario de reservas así como modificar entradas, o cancelarlas. +Vamos a crear un área privada para permitir al dueño de la propiedad poder ver el calendario de reservas así como modificar entradas, o cancelarlas. ## Pasos -Para ellos necesitamos +Para ello necesitamos - Tener un area en la que sea necesario que el usuario se loguee para acceder a ella. - Tener un dialogo de login. @@ -13,7 +13,7 @@ Para ellos necesitamos ## Area privada -Empezamos por crear un archivo `login.tsx` en el raiz de las rutas. +Empezamos por crear un archivo `login.tsx` en el raíz de las rutas. _src/routes/login.tsx_ @@ -33,7 +33,7 @@ Vamos a instalar la librería: pnpm add better-auth ``` -Vamos ahora a definir variables para poner el secreto que servira como semilla para generar los tokens, y el tiempo de expiración de los mismos. +Vamos ahora a definir variables para poner el secreto que servirá como semilla para generar los tokens, y el tiempo de expiración de los mismos. ```bash # Al menos 32 caracteres de longitud, la web de better auth @@ -180,11 +180,11 @@ Vamos a probarlo pnpm run dev ``` -Tirando de consola parece que funciona, así que vamos a crear una páigna home de la intranet para que navegue a ella. +Tirando de consola parece que funciona, así que vamos a crear una página home de la intranet para que navegue a ella. _./src/routes/(auth)/intranet/index.tsx_ -Al crear el fichero si tenemos arracnado el run dev se creará automáticamente el código para la ruta. +Al crear el fichero si tenemos arrancado el run dev se creará automáticamente el código para la ruta. Ahora volvemos al login, y si el login es correcto, navegamos a la intranet, vamos navegar por código para ello usaremos el hook _useNavigate_ de tan stack router. @@ -265,7 +265,7 @@ Esto está muy bien, pero si abrimos un modo oculto y directamente vamos a `http - Podemos crear una server function que nos devuelva el usuario logueado, si no hay usuario logueado que nos redirija a la página de login. - Podemos consumir esa server function desde el loader del layout de intranet, así todas las páginas hijas de intranet tendrán esa validación. -Vamos primero a por la server function, dejamos dentro de la carpate _core_ +Vamos primero a por la server function, dejamos dentro de la carpeta _core_ _./src/core/user-session.ts_ diff --git a/03-tan-stack-start/11-intranet/README.md b/03-tan-stack-start/11-intranet/README.md index b99a99e..31c1ae3 100644 --- a/03-tan-stack-start/11-intranet/README.md +++ b/03-tan-stack-start/11-intranet/README.md @@ -1,12 +1,12 @@ # Intranet -Vamos ahora a por la intranet, aquí vamos a tirar de Claude a tope, y vamos a ir avanzado por pasos pero contandole todo lo que queremos hacer. +Vamos ahora a por la intranet, aquí vamos a tirar de Claude a tope, y vamos a ir avanzando por pasos pero contandole todo lo que queremos hacer. Lo ideal sería partir de un Figma o un Pencil tirando de controles de ShadCN, pero vamos a ir más rápido y confiar con Claude. Antes de escribir el prompt, vamos plantear que queremos hacer: -Queremos tener un panel de intranet el que el usuario vea un calendario con las reservas si hace hover sobre una reserva seria interesante mostrar un tooltip con la información de la reserva, y al hacer click en la reserva, que si está en escritorio aparezca el detalle de la reserva a la derecha, y si está en móvil, que aparezca abajo, y lo idea sería que se pudiera editar, y también se pudiera cambiar el estado de la reserva, y que se pudiera eliminar la reserva, ojo a tener en cuenta, no solo hay reservas, hay un tipo de reserva que es que no está disponible el espacio, y eso se tiene que tener en cuenta a la hora de gestionar que campos son obligatorios de informar. +Queremos tener un panel de intranet el que el usuario vea un calendario con las reservas si hace hover sobre una reserva sería interesante mostrar un tooltip con la información de la reserva, y al hacer click en la reserva, que si está en escritorio aparezca el detalle de la reserva a la derecha, y si está en móvil, que aparezca abajo, y lo ideal sería que se pudiera editar, y también se pudiera cambiar el estado de la reserva, y que se pudiera eliminar la reserva, ojo a tener en cuenta, no solo hay reservas, hay un tipo de reserva que es que no está disponible el espacio, y eso se tiene que tener en cuenta a la hora de gestionar que campos son obligatorios de informar. Además le daremos como info un ejemplo de documento de mongoDb para que lo tenga en cuenta. @@ -16,7 +16,7 @@ Vamos con el primer prompt: ```md /grill-me -Ahora quiero que en la intranet el usuario autenticado vea un calendario con las reservas si hace hover sobre una reserva seria interesante mostrar un tooltip con la información de la reserva, y al hacer click en la reserva, que si está en escritorio aparezca el detalle de la reserva a la derecha, y si está en móvil, que aparezca abajo, y lo idea sería que se pudiera editar, y también se pudiera cambiar el estado de la reserva, y que se pudiera eliminar la reserva, ojo a tener en cuenta, no solo hay reservas, hay un tipo de reserva que es que no está disponible el espacio, y eso se tiene que tener en cuenta a la hora de gestionar que campos son obligatorios de informar. +Ahora quiero que en la intranet el usuario autenticado vea un calendario con las reservas si hace hover sobre una reserva sería interesante mostrar un tooltip con la información de la reserva, y al hacer click en la reserva, que si está en escritorio aparezca el detalle de la reserva a la derecha, y si está en móvil, que aparezca abajo, y lo ideal sería que se pudiera editar, y también se pudiera cambiar el estado de la reserva, y que se pudiera eliminar la reserva, ojo a tener en cuenta, no solo hay reservas, hay un tipo de reserva que es que no está disponible el espacio, y eso se tiene que tener en cuenta a la hora de gestionar que campos son obligatorios de informar. En Base de datos te paso varios ejemplos de documentos de reserva.