Ta7wila is a comprehensive, modern payment gateway platform that enables businesses to accept payments through multiple Egyptian mobile wallet services. Built with cutting-edge technologies, it provides a seamless, secure, and user-friendly payment experience with real-time WhatsApp integration for transaction notifications.
- 🏦 Multi-Payment Support: Instapay, VF Cash, Orange Cash, Etisalat Cash, and more
- 🌍 Internationalization: Full Arabic and English support with RTL layout
- 📱 WhatsApp Integration: Real-time transaction notifications and status updates
- 🔐 Secure Authentication: JWT-based authentication with role-based access control
- 📊 Advanced Dashboard: Comprehensive analytics and transaction management
- 🎨 Modern UI/UX: Dark theme with responsive design and smooth animations
- ⚡ Real-time Updates: Live payment status tracking and notifications
- 🔄 API Integration: RESTful API with comprehensive documentation
- Framework: Next.js 15.3.0 with App Router
- Language: TypeScript 5.8.3
- Styling: Tailwind CSS 3.4.1 + Framer Motion
- State Management: Redux Toolkit + React Query
- Forms: Formik + Yup validation
- UI Components: Radix UI + Headless UI
- Icons: Heroicons + React Icons + FontAwesome
- API Client: Axios with interceptors
- Authentication: JWT tokens with cookies-next
- Internationalization: next-intl with locale detection
- Notifications: React Hot Toast
- Package Manager: npm
- Bundler: Next.js built-in (Turbopack)
- Linting: ESLint + Prettier
- Type Checking: TypeScript strict mode
- Node.js 18+
- npm or yarn
- Git
-
Clone the repository
git clone https://github.com/MMansy19/ta7wila.git cd ta7wila -
Install dependencies
npm install
-
Environment setup
cp .env.example .env.local
Configure your environment variables:
NEXT_PUBLIC_API_BASE_URL=https://api.ta7wila.com/v3 NEXT_PUBLIC_APP_URL=http://localhost:3000 NEXTAUTH_SECRET=your-secret-key NEXTAUTH_URL=http://localhost:3000
-
Start development server
npm run dev
-
Open your browser Navigate to http://localhost:3000
To enable WhatsApp notifications:
# Start WhatsApp service (development)
npm run whatsapp:simple
# Start full development environment
npm run dev:full| Script | 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 whatsapp:simple |
Start WhatsApp integration |
npm run dev:full |
Start both web and WhatsApp services |
npm run start:production |
Start production with WhatsApp |
ta7wila/
├── 📁 src/
│ ├── 📁 app/
│ │ ├── 📁 [lang]/ # Internationalized routes
│ │ │ ├── 📁 dashboard/ # Admin dashboard
│ │ │ ├── 📁 public-payment/ # Public payment pages
│ │ │ └── page.tsx # Landing page
│ │ └── 📁 api/ # API routes
│ ├── 📁 components/ # Reusable components
│ ├── 📁 hooks/ # Custom React hooks
│ ├── 📁 lib/ # Utility libraries
│ ├── 📁 types/ # TypeScript definitions
│ └── 📁 styles/ # Global styles
├── 📁 public/ # Static assets
├── 📁 lib/ # WhatsApp integration
└── 📄 Configuration files
The app supports Arabic and English with automatic locale detection:
// i18n-config.ts
export const i18n = {
defaultLocale: 'en',
locales: ['en', 'ar']
} as constSupported payment options:
const paymentMethods = [
{ name: "VF Cash", key: "vcash", img: "/vcash.svg" },
{ name: "Orange Cash", key: "ocash", img: "/ocash.svg" },
{ name: "Etisalat Cash", key: "ecash", img: "/ecash.svg" },
{ name: "InstaPay", key: "instapay", img: "/instapay.svg" }
]The platform integrates with Ta7wila's RESTful API. Key endpoints include:
POST /auth/login
POST /auth/register
POST /auth/refreshPOST /checkout/generate
POST /transactions/public-payment
GET /payments/{id}GET /applications
POST /applications
PUT /applications/{id}For complete API documentation, visit: API Docs
- JWT Authentication: Secure token-based authentication
- Input Validation: Comprehensive form validation with Yup
- XSS Protection: Built-in Next.js security features
- CSRF Protection: Token-based request validation
- Environment Variables: Sensitive data protection
Full RTL support for Arabic language:
- Dynamic Language Switching: Real-time locale changes
- RTL Layout: Proper right-to-left text direction
- Localized Content: Translated UI and error messages
- Number Formatting: Locale-specific number and currency formatting
Optimized for all devices:
- Mobile First: Progressive enhancement approach
- Tablet Optimized: Perfect tablet experience
- Desktop Enhanced: Rich desktop functionality
- Touch Friendly: Optimized touch interactions
- Next.js App Router: Latest routing system for optimal performance
- Image Optimization: Automatic image optimization with Next.js Image
- Code Splitting: Automatic code splitting for faster loads
- Caching: Intelligent caching strategies
- Bundle Analysis: Optimized bundle sizes
# Run tests
npm run test
# Run tests in watch mode
npm run test:watch
# Generate coverage report
npm run test:coverage-
Deploy to Vercel
npx vercel
-
Configure environment variables in Vercel dashboard
-
Set up domain and SSL certificates
# Build Docker image
docker build -t ta7wila .
# Run container
docker run -p 3000:3000 ta7wila# Build for production
npm run build
# Start production server
npm run startWe welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch
git checkout -b feature/amazing-feature
- Commit your changes
git commit -m 'Add amazing feature' - Push to the branch
git push origin feature/amazing-feature
- Open a Pull Request
- Follow TypeScript best practices
- Use conventional commit messages
- Add tests for new features
- Update documentation as needed
- Ensure responsive design
- Test in both Arabic and English
This project is licensed under the MIT License - see the LICENSE file for details.
- Documentation: API Docs
- Issues: GitHub Issues
- Email: support@ta7wila.com
- Discord: Join our community
- Next.js Team for the amazing framework
- Vercel for hosting and deployment
- Tailwind CSS for the utility-first CSS framework
- All contributors who have helped improve this project
Made with ❤️ by the Ta7wila Team