SwiftPe - USDC to INR Bridge

A production-ready Next.js 14 application for SwiftPe, a mobile-first fintech bridge interface that converts USDC to INR with gasless transactions.

Features

• Mobile-First Design: Optimized for mobile devices with responsive design
• Smooth Animations: Framer Motion animations for seamless user experience
• Modern UI Components: Built with Radix UI primitives and Tailwind CSS
• TypeScript: Full type safety throughout the application
• Static Export: Configured for static site generation
• Production Ready: ESLint, proper error handling, and optimized build

Tech Stack

• Framework: Next.js 14 with App Router
• Styling: Tailwind CSS with custom design system
• UI Components: Radix UI primitives
• Animations: Framer Motion
• Icons: Lucide React
• TypeScript: Full type coverage
• Build: Static export ready

Getting Started

Prerequisites

• Node.js 18+
• npm, yarn, or pnpm

Installation

1. Clone the repository
2. Install dependencies:

npm install
# or
yarn install
# or
pnpm install

3. Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

4. Open http://localhost:3000 in your browser

Build & Deploy

Development Build

npm run dev

Production Build

npm run build

Static Export

npm run export

The static files will be generated in the out directory.

Project Structure

├── pages/                 # Next.js pages
│   ├── _app.tsx          # App wrapper
│   ├── _document.tsx     # Document structure
│   └── index.tsx         # Main application
├── src/
│   ├── components/       # React components
│   │   ├── screens/      # Screen components
│   │   ├── ui/          # UI components (Radix-based)
│   │   └── Navigation.tsx
│   └── styles/          # Global styles
├── public/              # Static assets
└── ...config files

Features Overview

Screens

1. Quote Screen: Real-time USDC to INR conversion rates
2. KYC Screen: Multi-step verification process
3. Payment Screen: Wallet connection and payment processing
4. Bridge Screen: Live transaction tracking
5. Payout Screen: Transaction completion and receipt

UI Components

• Fully accessible components built on Radix UI
• Consistent design system with Tailwind CSS
• Dark mode support ready
• Mobile-optimized interactions

Customization

Styling

• Modify src/styles/globals.css for global styles
• Update tailwind.config.js for design system changes
• Component styles use Tailwind utility classes

Components

• All UI components are in src/components/ui/
• Screen components are in src/components/screens/
• Easy to extend and customize

Performance

• Static site generation for optimal loading
• Optimized bundle size
• Lazy loading where appropriate
• Mobile-first responsive design

Browser Support

• Modern browsers (Chrome, Firefox, Safari, Edge)
• Mobile browsers (iOS Safari, Chrome Mobile)
• Progressive enhancement approach

License

This project is for demonstration purposes.