moduhub

How it's built

Now that AI can write the code, what matters more than how to code is what you can build with and what you need to know. Here is exactly what each moduhub tool is made of.

18 of 39 services are built without any external library, using only what the browser provides.

Shared foundation

The base technologies every tool is built on.

By service

Visual IT Encyclopedia

What you needed to know

SCAN, C-SCAN, LOOK and C-LOOK are combinations of two choices—whether the head goes to the last track and whether it serves in one direction only—so the downward direction is computed by flipping track numbers (t → last track − t) and reusing the upward code. The ARP view keeps no table state; it recomputes the ARP table from (mode, step) every time.

Libraries

Built without external libraries

Browser features

  1. SVG (opens in a new tab)Resolution-independent vector graphics
Try it

Koi Pond Growing Game

What you needed to know

A fish can only eat another when it is at least 1.15 times larger and the smaller fish's center is inside its body. Each meal adds half of the prey's area to the body (r' = √(r² + 0.5·r_prey²)), so growth slows as you get bigger.

Libraries

  1. three.js (opens in a new tab)3D graphics library for the browser

Browser features

  1. WebGL (opens in a new tab)GPU-accelerated 2D and 3D graphics in the browser
Try it

Jelly Dice Roller

What you needed to know

Each die is a 4×4×4 grid of 64 particles, and every cell is pulled back toward its original shape, which makes it squishy. The result is not a random number: it is the face pointing up in the resting grid's rotation.

Libraries

Built without external libraries

Browser features

  1. WebGPU (opens in a new tab)Next-generation GPU API after WebGL
  2. Web Audio API (opens in a new tab)Synthesizes and plays sound in the browser
Try it

2048 Combo

What you needed to know

Each tile merges at most once per move, and a new tile spawns in an empty cell as a 2 with 90% probability or a 4 with 10%.

Libraries

  1. three.js (opens in a new tab)3D graphics library for the browser

Browser features

  1. WebGL (opens in a new tab)GPU-accelerated 2D and 3D graphics in the browser
  2. Web Audio API (opens in a new tab)Synthesizes and plays sound in the browser
  3. Vibration API (opens in a new tab)Haptic feedback through phone vibration
  4. Web Share API (opens in a new tab)Shares results through the device share sheet
Try it

Chart Trading Practice

What you needed to know

From 5,000 Binance hourly candles, only the longest gap-free run is kept, and hourly candles are merged to rebuild 4-hour and daily candles.

Libraries

  1. Lightweight Charts (opens in a new tab)Financial charting library by TradingView
  2. TanStack Query (opens in a new tab)Caches and refetches server data
  3. tRPC (opens in a new tab)Type-safe API calls between client and server
  4. Drizzle ORM (opens in a new tab)TypeScript ORM for the database
  5. Supabase (opens in a new tab)Authentication and PostgreSQL database

Data sources

  1. Binance Market Data API (opens in a new tab)Historical Bitcoin and Ethereum candles
Try it

Pass Map

What you needed to know

Labels hide below 0.35× zoom; Korean glyphs are baked into an SDF atlas so nodes, edges, and text each render in a single draw call.

Libraries

  1. three.js (opens in a new tab)3D graphics library for the browser
  2. TinySDF (opens in a new tab)Renders glyphs to signed distance fields that stay sharp when scaled

Browser features

  1. WebGPU (opens in a new tab)Next-generation GPU API after WebGL
  2. WebGL (opens in a new tab)GPU-accelerated 2D and 3D graphics in the browser
  3. IndexedDB (opens in a new tab)Stores large data inside the browser
  4. Broadcast Channel API (opens in a new tab)Syncs changes between tabs of the same site
  5. File System Access API (opens in a new tab)Saves directly to files on your device

Data sources

  1. Google Drive API (opens in a new tab)Saves map files to your Google Drive
Try it

Korean-English Typo Converter

What you needed to know

Latin keys are mapped to Korean 2-set (Dubeolsik) letters and consecutive letters are assembled into syllables; shifted keys become double consonants or ㅒ·ㅖ.

Libraries

  1. Hangul.js (opens in a new tab)Splits and assembles Korean Hangul letters
Try it

Emoji Finder

What you needed to know

Subtracting 0xAC00 from a Hangul syllable code and dividing by 21×28 yields its initial consonant, which enables searching by initials such as 'ㅅㄹ'.

Libraries

Built without external libraries

Browser features

  1. Clipboard API (opens in a new tab)One-tap copy

Data sources

  1. Emojibase (opens in a new tab)Emoji names and keywords in three languages (converted at build time)
Try it

Character Counter + Meta Snippet Checker

What you needed to know

Search-result titles are checked against 15–32 characters and descriptions against 50–120, and byte counts use UTF-8 encoding.

Libraries

Built without external libraries

Browser features

  1. Encoding API (opens in a new tab)Encodes text to UTF-8 bytes to measure size
Try it

QR Code Generator

What you needed to know

WiFi QR codes use the WIFI:T:security;S:name;P:password;; format, and \ ; , : inside values are escaped with a backslash.

Libraries

  1. node-qrcode (opens in a new tab)Generates QR code images from text
Try it

Time↔Frame Calculator

What you needed to know

29.97fps drop-frame skips the first two frame numbers of every minute except each tenth minute (four at 59.94fps) and marks it with a ; separator.

Libraries

Built without external libraries

Try it

Percent Calculator

What you needed to know

Change rate is (current − previous) ÷ |previous| × 100, and margin uses revenue, not cost, as the denominator: (revenue − cost) ÷ revenue × 100.

Libraries

Built without external libraries

Browser features

  1. Intl API (opens in a new tab)Locale-aware numbers, country names, and text segmentation
Try it

Random Roulette

What you needed to know

The winning slice is the aim angle minus the target's rotation; on devices without 3D support, it falls back to an unbiased random draw.

Libraries

  1. three.js (opens in a new tab)3D graphics library for the browser
  2. lz-string (opens in a new tab)Compresses data into short shareable URLs

Browser features

  1. WebGL (opens in a new tab)GPU-accelerated 2D and 3D graphics in the browser
  2. Web Crypto API (opens in a new tab)Cryptographically strong random numbers
  3. Web Audio API (opens in a new tab)Synthesizes and plays sound in the browser
  4. Vibration API (opens in a new tab)Haptic feedback through phone vibration
  5. Web Share API (opens in a new tab)Shares results through the device share sheet
Try it

Military Service Calculator

What you needed to know

Discharge day is the day before enlistment date plus the service months (Army 18, Navy 20, Air Force 21); impossible dates snap to month end.

Libraries

Built without external libraries

Data sources

  1. 병무청 복무기간 안내 (opens in a new tab)Official service lengths by military branch
Try it

Color Code Converter

What you needed to know

HEX is the three 8-bit RGB channels written in hexadecimal; HSL derives saturation and hue from the gap between the largest and smallest RGB channel.

Libraries

  1. react-colorful (opens in a new tab)Lightweight color picker component
Try it

Random Number Generator

What you needed to know

A 32-bit integer from crypto.getRandomValues divided by 2^32 gives a number in [0, 1), and unique draws skip numbers that already appeared.

Libraries

Built without external libraries

Browser features

  1. Web Crypto API (opens in a new tab)Cryptographically strong random numbers
Try it

1-Min Interview Rhythm Coach

What you needed to know

Speaking time is estimated from the non-space character count at 4, 5, or 6 characters per second, plus 0.35s per period and 0.18s per comma.

Libraries

Built without external libraries

Browser features

  1. Web Audio API (opens in a new tab)Synthesizes and plays sound in the browser
  2. Canvas 2D (opens in a new tab)Pixel drawing and image export
Try it

Draw Picker

What you needed to know

A 32-bit Web Crypto random number divided by 2^32 gives a value from 0 to 1, and already-drawn items are skipped on redraw.

Libraries

Built without external libraries

Browser features

  1. Web Crypto API (opens in a new tab)Cryptographically strong random numbers
Try it

D-Day Counter

What you needed to know

Both the target date and today are normalized to midnight before counting days, and impossible dates like February 30 are rejected on input.

Libraries

  1. date-fns (opens in a new tab)Date arithmetic and calendar utilities
Try it

Days Since Birth Calculator

What you needed to know

Elapsed days are computed between two UTC midnights, and milestones count the birth date as day 1, as in the Korean 100th-day tradition.

Libraries

  1. date-fns (opens in a new tab)Date arithmetic and calendar utilities
Try it

Date Calculator

What you needed to know

Including the end date adds one day, and months are counted by the calendar: starting on a month's last day, the shorter month's last day counts as one month.

Libraries

  1. date-fns (opens in a new tab)Date arithmetic and calendar utilities
Try it

Workday Calculator

What you needed to know

Saturdays and Sundays are excluded first, and only public holidays falling on weekdays are counted separately, using a per-year holiday list.

Libraries

  1. date-fns (opens in a new tab)Date arithmetic and calendar utilities
Try it

World Flags Quiz

What you needed to know

Flags are looked up by each country's two-letter ISO 3166-1 code, and missing Japanese country names are filled in with the browser's Intl.DisplayNames.

Libraries

Built without external libraries

Browser features

  1. Intl API (opens in a new tab)Locale-aware numbers, country names, and text segmentation

Data sources

  1. REST Countries (opens in a new tab)Country names, codes, and flag URLs
  2. Flagpedia flagcdn (opens in a new tab)Flag images by country code
Try it

Ethereum Unit Converter

What you needed to know

1 ETH equals 10^18 wei. To avoid floating-point errors, every value is converted to integer (bigint) wei before changing units.

Libraries

  1. viem (opens in a new tab)Ethereum toolkit for unit conversion and accounts

Browser features

  1. BigInt (opens in a new tab)Arbitrary-precision integers without rounding errors
Try it

Gradient Generator

What you needed to know

Color stops are sorted by position and joined; linear gradients take an angle in degrees and conic gradients set their start with a from angle.

Libraries

Built without external libraries

Browser features

  1. CSS Gradients (opens in a new tab)Linear, radial, and conic gradients in pure CSS
Try it

Kinetic Text Effect Generator

What you needed to know

Text must be split into user-perceived characters (graphemes), not code units, so that combined emoji move as one character instead of breaking apart.

Libraries

Built without external libraries

Browser features

  1. Intl API (opens in a new tab)Locale-aware numbers, country names, and text segmentation
  2. CSS Animations (opens in a new tab)Keyframe-based motion in CSS
Try it

Pomodoro Timer

What you needed to know

25-minute focus and 5-minute breaks repeat, with a 15-minute long break every fourth round; remaining time is computed from the start timestamp.

Libraries

Built without external libraries

Browser features

  1. Web Audio API (opens in a new tab)Synthesizes and plays sound in the browser
  2. Web Locks API (opens in a new tab)Lets only one tab do the work at a time
  3. Page Visibility API (opens in a new tab)Detects when a tab is hidden or shown
  4. Fullscreen API (opens in a new tab)Shows content in full screen

Data sources

  1. Kenney Interface Sounds (opens in a new tab)Public-domain (CC0) notification sounds
  2. Unsplash (opens in a new tab)Nature background photos (credited)
Try it
How it's built | moduhub