Proyecto Snapcode
Snapcode es una aplicación para crear snippets de código , descargarlos , guardarlos y borrarlos usando GitHub como provider de autenticación & Supabase. En este proyecto el foco está en la interacción con el backend , autenticación , rutas privadas y micro interacciones usando Framer Motion.
Objetivos & Meta
El objetivo de la aplicación era el de crear un editor de código que permitiera elegir un lenguaje , un tema y tuviera otras funcionalidades como poder copiar el código escrito , cambiar el color del background y obviamente descargar el código en formato de imagen.
Además de esto utilice Context api para poder tener acceso al usuario autenticado desde cualquier lado de la aplicación y local storage para poder guardar el tema, lenguaje, background y código del editor.
Si el usuario esta autenticado quería que pudiera guardar snippets si lo quisiera, además de poder verlos y borrarlos. La idea la tome de una aplicación que utilizo personalmente que se llama Carbon.
Stack y Explicación
Como backend estoy utilizando una tecnología 'open source' que se llama Supabase , esta es una alternativa a Firebase , la razón por la que utilice esta y no Firebase es porque su documentación me pareció mucho más limpia y ordenada que la de Firebase.
De Supabase estoy utilizando su servicio de 'auth' (en este caso usando el provider de GitHub) además de utilizar 'File Storage' para almacenar los snippets , estos al guardarse van a estar relacionados al usuario que los haya creado.
La tecnología que utilice para crear el editor es Codemirror, en mi caso como estoy utilizando React use su implementación para el mismo React Codemirror, si bien existen otras alternativas esta librería me permitió desarrollar las funcionalidades que necesitaba de una forma sencilla.
Problemas & Soluciones
El problema más complicado fue el de buscar una manera de cargar los temas y los lenguajes que necesita el editor sin ralentizar la aplicación.
Para resolver el problema tome ventaja de la tecnología que estoy usando como 'Bundler' que es Vite JS (aunque en realidad no es solo un bundler) , este expone una función especial 'import.meta.glob()' que permite importar múltiples módulos del sistema de archivos.
La razón por la que utilice esta funcionalidad de Vite JS es porque los módulos que se carguen utilizando esta función van a ser cargados usando 'lazy loading' , de esta forma la aplicación no va a perder velocidad , cuando los módulos estén listos el editor se va a renderizar en la UI.
Otros Proyectos
Moderne App
Moderne es una aplicación para una empresa ficticia de construcción de propiedades de alta tecnología, en este proyecto el foco está en animaciones utilizando tanto Framer Motion como CSS, consumir apis utilizando React Query además de utilizar Context api para tener un estado global interno.
Ver proyecto
Portfolio App
Decidí incluir el portfolio porque me pareció un proyecto interesante por las tecnologías que utilicé para construirlo, Next JS (como Static Site Generator), Strapi CMS para construir una api rest con la información de los proyectos entre otras tecnologías.
Ver proyecto