Engliven Platform Modernization

Company Overview

Engliven runs corporate English training programs across Indonesia. As the business grew, a single application serving all roles — internal staff, teachers, students, and prospective clients — became a constraint. Each audience had different needs: staff needed financial reporting and HR tools, teachers needed structured lesson management, students needed a clean self-service learning journey, and prospects needed a fast registration path.

The modernization keeps all of this coordinated. Every portal reads and writes the same production data through a shared service layer, so a class scheduled by staff immediately appears in the teacher portal and the student portal — without duplicating logic or maintaining parallel databases.

Team & delivery

Designed, built, and deployed by Ivan Andhika as Lead Engineer at Engliven, working closely with the operations and academic teams.

Tech Stack

Features & modules

• Admin portal (core.engliven.com): executive dashboard with operational KPIs and alerts; full finance module covering invoices, expenses, payments, P&L, cash flow, balance sheet, and forecasting; HR and teacher payroll with attendance-weighted calculations; sales pipeline from leads through confirmed orders; academic operations and Speak With Confidence program management.
• Student portal: class dashboard, session history, homework tracking, and progress views; full Speak With Confidence journey from class booking through feedback and certificate; AI roleplay session interface with role cards, objectives, and guided phrase practice.
• Teacher portal: class and lesson plan management; post-class evaluation forms with structured fields for attendance, levels, and teaching notes; Speak With Confidence facilitation workflow; AI roleplay scenario builder with live session panel for per-student role assignment.
• Registration portal (register.engliven.com): seven-step lead capture with separate branches for adult programs, kids programs, and test preparation; Zod-validated forms throughout; connected directly to the FastAPI registration API.
• Marketing site (engliven.com): rebuilt from WordPress to Next.js with full legacy blog URL preservation; split acquisition paths for individual learners and corporate clients; program pages with JSON-LD structured data for both standard search and generative AI visibility; WhatsApp and contact form lead capture.

Operations & data scale

• Five independently deployed applications: React admin SPA, React student SPA, React teacher SPA, React registration SPA, and a Next.js marketing site.
• One FastAPI backend serving all four React portals, running alongside the production Laravel application on shared MySQL infrastructure.
• Shared UI component library with three theme variants (admin, teacher, public), referenced across portals without coupling their release cycles.

Problem

A stable Laravel backbone handles the operational core reliably. But as the product added more surfaces — financial dashboards for staff, evaluation forms for teachers, booking flows for students, and a multi-step registration funnel for new leads — building everything inside one codebase meant every change was a shared risk and no interface could be optimized for any single role.

Approach

Rather than replacing the running system, the work extended it. A FastAPI service layer sits alongside the existing Laravel application, reading from the same production MySQL database with compatible authentication — so both can operate simultaneously without a migration. Each portal is a separate React application, independently deployed via GitHub Actions, with its own scope and its own design tokens from a shared component library. The marketing site was rebuilt from WordPress to Next.js to regain control over performance, blog content, and structured data for search visibility.

System Architecture

• Each portal is a separate React application with its own Vite build, deployment pipeline, and routing scope — connected only through the shared FastAPI API and a common UI token library.
• The FastAPI backend is the integration boundary: it serves all React portals while the Laravel application continues handling its own server-rendered workflows, both reading and writing the same MySQL tables.
• GitHub Actions manages CI/CD for each application independently: build, test, and rsync deploy to its production subdomain, with environment configuration injected per target.
• Visual consistency across independent portals is maintained through a shared token system with three theme variants (admin, teacher, public) rather than duplicated stylesheets per app.

Outcome

Five production applications now cover the full organization. Staff manage finance, payroll, sales, and academic operations from a single modern admin interface. Teachers plan lessons, submit evaluations, and run the Speak With Confidence speaking program end to end. Students book classes, track their progress, and receive structured feedback. New leads move through a multi-branch registration flow tailored to their program type. The marketing site acquires and qualifies individual and corporate prospects, with structured data serving both traditional search and AI-driven discovery.

Engineering Challenges

• Challenge: Running a new service layer against a production Laravel database without a migration Solution: FastAPI uses async SQLAlchemy against the existing MySQL schema, with bcrypt password verification compatible with Laravel's user table — so both systems can authenticate users and operate in parallel without any schema change or data movement.
• Challenge: Translating a multi-variable payroll policy into auditable code Solution: Teacher pay depends on attendance, class type, delivery mode, and commercial segment. The rules were documented from operations, modeled as an explicit resolution tree in Python, and validated against historical pay runs before replacing the manual spreadsheet process.
• Challenge: Keeping an AI-assisted feature reliable in production with unpredictable model outputs Solution: The roleplay scenario generator uses three model tiers in sequence: Gemini for quality, Mistral as the first fallback, Hugging Face as the final tier. Each tier validates structured JSON output before passing it downstream and retries within its tier before escalating — so the feature degrades gracefully rather than failing hard.

Key Contributions

• Extended a running production system with a new API layer and five independent portals — no migration, no downtime — by keeping the shared database and aligning the authentication schemes between Laravel and FastAPI.
• Built a payroll engine that resolves teacher compensation from multiple variables: attendance, class type, delivery mode (online vs onsite), and commercial segment (retail vs corporate) — translating documented business rules into code that matches what the finance team expects each pay cycle.
• Implemented a tiered AI generation chain (Gemini → Mistral → Hugging Face) for the roleplay toolbox, with structured output validation at each tier and automatic fallback when a model fails, so the feature stays available in production even when one provider is unavailable.
• Rebuilt the marketing site from WordPress to Next.js with full blog URL preservation, so existing search rankings were protected while the team gained control over performance and content.
• Established a shared UI component library with three theme variants (admin, teacher, public) to maintain visual consistency across portals that are built and deployed on independent timelines.