Payment Gateway
Una recreación fiel del front-end de una pasarela de pago con criptomonedas, que abarca el sitio de marketing, la autenticación y el panel de control para comercios, construida de extremo a extremo en React.
React 18
Vite
React Router 6
SCSS
Swiper
Descripción general
Este proyecto es una recreación de front-end de Cryptomus, una pasarela de pago con criptomonedas que permite a las empresas aceptar pagos en criptoactivos. Reconstruye la interfaz completa del producto a lo largo de tres superficies diferenciadas: un sitio de marketing que comercializa el servicio, el flujo de inicio de sesión y registro, y un panel de control autenticado para comercios. Es un desarrollo de UI, por lo que cubre la interfaz y el comportamiento de front-end en lugar del procesamiento de pagos en vivo, y abarca toda la superficie del producto en vez de una única página de destino.
El problema
Una pasarela de pagos cripto es un producto engañosamente amplio de presentar. La parte pública debe explicar un servicio técnico de forma sencilla y atractiva, cubriendo precios, tarifas, criptomonedas admitidas, herramientas de procesamiento y validación social, mientras que la parte privada es un panel de control operativo con su propia navegación y estados. Recrear con fidelidad algo como Cryptomus supone una auténtica prueba de front-end: múltiples pantallas distintas, dos shells completamente diferentes, coherencia de temas visuales en todo momento y comportamiento responsivo en cada sección. El objetivo fue reconstruir esa amplitud con precisión en lugar de aproximar solo una o dos páginas.
Mi rol y enfoque
Construí todo el front-end por mi cuenta, desde las páginas de marketing hasta el panel de control. La decisión estructural clave fue concebir la aplicación como dos productos bajo el mismo techo —una experiencia pública de marketing y un panel autenticado—, dotando a cada uno de su propio shell de diseño mientras comparten piezas comunes en la base. Organicé los estilos por pantalla para que cada superficie pudiera reflejar fielmente su referencia sin que las hojas de estilo interfirieran entre sí, y trasladé aspectos transversales como los temas y la barra lateral del panel al contexto de React para garantizar la coherencia en toda la aplicación.
Stack tecnológico
Características clave
Galería
Desafíos y soluciones
El principal desafío fue mantener la coherencia a lo largo de un alcance tan amplio. El producto abarca un sitio de marketing y un panel de control operativo, que son efectivamente dos aplicaciones distintas con estructuras visuales diferentes. Gestioné esto mediante shells de diseño separados, uno para el sitio público y otro para el panel autenticado, compuestos a través del enrutamiento anidado de React Router, de modo que cada superficie obtenga el encabezado, pie de página y navegación adecuados mientras siguen compartiendo componentes comunes.
Mantener una UI extensa con múltiples pantallas de forma sostenible fue el otro foco. En lugar de una única hoja de estilos desbordada, dividí el SCSS por pantalla para que cada página pudiera estilizarse exactamente según su referencia, y trasladé el estado transversal, como el tema y la barra lateral, al contexto de modo que se comportara de forma idéntica en todas partes en vez de implementarse nuevamente por página. Detalles como el selector de teléfono internacional y los carruseles se delegaron a bibliotecas especializadas para que ofrecieran un funcionamiento óptimo sin necesidad de reinventar la rueda.
Resultado
El resultado es un front-end completo y responsivo para una pasarela de pago con criptomonedas, recreado en las superficies de marketing, autenticación y panel de control. Como recreación, evidencia las habilidades de front-end más relevantes en un producto de esta envergadura, incluyendo enrutamiento multi-shell, estilos a escala por pantalla, tematización compartida y reutilización de componentes, aplicados a una interfaz comercial genuinamente compleja en lugar de una demostración simplificada.
¿Tienes un problema de producto similar?
Comparte el producto actual, el resultado que necesitas y las limitaciones que ya existen en el camino. Usaré eso para definir un primer hito razonable.
Servicios de desarrollo de aplicaciones web