hackquest logo

Superpay - Payments and Loyalties

A SuperApp for Payment and Loyalties

Videos

Description

SuperPay - Payments and Loyalties

A modern, feature-rich financial management application built with React Native and Expo, featuring a comprehensive savings pots system powered by Supabase.

๐Ÿš€ Features

๐Ÿ’ฐ Core Financial Management

  • Savings Pots System - Create, manage, and track multiple savings goals

  • USDC Integration - Native support for USDC cryptocurrency transactions

  • QR Code Payments - Scan and generate QR codes for instant payments

  • Real-time Balance Tracking - Live updates of wallet balances and pot amounts

๐Ÿฆ Savings Pots Features

  • Smart Pot Templates - Pre-built templates for common savings goals

  • Joint Pots - Collaborative savings with friends and family

  • Strict Savings - Time-locked pots with withdrawal deadlines

  • Auto-Invest - Automated weekly/monthly contributions

  • Yield Strategies - DeFi protocol integration for earning interest

  • Progress Tracking - Visual progress bars and goal projections

๐Ÿ” Security & Authentication

  • Wallet Integration - Dynamic wallet connection support

  • User Profiles - Comprehensive user management system

  • Row Level Security - Supabase-powered data protection

  • Transaction History - Complete audit trail of all financial activities

๐Ÿ“ฑ User Experience

  • Cross-Platform - Works on iOS, Android, and Web

  • Responsive Design - Optimized for all screen sizes

  • Dark/Light Themes - Automatic theme switching

  • Haptic Feedback - Enhanced mobile experience

  • Offline Support - Core functionality works without internet

๐Ÿ› ๏ธ Tech Stack

Frontend

  • React Native - Cross-platform mobile development

  • Expo - Development platform and build tools

  • TypeScript - Type-safe JavaScript development

  • Tailwind CSS - Utility-first CSS framework

  • NativeWind - Tailwind CSS for React Native

Backend & Database

  • Supabase - Open-source Firebase alternative

  • PostgreSQL - Robust relational database

  • Row Level Security (RLS) - Advanced data protection

  • Real-time Subscriptions - Live data updates

Blockchain & Payments

  • USDC - Stablecoin for transactions

  • Dynamic Wallets - Multi-wallet support

  • QR Code Generation - Payment request system

  • Transaction Monitoring - Payment status tracking

  • Smart Contracts - Arbitrum-based savings pots (available but not implemented)

State Management

  • Zustand - Lightweight state management

  • React Hooks - Modern React patterns

  • Context API - Component state sharing

๐Ÿ“ Project Structure

react-native-expo/
โ”œโ”€โ”€ src/
โ”‚   โ”œโ”€โ”€ app/                    # App screens and navigation
โ”‚   โ”‚   โ”œโ”€โ”€ (app)/             # Main app screens
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ home/          # Home dashboard
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ payment/       # Payment and QR scanning
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ pots/          # Savings pots management
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ profile/       # User profile
โ”‚   โ”‚   โ”‚   โ””โ”€โ”€ track/         # Transaction tracking
โ”‚   โ”‚   โ”œโ”€โ”€ business/          # Business dashboard
โ”‚   โ”‚   โ”œโ”€โ”€ login/             # Authentication
โ”‚   โ”‚   โ””โ”€โ”€ onboarding/        # User onboarding
โ”‚   โ”œโ”€โ”€ components/             # Reusable UI components
โ”‚   โ”œโ”€โ”€ services/               # Business logic and API calls
โ”‚   โ”œโ”€โ”€ stores/                 # State management
โ”‚   โ”œโ”€โ”€ hooks/                  # Custom React hooks
โ”‚   โ”œโ”€โ”€ types/                  # TypeScript type definitions
โ”‚   โ””โ”€โ”€ lib/                    # Configuration and utilities
โ”œโ”€โ”€ contracts/                  # Smart contracts (Arbitrum)
โ”‚   โ”œโ”€โ”€ SavingsPots.sol        # Main savings pots contract
โ”‚   โ”œโ”€โ”€ mUSDC.sol              # Mock USDC token contract
โ”‚   โ””โ”€โ”€ README.md              # Contract documentation
โ”œโ”€โ”€ supabase/                   # Database migrations and config
โ”œโ”€โ”€ assets/                     # Images, icons, and static files
โ””โ”€โ”€ docs/                       # Documentation and guides

๐Ÿš€ Getting Started

Prerequisites

  • Node.js (v18 or higher)

  • Yarn package manager

  • Expo CLI

  • iOS Simulator (for iOS development)

  • Android Studio (for Android development)

Installation

  1. Clone the repository

    git clone https://github.com/ManishHQ/superpay-arb
    cd react-native-expo
  2. Install dependencies

  3. Set up environment variables

    cp .env.example .env
    # Edit .env with your Supabase credentials
  4. Set up Supabase

    • Create a new Supabase project

    • Run the database migrations in supabase/migrations/

    • Update your environment variables

  5. Start the development server

    yarn start

Running on Devices

  • iOS Simulator: Press i in the terminal

  • Android Emulator: Press a in the terminal

  • Physical Device: Scan the QR code with Expo Go app

๐Ÿ—„๏ธ Database Schema

Core Tables

  • user_profiles - User information and preferences

  • savings_pots - Savings goals and progress

  • transactions - Financial transaction history

  • pot_activities - Pot-related activities and logs

  • waitlist - User waitlist for new features

Key Features

  • Row Level Security - Users can only access their own data

  • Real-time Updates - Live data synchronization

  • Audit Trails - Complete transaction history

  • Scalable Design - Optimized for high user volumes

โ›“๏ธ Smart Contracts

Available Contracts (Not Currently Implemented)

The project includes smart contracts for future blockchain integration:

  • SavingsPots.sol - Main contract for on-chain savings pots

  • mUSDC.sol - Mock USDC token for testing and development

Contract Features

  • Savings Pot Management - Create, fund, and withdraw from blockchain-based pots

  • USDC Integration - Native stablecoin support for all transactions

  • Multi-User Support - Collaborative savings with on-chain verification

  • Yield Farming - DeFi protocol integration for earning interest

Implementation Status

  • Current Version: Supabase-only pots system (recommended for production)

  • Future Version: Optional blockchain integration for advanced users

  • Migration Path: Seamless upgrade from database to blockchain pots

๐Ÿ”ง Configuration

Environment Variables

# Supabase Configuration
EXPO_PUBLIC_SUPABASE_URL=your_supabase_url
EXPO_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

# App Configuration
EXPO_PUBLIC_APP_NAME=SuperPay
EXPO_PUBLIC_APP_VERSION=1.0.0

Supabase Setup

  1. Enable Row Level Security on all tables

  2. Configure authentication providers

  3. Set up storage policies

  4. Configure real-time subscriptions

๐Ÿ“ฑ App Features

Home Dashboard

  • Overview of all savings pots

  • Quick actions for common tasks

  • Recent activity feed

  • Balance summaries

Payment System

  • QR code generation and scanning

  • USDC transaction support

  • Payment request system

  • Transaction monitoring

Savings Pots

  • Create custom savings goals

  • Track progress with visual indicators

  • Set up automatic contributions

  • Enable yield strategies

Business Dashboard

  • Customer management

  • Transaction analytics

  • Payment processing

  • Business insights

๐Ÿงช Testing

Running Tests

# Unit tests
yarn test

# E2E tests
yarn test:e2e

# Test coverage
yarn test:coverage

Test Structure

  • Unit Tests - Component and service testing

  • Integration Tests - API and database testing

  • E2E Tests - Full user journey testing

๐Ÿš€ Deployment

Expo Build

# Build for production
yarn build:android
yarn build:ios

# Submit to app stores
yarn submit:android
yarn submit:ios

Web Deployment

# Build web version
yarn build:web

# Deploy to hosting service
yarn deploy:web

๐Ÿค Contributing

Development Workflow

  1. Fork the repository

  2. Create a feature branch

  3. Make your changes

  4. Add tests for new functionality

  5. Submit a pull request

Code Standards

  • Follow TypeScript best practices

  • Use consistent naming conventions

  • Add JSDoc comments for complex functions

  • Maintain test coverage above 80%

๐Ÿ“„ License

This project is licensed under the MIT License - see the LICENSE file for details.

๐Ÿ†˜ Support

Getting Help

  • Documentation - Check the docs folder

  • Issues - Report bugs on GitHub

  • Discussions - Ask questions in GitHub Discussions

  • Email - Contact the development team

Common Issues

  • Build Errors - Clear cache and reinstall dependencies

  • Database Issues - Check Supabase connection and migrations

  • Performance - Enable Hermes engine and optimize images

๐Ÿ”ฎ Roadmap

Upcoming Features

  • Advanced Analytics - Detailed financial insights

  • Multi-Currency Support - Beyond USDC

  • Social Features - Share goals and achievements

  • AI Recommendations - Smart savings suggestions

  • Mobile Banking - Direct bank account integration

Platform Expansion

  • Web App - Full-featured web version

  • Desktop App - Native desktop application

  • API Access - Public API for developers

  • Third-party Integrations - Connect with other financial apps

๐Ÿ™ Acknowledgments

  • Expo Team - Amazing development platform

  • Supabase - Powerful backend-as-a-service

  • React Native Community - Excellent ecosystem

  • Open Source Contributors - All the amazing libraries


Built with โค๏ธ by the SuperPay Team

Empowering users to take control of their financial future through innovative technology and user-friendly design.

Tech Stack

React
Web3
Node
Solidity
React Native

Fundraising Status

None

Team Leader
MManish
Sector
SocialFiDeFi