ji developer
full Stack | React • Node • Resend • Nodemailer
New to Contra
ji is building their profile!
Implementando un flujo CRUD completo y gestión de Favoritos en React
Les comparto una demo de la funcionalidad que acabo de terminar para mi proyecto de gestión de biblioteca. Quería mostrar cómo integré el frontend con el backend para manejar todo el ciclo de vida de un libro.
En el video pueden ver el flujo completo:
Creación: Formulario controlado en React para dar de alta un nuevo libro en la base de datos (pasando por validaciones).
Visualización y Búsqueda: El libro aparece instantáneamente en la lista general.
Lógica de Favoritos: Muestro cómo agregar y quitar libros de la lista de favoritos de forma dinámica, manejando el estado de la UI en tiempo real.
Eliminación: Borrado lógico del libro tanto de la lista como de la base de datos.
Para este desarrollo utilicé React 19 para el frontend, optimizando el manejo de formularios y estados. El backend está construido sobre Node.js, donde implementé una API REST y usé MongoDB como base de datos, lo que me permitió una gestión flexible y rápida de los datos de los libros.
¡Espero sus comentarios y feedback sobre la implementación! 👇
#reactjs #nodejs #mongodb #crud #desarrolloweb #fullstack #dev #portafolio #api
0
4
Integrando Gráficos Financieros Interactivos en React 19
He estado trabajando en esta SPA (Single Page Application) con React y Vite, y quería compartir esta funcionalidad específica.
El problema que quería resolver: ¿Cómo integrar gráficos financieros detallados que carguen rápido y permitan al usuario buscar y visualizar datos de diferentes activos sin interrupciones ni recargas de página?
En este video muestro cómo lo solucioné:
Búsqueda Rápida: Implementé un buscador con React que filtra la lista de activos en tiempo real en el cliente.
Gráfico Dinámico: Una vez que el usuario selecciona una moneda, actualizo la interfaz para mostrar su gráfico de precios usando TradingView Lightweight Charts, manteniendo la fluidez incluso en dispositivos con menos recursos.
Todo está construido con React 19 y Vite para asegurar un renderizado rápido y una experiencia de usuario suave.
¡Espero que les guste la demo! Me encantaría leer sus opiniones o feedback en los comentarios. 👇
#reactjs #vite #lightweightcharts #desarrolloweb #fullstack #dev #portafolio
0
5
Título del Proyecto:
Secure Full-Stack Management System (RBAC & Advanced Auth)
El Reto:
Desarrollar una plataforma de gestión de contenidos (catálogo de libros) que requería un sistema de permisos granular, mitigación de vulnerabilidades web (inyecciones, ReDoS) y una autenticación a prueba de secuestros de sesión.
La Solución:
Construí una aplicación Full-Stack (React/Node.js) implementando un sistema de Control de Acceso Basado en Roles (RBAC) para Usuarios, Moderadores y Administradores. Diseñé un flujo de autenticación JWT robusto de cero, con rotación de tokens y detección de reuso para maximizar la seguridad del usuario sin perjudicar la experiencia (UX).
Puntos Clave del Código:
Autenticación de grado corporativo: Implementación de Access Tokens en memoria (15 min) + Refresh Tokens (HttpOnly, 7 días) con rotación automática y revocación de sesión ante detección de reuso.
Seguridad Defensiva: Middlewares personalizados para validación genérica, manejo centralizado de errores y mitigación activa de ataques ReDoS e inyección NoSQL.
Arquitectura de Datos Backend: Gestión de base de datos en MongoDB con Mongoose, implementando flujos de soft/hard delete, filtros de búsqueda avanzados y fallback a memoria local.
Frontend Resiliente: Manejo de estado global con React Context y recarga silenciosa de tokens (silent refresh) interceptando las peticiones sin que el usuario note interrupciones.
Tech Stack:
Node.js (Express 5) | MongoDB & Mongoose | React & Vite | JWT Auth | Resend (Transaccional)
link del repositorio https://github.com/ji-web534/biblioteca-inteligente_web
2
1
45
Título del Proyecto:
Real-time Crypto Analytics Dashboard (SPA)
El Reto:
Crear una herramienta ágil para visualizar variaciones de mercado y gráficos históricos de criptomonedas sin sobrecargar el navegador.
La Solución:
Construí un frontend liviano y desacoplado consumiendo APIs REST externas. Optimice la renderización del lado del cliente usando el nuevo ecosistema de React 19 y rutas cliente con React Router 7.
Puntos Clave del Código:
Polling eficiente cada 60s para mantener métricas frescas en tiempo real.
Renderizado de gráficos financieros ligeros (Lightweight Charts de TradingView).
Sanitización y normalización de datos históricos antes de renderizar.
Tech Stack:
React 19 | Vite | React Router 7 | Lightweight Charts
link del repositorio https://github.com/ji-web534/cripto_visualizador
1
35