Cross-border remittance platform built on the Stellar blockchain.
StellarRemit is a modern web application that enables fast, low-cost international money transfers using the Stellar blockchain. Connect your Freighter wallet, view your balances, send money to anyone with a Stellar address, and track your transaction history — all from a clean, responsive interface.
- Wallet Integration — Connect via the Freighter browser extension
- Real-time Balances — View XLM and USDC balances fetched from Horizon
- Send Money — Transfer assets to any Stellar address with form validation
- Transaction History — Browse and filter your past transfers
- Responsive UI — Works on desktop, tablet, and mobile
- Error Boundaries — Graceful error handling across pages
- Loading States — Skeletons and spinners for smooth UX
- Framework: Next.js 14 (App Router) + TypeScript
- Styling: Tailwind CSS
- State Management: Zustand
- API Client: Axios
- Wallet: Freighter API + Stellar SDK
- Validation: Zod + react-hook-form
- Notifications: react-hot-toast
- Testing: Jest + React Testing Library
- Linting: ESLint + Prettier
- Node.js 20+
- npm or yarn
- Freighter Wallet browser extension
# Clone the repository
git clone https://github.com/HorizonBridgeLabs/StellarRemit-Frontend.git
cd StellarRemit-Frontend
# Install dependencies
npm install
# Copy environment variables
cp .env.example .env.local| Variable | Description | Example |
|---|---|---|
NEXT_PUBLIC_API_URL |
Backend API base URL | https://api.stellarremit.com |
NEXT_PUBLIC_STELLAR_NETWORK |
Stellar network to use | testnet or mainnet |
npm run devOpen http://localhost:3000.
npm run build
npm startsrc/
├── app/ # Next.js App Router pages & layouts
│ ├── page.tsx # Landing page
│ ├── layout.tsx # Root layout
│ ├── error.tsx # Global error boundary
│ ├── loading.tsx # Global loading state
│ ├── not-found.tsx # 404 page
│ ├── dashboard/ # Dashboard page
│ ├── send/ # Send money page
│ └── history/ # Transaction history page
├── components/ # Reusable UI components
│ ├── Navbar.tsx
│ ├── Sidebar.tsx
│ ├── Button.tsx
│ ├── Card.tsx
│ ├── FormInput.tsx
│ ├── Table.tsx
│ ├── Footer.tsx
│ ├── Spinner.tsx
│ ├── Badge.tsx
│ ├── Alert.tsx
│ ├── Skeleton.tsx
│ ├── Avatar.tsx
│ ├── Breadcrumb.tsx
│ ├── Modal.tsx
│ └── Tooltip.tsx
├── hooks/ # Custom React hooks
│ ├── useWallet.ts
│ └── useTransactions.ts
├── store/ # Zustand state stores
│ ├── walletStore.ts
│ └── transactionStore.ts
├── services/ # API service layer
│ ├── api.ts
│ ├── walletService.ts
│ ├── transactionService.ts
│ └── walletApiService.ts
├── types/ # TypeScript type definitions
│ ├── index.ts
│ └── wallet.ts
├── utils/ # Helper utilities
│ ├── formatters.ts
│ ├── validators.ts
│ └── index.ts
└── __tests__/ # Unit and component tests
├── components/
└── utils/
| Script | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm start |
Start production server |
npm run lint |
Run ESLint |
npm run test |
Run tests in watch mode |
npm run test:ci |
Run tests with coverage (CI) |
npm run test:watch |
Run tests in watch mode |
Tests are written with Jest and React Testing Library. Run the test suite:
npm run test:ciCoverage is collected from all src/**/*.{ts,tsx} files except type declarations and app router pages.
We welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch:
git checkout -b feat/your-feature - Make your changes and ensure tests pass
- Commit with clear messages:
git commit -m "feat: add new feature" - Push to your fork:
git push origin feat/your-feature - Open a Pull Request against
main
We use Conventional Commits:
feat:— New featurefix:— Bug fixdocs:— Documentationstyle:— Formatting (no code change)refactor:— Code refactoringtest:— Testschore:— Build/config changes
- TypeScript strict mode enabled
- ESLint + Prettier for formatting
- Components should be typed with explicit interfaces
- Use
clsxfor conditional class names
GitHub Actions runs lint, test, and build on every push to main and fix/**/feat/** branches, and on every pull request.