Flagship Frontend Project

/Slash
Pay.

A responsive international payments interface prototype that helps users understand currency conversion, transfer costs, and payment-product features through a clear, interactive experience.

Fintech UX React 19 TypeScript TanStack Frontend Prototype
// Frontend
React 19 + TypeScript
// Framework
TanStack Start
// Styling
Tailwind CSS 4
// Interaction
FX Calculator
// Domain
Intl Payments UX
// Transfer Experience
// Interactive FX Calculator
Transfer amount →
converted recipient value

Users enter a send amount and immediately see the live converted value for the recipient — making FX rates tangible rather than abstract.

// Calculation Model
Interaction model Client-side derived
Exchange rate Seeded example data
Currency pairing Sender → Recipient
Provider comparison Rates · Fees · Total
// Overview

Overview

Built Slash Pay as a frontend engineering prototype for an international money-transfer experience. The project focuses on making complex payment information easy to understand: users can enter a transfer amount, see an updated converted value, compare example provider costs, and explore personal and business payment-product flows.

The React and TypeScript application is built with TanStack Start and Tailwind CSS, with reusable components for the transfer calculator, fee-comparison table, navigation, feature cards, security content, and responsive product storytelling.

Presented as a UI and interaction prototype — not as a live payment-processing service.

Frontend
React 19 + TypeScript
Component-driven, type-safe interface
Framework
TanStack Start
Routing and application foundation
Design System
Tailwind CSS 4
Responsive product interface
UI Layer
Radix UI + Lucide Icons
Accessible, composable primitives
// Specifications
07 Specs

Specifications

Domain
Fintech / International Payments UX
Core Workflow
Transfer Amount → Conversion → Fee Comparison
Interaction Model
Client-side derived exchange calculation
Frontend
React 19 + TypeScript
Application Framework
TanStack Start + TanStack Router
Styling
Tailwind CSS 4
Deployment
Frontend web application / product prototype
// Features
10 Shipped

Features

01 /
Interactive transfer calculator that updates the recipient amount in real time when a user changes the amount to send.
02 /
Currency-transfer interface with clear sender and recipient currency presentation.
03 /
Provider comparison table presenting example exchange rates, markups, transfer fees, and total costs side-by-side.
04 /
Responsive navigation for personal, business, platform, and security product areas.
05 /
Personal-account feature cards covering receiving money, international spending, and balance-oriented features.
06 /
Business-payment experience that communicates global account and multi-currency workflows.
07 /
Security-focused product section with fraud-prevention and account-protection messaging.
08 /
Responsive desktop and mobile layouts built with reusable React components and Tailwind utility patterns.
09 /
Reduced-motion-aware reveal animations and accessible labels for all interactive controls.
10 /
Structured product storytelling through feature blocks, comparison data, transfer flows, and conversion-focused calls to action.
// Tech Stack
11 Technologies

Tech Stack

React 19 TypeScript TanStack Start TanStack Router TanStack Query Tailwind CSS 4 Radix UI Lucide React Vite React Hook Form Zod
Interested in Slash Pay?
Let's
Talk.

Want to discuss payment-product UX, frontend architecture, or designing clearer financial workflows?

Get in Touch →