About MDC Studio

MDC Studio focuses on live broadcasting and visual production, providing broadcast and multicam coverage for medium-to-small concerts, theater productions, and audio events.

Prior to 2021, I was commissioned by the founder to design their official website, paywalled live streaming video platform, and equipment rental management platform (related assets have since been decommissioned).

Official Website

(~November 2020)

Built with HTML/CSS/JavaScript, introducing studio services and highlighting past production showcases.

Event Showcase Webpage

Quotation System

The quotation system was built using PHP. Prospective clients could fill out an inquiry form to receive automated estimates. Upon submission, automated confirmation emails were dispatched to both administrators and clients for structured lead tracking.

Equipment Rental Platform

(~February 2022)

Since the studio's inception, the founder sought a dedicated rental system to diversify revenue streams. During my studies at Taipei Media School, I observed that gear rental workflows typically involve accompanying accessories, maintenance logs, and rental contract generation. To centralize operations, the platform was divided into a Client-facing App and an Admin Portal.

User Rental Cart Page

User Order Status Page

LINE Message Notification

Admin Portal

The admin dashboard provides an instant overview of pending requests and schedules daily equipment pickups and returns.

All Orders Dashboard

Order Details

Contract Generation

Contract Generation 2

For gear inventory, a graphical interface provides full CRUD capabilities. Admins configure daily rental rates, long-term discount tiers, and accessory bundling rules (e.g., automatically adding SD cards when reserving a camera body), delivering comprehensive studio inventory control.

Equipment Creation UI

Blackout Dates (Special Schedules): If in-house production bookings require all gear on-site, admins can lock entire gear categories from external booking, or broadcast maintenance notices to visitors.

Special Schedules Overview

Special Schedule Creation

Technical Implementation

Starting with zero prior backend experience, I taught myself Node.js and JavaScript from scratch. In collaboration with Aaron Kao, the system was architected using Sails.js, Vue.js, and PostgreSQL (leveraging Waterline ORM).

Live Streaming Platform

(~January 2021)

Originating from a university music festival organized by NCCU students, this platform was designed as an exclusive, token-gated live stream for crowdfunding backers. (Active development paused after the festival shifted to a public broadcast model).

System Architecture

Through consultation with the MDC team, a streamlined workflow was devised: backers logged in with an access passcode to view the live concert.

To prevent credential sharing, the backend tracked client IP addresses, session timestamps, and user-agent details.

Workflow