KHALID

Featured Project

My Financial Trading (MFT) Platform

A sophisticated, enterprise-grade EdTech platform designed for financial trading education, featuring secure video streaming, real-time community interaction, and a robust multi-gateway payment system.

Overview

🌟 Project Overview

My Financial Trading (MFT) is a comprehensive web application built to deliver high-quality financial trading education. It bridges the gap between expert knowledge and eager learners through a secure, interactive, and scalable platform.

The system is designed with a microservices-inspired architecture, separating the high-performance Next.js frontend from the robust Node.js/Express backend. It serves three distinct user rolesβ€”Students, Admins, and Super Adminsβ€”each with tailored dashboards and functionalities.

Key highlights include a custom-built secure video streaming engine, a real-time community feed akin to social media, and a complex payment infrastructure supporting fiat and cryptocurrencies.

✨ Key Features

πŸŽ“ Advanced Learning Management

  • Structured Course/Sub-course System: Hierarchical content organization for streamlined learning paths.

  • Secure Video Streaming: Custom HLS (HTTP Live Streaming) implementation with signed tokens and time-limited access to prevent unauthorized downloads or sharing.

  • Progress Tracking: Granular tracking of video completion and course progress for students.

  • Cross-Platform Player: Optimized video player (Video.js) that saves playback state and adapts to network conditions.

πŸ’³ Multi-Gateway Payment Infrastructure

  • Stripe: Seamless credit/debit card processing and subscription management.

  • Apple In-App Purchases: Server-side receipt validation for iOS subscription handling.

  • Cryptocurrency Integration: Support for Bitcoin and Ethereum payments via CoinPayment with automated invoice generation.

  • Automated Invoicing: Generation of PDF receipts and payment verification workflows.

πŸ‘₯ Role-Based User Ecosystem

  • Student Dashboard: Access to purchased courses, progress stats, and community features.

  • Admin/Super Admin Portal:

  • Content Management: Upload/edit videos, manage course hierarchy.

  • User Management: Monitor students, handle bans, and review verification requests.

  • Financial Analytics: Real-time overview of revenue and subscription status.

πŸ”” Real-Time Community & Communication

  • Live Community Feed: A social-media-style feed for students to discuss trading strategies, built with Socket.io.

  • Push Notifications: Integrated via Firebase Cloud Messaging (FCM) for instant alerts on mobile and web.

  • Newsletter System: Automated email marketing and bulk sending capabilities using SendGrid and Brevo.

  • Instant Updates: Real-time notifications for payment success, new content, and community interactions.

πŸ›  Technical Architecture

The project follows a modern, scalable architecture prioritizing security and performance.

Frontend (The Client)

  • Core: Built with Next.js 15 (App Router) and React 18 for server-side rendering and SEO optimization.

  • Type Safety: Fully typed with TypeScript 5.0.

  • State Management: Redux Toolkit & RTK Query for efficient data fetching and global state caching.

  • UI/UX: Styled with Tailwind CSS and Radix UI (shadcn/ui), ensuring accessibility and a premium dark-mode aesthetic.

  • Forms: React Hook Form combined with Zod schema validation.

Backend (The Core)

  • API Runtime: Node.js with Express.js, structured for scalability.

  • Database: MongoDB coupled with Prisma ORM for type-safe database queries and schema management.

  • Caching & Queues: Redis for caching frequent API responses and BullMQ for handling background jobs (e.g., video processing, email sending).

  • Storage: AWS S3 for secure, scalable storage of video assets and user uploads.

DevOps & Security

  • Authentication: Secure JWT (JSON Web Tokens) with refresh token rotation + OTP (One-Time Password) verification.

  • Video Security: Dynamic token generation for video segments to prevent hotlinking.

  • Containerization: Docker-ready for consistent deployment environments.

πŸš€ Tech Stack Summary

Frontend : Next.js 15, React 18, TypeScript, Tailwind CSS, Redux Toolkit

Backend: Node.js, Express.js, Prisma ORM, Socket.io

Database: MongoDB (Primary), Redis (Cache/Queues)

Cloud/Storage: S3, EC2

Payments: Stripe, Apple StoreKit, CoinPayments

DevOps: GitHub Actions,

Tech Stack

Next.jsExpress.jsPrisma ORMSocket.ioRedisBullMQMongodbCI/CD

Project Links