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.
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.
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.
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.
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.
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.
I created reusable components such as VimeoVideo for video playback.
The component connects with the backend API to:
Frontend (Student-Facing Site)
Admin Platform
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.
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.
The original SDD was vague, lacked user journey clarity, and did not fully consider essential scenarios.
At first, the business owner believed a single-layer course structure was enough, without separating sections and lessons.
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.
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.