Stories

Imagina tener muchas pestañas abiertas en tu navegador, investigaste o encontraste algo de tu interés y por el momento no cuentas con tiempo suficiente para leer.

Y más tarde recibes por mensaje un enlace que te compartieron sobre un tema que te interesa, o en tu red social favorita encontraste un contenido de tu atención.

Esto se vuelve complicado, como recordar que consultar primero y no olvidar nada, estas situaciones me describen, así que empecé a construir este proyecto personal para resolver este problema y aplicar los conocimientos que había adquirido sobre el desarrollo con React.

Stories guarda enlaces de artículos, post de interés y captura una pequeña nota 📝 para recordar el porque lo deseas leer y tener una vista previa del enlace.

En esencia tiene las funcionalidades de agregar, eliminar, marcar como leída una historia y de organizarlas en el tablero.

Descubre cómo funciona la aplicación, solo necesitas lo siguiente (pero si ya llegaste a leer hasta aqui, te invito a que termines este post, para entender aún mejor la aplicación) :

Propósito

Una de las razones para desarrollar este proyecto es para aplicar los conocimientos aprendidos sobre el JAMStack, Serverless Lambda functions y GraphQL.

La segunda porque me ayuda a tener ordenado los enlaces que deseo leer y archivar (esto tiene que ver con la metodología Getting Things Done), así formar mi archivo para consultas en el futuro.

El resultado esperado es tener esta aplicación en línea con todas sus configuraciones en Netlify y que evolucione con el tiempo.

Próximas características en un futuro cercano:

• Vista de de tablero Kanban
• Agregar cuentas de usuario
• Mejorar el rendimiento en dispositivos móviles - en desarrollo
• Una extensión para el navegador

En la primera versión solo contaba con una vista de lista y tenía una apariencia como la siguiente:

Las versión actual cuenta una vista tablero kanban para tener más organizados los enlaces a guardar y moverlos entre Por leer, leyendo y leído.

Sobresaliente

Tecnologías usadas:

La aplicación está construida con Gatsby (junto con varios plugins), el uso de custom hooks, styled-components para los estilos de la aplicación.

La información se almacena en Fauna y GraphQL para gestionar las solicitudes de la aplicación como el crear, borrar o actualizar un registro, etc. Y por último las funciones lambda en Netlify y la autenticación de usuarios con Auth0.

Uno de los problemas fue el obtener los metadatos(Open Graph) de cada enlace, ya que en una versión preliminar solo mostraba un botón con “Leer ahora”, y la nota que había agregado, pero no tenía información sobre de qué es el enlace.

Para esto tuve que usar scraping, en una de las funciones lambda en Netlify escribí el código que obtienen la información del enlace y después procede a guardar la información en Fauna.

Ahora cuenta con la característica de poder crear tu propia cuenta de usuario y cada usuario tiene sus enlaces guardados, todo esto al implementar Auth0 y proteger las rutas para acceder solo cuando el usuario está autenticado.

Y cuando el usuario está autenticado lo espera una vista de tablero kanban, la función de arrastrar y soltar es lo relevante, al mover una tarjeta por las columnas y que se actualice el estado de la aplicación.

Lecciones aprendidas

El crear funciones lambda para realizar todas las tareas que se ejecutaría en un API, estas funciones conectarlas con servicios externos como Fauna, donde se guardan los registros.

Probar todo esto de manera local, pero el gran reto fue llevarlo a producción, el poner atención a ciertas partes como las variables de entorno, CORS, las funciones en sí, para que tengan el comportamiento esperado en línea al ser invocadas en la aplicación.

Implementar un sistema de autenticación con Auth0, proteger las rutas y que cada usuario tenga sus propias stories para consultarlas después.

En cuanto a la vista de kanban, fue un reto el manejar los múltiples arrays, el aplicar funciones para controlar los movimientos de una columna a otra, filtrar datos y actualizar el estado de la aplicación etc.

Con React el separar código, tenerlo organizarlo e intentar buenas prácticas(clean code) y crear hooks personalizados.

Y estoy consciente de que al pasar el tiempo encontraré bugs o cambiará alguna parte del código para mejorar y por supuesto recibir cualquier retroalimentación que será bienvenida.

Ahora seguiré aprendiendo y practicando.

Oportunidades para mejorar el proyecto

• Escalar el esquema de la base de datos (GraphQL)
  • Implementar una base de datos en tiempo real
• Mejorar el rendimiento de la aplicación
• Testing de los componentes