JT Lee Portfolio

WebTermSFTP

WebTermSFTP is a full-stack system that provides a browser-based terminal, remote file management, and command automation platform. It enables secure interaction with SSH servers and Docker environments through a unified web interface.

Key Features

• 🖥️ Web-Based Terminal
  • Real-time terminal interaction using WebSockets
  • xterm.js integration for a native terminal experience
  • Supports SSH remote servers and Docker-based environments
• 📁 Remote File Editing (Monaco Editor)
  • In-browser file editing with Monaco Editor (VS Code engine)
  • Supports files from SSH servers and Docker container file systems
  • Real-time file loading and saving through the proxy layer
• 📂 SFTP File Management UI
  • Integrated file explorer UI powered by SFTP
  • Supports file/directory listing, upload, download, and basic create/rename/delete operations
  • Stream-based transfers for efficient handling of large files
  • Integrated with terminal sessions for a seamless workflow
• 🐳 Container-Based Execution
  • On-demand Docker container execution
  • Container pooling to reduce startup latency
  • Isolated environments per session
• 🧩 Command Management System (CRUD)
  • Full CRUD support for user-defined commands
  • Stored in a backend database with user ownership
  • Enables reusable command workflows and automation

Architecture Highlights

• 🏗️ Manager-Based State Architecture (React Integration)
  • Designed a custom OOP-based state management system using Manager classes integrated with React via useSyncExternalStore
  • Each Manager encapsulates state, business logic, and event subscription
  • Strict separation between UI layer and application logic
  • Eliminates the need for external state libraries while maintaining scalability
• ⚙️ Unified Terminal Abstraction
  • Adapter Pattern unifies PTY (node-pty) streams and WebSocket channels
  • Defined a transport-agnostic interface for terminal I/O
  • Supports SSH and container-based execution environments
• 🧩 Generic Draggable List System
  • Built a reusable generic draggable list system using TypeScript and OOP architecture
  • Supports dynamic reordering, insertion, and deletion with type-safe generics
  • Reusable across multiple domains such as file explorers, command history, and UI lists
  • Integrates cleanly with React state architecture for predictable updates
• 🔐 Session & Proxy Architecture
  • Centralized proxy server managing terminals, file editing, and data transfers
  • Session management using HTTP-only cookies for both anonymous and authenticated users
• System Design Highlights
  • Decoupled architecture separating execution layer (SSH/Docker) from UI via proxy-based design
  • File system abstraction layer unifying SSH and Docker environments
  • Container pool manager for efficient resource reuse and reduced startup latency
  • Real-time streaming architecture for terminal and file operations

Challenges & Solutions

• Different I/O models (PTY vs WebSocket): Unified through an Adapter Pattern to standardize terminal communication
• Race conditions in async workflows: Solved using Promise-based synchronization and controlled execution flow
• File system differences (SSH vs Docker): Abstracted into a unified file system interface layer
• Large file transfer performance: Optimized using stream-based SFTP transfer to eliminate ACK overhead
• Container startup latency: Reduced through container pooling and reuse strategy
• React rendering optimization: Reduced unnecessary re-renders using external store subscription pattern with useSyncExternalStore, ensuring stable snapshots and fine-grained updates

Tech Stack

Scientific Calculator Web & Mobile App

Cross-platform scientific calculator built with React, TypeScript, and Capacitor. Delivered advanced expression editor and extensible math architecture supporting structured mathematical input and future expansion.

Key Features

• Advanced Expression Editor:
  • Visual representation of nested square roots, exponents, and fractions
  • Reusable auto-resizing input component for dynamic width
  • Cursor-aware, symbol-precise input for structured math editing
  • Custom keypad optimized for desktop & mobile
• Multiple Calculation Modes:
  • Scientific calculation mode
  • Polynomial equation solver
  • Calculation history tracking

Extensible Math Architecture

• Strategy + Registry patterns decouple evaluation, rendering, and expression structure
• TypeScript decorators for plugin-style extensibility
• New mathematical features can be added without modifying core logic

Tech Stack

Custom WooCommerce E-commerce Site

A fully customized WooCommerce-based e-commerce website, restored and migrated from a previously live production environment to AWS EC2. Demonstrates full-stack WordPress development, payment integration, deployment, and operational management.

Project Highlights

• E-commerce Development & Customization:
  • Custom functionality using WordPress, WooCommerce, and Stripe for secure payments
  • Product, inventory, and invoice management
  • Payment and shipping workflow implementation
  • Order lifecycle handling
• WordPress Customization:
  • Extended site behavior with WordPress Hooks & Filters
  • Customized Elementor widgets for business requirements
  • Role-based access control using Ultimate Member (UM Member)
  • Tailored user flows for admins, vendors, and customers
• Infrastructure & Deployment:
  • AWS EC2 provisioning and management for hosting
  • AWS S3 for backups and asset storage
  • Site backup, restoration, and hosting migration
  • Secure deployment and ongoing maintenance
  • Migrated system from Apache to Nginx
• Site Administration & Maintenance:
  • Full website lifecycle management: setup, deployment, operation, backup
  • Regular maintenance and client support
• Site Restoration & Migration:
  • Restored a previously live e-commerce website and migrated it to AWS EC2
  • Demonstrated production recovery and redeployment skills

Tech Stack