Payment Gateway

Role: Solo front-end developmentTimeline: 2024Type: Front-end build (UI recreation)

React 18

Vite

React Router 6

SCSS

Swiper

Payment Gateway hero image

This project is a front-end recreation of Cryptomus, a crypto payment gateway that lets businesses accept cryptocurrency payments. It rebuilds the product's full interface across three distinct surfaces: a marketing site that sells the service, the login and sign-up flow, and an authenticated merchant dashboard. It's a UI build, so it covers the interface and front-end behaviour rather than live payment processing, and it spans the whole product surface instead of a single landing page.

A crypto payment gateway is a deceptively large product to present. The public side has to explain a technical service simply and sell it, covering pricing, tariffs, supported coins, processing tools, and social proof, while the private side is a working dashboard with its own navigation and states. Recreating something like Cryptomus faithfully is a real front-end test: many distinct screens, two completely different shells, consistent theming throughout, and responsive behaviour everywhere. The goal was to rebuild that breadth accurately rather than approximate one or two pages.

I built the entire front end myself, from the marketing pages through to the dashboard. The key structural decision was treating the app as two products under one roof, a public marketing experience and an authenticated dashboard, and giving each its own layout shell while sharing common pieces underneath. I organised styling per screen so each surface could match its reference closely without stylesheets bleeding into each other, and I lifted shared concerns like theming and the dashboard sidebar into React context so they stayed consistent across the app.

FrameworkReact 18 with Vite

RoutingReact Router 6, using nested routes and layout routes

StylingSCSS, with a dedicated stylesheet per screen (landing, pricing, tariffs, processing, login, dashboard)

State / themingReact context for light/dark theme and sidebar state

UISwiper for carousels, react-international-phone for phone entry, react-indiana-drag-scroll for draggable rows

Full marketing sitelanding page, pricing, tariffs, processing tools, a blog section, and supported-coins and companies sections that explain and sell the service.

Authentication flowlogin and sign-up screens, including an international phone-number input.

Merchant dashboarda separate authenticated shell with its own sidebar navigation, a "create merchant" flow, and proper empty states (for example, "no transactions yet").

Two distinct layoutsa public root layout and a dashboard layout, wired through nested routing with a 404 fallback.

Light/dark themingapplied consistently across every surface through a theme context.

Responsive, interactive UIcarousels, drag-scrollable content, and mobile-aware layout throughout.

Payment Gateway screen 1

Payment Gateway screen 2

The main challenge was breadth done consistently. The product spans a marketing site and a working dashboard, which are effectively two different applications with different chrome. I handled this with separate layout shells, one for the public site and one for the authenticated dashboard, composed through React Router's nested routing, so each surface gets the right header, footer, and navigation while still sharing common components.

Keeping a large multi-screen UI maintainable was the other focus. Rather than one sprawling stylesheet, I split SCSS per screen so each page could be styled to match its reference precisely, and I pulled cross-cutting state, like theme and sidebar, into context so it behaved the same everywhere instead of being re-implemented per page. Details like the international phone input and the carousels went to focused libraries so they felt right without custom reinvention.

The result is a complete, responsive front end for a crypto payment gateway, recreated across marketing, authentication, and dashboard surfaces. As a recreation it shows the front-end skills that matter most on a product of this size, including multi-shell routing, per-screen styling at scale, shared theming, and component reuse, applied to a genuinely complex commercial interface rather than a simplified demo.

All projects Next projectPDF Toolkit

Overview

TheProblem

MyRole&Approach

TechStack

KeyFeatures

Gallery

Challenges&Solutions

Outcome