eGlobal Course Platform

course

Overview

The eGlobal Course Platform is an online learning system that enables tutors to create and manage video courses while allowing students to seamlessly enroll, pay, and learn. The project began with a System Design Document (SDD), which I further refined by detailing user flows, clarifying requirements, and proposing a scalable course structure. From there, I translated the requirements into UI/UX and implemented a fully functional frontend using React and Next.js.


The platform supports both student-facing features (course browsing, enrollment, payments with Stripe and offline methods, secure video playback with Vimeo, and progress tracking) and admin tools (course creation, content management, enrollment and order handling). Different responsive strategies were applied: the student site is fully responsive across devices, while the admin panel follows a desktop-first design for efficiency.

My Role

Requirement Translation

Instead of starting with wireframes, I first refined the user flows directly from the SDD, covering both frontend and backend perspectives.


By turning the unclear document into clear, step-by-step flows, I provided a concrete reference for discussions with the PM and the backend developer.


This approach streamlined alignment early on and ensured that the flows made sense for both the business requirements and the user experience.

UI/UX Design

Designed and built end-to-end user interfaces that included the entire student journey — from browsing courses, enrolling, making payments, to learning — as well as the admin portal for managing courses, uploading videos, handling payments, and tracking enrollments.

Frontend Development

  • Built the frontend architecture with React and Tailwind Css, covering both the student-facing site and the admin portal.
  • Implemented responsive design for course pages, checkout flow, student dashboards, and admin management panels.
  • Integrated with Vimeo for secure video playback and Stripe for online payments, including payment confirmation handling on both ends.
  • Developed reusable React components for forms, video players, course management tools, and admin dashboards to ensure scalability and consistency.

Collaboration

I collaborated closely with the backend developer to align on APIs for enrollment, payments, and course progress.

On the student side, I ensured smooth payment flows with Stripe and Vimeo video access; on the admin side, I worked on course creation and enrollment management.

Since I was responsible for both UI design and frontend development, I used the SDD as a single source of truth. This approach minimized misunderstandings with the PM and backend developer and kept the project on track.

UI Highlights

Course Pages

Courses can be presented on individual detail pages or embedded into other surfaces such as landing pages or digital name cards. The interface information including course details, pricing, and a clear enrollment form.

ui 1-1
Individual detail page
ui 1-2
Embedded into Name Card
ui 1-3
Embedded into Landing Page

Member Center

Students can browse My Courses with progress indicators, review My Orders, directly access purchased courses, and open the detailed course view with video playback and downloadable materials.

ui 2-1
My courses page
ui 2-2
Course access and downloadable materials
ui 2-3
Order details of purchased courses

Admin Management

An admin panel that gives admins the tools to manage courses, students, and payments. From this backend system, they can create and edit courses, upload videos and materials, track student enrollments, and review or confirm payment details.

ui 3-1
Course list
ui 3-2
Edit course content
ui 3-3
Course enrollments list
ui 3-4
Edit each lesson of section

UX Refactor

Technical Highlights

Reusable React Components

I created reusable components such as VimeoVideo for video playback.
The component connects with the backend API to:

  • Load video information name, lesson_id, video_file_url, playback_position.
  • Show loading states while fetching video data.
  • Validate whether the video is enabled before playback.
  • Handle video playback using the video URL provided by the API.
  • The component sends the playback position back to the API at intervals, ensuring students can continue their lessons from the point they last watched.

Responsive Design

Frontend (Student-Facing Site)

Applied full responsive design principles to ensure a seamless experience across desktops, tablets, and mobile devices.
This included flexible layouts with CSS grid and flexbox, scalable typography, mobile-friendly navigation, and optimized video playback on smaller screens.

Admin Platform

Designed primarily with a desktop-first approach, since most course management and data-heavy tasks are handled on larger screens.
Mobile support was implemented as a secondary option, ensuring basic usability while prioritizing efficiency and clarity for PC users.

State Management

Implemented centralized state management for course enrollment and progress tracking using React state and custom hooks. I created a hook called useClassroomto simplify complex UI logic and keep the student views consistent.

This hook handled:

  • Course Data

    setCourseMaterials, setLessonInfofor managing lesson details and downloadable resources.

  • Playback & Lesson Control

    setActiveLessonId, setIsEnabled for switching lessons and toggling availability.

  • UI Status

    setLoaded and section list state to track loading states and control the visibility of sections and lessons

By consolidating these behaviors in a single hook, the system ensured smoother data flow between API responses and the UI, reduced repetitive code, and made it easier to synchronize progress tracking across the application.

Cross-Module Embedding

Implemented support for embedding courses into other modules of the platform, I built a reusable Course component that can be inserted into the Landing Page, allowing admins to select and showcase specific courses directly on their landing pages.

In addition, the same functionality was extended to the Name Card, where users can attach selected courses to their profile. The embedded courses appear as a list on the name card, with each item linking directly to its respective course detail page.

This modular approach improved reusability across the system and gave tutors more flexibility in how they present and promote their courses.

Challenges & Solutions

Unclear Requirements

The original SDD was vague, lacked user journey clarity, and did not fully consider essential scenarios.

Solution
I conducted market research and reviewed similar platforms to identify best practices. Then, I converted the fragmented requirements into complete user flows, and proposed reasonable workflows for discussion with the team.

To ensure long-term scalability, I also highlighted essential features that needed to be included in the first version for future growth.
Different Views on System Architecture

At first, the business owner believed a single-layer course structure was enough, without separating sections and lessons.

Solution
Through market research and competitive analysis, I found that leading platforms all use a section to lesson structure to support scalability and improve the learning experience.

Then I proposed adopting this model from the beginning, ensuring the platform would meet user expectations and avoid costly restructuring in the future.
Handling Vimeo Integration

Both the backend developer and I were working with Vimeo for the first time, so we had to explore the official documentation and experiment with different approaches.

Solution
Initially, I tried using oEmbed, but it didn't provide enough flexibility for our needs. Since we also had to control playback position and update progress back to the API, I decided to implement the player with an iframe-based approach, which gave us the most straight forward way to manage video controls while keeping access secure.

Impact

By bridging the gap between an incomplete SDD and a functional product, I delivered a frontend solution that not only improved tutor efficiency in managing courses but also gave students a seamless learning experience.

Along the way, I introduced a scalable section to lesson content structure based on market research, ensuring the platform would meet future needs. I also tackled Vimeo integration for the first time, experimenting with multiple approaches before choosing an iframe-based solution to support playback control and progress tracking.
  • This project demonstrates my ability to:
  • Turn requirements into usable UI/UX designs.
  • Make forward-looking product decisions (e.g., scalable course architecture) backed by research.
  • Build scalable and maintainable frontend applications with modern frameworks.
  • Solve new technical challenges through exploration and structured implementation (e.g., Vimeo integration).
  • Adapt design strategies for different user groups (full RWD for students, desktop-first for admins).
  • Collaborate closely with a backend developer to align on APIs and reduce miscommunication.

Get in Touch

I'm open to new opportunities and collaborations. Whether you're looking for a frontend developer or a product-minded engineer, feel free to reach out.

UJHong | Frontend Developer