ARCHITECTING A ZERO-FRICTION LEARNING EXPERIENCE WITH AI VERIFICATION
Engineering the bridge between manual financial transactions and automated course delivery through AI vision and event-driven architecture.
The problem worth engineering
Menasa isn't just a course platform; it's a demonstration of how AI can bridge the gap in local payment limitations. I engineered a primary learning system (Next.js/MongoDB) that integrates a custom 'InstaPay AI Auditor'.
This system uses large language models (Gemini/GPT-4o) to verify manual payment screenshots with 99% accuracy, allowing for safe automated enrollment via a Telegram-based admin control center. The architecture solves the 'Source of Truth' problem by implementing a Unified Enrollment Engine that synchronizes manual 'User.enrolledCourses' with automated 'Order' history, ensuring zero-latency access across the platform.
The UI is a visual masterpiece built with layered GSAP animations, where math meets motion—from dynamic progress calculations ( (completed/total)*100 ) to precise responsive font-scaling that maintains a premium feel across all device densities.
- Engineered an 'AI Payment Auditor' system: Built a pipeline that takes InstaPay screenshots, processes them via AI to extract Transaction IDs and amounts, and implements a 'Tolerance Logic' (±20 EGP variance) to handle human error during manual transfers, drastically reducing administrative overhead.
- Developed a 'Unified Enrollment Logic' (UEL): Solved the dual-source problem by architecting a single function that merges manual MongoDB enrollments with OPay gateway transactions. This ensures consistent course access in layouts, APIs, and video signing routes regardless of the student's payment path.
- Architected a 'Telegram-to-Server' Webhook Bridge: Created a secure admin orchestration layer where requests approved in a Telegram chat instantly trigger MongoDB transactions, generate Resend email notifications, and update the student's library state in real-time using React-Query cache invalidation.
How it was built, system by system
Interface documentation
Click any screen to inspect it full size.
Related Projects
Explore more of my work
Goods&U | Full-Stack Bilingual (Arabic-RTL) E-Commerce Platform
Polary | Cinematic 3D Narrative Landing Experience
Diagnostics Elite | Cinematic Bilingual MedTech Platform (WebGL + Sanity)
Fix Vision | Interactive High-Performance Creative Agency Platform
IQ Academy | Full-Stack Arabic EdTech Learning Platform
TMT Eye | Enterprise Intelligent Transport Operating System
Goods&U | Full-Stack Bilingual (Arabic-RTL) E-Commerce Platform
Polary | Cinematic 3D Narrative Landing Experience
Diagnostics Elite | Cinematic Bilingual MedTech Platform (WebGL + Sanity)
Fix Vision | Interactive High-Performance Creative Agency Platform
IQ Academy | Full-Stack Arabic EdTech Learning Platform
