Anatomía del proyecto

¿Qué encontrarás en este repo en la branch start?, bueno, todos los archivos necesarios para este proyecto, pero, el código dentro de estos archivos está comentado.

Depende de ti echarlo a andar conforme avanzas en el curso. 🤡

Tú eres quien le dará sentido a esos comentarios con cada una de las lecciones de este curso. También puedes ignorarlos por completo y empezar con un archivo limpio para que tu misma agregues lo necesario. Pero, preferimos dejarlos para que este proyecto sea accesible para principiantes. 🫱🏼‍🫲🏾 Beginners friendly. 😘

👀 Empezar con un archivo vacío, aunque más difícil es mucho más nutritivo. Te conviene concentrarte en la construcción de este proyecto y escribir cada una de las líneas de código por tu cuenta. Así que entra al archivo en el que trabajarás y dale un cntrl+A para luego borrarlo todo (␡). 😎

Archivos de rutas

Dentro de la carpeta app encontrarás varias carpetas, una de esas carpetas, es el folder routes, este almacena las rutas de la aplicación. Los archivos que encontrarás dentro son de varios tipos:

La ruta home

_index.tsx es el archivo de ruta principal, raíz o home: /

Rutas simples

Encontrarás además rutas simples, el nombre de estas rutas también representan su segmento, como: blog.tsx, login.tsx y dash.tsx.

Rutas dinámicas

Tenemos un grupo de rutas dinámicas, esto es, que usan variables para conseguir los datos de lo que van a renderizar. Como:blog.$postSlug.tsx y dash.$postId.tsx.

Escaped routes

Finalmente tenemos algunas rutas que simulan ser de cierta extensión (.xml por ejemplo). Como son: feed[.]xml.tsx, feed[.]atom.tsx,sitemap[.]xml.tsx y feed[.]json.tsx.

👀 Estos archivos son específicos para cubrir nuestras necesidades básicas al cuidar el SEO.

¿Por qué no estamos usando carpetas?

Es curioso como el resto de los frameworks compitiendo en este momento, están abordando el sistema de rutas basadas en segmentos (carpetas) dentro se colocan archivos con nombres específicos que definen su tipo y función.

Al mismo tiempo Remix, ha evolucionado justamente de ese sistema de ruteo a uno aún más avanzado que ha aprendido de los errores del que ahora todo mundo está implementando. Mejorando no solo la versatilidad a la hora de trabajar con params, también con el anidado innecesario que provocan las carpetas y la posibilidad de usar rutas que comparten el nombre del segmento pero sin ser parte de una carpeta. Entre muchas más configuraciones avanzadas y geniales que te recomiendo ver en la documentación. 💿

Archivos de utilidades

Yo escribo utilidades todo el tiempo, principalmente para no repetir código de bajo nivel o que lidia con la base de datos, cookies o cualquier otra herramienta como tipos. Este proyecto no tiene demasiadas, te recomiendo que te las robes (jamás es robo con open source, nomás es una maña de decirlo) para tus propios proyectos e incluso puedes mejorarlas, ¿quién sabe?, tal vez hasta las conviertas en bibliotecas npm. 🤓

Algunos de estos archivos son: cookies.ts, db.ts,feed.server.ts o zod.ts.

Archivos de la base de datos

También está presente el archivo schema.prisma.

Este archivo se encuentra en una carpeta prisma al nivel de la raíz.

El schema incluye dos modelos User y Post con sus respectivas relaciones.

👀 Aquí puede que necesites agregar el valor de tu variable de entorno PRISMA_PROXY directamente en la llave url en caso de que tus variables de entorno no se carguen de forma local.

Archivos de estilos

Este proyecto también incluye un par de archivos de estilos.

Dentro de app en la carpeta styles encontraremos:

markdown.css, prismjs.css y style.css

Los dos primeros los escribiremos dentro del curso, mientras que el último, lo genera TailwindCSS automáticamente.

Archivos de componente

He escrito muchos componentes para este proyecto, componentes que sí, puedes robarlos (Esto ya lo aclaramos =P) para tus propios proyectos. 🧱

Algunos de estos componentes son: Avatar.tsx, PostCard.tsx o Switch.tsx

Esas son las piezas principales de el proyecto para este curso, todo lo demás es configuración básica tanto de Remix como de Netlify.

Ya ya, no esperes más, ve directo a comenzar el curso, es más; ¡vamos juntos! 🤜🏼🤛🏼

Enlaces relacionados

V2 de las rutas de Remix: