Payment Gateway
Uma recriação fiel de front-end de um crypto payment gateway, cobrindo o site de marketing, autenticação e painel do lojista, construída de ponta a ponta em React.
React 18
Vite
React Router 6
SCSS
Swiper
Visão geral
Este projeto é uma recriação de front-end do Cryptomus, um crypto payment gateway que permite a empresas aceitarem pagamentos em criptomoedas. Ele reconstrói a interface completa do produto em três superfícies distintas: um site de marketing que vende o serviço, o fluxo de login e cadastro, e um painel de lojista autenticado. Sendo uma construção de UI, ele cobre a interface e o comportamento de front-end em vez do processamento de pagamentos em tempo real, e abrange toda a superfície do produto em vez de apenas uma única landing page.
O Problema
Um crypto payment gateway é um produto enganosamente grande de apresentar. O lado público precisa explicar um serviço técnico de forma simples e vendê-lo, cobrindo preços, tarifas, moedas suportadas, ferramentas de processamento e prova social, enquanto o lado privado é um painel de controle funcional com sua própria navegação e estados. Recriar fielmente algo como o Cryptomus é um verdadeiro teste de front-end: muitas telas distintas, duas estruturas totalmente diferentes, temas consistentes em todo lugar e comportamento responsivo em todos os lugares. O objetivo era reconstruir essa amplitude com precisão, em vez de aproximar uma ou duas páginas.
Meu Papel e Abordagem
Construí todo o front-end sozinho, das páginas de marketing ao painel. A principal decisão estrutural foi tratar o aplicativo como dois produtos sob um teto, uma experiência de marketing público e um painel autenticado, e dar a cada um sua própria estrutura de layout enquanto compartilhava peças comuns por baixo. Organizei o estilo por tela para que cada superfície pudesse corresponder bem à sua referência sem que as folhas de estilo sangrassem umas nas outras, e levantei preocupações compartilhadas, como temas e a barra lateral do painel, no contexto do React para que permanecessem consistentes em todo o aplicativo.
Stack Tecnológica
Principais Funcionalidades
Galeria
Desafios e Soluções
O principal desafio foi a amplitude feita com consistência. O produto abrange um site de marketing e um painel funcional, que são efetivamente duas aplicações diferentes com estruturas visuais distintas. Lidei com isso através de shells de layout separados, um para o site público e outro para o painel autenticado, compostos por meio do roteamento aninhado do React Router, de modo que cada superfície receba o cabeçalho, rodapé e navegação corretos, enquanto ainda compartilha componentes comuns.
Manter uma grande IU multitela de fácil manutenção foi o outro foco. Em vez de uma folha de estilo extensa, dividi o SCSS por tela para que cada página pudesse ser estilizada de acordo com sua referência com precisão, e reuni o estado transversal, como tema e barra lateral, em contexto, para que ele se comportasse da mesma forma em todos os lugares, em vez de ser reimplementado por página. Detalhes como a entrada de telefone internacional e os carrosséis foram para bibliotecas focadas para que parecessem adequados sem reinvenção personalizada.
Resultado
O resultado é um front-end completo e responsivo para um crypto payment gateway, recriado nas superfícies de marketing, autenticação e painel de controle. Como uma recriação, ele demonstra as habilidades de front-end que mais importam em um produto deste tamanho, incluindo roteamento multi-shell, estilo por tela em escala, temas compartilhados e reutilização de componentes, aplicados a uma interface comercial genuinamente complexa em vez de uma demonstração simplificada.
Tem um problema de produto semelhante?
Compartilhe o produto atual, o resultado que você precisa e as restrições que já estão no caminho. Usarei isso para definir um primeiro marco sensato.
Serviços de desenvolvimento de aplicações web