FRM← back to projects05 / 05

05 / CASE STUDY

BOOTCAMP CAPSTONE

Vidio Belajar.

A checkout that actuallytakes the money.

A course platform with a genuine Midtrans payment flow, built as my Harisenin bootcamp capstone.

STATUS
CAPSTONE
INPUT
COURSES
OUTPUT
ACCESS

BUILT WITH

  • React
  • Express
  • Redux Toolkit
  • Midtrans
  • PostgreSQL

01 / CONTEXT

I set that baron myself.

As a bootcamp capstone this could have stopped at a checkout button that pretends to succeed. I refused to stop there: the transaction had to be genuinely processed, with every bit of status handling that follows from it.

02 / EXECUTION

From picking a courseto opening the material.

The Midtrans payment gateway was integrated end to end for real transactions, the REST API was secured with JWT authentication, course material uploads were handled with Multer, and client state was managed with Redux Toolkit.

  1. 01PICK COURSE
  2. 02CHECKOUT
  3. 03MIDTRANS
  4. 04PAYMENT STATUS
  5. 05MATERIAL ACCESS

OPEN

03 / LEARNED

The first refactordriven by deployment.

Built as the capstone, then migrated from Railway to Vercel + Neon PostgreSQL when the free tier changed. It was my first taste of rewriting part of a system whose code was already correct, because the place it runs changed.

PAYMENTMidtrans, real transactions.
AUTHJWT on every endpoint.
MATERIALFile uploads through Multer.

SCREENSHOTS

Taken straight from the application while running.

Vidio Belajar storefront: hero banner over a grid of course cards.
The storefront half: browse, then enrol. The easy half.
Admin panel listing courses with their category, author, price and discount.
Admin side: courses, prices, and the discount each one carries.

NEXT PROJECT

Hadirin01 ↗