Oleksandr Korotun

NOISM Academy

Project cover image

Production course platform for selling video programs online. I owned the frontend architecture, payment integration, CMS modeling, and authentication flows while adapting to evolving business requirements over time.

TypeScript
React
Next.js
Tailwind CSS
Framer Motion
Stripe
GraphQL
Hygraph CMS
Zustand
Nodemailer
Vimeo SDK
FFMpeg

  • client

    NOISM Hairculture

  • platform

    Digital Learning / LMS

  • role

    Development, Product

  • status

    Production

01

Assessment

1.1 / Overview

Digital Learning Platform

NOISM Academy is a full-stack learning platform built to deliver premium video education in hair extensions and braiding techniques. It bridges the gap between structured online video courses and direct offline offerings like 1:1 masterclasses. Designed for aspiring beauty professionals, the platform targets motivated learners who invest seriously in specialized techniques. It is currently live, hosting flagship video programs with a scalable roadmap for catalog expansion.

Role: Lead Full-Stack Architect

I led the project end-to-end — acting as frontend architect, full-stack developer, and technical decision-maker.

  • Product Thinking

    Translating business goals into a structured digital product.

  • Frontend Architecture

    Preparing build-ready layouts and implementing Next.js logic.

  • Backend & CMS

    Modeling complex relational content structures in Hygraph.

  • Payments & Auth

    Secure integration of Stripe Webhooks and Clerk Identity.

  • Infrastructure

    Handling deployment, performance, and video delivery SDKs.

  • Decision Making

    Navigating technical trade-offs in a solo environment.

Architect's Perspective

The project required balancing product thinking, technical architecture, and visual execution within a solo development environment.

1.2 / Visual Identity

Visual Harmony & Premium Experience

To reflect the premium positioning of NOISM, the UI was carfully designed around the font family of Akzidenz-Grotesk. The focus remained on high-contrast visual harmony, utilizing generous whitespace and premium imagery to elevate the educational content beyond a standard LMS.

  1. H2

    Akzidenz-Grotesk Extended

  2. Body

    Akzidenz-Grotesk Light

1 / 3
Homepage Look
Video Player Interface
1:1 Masterclasses
Homepage Look
Video Player Interface
1:1 Masterclasses
Homepage Look
Video Player Interface
1:1 Masterclasses
Scroll to explore

  • Minimalist Grid

    Intentional use of negative space to focus on technique.

  • Content First

    Large-scale video assets and professional stylizing photography.

  • Brand Depth

    A cohesive light aesthetic for a high-end salon feel.

02

The Problem

  • Business KPIs
  • Enable Premium Sales
  • Catalog Scalability
  • Offline Booking Sync
  • Product Maintainability

Key Technical & Strategic Challenges

I led the project end-to-end — acting as frontend architect, full-stack developer, and technical decision-maker — personally responsible for every high-stakes architectural choice and their downstream consequences.

  • 01
    Trust & Value Perception

    Premium pricing requires an interface that communicates credibility. The UX had to bridge the gap between "online video course" and "professional investment."

  • 02
    Non-Technical Ownership

    The client needed full autonomy over descriptions, pricing, and lesson structures without touching the codebase.

  • 03
    Maintainability

    Architecture had to be extensible to support a growing catalog of courses without requiring structural rewrites or developer intervention.

  • 04
    Media Performance

    Video content required professional-grade optimization to ensure seamless delivery while maintaining high fidelity for visual techniques.

03

The Solution

3.1 / Architecture Overview

Building on Managed Infrastructure

The platform was built as a unified full-stack application using Next.js (Pages Router). To minimize infrastructure overhead while maintaining complex data relations, I bypassed a traditional database server in favor of a managed GraphQL Content Layer.

This architecture treats the CMS not just as a blog, but as a relational engine that governs course lessons, user ownership, and video metadata.

Technical Foundation

  • TypeScript
    01
    TypeScript

    Type-safe architecture

  • React
    02
    React

    Component-driven UI

  • Next.js
    03
    Next.js

    Unified Full-stack Framework

  • GraphQL
    04
    GraphQL

    Relational Content API

  • 05
    Zustand

    Scalable state management

  • Nodemailer
    06
    Nodemailer

    Email sending service

  1. Stripe
    Why Stripe

    Selected for EU Tax Compliance and a robust webhook ecosystem. Ensures purchases are confirmed server-side before course access is triggered.

  2. GraphQL
    Why GraphQl

    Hygraph allowed for Structured Modeling without server maintenance. It empowered the client to manage course lesson order and lesson metadata independently while keeping queries extremely lightweight.

  3. Next.js
    Why Next.js
    • Rendering Flexibility: Static generation for marketing pages, ISR for courses, SSR for real-time tasks
    • API Routes: For handling webhooks in both Stripe and Clerk cases
    • Middleware: Built-in support for custom authentication flows
    • Framework: A mature ecosystem and long-term maintainability
04

Key Features

4.1 / Delivered Functionality

Production Capabilities

The platform was built to handle the full lifecycle of a premium educational product—from secure discovery to transactional integrity and content delivery.

001

Authentication & Access Control

Secure user entry with role-based permissions.

002

Secure Payment Flow

A robust pipeline using Stripe webhooks for processing transactions securely.

003

CMS-Driven Architecture

Decoupling content management from the frontend to allow updates independently.

004

Transactional Email System

Automated communications for user actions and business notifications.

005

SEO & Metadata

Optimized for search visibility with modern search engine optimisation techniques.

006

Media Optimization

High-performance asset handling ensuring fast load times for images and smooth video playback.

007

Progressive Web App

Installable app, with both desktop and mobile optimization.

05

Technical Deep Dive

5.1 / System Architecture

Technical Blueprint

The system is designed around event-driven state changes. External signals — primarily payment confirmations — trigger secured API mutations that define user access levels in the content layer.

Nodemailer

Nodemailer

Email

Stripe

Stripe

Payments

Vimeo

Vimeo

Media

Clerk

Clerk

Auth

GraphQL

Hygraph

CMS

Next.js
Next.js
version 14
Sources:Multi-tenant SaaS
Core:SSR / ISR / API Routes
Client:Premium LMS Interface
5.2 / Checkout Flow

Purchase Architecture

No access is granted from the frontend — everything depends on webhook confirmation to enforce strict server-side validation, ensuring that only authenticated and verified events trigger any changes in user permissions or resource availability.

  • Checkout Initialization

    User selects a course and triggers the secure session creation on backend.

    Zustand → Next.js API → Stripe

  • Payment Confirmation

    User is redirected to Stripe’s secure hosted checkout page for payment processing. The frontend does not handle or confirm payment itself.

    Stripe Checkout

  • Webhook Validation

    Crucial security step: The server verifies the Stripe signature and extracts session metadata.

    Next.js API & Stripe Webhooks

  • Access Provisioning

    Final confirmation. Course access is granted only after server-side validation is complete.

    Graphql Mutation
5.3 / Models & Relations

Data Mutation Strategy

Relying on relational logic and database relationships rather than simple boolean states to handle all data mutations and access control in a secure and scalable manner.

  • Fragile Approach

    Flag-based rendering
    mutation grantAccess($userId: ID!) {
  updateMember(
    where: {id: $userId},
      data: {
        hasPurchasedCourse: true
      }
  )
}

    Harder to scale. Doesn't support multiple courses naturally. Relies on client-side state flags that are prone to desync.

  • Relational Strategy

    GraphQL Mutation
    mutation connectCourse(
  $userId: ID!, $courseId: ID!) {
    updateMember(
      where: {id: $userId},
        data: {
          purchasedCourses: {
            connect: {id: $courseId}
        }
      }
    )
  }

    Access is declarative. We query the relationship directly. Scales effortlessly to bundles and tiered memberships.

Advantages of Relational Modeling

  • 01
    Anti-Fragile

    By modeling user access through relational data instead of boolean flags (e.g., isEnrolled, hasAccess), the system avoids brittle state management. Access is derived from actual purchase relationships rather than manually maintained flags.

  • 02
    Naturally Scalable

    Every purchase creates a new relational entry between a member and a course via a GraphQL mutation. There is no need for additional state synchronization or manual updates.

  • 03
    Tier-Ready

    While the current model is based on single purchases, the relational structure allows easy extension into tier-based subscriptions. A tier entity can be introduced as another relation (member → tier → courses), without altering existing purchase logic.

  • 04
    Declarative Auth

    Access control is expressed through declarative rules instead of imperative condition checks across components. Route protection, content visibility, and course access are derived directly from the authenticated user’s state and relational data.

5.4 / Access Pipeline

Rendering Logic & Access Control

The UI renders conditionally based on structured relational data — not local assumptions.

  • AuthClerk Validation
  • IdentityHygraph Member
  • RelationalCourse Link
  • RenderConditional UI

This pipeline ensures that all content access decisions — from dashboard visibility to individual video playback — are derived exclusively from verified authentication and relational data rather than local state or assumptions.

5.5 / Middleware

Route Protection

Authentication and authorization responsibilities are cleanly separated. Next.js middleware intercepts every request before a page renders — enforcing rules at the edge.

middleware.ts — active rules
7 rules
Protected
/dashboard(.*)
PROTECTED
/checkout(.*)
PROTECTED
/support(.*)
PROTECTED
Public
/
CACHED
/courses
CACHED
/group-classes
CACHED
/1-on-1-masterclass
CACHED

Middleware owns identity — pages own content. No overlap.

5.6 / CMS Driven Architecture

CMS-Centric Content Flow

Content updates are deliberate, so rendering follows a build-centric philosophy.

Content lifecycle

Creation

Hygraph CMS

Course added

Structure

Modules & Lessons

Course structured

Generation

Next.js SSG

Static Assets

Revalidation

ISR Hybrid

Periodic Updates

Performance

Pure static speed

Efficiency

No runtime queries

Scalability

Handles heavy load

5.7 / Incremental Static Rendering

Hybrid Rendering

Moving from standard server-side rendering to Hybrid Static Regeneration had instant impact on performance and data traffic.

pages/course/[slug].tsx
export async function getServerSideProps() {
export async function getStaticProps() {
const course = await getCourse(params.slug);
return { props: { course }
, revalidate: 3600// Background refresh every 1hr
};
}
5.8 / Playback

Media Delivery Architecture

The media delivery architecture leverages the Vimeo Player SDK for high-quality frontend playback, server-side relational gating via Hygraph, and a custom FFmpeg CLI pipeline for video optimization, prior to Vimeo upload.

01
UI Layer

Player Experience

Interactive controls & quality switching

02
Auth Gate

Relational Ownership

Gated via Hygraph Member-to-Course link

03
Infrastructure

Vimeo Hosting

Global CDN & adaptive bitrate streaming

04
Video Optimisation

FFmpeg CLI

Custom pipelines for optimal media delivery

By offloading bandwidth management and storage complexity to Vimeo, the system prioritizes premium delivery quality while maintaining absolute control over content authorization.

5.9 / summary

Why This Architecture Matters

The system is designed to scale in features and content without increasing operational complexity.

  • Security
    Event-Driven

    Webhook-based state mutations ensure the system reacts to external triggers (payments) with 100% reliability.

  • Architecture
    Relational

    Ownership is modeled through data relationships, providing a single, declarative source of truth for access.

  • Operations
    CMS-Controlled

    Content autonomy allows for rapid updates and course management without touching a single line of code.

  • Infrastructure
    Decoupled

    Independent systems for auth, payments, and content minimize the blast radius of any single failure.

Intentional Design Goals

This architecture is foundational to achieve scale and operational simplicity by fostering horizontal expansion through new courses and future-proof monetization, all while minimizing manual intervention to empower non-technical management.

06

Outcomes & Impact

6.1 / Revenue

Market Validation

The first launched premium course has already generated revenue in the thousands (USD) range with positive user reviews.

Market Validation Phase:Complete

Validating market demand for structured, high-ticket beauty education through premium positioning and a frictionless platform experience.

  • Pricing StrategyPremium Filter
  • Product StatusRevenue-First
  • User TrustVerified

Operational Transformation

Reducing technical debt and manual overhead to enable sustainable and organic business growth.

Pre-Launch

Manual Coordination

Education offerings required direct human oversight. Launching new material involved heavy friction and systemic uncertainty.

Hand-led Payments

Confirmations and access grants required manual verification and direct handling of customer requests.

Result: Limited scalability & high operational pressure.
Post-Launch Engine

Event-Driven Flow

Course publishing is CMS-driven (SSG/ISR). Payments are automated via Stripe, triggering webhook-driven access provisioning instantly.

The New Client Workflow

  • Upload
  • Curate
  • Notify
Impact: Zero-touch revenue stream.
Autonomous Branch

The online education branch is now fully automated, allowing it to function as a 24/7 revenue engine without manual intervention.

Automated CRM

Critical events (Purchase, Access Grant, Onboarding) trigger automated transactional emails, removing the need for follow-ups.

Frictionless Scale

The client no longer handles coordination; they curate content. This shift effectively enabled a new, scalable revenue stream.

6.2 / Performance

Real-World Performance

The application achieves strong technical metrics, resulting in fast load times, smooth interactions, and a consistent experience across devices.

Lighthouse Analysis

Environment: Production / Desktop

  • 98
    Performance
  • 80
    Accessibility
  • 100
    Best Practices
  • 92
    SEO

Perception of Quality

Refined visuals, Akzidenz-Grotesk typography, and high-quality Vimeo delivery. Performance supports the premium brand positioning.

  • 0.3s

    First Contentful Paint

  • 1.2s

    Largest Contentful Paint

  • 0ms

    Total Blocking Time

  • 0

    Cumulative Layout Shift

6.3 / Autonomy

Stability & Reliability

Infrastructure designed for predictable, real-money transactions.

Encrypted

Isolated Environments

Strict separation between Development and Production via Clerk & Stripe keys.

Verified

Webhook Integrity

Stripe CLI-validated local testing ensuring 1:1 parity with live production events.

Optimal

Zero-Incident Record

100% successful payment processing with no production-level incidents to date.

Strategic Impact

Payment architecture was the most sensitive part of the system due to real-money implications, but it is now stable and predictable.

07

Lessons Learned

7.1 / Payments

Stripe & Secure Event Handling

Proper Stripe integration isn't just about the API. It's about the infrastructure around it. The complexity of signature verification and CLI forwarding is a feature, not a bug.

  • Environment separation

  • Signature verification

  • CLI forwarding for local development

  • Careful event handling

Payment systems must be event-driven and server-validated — never client-trusted.

7.2 / Database

Relational Data as Access Control

Modeling Member ↔ Course relations in GraphQL proved significantly more robust than boolean flags. By mutating ownership only after webhook confirmation, the relation becomes the absolute source of truth.

7.3 / Responsibility

Solo Product Ownership

Operating independently across product, architecture, and delivery.

  • The Burden

    Handling fluid requirements and independent architectural vision without a technical sparring partner.

  • The Privilege

    Full ownership of system design standards and direct accountability for the production delivery.

Solo vs Team Dynamics

Paralleling film my film production expirience: Large teams multiply output but require massive coordination. Solo work limits scale but maximizes control. This project reinforced the importance of preparation, foresight, and architectural clarity when working alone. In distributed systems, mistakes compound quickly.

7.3 / Responsibility

Future Improvements

Things I would consider if starting over right now, or by the next big junction the project might face in a future.

  • Backend Architecture

    Move away from CMS-first constraints toward a more explicit backend layer.

  • Framework Direction

    Reevaluate the use of Next.js — especially for a more client-driven experience.

  • Scalability

    Define clearer separation between frontend, backend, and content systems to make future growth less coupled.