Selected project

Wellness learning platform from discovery to paid access.

This confidential LMS supports a complete mental-health and wellness education journey: learners browse short courses, sign in, purchase access, and pay through local methods while instructors build, publish, and translate lesson content.

Role: Full-stack product builder
Stack: Next.js, Prisma, Auth, payments
Contribution: Catalog, editor, translation, checkout
Outcome: End-to-end LMS workflow

Workplace wellness course catalog with course cards, categories, instructors, chapters, and enrollment counts

Turned courses into a marketplace

The course grid helps learners compare wellness topics quickly: course image, category, instructor, chapter count, enrollment count, short description, and a clear view-course action.

Built instructor lesson control

Instructors manage lesson metadata, descriptions, publish state, block editing, and HTML editing from one workspace, so each lesson can move from draft to student-ready content.

Created reusable content blocks

The block builder supports basic text, video or image embeds, interactive exercises, multiple choice, flip cards, tables, fill-in-the-blanks, and multiple-response activities.

Connected language and payment

The flow includes login, Bahasa Indonesia lesson translation, checkout selection, bank-transfer order summary, virtual account instructions, payment deadline, and fraud reminders.

Interface evidence

Readable screens from the LMS workflow.

The screenshots cover the actual dark-theme flow: course discovery, instructor lesson editing, translation, sign-in, checkout, and virtual-account payment.

Dark course catalog showing four wellness course cards with category labels, instructors, chapters, and enrollment counts — Course discovery with category labels, course cards, instructor identity, chapter count, and enrollment badges. Open full-size

Instructor lesson editor with lesson title, lesson description, publish toggle, save button, delete button, cancel button, and content templates — Instructor lesson editor for metadata, publishing, save/delete actions, and quick-start content templates. Open full-size

Block editor showing basic content, video or image, interactive exercise, multiple choice, flip cards, table, fill in the blanks, and multiple responses — Content block library for reusable lesson components, interactive exercises, assessments, tables, and card-based activities. Open full-size

Lesson translation editor with Bahasa Indonesia title, description, content edit and preview tabs, and original fallback text — Translation workspace for Bahasa Indonesia lesson title, description, and content, with English fallback context. Open full-size

Dark sign-in screen with Google sign-in, email input, password input, forgot password link, and sign-in button — Authentication screen that gates the learning and payment workflow. Open full-size

Checkout screen with e-wallet, bank transfer, retail store, virtual account bank choices, and order summary — Checkout flow with local payment options, bank selection, course summary, total, and included benefits. Open full-size

Virtual account payment instruction page with account number, merchant name, total amount due, deadline, and fraud warning — Virtual account payment handoff with account number, amount due, deadline, and anti-fraud guidance. Open full-size

Learning platform flow

From course browsing to confirmed payment.

BrowseLearners compare stress, self-care, and digital wellness courses.
PrepareInstructors publish localized lessons with reusable content blocks.
Sign inAuthentication protects learner progress and purchase state.
CheckoutStudents pick e-wallet, bank transfer, or retail payment.
PayVirtual account details guide the final payment outside the LMS.