Darriel.

Find your way

Work with me / Kolaborasidarrielmarkerizal@gmail.com
LinkedInGitHubGitLab
Back to selected work

Learning management

One SDH

A bilingual school LMS with role-specific analytics, course enrollment, teaching resources, and content-production workflows.

My role

Frontend Developer at Suitmedia

Visit website
One SDH: public sign-in page preview
Public sign-in page preview
Vue pages in the codebase
56

Across 20 top-level route folders.

analytics role views
4

Head Office, School Leader, Homeroom, and Subject Teacher.

course-flow pages
3

Course catalog, course detail, and My Courses.

The work

What I built

I worked as the frontend PIC on a Nuxt and Vue learning platform in Indonesian and English. The interface serves teachers, school leaders, head-office staff, and content teams, with views tailored to each workflow.

  1. 01

    Built bilingual frontend workflows for teachers, school leaders, head-office staff, and content teams.

  2. 02

    Implemented four role-specific analytics views and the ELC course flow, with API integration, enrollment, search, filters, and pagination.

  3. 03

    Implemented a three-stage Video Log workflow spanning pre-production, production, and post-production.

About these numbers

Page counts describe repository scope. The analytics implementation includes mock data, so analytics values are not presented as production results.

Inside the workflow

The same platform, different working days.

A teacher, school leader, and content producer need different parts of a learning platform. As frontend PIC, I worked on One SDH’s Indonesian and English interfaces, connecting the screens to APIs and shaping the interactions around those roles.

  1. 01

    Find the relevant view

    Analytics has separate views for Head Office, School Leader, Homeroom, and Subject Teacher.

  2. 02

    Find and join a course

    The ELC flow connects a course catalog, course detail, and My Courses with enrollment, search, filters, and pagination.

  3. 03

    Follow content production

    Video Log represents pre-production, production, and post-production as three stages within the LMS.

Role-specific interfaces and meaningful data

The analytics interface has four role-specific views, while ELC connects three course pages through API-backed search, filters, pagination, and enrollment. Video Log introduces another interaction model with three production stages. The shared Nuxt/Vue frontend brings these different workflows into an Indonesian and English application.

Built with