The latest articles on DEV Community by Edwin Moreno (@edwinmoreno77). https://dev.to/edwinmoreno77 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3603523%2F231457e0-41c3-4d16-8c9c-7ef3a9bb77a3.jpeg https://dev.to/edwinmoreno77 en Edwin Moreno Sun, 09 Nov 2025 22:22:16 +0000 https://dev.to/edwinmoreno77/hacer-lo-que-disfrutas-te-da-practica-sin-que-se-sienta-una-obligacion-1fo0 https://dev.to/edwinmoreno77/hacer-lo-que-disfrutas-te-da-practica-sin-que-se-sienta-una-obligacion-1fo0 <p>A veces es bueno tener un proyecto hobby.<br> De una prueba con la API de RAWG salió algo que sigo puliendo, sin pretensiones: repliqué las cards tipo RAWG y lo optimicé solo con React (sin SSR).</p> <p>Si quieres practicar programación o arrancar un proyecto, no hay nada mejor que hacerlo sobre algo que te gusta: siempre vas a volver a él, incluso en tus ratos libres.</p> <p>Lo que fui agregando (porque me divertía):</p> <ul> <li>Búsqueda, filtros, paginación y favoritos</li> <li>Replicación del comportamiento de las cartas de RAWG</li> <li>Efectos modernos de UX/UI</li> <li>Micro-interacciones (Framer Motion) y estado global (Zustand)</li> <li>Caché en cliente con TTL y limpieza automática</li> <li>Caché/optimización de imágenes con preload (via images.weserv.nl)</li> <li>Cache simple de API para juegos y filtros</li> <li>Lazy loading e imágenes optimizadas para mejorar la carga percibida</li> <li>AI Insights con fallback entre proveedores (configurable por .env)</li> </ul> <p>Aunque lo ideal habría sido trabajarlo en Next.js por temas de prerendering y SEO, decidí mantenerlo en React puro, ya que la prueba técnica original se planteó de esa forma (y RAWG tampoco está construido sobre Next). </p> <p>P.D. Si en algún momento no se ven las imágenes, probablemente es porque se acabó el límite gratuito de la API de RAWG 😅</p> <p>Repo: <a href="https://github.com/edwinmoreno77/RAWG_clone" rel="noopener noreferrer">https://github.com/edwinmoreno77/RAWG_clone</a><br> Demo: <a href="https://rawg-clone-theta.vercel.app/" rel="noopener noreferrer">https://rawg-clone-theta.vercel.app/</a></p> react showdev performance ui