Project Archive

A complete collection of web, mobile, full-stack, and product work.

Private architectureSystem dossier / QUIZKEN

Private system architecture

Technical implementation details for this production system are not publicly disclosed.

Private implementation
Private architecture.

The production architecture and implementation repository for this project are private.

Repo confirmedSystem dossier / THAUPHIM

Streaming request flow

A client-side movie request is normalized, resolved to an HLS source, then streamed into the browser player.

Verified from ThauPhim source ↗

The same OPhim service contract supports the Next.js web client and React Native interface.

  1. 01ViewerSelects a titleclient
    Select
  2. 02Next.js / RNRequests movie dataclient
    GET movie
  3. 03Movie serviceAxios + normalizationservice
    Fetch
  4. 04OPhim APIMetadata + m3u8 URLexternal
    m3u8
  5. 05HLS playerHls.js / native HLSruntime
    Media segments
  6. 06Video elementStreams to vieweroutput
  1. 01ViewerSelects a titleclient
    Select
  2. 02Next.js / RNRequests movie dataclient
    GET movie
  3. 03Movie serviceAxios + normalizationservice
    Fetch
  4. 04OPhim APIMetadata + m3u8 URLexternal
    m3u8
  5. 05HLS playerHls.js / native HLSruntime
    Media segments
  6. 06Video elementStreams to vieweroutput
  • Request
  • Response
  • Event / realtime
  • Local handoff
Repo confirmedSystem dossier / CONNECTCG

Social platform architecture

Authenticated API requests, AI moderation, persistence, realtime events, media storage, and encrypted chat are split into two representative flows.

Verified from ConnectCG source ↗

A JWT-authenticated post passes Gemini moderation before persistence and realtime distribution.

  1. 01React clientAxios + JWTclient
    POST + JWT
  2. 02Spring SecurityValidates identityservice
    Authorized
  3. 03Post serviceCoordinates publishservice
    Moderate
  4. 04GeminiContent moderationexternal
    Approved + save
  5. 05MySQL + MinIOPost and mediadata
    Post created
  6. 06STOMP socketBroadcasts updateruntime
  1. 01React clientAxios + JWTclient
    POST + JWT
  2. 02Spring SecurityValidates identityservice
    Authorized
  3. 03Post serviceCoordinates publishservice
    Moderate
  4. 04GeminiContent moderationexternal
    Approved + save
  5. 05MySQL + MinIOPost and mediadata
    Post created
  6. 06STOMP socketBroadcasts updateruntime
  • Request
  • Response
  • Event / realtime
  • Local handoff
Private architectureSystem dossier / DANANG'S EGOV

Private system architecture

Technical implementation details for this production system are not publicly disclosed.

Private implementation
Private architecture.

The production architecture and implementation repository for this project are private.

Repo confirmedSystem dossier / WONDERKIDS

AI learning interaction

The browser client sends a learning prompt directly to Gemini, parses the response, and falls back to local content when generation fails.

Verified from WonderKids source ↗

Gemini 1.5 Flash returns text or raw JSON that is shaped into an interactive lesson in the UI.

  1. 01LearnerStarts an activityclient
    Interaction
  2. 02React UIBuilds the promptclient
    Prompt
  3. 03Gemini SDKClient-side requestservice
    Generate
  4. 04Gemini 1.5Generates contentexternal
    Text / JSON
  5. 05Response parserText / raw JSONruntime
    Render
  6. 06Lesson UIResult or local fallbackoutput
  1. 01LearnerStarts an activityclient
    Interaction
  2. 02React UIBuilds the promptclient
    Prompt
  3. 03Gemini SDKClient-side requestservice
    Generate
  4. 04Gemini 1.5Generates contentexternal
    Text / JSON
  5. 05Response parserText / raw JSONruntime
    Render
  6. 06Lesson UIResult or local fallbackoutput
  • Request
  • Response
  • Event / realtime
  • Local handoff
Concept architectureSystem dossier / HYPERMATCH

Product matching architecture

A production-ready target architecture that evolves the current frontend demo into an AI-assisted product recommendation service.

Concept architecture ↗

Answers and an optional photo become structured signals, then AI and budget rules rank products from a commerce catalog.

  1. 01React onboardingNeeds, budget, photoclient
    Profile
  2. 02Match APIValidates requestservice
    Normalize
  3. 03Signal pipelineProfile + image featuresruntime
    Feature set
  4. 04Match engineAI + budget rulesservice
    Query products
  5. 05Commerce catalogShopify / HyperWorkexternal
    Ranked matches
  6. 06Ranked setupProducts + purchase linksoutput
  1. 01React onboardingNeeds, budget, photoclient
    Profile
  2. 02Match APIValidates requestservice
    Normalize
  3. 03Signal pipelineProfile + image featuresruntime
    Feature set
  4. 04Match engineAI + budget rulesservice
    Query products
  5. 05Commerce catalogShopify / HyperWorkexternal
    Ranked matches
  6. 06Ranked setupProducts + purchase linksoutput
  • Request
  • Response
  • Event / realtime
  • Local handoff
Concept architectureSystem dossier / FLOTIE

Commerce request architecture

A target backend architecture for taking the existing editorial storefront from discovery through payment and inventory confirmation.

Concept architecture ↗

The storefront reads catalog data, maintains a cart session, then coordinates order, payment, and inventory services.

  1. 01React storefrontBrowse + cartclient
    Checkout
  2. 02Commerce APICatalog + checkoutservice
    Validate cart
  3. 03Cart sessionItems + totalsdata
    Create order
  4. 04Order serviceCreates orderservice
    Authorize
  5. 05Payment gatewayAuthorizes chargeexternal
    Paid + reserve
  6. 06InventoryReserve + confirmdata
    Confirmed
  7. 07ConfirmationReceipt + statusoutput
  1. 01React storefrontBrowse + cartclient
    Checkout
  2. 02Commerce APICatalog + checkoutservice
    Validate cart
  3. 03Cart sessionItems + totalsdata
    Create order
  4. 04Order serviceCreates orderservice
    Authorize
  5. 05Payment gatewayAuthorizes chargeexternal
    Paid + reserve
  6. 06InventoryReserve + confirmdata
    Confirmed
  7. 07ConfirmationReceipt + statusoutput
  • Request
  • Response
  • Event / realtime
  • Local handoff
Repo confirmedSystem dossier / DOCCLEANER

Document cleanup pipeline

A Manifest V3 service worker coordinates page cleanup, print preparation, and the browser's native PDF save flow.

Verified from DocCleaner source ↗

Navigation matching activates the extension, content cleanup prepares the DOM, then the browser prints a clean A4 document.

  1. 01Document pageMatching navigationclient
    Navigation
  2. 02Service workerTab + navigation eventsruntime
    Cleanup message
  3. 03Content scriptRuns cleanup commandsservice
    Transform
  4. 04Clean DOMRemove noise + preloaddata
    Prepare
  5. 05Print CSSA4 layout rulesruntime
    Save as PDF
  6. 06Browser PDFwindow.print()output
  1. 01Document pageMatching navigationclient
    Navigation
  2. 02Service workerTab + navigation eventsruntime
    Cleanup message
  3. 03Content scriptRuns cleanup commandsservice
    Transform
  4. 04Clean DOMRemove noise + preloaddata
    Prepare
  5. 05Print CSSA4 layout rulesruntime
    Save as PDF
  6. 06Browser PDFwindow.print()output
  • Request
  • Response
  • Event / realtime
  • Local handoff
Repo confirmedSystem dossier / PINORIA

Media download pipeline

The extension resolves Pinterest media in a service worker, downloads direct assets immediately, and sends HLS jobs through an offscreen muxing pipeline.

Verified from Pinoria source ↗

A split HLS stream is muxed locally in an offscreen document before Chrome saves the final file.

  1. 01Pinterest pagePin / board scanclient
    Scan
  2. 02Content scriptSends media requestservice
    Runtime message
  3. 03Service workerValidates + resolvesruntime
    HLS job
  4. 04Offscreen documentLocal media jobruntime
    Audio + video
  5. 05MediaBunnyMux queue + object URLservice
    Object URL
  6. 06Chrome downloadsSaves local fileoutput
  1. 01Pinterest pagePin / board scanclient
    Scan
  2. 02Content scriptSends media requestservice
    Runtime message
  3. 03Service workerValidates + resolvesruntime
    HLS job
  4. 04Offscreen documentLocal media jobruntime
    Audio + video
  5. 05MediaBunnyMux queue + object URLservice
    Object URL
  6. 06Chrome downloadsSaves local fileoutput
  • Request
  • Response
  • Event / realtime
  • Local handoff