Moniyo
MONIYO is a full-stack, production-style web application for digital payments. Users can send money, pay bills, and do mobile recharge from a unified dashboard, with secure authentication and a responsive, accessible UI. Tech stack Frontend: Next.js 14 (Pages Router), React 18, TypeScript, Material-UI (MUI), Tailwind CSS, Emotion, Framer Motion Backend / services: AWS Amplify — Amazon Cognito (auth), AWS AppSync (GraphQL API), Amazon DynamoDB Other: next-i18next / react-i18next (i18n), react-otp-input, dayjs, AWS CDK for infrastructure Features Dashboard: Balance, quick actions (Send Money, Pay a Bill), payment methods, recent activity Send money / Transfer: Contact selection, payment modal, scheduled transfers, history, invoices Pay a bill: Bill categories, bill details, payment flow, success and history Mobile recharge: Operator selection, recharge plans, payment and success screens Pricing: Transparent pricing / plans page Profile: Account settings, security, help, linked accounts, chat-style support Auth: Login, signup, two-factor authentication (2FA), OTP verification, forgot password, new password Landing: Marketing home page (Home & Home2), About, language switcher UX: Sticky sidebar (100vh), active menu state, themed scrollbars, mobile drawer, dark theme with teal accent (#1AE7E0)
The Challenge
- Users need a single place to send money, pay bills, and do mobile recharge instead of using multiple apps or sites. - The product needed secure auth (login, signup, 2FA, OTP) and a reliable backend without building custom servers from scratch. - The app had to work on mobile and desktop with a clear dashboard and navigation. - The UI had to feel modern and trustworthy (fintech-grade) with consistent theming and no default browser look (e.g. scrollbars, layout).
The Solution
- Unified dashboard with one layout: sticky sidebar (100vh), main content scroll only, and quick actions for Send Money, Pay a Bill, and Mobile Recharge. - AWS Amplify for auth (Cognito), API (AppSync), and database (DynamoDB) to ship faster and keep security and scalability handled by AWS. - Next.js + React for SSR/SSG, code splitting, and reusable components; MUI for responsive layout, drawer on mobile, and consistent components. - Themed UX: custom scrollbar (teal on dark), active menu state, dark theme (#1AE7E0 accent), and i18n for multiple languages. - Full auth flow: login, signup, 2FA, OTP verification, forgot password, and new password with Amplify UI and custom screens.
Results
One app for transfers, bill pay, and recharge with a single login and clear navigation. - Scalable, secure backend via Cognito, AppSync, and DynamoDB without managing servers. - Responsive experience with sticky sidebar on desktop and drawer on mobile; only main content scrolls. - Polished, on-brand UI with custom scrollbars, active states, and dark theme suitable for a portfolio or demo. - Reusable foundation (layout, auth, product flows) that can be extended with more features or connected to real payment APIs.
More Work
