Mode: developer/Theme: minimal/Render: full

🌉 Bridge Pattern Demo - Render Strategies

แยก `What to Render` ออกจาก `How to Render` - เปลี่ยน Render Mode ได้โดยไม่แก้ ContentItem

Project (Blue)

Algorithmic Trading Bot

Python based automated trading bot using Strategy Pattern.

2024
PythonFinance
Blog (Purple)

Deep Dive into React Hooks

Understanding the closure trap in useEffect.

Oct 2024
ReactJS
Research (Green)

Distributed Systems Analysis

Paper on CAP Theorem implementation in modern databases.

2024
TheoryDist-Sys
💡 Current Strategy: I | Abstraction: ProjectRenderer, BlogRenderer, ResearchRenderer

🌳 Composite Pattern Demo - Hierarchical Portfolio

สร้าง Tree Structure ของ Content - Portfolio → Categories → Items (Support nested)

Featured Projects(2)

Algorithmic Trading Bot

Python based automated trading bot using Strategy Pattern.

2024
PythonFinance

Knowledge Graph System

Personal documentation system using Neo4j and Next.js.

2023
Next.jsGraphDB
Tech Blog(1)

Deep Dive into React Hooks

Understanding the closure trap in useEffect.

Oct 2024
ReactJS
Academic Research(1)

Distributed Systems Analysis

Paper on CAP Theorem implementation in modern databases.

2024
TheoryDist-Sys
💡 Structure: Portfolio (root) → ContentGroup (branches) → ContentItemLeaf (leaves)

🛡️ Proxy Pattern Demo - Validation & Caching

ห่อ Adapter ด้วย Proxy เพื่อเพิ่มการตรวจสอบและ caching ก่อนจะแปลงข้อมูลเป็น ContentItem

✅ Validates/normalizes input before adaptation
✅ Caches adapted results (duplicate-safe)
✅ Transparent to clients using same interface
✅ Works alongside Adapter and Facade
💡 Pattern: Proxy controls access and adds cross-cutting concerns | Subject: IContentAdapter → SafeJSONAdapterProxy → JSONContentAdapter

✨ Decorator Pattern Demo - Dynamic Behavior Adding

เพิ่ม Behavior/Decorations ให้กับ Items โดยไม่แก้ item เดิม - สามารถ stack decorators ได้ (⭐ Featured, 📌 Pinned, 🏆 Award, 📈 Trending, 🔥 Hot)

Try clicking decorator buttons below in Featured Projects section 👇
Example: Decorator allows wrapping objects to add features without modifying original
Algorithmic Trading Bot
2024
Knowledge Graph System
2023
💡 Pattern: Decorator wraps objects to add behavior dynamically | Implementation: IContentDecorator + ContentDecorator base + 5 concrete decorators

💾 Flyweight Pattern Demo - Memory Optimization

แชร์ Objects ที่มี Intrinsic State เหมือนกัน - Tags ถูกใช้ซ้ำหลายครั้ง โดยไม่สร้าง instances ใหม่

0
Unique Flyweights
0
Total Tag Usage
NaN%
Memory Saved
Flyweight Pool (Shared Instances):
✅Shares tag objects across items
✅Reduces memory usage significantly
✅Separates intrinsic/extrinsic state
✅Factory manages shared pool
✅Tags reused: `React` = 1 instance
✅Transparent to clients
💡 Pattern: Flyweight shares intrinsic state (name, color, icon) across instances |Classes: TagFlyweight + TagFlyweightFactory

🧩 Command Pattern Demo - Execute / Undo / Redo

แคปซูลคำสั่ง (execute/undo) ให้เป็นอ็อบเจกต์เดียว ทำให้ยกเลิก/ทำซ้ำได้สะดวก ตัวอย่างนี้ใช้คำสั่ง Import ที่วิ่งผ่าน Adapter+Proxy

✅ แยกคำสั่งออกจาก UI (loosely coupled)
✅ รองรับ undo/redo ด้วยสแต็ก
✅ ขยายได้ง่าย เพิ่มคำสั่งใหม่
✅ ทำงานร่วมกับ Adapter+Proxy ได้โปร่งใส
💡 Pattern: Command encapsulates actions and supports undo/redo | Roles: Invoker(CommandManager), Command(ImportViaProxyCommand), Receiver(Collections)

🧭 Mediator Pattern Demo - Centralized Coordination

รวมศูนย์การสื่อสารระหว่างส่วนต่างๆ ของ UI: เปลี่ยนธีม/โหมด, เปิดโมดอล, import ข้อมูล โดยไม่ให้คอมโพเนนต์คุยกันโดยตรง

💡 Pattern: Mediator centralizes communication to reduce coupling | Roles: Mediator(UIMediator), Colleagues(controls, modal, commands)

🗂️ Memento Pattern Demo - Snapshot & Restore

บันทึก Snapshot ของสถานะ (projects/blogs/research + decorations) และกู้คืนย้อนหลัง โดยไม่เปิดเผยโครงสร้างภายใน

💡 Pattern: Memento stores state snapshots without exposing internals | Roles: Originator(PortfolioStateOriginator), Memento(PortfolioMemento), Caretaker(HistoryCaretaker)

🏢 Facade Pattern Demo - Simplified Interface

Unified Interface ที่ซ่อนความซับซ้อนของระบบ - ใช้งาน 7+ patterns ผ่าน methods เดียว

Quick Actions (Powered by Facade)
🎯 What Facade Does:
✅ Hides complexity of 7+ patterns
✅ Provides simple unified methods
✅ Coordinates Singleton, Prototype, Adapter
✅ Manages Decorator, Bridge, Composite
✅ Automatic logging via Singleton
✅ One-line complex operations
💡 Pattern: Facade provides unified interface to subsystem | Implementation: PortfolioFacade wraps 7+ design patterns
#!/bin/bash

$ echo `Full-Stack Developer`

> Singleton Pattern active: View logs below.

Technical Arsenal

#React#TypeScript#Design Patterns#Docker#AWS

Featured Projects

Algorithmic Trading Bot2024

Python based automated trading bot using Strategy Pattern.

#Python#Finance
Knowledge Graph System2023

Personal documentation system using Neo4j and Next.js.

#Next.js#GraphDB

Tech Blog

Deep Dive into React HooksOct 2024

Understanding the closure trap in useEffect.

#React#JS
SessionLogger (Singleton Instance)
Loading logs...