Role
Solution Architect & Front-End Developer
Client
Concept Dash
Duration
31 Aug - 2 Sep 2026 (roughly 3 days)
Concept Dash runs classroom and geotechnical-software training (PLAXIS 2D/3D, project management, LEAN/Six Sigma) and sold every seat manually — a marketing page, an email, an invoice, no system anywhere in the loop. This engagement answered the question of what it would take to sell and deliver that training online, and produced two things: a complete design for the platform, and a front-end prototype of every screen in it so the decision could be made by walking through the product rather than reading a spec.
The prototype is a Next.js 16 / React 19 app of roughly 10,400 lines across 57 source files, with no runtime dependencies beyond the framework and Tailwind. It covers the public catalogue and course pages, the preview-and-lock curriculum, checkout, the course player with progress and resume, a learner dashboard with orders and certificates, and an admin area with a curriculum builder, learner list and order tracking. A floating "Viewing as" control switches between visitor, learner and admin instantly, so a stakeholder can see all three sides of the product in one sitting without credentials. It compiles to a static export (452 pages) and drops onto Netlify with no server runtime — each dynamic route has a thin server wrapper supplying generateStaticParams. The catalogue is built from the company's real 12 programmes and actual PLAXIS cohort dates, seat counts and prices, deliberately mixed so the UI has to handle all three commercial states: self-paced with a price, live cohort with limited seats, and "price on request" for corporate programmes sold by conversation.
The more interesting half is the design pack: twelve documents covering scope, architecture, data model, both experiences, content protection, payments, open questions, delivery plan and a risk register. Several conclusions shaped the code. Entitlement is defined as one server-side function called at the moment content is requested, on the principle that a padlock icon is decoration and the only thing protecting a paid course is that the video playback token does not exist until the server has checked — the prototype's README states plainly that its own lock is presentational and must not be copied. Only the payment webhook may grant access, never the browser redirect, so the confirmation screen deliberately sits in a "confirming your payment" state and polls rather than assuming success. Courses and cohorts are modelled as separate entities because a course has several dated intakes and an order has to record which one was bought. Money is integer minor units with an explicit currency, because the existing prices are ambiguous dollar figures for courses delivered in Riyadh and Dubai by a Canadian company.
The design work also pushed back on the original sequencing. Management wanted payments first; the plan as briefed would have taken money for self-paced content that did not yet exist. The re-plan sells seats in the scheduled instructor-led courses the business already runs — deliverable without a line of content-platform code — and defers the content platform to a later phase, moving first revenue forward by roughly three months on the documented estimate. The delivery plan also argues, against its own interest, that building should be compared honestly against an off-the-shelf platform before committing.
Tech Stack
Features
- Preview-and-lock course pageEveryone sees the full curriculum with durations; preview lessons play for anyone and the rest show a lock with an enrol prompt, which is the screen doing the actual selling.
- Three-role demo harnessA floating "Viewing as" control switches between visitor, learner and admin with no credentials, so all three sides of the product can be reviewed in one pass.
- Course player with progress and resumeVideo shell, curriculum sidebar, mark-complete, per-lesson and per-course progress, and a computed resume point that drives "Continue learning".
- Admin curriculum builderModules and lessons with reordering and per-lesson preview toggles, with the free-preview count updating live, so publishing a course never needs a developer.
- Order and enrolment trackingAdmin order table with filters and expandable rows showing a payment timeline and the available actions, answering "who bought this, did they pay, how far have they got".
- Webhook-accurate payment confirmationThe confirmation page reproduces the real race between browser redirect and payment webhook, holding a pending state and polling rather than granting access optimistically.
