{"id":34584567,"url":"https://github.com/kayprogrammer/paycore-frontend","last_synced_at":"2026-06-05T07:31:30.658Z","repository":{"id":322353874,"uuid":"1088519181","full_name":"kayprogrammer/paycore-frontend","owner":"kayprogrammer","description":"The ViteJs Frontend For The Paycore API Project","archived":false,"fork":false,"pushed_at":"2025-11-04T01:40:55.000Z","size":154,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-11-04T03:26:55.366Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kayprogrammer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-03T04:36:31.000Z","updated_at":"2025-11-04T01:40:58.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/kayprogrammer/paycore-frontend","commit_stats":null,"previous_names":["kayprogrammer/paycore-frontend"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/kayprogrammer/paycore-frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kayprogrammer%2Fpaycore-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kayprogrammer%2Fpaycore-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kayprogrammer%2Fpaycore-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kayprogrammer%2Fpaycore-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kayprogrammer","download_url":"https://codeload.github.com/kayprogrammer/paycore-frontend/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kayprogrammer%2Fpaycore-frontend/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33934438,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-05T02:00:06.157Z","response_time":120,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-12-24T10:28:52.647Z","updated_at":"2026-06-05T07:31:30.652Z","avatar_url":"https://github.com/kayprogrammer.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PayCore Frontend\n\nA comprehensive, production-ready fintech platform frontend built with React, TypeScript, Vite, Chakra UI, and Redux Toolkit.\n\n\u003e **⚠️ Important Notice**: The live backend server will be discontinued on **February 14th, 2026** due to hosting costs. This is a demonstration project. The frontend will gracefully display a friendly error message when the server becomes unreachable. You can run both projects locally following the setup instructions.\n\n\u003e **📊 Performance Note**: The live URL may experience slower response times. This is **not** due to the application or implementation itself, but rather the hosting service configuration. The free/basic tier uses limited RAM and server resources. For optimal performance, please run the project locally using the setup instructions below.\n\n## 🔗 Related Projects\n\n- **Backend API**: [kayprogrammer/paycore-api-1](https://github.com/kayprogrammer/paycore-api-1)\n- **Live Demo**: [https://paycore-fe.netlify.app](https://paycore-fe.netlify.app)\n\n## 📸 Screenshots\n\n### Login Page (Google OAuth)\n![PayCore Login Page](public/display1.png?v=2)\n\n### Dashboard\n![PayCore Dashboard](public/display2.png?v=2)\n\n## 🚀 Features\n\nPayCore is a complete financial services platform that consumes **137 API endpoints** across **13 modules**:\n\n### Core Financial Services\n- 💰 **Wallets** - Multi-currency wallet management with virtual account numbers\n- 💳 **Cards** - Virtual and physical card issuance and management\n- 🔄 **Transactions** - Transfers, deposits, withdrawals, and disputes\n- 📱 **Bill Payments** - Airtime, data, electricity, cable TV, and more\n- 💵 **Payment Links \u0026 Invoices** - Merchant payment solutions\n- 🏦 **Loans** - Personal, business, payday, and student loans with auto-repayment\n- 📈 **Investments** - Fixed deposits, bonds, mutual funds, stocks, real estate\n\n### Additional Features\n- 🎫 **Support** - Ticketing system and FAQs\n- 🔒 **Compliance** - KYC verification with multi-tier levels\n- 🔔 **Notifications** - Real-time push and in-app notifications\n- 📊 **Audit Logs** - Complete activity tracking\n- 👤 **Profile Management** - User profiles with avatar upload\n- ⚙️ **Settings** - Security, notifications, devices, and account management\n\n### Authentication \u0026 Security\n- 🌐 **Google OAuth** - Primary authentication method (Sign in with Google)\n- 📧 **Email/OTP** - Alternative authentication with OTP verification\n- 🔄 **JWT Token Management** - Auto-refresh with secure storage\n- 📱 **Multi-device Support** - Session management across devices\n- 🛡️ **PIN-based Authorization** - Transaction security with wallet PINs\n\n## 🏗️ Architecture\n\n### Modular Microservice Pattern\n\nThe project follows a feature-based modular architecture, where each feature is organized like a microservice:\n\n```\nsrc/\n├── features/\n│   ├── auth/\n│   │   ├── components/\n│   │   ├── services/     # RTK Query API\n│   │   ├── types/        # TypeScript interfaces\n│   │   ├── hooks/        # Custom hooks\n│   │   └── utils/        # Feature utilities\n│   ├── wallets/\n│   ├── cards/\n│   ├── transactions/\n│   ├── bills/\n│   ├── payments/\n│   ├── loans/\n│   ├── investments/\n│   ├── support/\n│   ├── compliance/\n│   ├── notifications/\n│   ├── audit/\n│   └── profile/\n├── components/\n│   ├── common/           # Reusable components\n│   ├── layout/           # Layouts (MainLayout, AuthLayout)\n│   ├── ui/               # UI components\n│   └── forms/            # Form components\n├── pages/                # Page components\n├── store/                # Redux store\n│   ├── api/              # RTK Query base API\n│   └── slices/           # Redux slices\n├── hooks/                # Global hooks\n├── services/             # API services\n├── types/                # Global types\n├── utils/                # Utilities\n├── theme/                # Chakra UI theme\n└── assets/               # Static assets\n```\n\n## 🛠️ Tech Stack\n\n### Core\n- **React 18** - UI library\n- **TypeScript** - Type safety\n- **Vite** - Build tool\n- **React Router v7** - Routing\n\n### State Management\n- **Redux Toolkit** - State management\n- **RTK Query** - API integration and caching\n\n### UI \u0026 Styling\n- **Chakra UI** - Component library\n- **Emotion** - CSS-in-JS\n- **Framer Motion** - Animations\n- **React Icons** - Icons\n- **Recharts** - Data visualization\n\n### Forms \u0026 Validation\n- **React Hook Form** - Form management\n- **Yup** - Schema validation\n\n### Utilities\n- **Axios** - HTTP client\n- **date-fns** - Date utilities\n- **jwt-decode** - JWT token decoding\n\n## 📦 Installation \u0026 Setup\n\n### Prerequisites\n- **Node.js 20.19+ or 22.12+** and npm (for local development, required by Vite 7.x)\n- **Docker \u0026 Docker Compose** (for containerized deployment)\n- **Backend API** running (Django PayCore API)\n- **Google OAuth Client ID** (for authentication)\n\n### Option 1: Quick Start with Makefile (Recommended)\n\n```bash\n# Navigate to project\ncd /Users/mac/Documents/Projects/ViteJs/paycore-frontend\n\n# Quick start for development\nmake quick-start\n\n# Or for production with Docker\nmake quick-prod\n```\n\n### Option 2: Manual Setup\n\n#### Local Development\n\n1. **Navigate to the repository**\n```bash\ncd /Users/mac/Documents/Projects/ViteJs/paycore-frontend\n```\n\n2. **Install dependencies**\n```bash\nnpm install\n# Or using Makefile\nmake install\n```\n\n3. **Configure environment variables**\n```bash\ncp .env.example .env.development\n# Or using Makefile\nmake env-example\n```\n\nEdit `.env.development`:\n```env\nVITE_API_BASE_URL=http://localhost:8000/api/v1\nVITE_APP_NAME=PayCore\nVITE_GOOGLE_CLIENT_ID=your_google_oauth_client_id\n```\n\n4. **Start development server**\n```bash\nnpm run dev\n# Or using Makefile\nmake dev\n```\n\nThe app will be available at `http://localhost:3000`\n\n#### Docker Development\n\n```bash\n# Build and run development container with hot reload\nmake docker-dev\n\n# Or manually\ndocker-compose -f docker-compose.dev.yml up\n```\n\n#### Docker Production\n\n```bash\n# Build production image\nmake docker-build\n\n# Run production container\nmake docker-run\n\n# Or build and run in one command\nmake quick-prod\n\n# Or manually\ndocker-compose up -d\n```\n\nThe app will be available at `http://localhost:3000`\n\n## 🧪 Available Commands\n\n### NPM Scripts\n\n```bash\nnpm run dev          # Start development server\nnpm run build        # Build for production\nnpm run preview      # Preview production build\nnpm run lint         # Run ESLint\nnpm run type-check   # TypeScript type checking\n```\n\n### Makefile Commands\n\n```bash\n# Development\nmake dev             # Start development server\nmake build           # Build for production\nmake clean           # Clean build artifacts\nmake install         # Install dependencies\n\n# Code Quality\nmake lint            # Run ESLint\nmake lint-fix        # Run ESLint with auto-fix\nmake type-check      # TypeScript type checking\nmake format          # Format code with Prettier\n\n# Docker - Production\nmake docker-build    # Build production Docker image\nmake docker-run      # Run production container\nmake docker-stop     # Stop production container\nmake docker-logs     # View container logs\nmake docker-shell    # Open shell in container\n\n# Docker - Development\nmake docker-dev      # Run dev container with hot reload\nmake docker-dev-stop # Stop development container\nmake docker-dev-logs # View dev container logs\n\n# Utilities\nmake help            # Show all available commands\nmake info            # Display project information\nmake backend-check   # Check if backend is running\n```\n\nSee full command list with: `make help`\n\n## 📝 API Coverage\n\n### Complete Endpoint Implementation\n\n| Module | Endpoints | Status |\n|--------|-----------|--------|\n| Authentication | 13 | ✅ Complete |\n| Profile | 3 | ✅ Complete |\n| Wallets | 19 | ✅ Complete |\n| Cards | 12 | ✅ Complete |\n| Transactions | 14 | ✅ Complete |\n| Bills | 7 | ✅ Complete |\n| Payments | 16 | ✅ Complete |\n| Loans | 20 | ✅ Complete |\n| Investments | 10 | ✅ Complete |\n| Support | 9 | ✅ Complete |\n| Compliance | 4 | ✅ Complete |\n| Notifications | 4 | ✅ Complete |\n| Audit Logs | 3 | ✅ Complete |\n| **Total** | **137** | **✅ 100%** |\n\n## 🎨 Design System\n\n### Theme\n\nCustom Chakra UI theme with brand colors:\n\n```typescript\nbrand: {\n  50: '#EEF2FF',\n  500: '#6366F1',  // Primary\n  600: '#4F46E5',\n  900: '#312E81',\n}\n```\n\n### Key Components\n\n- Modern sidebar navigation with active states\n- Header with notifications and user menu\n- Custom button styles with brand colors\n- Card components with shadows and hover effects\n- Input fields with focus states\n- Toast notifications for feedback\n- Modal dialogs for forms\n- Responsive breakpoints (sm, md, lg, xl, 2xl)\n\n## 🔐 Authentication Flow\n\n### Primary Authentication (Google OAuth)\n\n1. **Click \"Sign in with Google\"** → Google OAuth popup\n2. **Authorize** → Select Google account\n3. **Token Exchange** → Google ID token sent to backend\n4. **Profile Fetch** → User profile and tokens received\n5. **Auto-Login** → Redirect to dashboard\n\n### Alternative Authentication (Email/OTP)\n\n1. **Login** → Enter email → OTP sent to email\n2. **Verify OTP** → Enter 6-digit code → Tokens received\n3. **Token Storage** → Access \u0026 refresh tokens stored in Redux + localStorage\n4. **Auto-Refresh** → Expired tokens automatically refreshed\n5. **Protected Routes** → Redirect to login if not authenticated\n\n### Key Features\n\n- **Single Source of Truth** → Profile data fetched directly from API endpoint\n- **RTK Query Caching** → Automatic cache management and invalidation\n- **Real-time Updates** → Avatar and profile changes reflect immediately\n- **Redux Persistence** → Auth state persists across page reloads\n\n## 🚨 Server Unavailability Handling\n\nWhen the backend server is unreachable (discontinued, network issues, etc.), the app displays a friendly error screen instead of confusing error messages.\n\n### How It Works\n\n1. **Health Check on Load** → App checks server availability when it loads (5-second timeout)\n2. **Server Unreachable** → Shows friendly screen with crying emoji 😢 immediately\n3. **Server Available** → App loads normally\n4. **Backup Detection** → If server goes down during usage, also caught by API interceptor\n\n### User Experience\n\nInstead of seeing:\n```\n❌ Google Login Failed\n❌ Could not sign in with Google\n❌ CORS errors in console\n```\n\nUsers see:\n```\n😢\nServer Unavailable\n\nThe PayCore API server has been stopped and is now unreachable.\nThis was a demonstration project hosted on a paid server.\nThe live server was discontinued on February 14th, 2026.\n\n[Try Again Button]\n[View Backend Repository Button]\n\nYou can run the project locally by following the setup instructions in the repository.\n```\n\n### Implementation\n\n- **Health Check Hook**: `src/hooks/useHealthCheck.ts` - Runs on app load\n- **Error Detection**: `src/utils/errorHandlers.ts` - Detects network/server errors\n- **UI Component**: `src/components/common/ServerUnavailable.tsx` - Friendly error screen\n- **Redux State**: `src/store/slices/serverStatusSlice.ts` - Tracks server status\n\n## 📊 State Management\n\n### Redux Store Structure\n\n```typescript\n{\n  api: RTKQueryState,     // All API cache\n  auth: {\n    user: User | null,\n    accessToken: string | null,\n    refreshToken: string | null,\n    isAuthenticated: boolean,\n  },\n  serverStatus: {\n    isServerAvailable: boolean,\n    lastChecked: number | null,\n  }\n}\n```\n\n### RTK Query Features\n\n- Automatic cache management with tags\n- Optimistic updates\n- Automatic refetching on focus/reconnect\n- Request deduplication\n- Polling support\n\n## 🔌 API Integration\n\nAll API services are created using RTK Query with automatic:\n- Token injection in headers\n- Token refresh on 401 errors\n- Error handling\n- Loading states\n- Cache invalidation\n\n### Example Usage\n\n```typescript\nimport { useListWalletsQuery } from '@/features/wallets/services/walletsApi';\n\nfunction WalletsPage() {\n  const { data, isLoading, error } = useListWalletsQuery();\n\n  if (isLoading) return \u003cLoadingSpinner /\u003e;\n  if (error) return \u003cErrorAlert message=\"Failed to load\" /\u003e;\n\n  return \u003cWalletsList wallets={data.data.items} /\u003e;\n}\n```\n\n## 🌐 Pages Overview\n\n### Authentication Pages\n- **LoginPage** - Google OAuth sign-in (primary method)\n- **RegisterPage** - Google OAuth sign-up (primary method)\n- **VerifyOTPPage** - 6-digit OTP verification (alternative method)\n- **ForgotPasswordPage** - Multi-step password reset\n\n### Main Application Pages\n- **DashboardPage** - Overview with charts and quick actions\n- **WalletsPage** - Wallet management with security settings\n- **CardsPage** - Card display and controls\n- **TransactionsPage** - Transaction history with filters\n- **BillsPage** - Bill payment interface\n- **LoansPage** - Loan marketplace and management\n- **InvestmentsPage** - Investment portfolio\n- **ProfilePage** - User profile and KYC\n- **SettingsPage** - Security and preferences\n\n## 🔧 Utilities\n\n### Formatters (`src/utils/formatters.ts`)\n\n```typescript\nformatCurrency(50000, 'NGN')  // ₦50,000.00\nformatDate('2024-01-01')      // Jan 01, 2024\nformatRelativeTime(date)      // 2 hours ago\nmaskCardNumber(cardNumber)    // 5399 **** **** 1234\ngetStatusColor('completed')   // 'green'\n```\n\n## 📈 Data Visualization\n\nCharts implemented using Recharts:\n\n- **Line Charts** - Transaction trends\n- **Area Charts** - Balance over time\n- **Pie Charts** - Portfolio distribution\n- **Bar Charts** - Monthly comparisons\n\n## 📱 Responsive Design\n\n- Mobile-first approach\n- Sidebar becomes drawer on mobile\n- Responsive tables with horizontal scroll\n- Stack layouts on small screens\n- Touch-friendly buttons and inputs\n\n## 🚧 Development Guidelines\n\n### Adding a New Feature\n\n1. Create types in `src/features/[feature]/types/index.ts`\n2. Create RTK Query API in `src/features/[feature]/services/[feature]Api.ts`\n3. Build components in `src/features/[feature]/components/`\n4. Create page in `src/pages/[feature]/`\n5. Add route in `App.tsx`\n6. Update sidebar navigation if needed\n\n### Code Style\n\n- Use TypeScript for type safety\n- Follow existing naming conventions\n- Use Chakra UI components\n- Implement proper error handling\n- Add loading states everywhere\n- Use formatters for display\n- Write clean, readable code\n\n## 🔒 Security Features\n\n- ✅ **Google OAuth Integration** - Secure third-party authentication\n- ✅ **JWT Tokens** - Auto-refresh mechanism for seamless sessions\n- ✅ **Secure Token Storage** - Redux Persist with localStorage\n- ✅ **PIN Authorization** - Transaction-level security\n- ✅ **Data Masking** - Sensitive data (card numbers, etc.)\n- ✅ **Input Validation** - Client-side form validation\n- ✅ **Protected Routes** - Authentication guards\n- ✅ **Multi-factor Authentication** - OTP verification\n- ✅ **Profile Security** - Avatar upload, password management removed (Google-only auth)\n\n## 🐳 Docker Deployment\n\n### Quick Docker Commands\n\n```bash\n# Development with hot reload\nmake docker-dev\n\n# Production deployment\nmake docker-build\nmake docker-run\n\n# View logs\nmake docker-logs\n\n# Stop containers\nmake docker-stop\n```\n\n### Docker Images\n\n**Production Image (Multi-stage build):**\n- Based on `node:20-alpine` (builder) + `nginx:alpine` (runtime)\n- Optimized for production with minimal size\n- Includes Nginx for serving static files\n- Health checks configured\n- Security headers enabled\n- Gzip compression enabled\n\n**Development Image:**\n- Based on `node:20-alpine`\n- Hot reload enabled with Vite HMR\n- Volume mounting for live code updates\n- Full development tooling\n- Accessible at http://localhost:3000\n\n### Docker Compose\n\n**Production:**\n```bash\ndocker-compose up -d\n```\n\n**Development:**\n```bash\ndocker-compose -f docker-compose.dev.yml up\n```\n\n### Environment Variables in Docker\n\nSet in `docker-compose.yml` or via command line:\n\n```bash\ndocker build \\\n  --build-arg VITE_API_BASE_URL=https://api.paycore.com/api/v1 \\\n  --build-arg VITE_GOOGLE_CLIENT_ID=your_google_client_id \\\n  -t paycore-frontend:latest .\n```\n\n**Required Environment Variables:**\n- `VITE_API_BASE_URL` - Backend API URL\n- `VITE_GOOGLE_CLIENT_ID` - Google OAuth Client ID\n- `VITE_APP_NAME` - Application name (default: PayCore)\n\n**Port Configuration:**\n- **Development**: Container port 5173 → Host port 3000\n- **Production**: Container port 80 → Host port (configurable in docker-compose.yml)\n\n### Container Management\n\n```bash\n# View running containers\ndocker ps\n\n# View logs\ndocker logs -f paycore-frontend\n\n# Open shell in container\ndocker exec -it paycore-frontend sh\n\n# Restart container\ndocker restart paycore-frontend\n\n# Remove container\ndocker rm -f paycore-frontend\n```\n\n## 🎯 Production Deployment\n\n### Option 1: Docker (Recommended)\n\n```bash\n# Build and deploy with Docker\nmake docker-build\nmake docker-run\n\n# Or use docker-compose\ndocker-compose up -d\n```\n\n### Option 2: Traditional Build\n\n```bash\n# Build for production\nnpm run build\n# Or\nmake build\n```\n\nOutput in `dist/` folder (optimized, minified, code-split)\n\n### Environment Variables for Production\n\nCreate `.env.production`:\n```env\nVITE_API_BASE_URL=https://api.paycore.com/api/v1\nVITE_APP_NAME=PayCore\nVITE_GOOGLE_CLIENT_ID=your_google_client_id\n```\n\n### Deployment Platforms\n\n#### Vercel (Recommended for non-Docker)\n```bash\nnpm install -g vercel\nvercel --prod\n# Or\nmake deploy-vercel\n```\n\n#### Netlify\n```bash\nnpm install -g netlify-cli\nnetlify deploy --prod --dir=dist\n# Or\nmake deploy-netlify\n```\n\n**Important for Netlify**: The project includes a `_redirects` file in the `public/` folder and `netlify.toml` at the root to handle SPA routing. This ensures that direct URL access (like `/dashboard`, `/login`) works correctly by serving `index.html` for all routes.\n\n**Files for Netlify:**\n- `public/_redirects` - Redirect configuration\n- `netlify.toml` - Netlify configuration (alternative to `_redirects`)\n\nIf you encounter 404 errors when accessing routes directly, ensure these files are committed to your repository.\n\n#### AWS S3 + CloudFront\n```bash\n# Build first\nnpm run build\n\n# Upload to S3\naws s3 sync dist/ s3://your-bucket-name\n\n# Invalidate CloudFront cache\naws cloudfront create-invalidation --distribution-id YOUR_DIST_ID --paths \"/*\"\n```\n\n#### Docker Swarm\n```bash\ndocker stack deploy -c docker-compose.yml paycore\n```\n\n#### Kubernetes\n```bash\n# Create deployment and service\nkubectl apply -f k8s/deployment.yaml\nkubectl apply -f k8s/service.yaml\n```\n\n### Nginx Configuration\n\nThe production Docker image uses Nginx with:\n- Gzip compression\n- Security headers (X-Frame-Options, X-Content-Type-Options, etc.)\n- SPA routing support\n- Static asset caching (1 year)\n- Health check endpoint at `/health`\n\n## 🎯 Quick Start Guide\n\n### Authentication Methods\n\n**Primary Method: Google OAuth**\n- Click \"Sign in with Google\" button\n- Authorize with your Google account\n- Instant access to dashboard\n\n**Alternative Method: Email/OTP**\n- Enter your email address\n- Receive 6-digit OTP via email\n- Verify OTP to access dashboard\n\n**Note**: Password-based authentication and change password functionality have been removed in favor of Google OAuth for enhanced security.\n\n### Quick Navigation\n\n| Page | URL | Description |\n|------|-----|-------------|\n| Dashboard | `/dashboard` | Overview, wallet summary, charts |\n| Wallets | `/wallets` | Manage multi-currency wallets |\n| Cards | `/cards` | Virtual/physical card management |\n| Transactions | `/transactions` | Transfer, deposit, withdraw |\n| Bills | `/bills` | Pay airtime, data, electricity, etc. |\n| Loans | `/loans` | Apply for loans, repayment |\n| Investments | `/investments` | Investment portfolio |\n| Profile | `/profile` | Edit profile, KYC verification |\n| Settings | `/settings` | Security, notifications |\n\n### Key Features to Try\n\n#### 1. Wallet Operations\n```bash\n# Create Wallet: Dashboard → \"Add Wallet\" → Select currency\n# Set PIN: Wallets → Click wallet → Security → \"Set PIN\"\n# View Balance: Toggle eye icon to show/hide balance\n```\n\n#### 2. Transfers\n```bash\n# Send Money: Transactions → \"Transfer\" → Enter details + PIN\n# Receive: Share your wallet account number\n```\n\n#### 3. Card Management\n```bash\n# Create Card: Cards → \"Create Card\" → Choose virtual/physical\n# Fund Card: Click card → \"Fund Card\" → Enter amount + PIN\n# Freeze Card: Click card menu → \"Freeze Card\"\n```\n\n#### 4. Bill Payments\n```bash\n# Pay Bills: Bills → Select category → Choose provider → Enter details\n# View History: Bills → \"Payment History\"\n```\n\n#### 5. Loans\n```bash\n# Calculate: Loans → Calculator → Adjust sliders\n# Apply: Loans → \"Apply for Loan\" → Fill form\n# Repay: Active loans → \"Make Repayment\"\n```\n\n#### 6. Investments\n```bash\n# Invest: Investments → \"Create Investment\" → Choose product\n# Portfolio: View charts and performance metrics\n# Liquidate: Active investment → \"Liquidate\" (if needed)\n```\n\n## 🐛 Troubleshooting\n\n### Common Issues\n\n**Problem**: \"Failed to fetch\" errors\n**Solution**:\n- Ensure Django backend is running on port 8000\n- Check `VITE_API_BASE_URL` in `.env.development`\n- Verify CORS settings in Django\n\n**Problem**: Login works but gets logged out immediately\n**Solution**:\n- Check browser console for errors\n- Verify tokens are being saved (check Redux DevTools)\n- Clear localStorage and try again\n\n**Problem**: OTP not working\n**Solution**:\n- Check Django terminal for OTP code\n- OTP expires after 10 minutes\n- Request new OTP if needed\n\n**Problem**: Styles not loading\n**Solution**:\n```bash\n# Clear Vite cache and restart\nrm -rf node_modules/.vite\nmake dev\n```\n\n**Problem**: TypeScript errors\n**Solution**:\n```bash\n# Run type check\nmake type-check\n\n# Most errors are auto-fixed by restarting dev server\n```\n\n## 📦 Project Statistics\n\n- **Total Files Created**: 120+\n- **Total Lines of Code**: ~18,000+\n- **API Endpoints Consumed**: 137/137 (100%)\n- **RTK Query Hooks**: 137\n- **Type Definitions**: 60+ interfaces\n- **Pages**: 17 (4 auth + 13 main)\n- **Features**: 13 modules\n- **Dependencies**: 36 production, 14 dev\n- **Docker Images**: 2 (production + development)\n- **Makefile Commands**: 50+\n\n## 🔍 API Endpoint Verification\n\nAll **137 endpoints** from the Django PayCore API have been properly consumed:\n\n| Module | Endpoints | Implementation |\n|--------|-----------|----------------|\n| Authentication | 13 | ✅ `src/features/auth/services/authApi.ts` |\n| Profile | 3 | ✅ `src/features/profile/services/profileApi.ts` |\n| Wallets | 19 | ✅ `src/features/wallets/services/walletsApi.ts` |\n| Cards | 12 | ✅ `src/features/cards/services/cardsApi.ts` |\n| Transactions | 14 | ✅ `src/features/transactions/services/transactionsApi.ts` |\n| Bills | 7 | ✅ `src/features/bills/services/billsApi.ts` |\n| Payments | 16 | ✅ `src/features/payments/services/paymentsApi.ts` |\n| Loans | 20 | ✅ `src/features/loans/services/loansApi.ts` |\n| Investments | 10 | ✅ `src/features/investments/services/investmentsApi.ts` |\n| Support | 9 | ✅ `src/features/support/services/supportApi.ts` |\n| Compliance | 4 | ✅ `src/features/compliance/services/complianceApi.ts` |\n| Notifications | 4 | ✅ `src/features/notifications/services/notificationsApi.ts` |\n| Audit Logs | 3 | ✅ `src/features/audit/services/auditApi.ts` |\n\n**All endpoints are fully functional with:**\n- ✅ RTK Query hooks\n- ✅ TypeScript type definitions\n- ✅ Cache management\n- ✅ Error handling\n- ✅ Loading states\n- ✅ UI integration\n\n## 👥 Credits\n\n- **Author**: Kenechi Ifeanyi\n- **License**: MIT\n- **Backend**: Django PayCore API\n- **Version**: 1.0.0\n\n## 📚 External Documentation\n\n- [Chakra UI](https://chakra-ui.com/) - Component library\n- [Redux Toolkit](https://redux-toolkit.js.org/) - State management\n- [RTK Query](https://redux-toolkit.js.org/rtk-query/overview) - API integration\n- [React Router](https://reactrouter.com/) - Routing\n- [Vite](https://vitejs.dev/) - Build tool\n- [TypeScript](https://www.typescriptlang.org/) - Type safety\n\n## 📞 Support\n\nFor issues or questions:\n- Check the Makefile commands: `make help`\n- View backend status: `make backend-check`\n- Review logs: `make docker-logs` (for Docker) or check browser console\n\n---\n\n**✅ PayCore Frontend - Production Ready**\n**Built with ❤️ for modern fintech solutions**\n**100% API Coverage | Fully Dockerized | Comprehensive Documentation**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkayprogrammer%2Fpaycore-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkayprogrammer%2Fpaycore-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkayprogrammer%2Fpaycore-frontend/lists"}