Santekno
Projects/Santekno Tools Microsite
WebLive

Santekno Tools Microsite

A set of developer tools (formatter, converter, generator) — all client-side, instant, no data leaves the browser.

Live
tools.santekno.com
# Developer tools
{
"status": "ok"
}
Run· client-side
Role
Solo
Timeline
2025
Team
1
Domain
Developer tools
Stack
6 tech
Status
Live
01

Overview

Santekno Tools is a microsite of developer utilities — formatters, converters, generators — that all run in the browser. No data is sent to a server; everything is processed client-side for privacy and speed.

The UI stays minimal: paste, process, copy. Three core screens show a tool, the index, and preset sharing.

JSON formatter — processed in a Web Worker
Tool index — one microsite
Preset saved in the URL (shareable)
03

Problem & Solution

Problem

Developers often paste sensitive data into random online tools that ship it to unknown servers. Scattered tools also fragment the workflow.

Solution

One fast microsite (Next.js + ISR); each tool is purely client-side using Web Workers so the UI stays responsive. Per-tool SEO for discoverability, plus shareable URLs to save presets.

04

Workflow

Three actors interact with the service; the diagrams are written in English to stay consistent across both languages.

flowchart diagram

paste data

process client-side

result

share

discover via

Developer

Tool (browser)

Web Worker

Preset URL

Search / Tutorial link

Use case interaction
sequence diagram
Web WorkerTool UIDeveloperWeb WorkerTool UIDeveloperpaste large inputpostMessage(input)parse / format (off main thread)postMessage(result)render output (60fps)
Sequence flow
05

Architecture

flowchart diagram

Browser

static

preset

Next.js Page (ISR shell)

Tool UI

Web Worker

Vercel Edge / CDN

URL query-string state

System architecture
Architecture notes

Next.js App Router with ISR for fast-static tool pages. Heavy logic (parse/format) runs in a Web Worker to keep the main thread free. No backend; preset state is encoded into the URL. Deployed to Vercel edge.

state diagram

input

worker done

edit

copy URL

idle

processing

ready

shared

State lifecycle
06

Features

User
  • Instant format & convert
  • Data never leaves the device
  • Share presets via URL
Content / SEO
  • Per-tool pages
  • Meta + structured data
  • Cross-links to tutorials
System
  • Web Worker offload
  • ISR caching at the edge
  • Zero backend
07

Tech Stack

language
TypeScript
framework
Next.jsReact
styling
Tailwind
runtime
Web Workers
infra
Vercel
08

Engineering Challenges

01
UI freeze on large inputs

Formatting a 10MB JSON froze the tab. Fix: move parsing to a Web Worker + stream results, so the UI stays 60fps.

02
SEO for interactive tools

Highly interactive tools are hard to index. Fix: ISR-render a shell + descriptive per-tool content and JSON-LD SoftwareApplication.

03
State without a backend

Users want to save/share config without an account. Fix: encode presets into the query-string + compression, so the URL itself is the state.

09

Outcomes

0ms
server latency (client-side)
100
Lighthouse score
18
tools available
$0
server cost / mo
9.2k
organic visits / mo
10

Lessons Learned

Client-side isn’t only about privacy — it also removes server cost and latency. Web Workers are a must so big inputs don’t freeze the UI. And per-tool SEO beats a single “all tools” page.

00

Related Santekno Tutorials

Go
Web Workers di React tanpa Freeze
7 mntRead
Go
ISR di Next.js untuk SEO
9 mntRead
Go
State di URL: Shareable tanpa Backend
6 mntRead
Bio Santekno
SEO-friendly personal link-in-bio rendered with ISR — light, fast, easy to extend.

Interested in working together?

Order, payment, or high-traffic event pipelines — let's talk architecture and trade-offs.

Contact All projects