A modern, mobile-first fintech application built with Next.js 16 and React 19, featuring a comprehensive suite of financial services built exclusively around the native ACBU (AFK) currency.
The application uses a 5-tab mobile navigation system for primary feature access:
┌─ Home ─ Dashboard & overview
├─ Send ─ P2P transfers, international, history
├─ Mint ─ Create/redeem AFK currency
├─ Business ─ SME, payroll, enterprise tools
└─ Me ─ Account, settings, security
app/
├── page.tsx # Home dashboard
├── send/
│ └── page.tsx # P2P transfers (main)
│ └── international/ # International transfers
│ └── history/ # Transfer history
├── mint/
│ └── page.tsx # Mint/Burn hub
├── business/
│ ├── page.tsx # Business hub
│ ├── sme/ # SME services
│ ├── salary/ # Payroll management
│ ├── enterprise/ # Enterprise features
│ └── gateway/ # Payment gateway
├── me/
│ ├── page.tsx # Account overview
│ ├── profile/ # User profile
│ ├── settings/ # Account settings
│ ├── kyc/ # KYC verification
│ ├── recovery/ # Account recovery
│ ├── wallet/ # Wallet management
│ ├── activity/ # Activity history
│ └── 2fa/ # Two-factor auth
├── savings/ # Savings accounts
├── lending/ # Lending products
├── bills/ # Bill payments
└── auth/
├── signin/ # Sign in
└── 2fa/ # 2FA verification
components/
├── mobile-nav.tsx # Bottom navigation
├── app-layout.tsx # Main layout wrapper
└── ui/ # shadcn/ui components
docs/
├── ARCHITECTURE.md # Detailed architecture
├── ROUTES.md # Complete routing guide
└── README.md # This file
- Primary: Purple/Indigo (
oklch(0.35 0.12 280)) - Accent: Teal/Cyan (
oklch(0.55 0.15 160)) - Neutrals: Grayscale (white, grays, black)
- Currency: AFK only (no USD, Stellar, or external references)
- Headings: Use font-sans for consistency
- Body: Consistent 14px+ font sizes
- Line Height: 1.4-1.6 for readability
- Mobile-First: Optimized for mobile devices
- Flexbox: Primary layout method
- Max Width: 28rem (md breakpoint) for content
- Bottom Padding: 24 (96px) for mobile nav visibility
The application uses AFK (ACBU) as the only currency:
- All balances displayed in AFK
- All transactions in AFK
- All fees in AFK
- Stellar network for blockchain operations
- No USD, USDC, or external currency conversions
- 1 AFK = 1 unit of native ACBU
- Network fee: Free (Stellar protocol)
- Processing fees: 0.50-1.00 AFK per operation
- Exchange displayed in rates tabs (informational only)
- Mock authentication (ready for integration)
- Placeholder user data
- 2FA flow structure ready
- KYC verification workflow
- Input validation on all forms
- Error handling for API operations
- Secure session management pattern
- Ready for API.acbu.io integration
- P2P Transfers: Send money between wallets with frequent recipient management
- Mint/Burn: Create and redeem AFK currency
- Business Services: Complete suite for SME, payroll, and enterprise
- Account Management: Profile, settings, KYC, recovery
- Savings & Lending: Interest-bearing accounts and loan products
- Bill Payments: Utilities, airtime, and services
Features are grouped logically with internal navigation:
- Send page includes tabs for P2P, Mint/Burn, International, History
- Mint page includes tabs for Mint, Burn, Rates
- Business page includes cards for all business services
- 5-item bottom tab bar: Persistent across all pages
- Active state: Current route highlighted in primary color
- Touch-friendly: Large tap targets (56px minimum)
- Icon + Label: Clear identification
- Mobile-first design: Optimized for 375px-430px width
- Max width: 28rem for content containers
- Proper spacing: Consistent 16px padding
- Safe area: Bottom padding for iOS notch support
All pages include mock data structures ready for real API calls:
Base URL: https://api.acbu.io
Key Endpoints (to be implemented):
POST /send # Create transfer
GET /send/history # Get transfers
POST /mint # Mint operation
POST /burn # Burn operation
GET /account # User account
GET /business # Business services
POST /kyc/start # Start KYC
GET /bills/catalog # Bill catalog
POST /bills/pay # Pay bill
- Framework: Next.js 16 with App Router
- UI Library: React 19 with shadcn/ui
- Styling: Tailwind CSS v4
- Icons: Lucide React
- State: React hooks (SWR ready)
/components/mobile-nav.tsx- Navigation configuration/components/app-layout.tsx- Layout wrapper/app/globals.css- Design tokens and theme/docs/ROUTES.md- Complete routing reference/docs/ARCHITECTURE.md- Architecture details
- ARCHITECTURE.md - System design and principles
- ROUTES.md - Complete routing guide with examples
- README.md - This file
- API Integration: Connect to api.acbu.io endpoints
- Authentication: Replace mock auth with real implementation
- Database: Set up transaction and user data persistence
- Testing: Add unit and integration tests
- Deployment: Deploy to Vercel with environment variables
- Currency: All USD references have been removed; AFK is the only currency
- Navigation: New mobile nav with 5 primary tabs (Home, Send, Mint, Business, Me)
- Structure: Organized architecture makes it easy to add new features
- Scalability: Each section is modular and can grow independently
- Accessibility: WCAG 2.1 compliant with semantic HTML