Webinar & Payment Management System for Remian Diagnostics | Saul Mupalia

Case Study: Building a Complete Webinar & Payment Management System for Remian Diagnostics

Role: Full-Stack Web Developer

Tech Stack: Python, Django, PostgreSQL, Bootstrap, JavaScript, Safaricom M-Pesa API, Celery, Heroku

Overview

Remian Diagnostics needed a robust, automated platform to handle webinar registrations, process payments, and manage Continuing Professional Development (CPD) points for medical professionals.

I architected and developed a full-stack web application from scratch that streamlines the entire lifecycle of a webinar—from content creation and user registration to automated payment verification and post-event reporting.

The Challenge

Managing webinars manually via spreadsheets and manual payment verification is prone to human error and scaling issues. The client needed a system that could:

Automatically verify payments made via Kenya's mobile money service, M-Pesa.
Calculate and award CPD points based on webinar attendance.
Allow staff to easily create rich-text content and manage users.
Generate print-ready reports and CSV exports for administrative records.

Key Features & Technical Implementations

1. Seamless M-Pesa API Integration (C2B & STK Push)

Integrating a reliable payment gateway was the most critical component of this project. I integrated the Safaricom Daraja API, utilizing both STK Push (prompting the user's phone directly) and C2B (Customer-to-Business) webhooks.

Webhook Architecture: Built secure, asynchronous endpoints to receive Validation and Confirmation payloads from Safaricom.
Data Sanitization & Error Handling: Implemented robust try-catch blocks and data truncation (e.g., limiting Transaction IDs to 20 characters) to prevent database crashes (StringDataRightTruncation errors) when Safaricom sends malformed or duplicate retry payloads.
Automated Status Updates: The system automatically cross-references the M-Pesa BillRefNumber With the user's account, validates the payment amount, and transitions the user's registration status from Pending to Confirmed in real-time.

2. Rich Content Management with CKEditor 5

To give the administrative staff full control over webinar descriptions and blog posts, I integrated CKEditor 5.

Configured a custom toolbar allowing for advanced text formatting, image insertion, and responsive tables.
Cloud Deployment Challenge: Addressed Heroku’s ephemeral filesystem by configuring WhiteNoise for static file delivery and setting up external cloud storage routing to ensure images uploaded via the editor persist across server restarts.
Frontend Rendering: Wrote aggressive CSS reset rules (overflow-wrap: break-word, max-width: 100%) to ensure that raw HTML generated by the editor renders beautifully on mobile devices without breaking the container width or causing horizontal scrolling.

3. Advanced Admin Dashboard & Reporting

I built a custom, intuitive dashboard tailored to the staff's workflow, bypassing the generic Django admin panel for a better user experience.

Interactive Data Tables: Integrated dynamic searching, filtering by webinar, and AJAX-powered status toggles to manage hundreds of participants effortlessly.
Print-Optimized Reports: Utilized CSS @media print queries to strip away navigation and buttons, generating clean, official PDF/Print reports complete with branded headers and automated timestamps.
Data Exporting: Engineered a custom JavaScript solution to parse the DOM and instantly export filtered participant data (Name, ID, Registration Number, and CPD Points) into perfectly formatted CSV files for external audits.

4. Automated CPD Points & Real-Time Countdowns

To incentivize attendance, the platform automatically manages CPD points.

Developed a JavaScript-driven real-time countdown timer that tracks when a webinar concludes.
Built an automated awarding engine that calculates a user's attendance percentage based on their entry/exit timestamps and assigns the appropriate pro-rated CPD points.

The Impact

By automating the registration and payment verification pipeline, the platform completely eliminated the need for manual payment reconciliation. Medical professionals can now register, pay, and receive their meeting links and CPD points seamlessly, while the Remian Diagnostics staff saves hours of administrative overhead every week.

Conclusion

This project was a fantastic opportunity to blend complex backend API integrations with a clean, user-friendly frontend. Successfully handling asynchronous webhooks, managing production-level static files on Heroku, and designing responsive, print-friendly UIs deeply strengthened my capabilities as a full-stack developer.

You can find me and follow my journey here:

💼 Connect on LinkedIn: For professional networking, insights on software architecture, and discussions on the business side of web development. Let's connect here
📺 Subscribe on YouTube: For full video tutorials, system design breakdowns, and deep dives into Python and Django. Click here to subscribe
📱 Follow on TikTok: For quick, bite-sized coding tips, debugging hacks, and a behind-the-scenes look at my day-to-day life as a developer. Follow me here
📘 Connect on Facebook: Join the conversation, ask questions about this tutorial, and interact with other developers. Like the page here