TL;DR https://reddit-image-viewer.vercel.app
Últimamente he estado sumergiéndome en React y Next.js. Una gran parte de esa inmersión, es la simplicidad de Next.js. Para mí, Next.js tiene la cantidad perfecta de abstracción… en algún lugar entre Create React App y Gatsby. Usted no tiene que saber Webpack o enrutamiento, pero también no está encerrado en una forma de hacer las cosas React junto a Node.
Next.js sólo se mezcla en el fondo, para que pueda centrarse en la construcción de componentes y enviar un sitio web estático (o SSR) en ningún momento.
De todos modos, hay un montón de otros sitios web de imágenes Reddit y aplicaciones por ahí, pero siempre he querido crear mi propio. Aquí va…
Acerca de
La aplicación Reddit Image Viewer utiliza Next.js como plataforma, los React Hooks useEffect()y useState(), se basa en Fetch nativo para agarrar los datos, y React Cool Image para lazy-load los medios de comunicación de cualquier subreddit. También conecté Tailwind CSS para estilizar las tarjetas y la cuadrícula.
Desafíos
Sin embargo, hubo algunos desafíos, como lidiar con CORS ya que los navegadores web se están volviendo más y más estrictos en el contenido cross-site. Por suerte, pude usar CORS Anywhere para evitar esto.
Parar el JSON para las incrustaciones también fue difícil. Reddit permite todo tipo de medios incrustados, por lo que ser capaz de comprobar y mostrar ciertos tipos de medios fue definitivamente un pequeño desafío divertido, y terminé construyendo una declaración de conmutación.
¿Otro problema? Reddit codifica los medios ricos, como los vídeos, así que tuve que decodificarlos en un <textarea> antes de poder renderizar el marcado.
Me gusta mucho la funcionalidad de «búsqueda en vivo», pero golpear una API cada vez que alguien escribe una letra no funciona. Utilicé otro React Hook llamado useDebounce() para forzar a la barra de búsqueda a esperar 1 segundo antes de enviar una solicitud de obtención.
¿Pero la mayor lección que aprendí en este proyecto? ¡Cómo hacer declaraciones if/else inline en componentes React! Un tema que merece su propia entrada en el blog, y que me hace estar muy ilusionado con React Suspense.
Resumen
Al final, la aplicación funciona bastante bien. Ya he abierto algunas cuestiones en Github para algunas mejoras que me gustaría añadir. En definitiva, ha sido una experiencia de aprendizaje divertida
Consulta el código en Github y ve la aplicación en vivo aquí: https://reddit-image-viewer.vercel.app