ScanAza

Seamless Payment Interoperability for Nigerian SMEs

ScanAza is a Nigerian-based financial solution that enables small and medium enterprises to accept payments across all major Nigerian banks through a single QR code. No hardware required, no complexity—just scan and pay.

---

✨ Features

• 🎯 Single QR Code - One code works across all supported Nigerian banks
• ⚡ Instant Setup - Get your QR code immediately after signup
• 🔒 Secure Payments - Bank-grade security with direct bank app integration
• 📱 Mobile-First - Optimized for mobile devices and banking apps
• 🌙 Dark Mode - Beautiful monochromatic design with theme support
• 🏦 Multi-Bank Support - OPay, Moniepoint, Access Bank, Zenith, GTBank, UBA, Kuda, Palmpay, and more

---

🚀 Quick Start

Prerequisites

• Node.js 18.17 or later
• npm or yarn
• PostgreSQL database (Neon recommended)

Installation

1. Clone the repository

git clone https://github.com/yourusername/scanaza.git
cd scanaza

2. Install dependencies

npm install

3. Set up environment variables

Create a .env.local file in the root directory:

DATABASE_URL=postgresql://username:password@your-neon-host/scanaza?sslmode=require
JWT_SECRET=your-super-secret-jwt-key-here
NEXT_PUBLIC_APP_URL=http://localhost:3000

Generate a secure JWT secret:

openssl rand -base64 32

4. Set up the database

# Generate migration files
npm run db:generate

# Push schema to database
npm run db:push

5. Run the development server

npm run dev

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

---

🗄️ Database Setup

Using Neon (Recommended)

1. Create a free account at neon.tech
2. Create a new project named "scanaza"
3. Copy your connection string
4. Add it to .env.local as DATABASE_URL

Database Schema

The application uses two main tables:

• businesses - Stores business information, credentials, and QR codes
• transactions - Stores payment transaction history (future feature)

---

📁 Project Structure

scanaza/
├── src/
│   ├── app/
│   │   ├── api/              # API routes
│   │   │   ├── auth/         # Authentication endpoints
│   │   │   └── business/     # Business endpoints
│   │   ├── dashboard/        # Business dashboard
│   │   ├── login/            # Login page
│   │   ├── scan/             # QR code scan page
│   │   ├── layout.tsx        # Root layout
│   │   ├── page.tsx          # Landing page
│   │   └── globals.css       # Global styles
│   ├── components/           # React components
│   │   ├── Header.tsx
│   │   ├── Hero.tsx
│   │   ├── SignupForm.tsx
│   │   ├── Features.tsx
│   │   └── Footer.tsx
│   ├── lib/
│   │   ├── db.ts            # Database connection
│   │   ├── schema.ts        # Drizzle schema
│   │   └── utils.ts         # Utility functions
│   └── middleware.ts        # Next.js middleware
├── drizzle/                 # Migration files
├── .env.local              # Environment variables (not in git)
├── drizzle.config.ts       # Drizzle configuration
├── next.config.js          # Next.js configuration
├── tailwind.config.ts      # Tailwind configuration
└── tsconfig.json           # TypeScript configuration

---

🔐 Environment Variables

Variable	Description	Example
DATABASE_URL	PostgreSQL connection string	postgresql://user:pass@host/db
JWT_SECRET	Secret key for JWT tokens	your-secret-key
NEXT_PUBLIC_APP_URL	Your application URL	http://localhost:3000

Important: Never commit .env.local to version control. It's already included in .gitignore.

---

🛠️ Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run start	Start production server
npm run lint	Run ESLint
npm run db:push	Push schema to database
npm run db:studio	Open Drizzle Studio
npm run db:generate	Generate migration files

---

🚢 Deployment

Deploy to Vercel (Recommended)

1. Push your code to GitHub
2. Import your repository in Vercel
3. Add environment variables in Vercel dashboard:
   • DATABASE_URL
   • JWT_SECRET
   • NEXT_PUBLIC_APP_URL (your Vercel URL)
4. Deploy!

Manual Deployment

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel --prod

---

📱 How It Works

For Business Owners

1. Sign up with your business details and bank account
2. Download your unique QR code
3. Display the QR code at your business location
4. Receive instant payments from customers

For Customers

1. Scan the business QR code with your phone camera
2. Enter payment amount and product description
3. Select your bank app (OPay, Moniepoint, Access, etc.)
4. Complete payment in your banking app with pre-filled details

---

🏦 Supported Banks

• Access Bank
• Zenith Bank
• GTBank
• First Bank
• UBA
• OPay
• Moniepoint
• Kuda Bank
• Palmpay
• Wema Bank

More banks coming soon!

---

🎨 Design

ScanAza features a clean, monochromatic design inspired by modern financial platforms:

• Minimalist black and white color scheme
• Smooth animations and transitions
• Glass-morphism effects
• Full dark mode support
• Mobile-responsive layout

---

🔒 Security

• Password Security: Passwords hashed with bcrypt (12 rounds)
• Authentication: JWT tokens with 7-day expiration
• Cookies: HttpOnly, secure, SameSite cookies
• SQL Injection: Protected by Drizzle ORM parameterized queries
• XSS Protection: React's built-in escaping

---

🧪 Testing

Test Locally

1. Start the development server
2. Navigate to http://localhost:3000
3. Create a test account
4. Download the QR code
5. Scan with your phone to test the payment flow

Test in Production

1. Deploy to Vercel
2. Use a real mobile device
3. Ensure banking apps are installed
4. Test deep link functionality

---

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Guidelines

• Follow TypeScript best practices
• Use meaningful commit messages
• Test your changes thoroughly
• Update documentation as needed

---

📝 License

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

---

🙏 Acknowledgments

• Design inspired by Terra Industries
• Built with Next.js
• Database powered by Neon
• Icons by Lucide

---

📞 Support

For support, email support@scanaza.com or open an issue on GitHub.

---

🗺️ Roadmap

• Transaction history dashboard
• Real-time payment notifications
• Multiple QR codes per business
• Payment analytics and insights
• SMS/Email notifications
• Webhook integration
• Mobile app (iOS/Android)
• API for third-party integrations

---

💡 FAQ

Q: Is this free to use?
A: Yes, ScanAza is completely free for businesses.

Q: Do I need special hardware?
A: No, just a printer to print your QR code or a device to display it.

Q: Which banks are supported?
A: All major Nigerian banks including OPay, Moniepoint, Access, Zenith, GTBank, UBA, Kuda, and Palmpay.

Q: Is my money safe?
A: Yes, payments go directly to your registered bank account. ScanAza never holds your money.

Q: How quickly do I receive payments?
A: Payments are instant and go directly to your bank account.

---

📊 Tech Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Database: PostgreSQL (Neon)
• ORM: Drizzle ORM
• Authentication: JWT + bcrypt
• QR Codes: qrcode library
• Icons: Lucide React
• Deployment: Vercel

---