CREATIVE EDTECH & AI FINANCIAL AUTOMATION

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.

Live Project

Experience It Live

See this project in action. Explore the full functionality and design in a live environment.

noor-stack.vercel.app/

Visit Live Site

Live

•Click to explore

Overview

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.

Key Achievements

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.

Implemented 'Mathematical Motion Layers' with GSAP: Every section uses synchronized animation layers. Used linear interpolation (LERP) for scroll-driven reveals and custom math for the radial progress indicators, ensuring that visual feedback perfectly matches the server-side progress data.

Designed a 'Premium Glass-morphism' Design System: Optimized for high-density displays using custom HSL color tokens and dynamic opacity utilities. Implemented a 'Responsive Font-Size Matrix' that scales headers from 6xl on desktop to a crisp 2xl on mobile without breaking layout hierarchy.

Integrated 'Bunny.net Security' API Signing: Secured the video infrastructure by building a server-side Token Generator that validates enrollment via the UEL before requesting signed playback URLs, preventing unauthorized course sharing and hotlinking.

Built a 'Fail-Safe Bulk Email' Notification System: Integrated Resend with robust error handling and transactional logging. The system handles 'Sandbox vs Production' states gracefully, ensuring that administrative actions (Enroll/Unenroll/Reject) trigger professional, branded student notifications.