Atomxel logo
Book a Call →
CASE STUDY
EdTech Company
Case Study

Designing a Scalable, Interactive
Developer Academy Platform

Mobile-First
Learning
Interactive
Sandbox
Secure &
Verified
Cloud-Native
Architecture
EdTech Company Dark Mode Landing Page
EdTech Company Light Mode Landing Page
1. CURRICULUM
→
2. UI/UX DESIGN
→
3. REACT & FIREBASE
<div class="sandbox">
<TechAcademy />
</div>
→
4. HOSTING & LAUNCH
PRODUCTION LAUNCH
Category :
EdTech Platform
Client :
Confidential
Timeline :
3 months
Tech Stack :
React, Firebase, Razorpay

01 . The Challenge

Before & After: Overcoming traditional abstract learning barriers
Designing and implementing a high-performance, security-focused practical learning infrastructure that scales dynamically.

To deliver a modern "0 to 1" cohort experience, the platform had to overcome several critical technical and operations challenges:

  • •MFA Security & Onboarding: Implementing a secure, frictionless login/signup flow with multi-factor authentication (MFA) using Phone OTP and email verification to protect user accounts.
  • •Dynamic Document Generation: Building a reliable, automated Certificate Generator that instantly creates high-quality, personalized PDF completion certificates with unique student verification metadata.
  • •Payment & Promotion Orchestration: Integrating Razorpay securely to process course transactions while seamlessly validating custom referral/promotional codes in real time.
  • •Multi-channel Communication: Coordinating instant, high-deliverability notifications across both WhatsApp and Email for payment confirmations, cohort schedules, and course updates.
  • •Centralized Operational Control: Creating an intuitive Admin Dashboard to monitor platform metrics, manage user cohorts, trigger notifications, and control discount promotions dynamically.

02 . The Solution

EdTech Company Admin Dashboard — event analytics, email status, and diagnostics

Centralized Admin Dashboard featuring real-time event analytics, Brevo email integration status, and diagnostic sandboxes.

We designed and deployed a robust, production-grade application architecture to address the platform's requirements:

  • •React & Firebase Architecture: Developed a modern React frontend backed by Firebase Auth, supporting both standard Email Sign-ups and Phone-based OTP for Multi-factor Authentication.
  • •Automated Generation Engines: Programmed an automated Certificate and Coupon Generator that handles PDF creation and coupon code logic directly within Firebase Cloud Functions.
  • •Razorpay Checkout Flow: Integrated a secure Razorpay API payment gateway offering unified checkout popups, auto-retry logic, and instant course access upon successful transaction.
  • •Integrated Notification Pipeline: Created a cloud-triggered messaging workflow that delivers real-time notifications to students on WhatsApp and Email using Firebase database triggers.
  • •Feature-Rich Admin Dashboard: Built a centralized, secure control center for administrators to oversee student progress, manage coupons, issue certificates, and review billing histories.

By combining a highly responsive React frontend with Firebase's scalable serverless backend and Razorpay's flexible checkout, the platform delivers an outstanding and reliable developer education experience.

03 . Visual Interfaces

Take a closer look at the key responsive interfaces designed and implemented for the EdTech Company developer academy.

techacademy.com/cohort/agentic-ai
EdTech Company Dark Mode Landing Page Design
01 . Dark Theme Landing Page

A conversion-focused hero layout built on a dark theme. It features bold headlines, event scheduling metadata, and an integrated reservation card with a real-time countdown clock and payment breakdown.

techacademy.com/cohort/agentic-ai?theme=light
EdTech Company Light Mode Landing Page Design
02 . Light Theme Landing Page

A clean, high-contrast light-themed variant optimized for readability. It presents clear rating matrices, key course features, pricing details, and seat availability indicators.

techacademy.com/workshops
EdTech Company Workshop Catalogue Design
03 . Workshop Catalogue

A dashboard displaying cohort course cards. Each card displays topic tags, session duration, capacity constraints, target levels, syllabus outlines, and direct access buttons.