[portfolio](https://geonwoo.kim/en/portfolio) › Personal

# underthekey · custom keyboard platform

https://geonwoo.kim/en/portfolio/underthekey

Period: 2024.08 — 2024.11

A platform for handling custom keyboard builds in one place, where users practice typing with real keystroke sounds. I recorded and mixed the switch sounds myself.

500 users in 2 days

- [github](https://github.com/underthekey)
- [sentence-api](https://github.com/underthekey/sentence-api)

Team: Solo

Role: Planning and design · Switch recording and mixing · Public random sentence API · MSA core module · Frontend · Home server · CI/CD · Monitoring

Java 17 · Spring Boot 3.3.3 · Spring Data JPA · Querydsl · MariaDB · Redis 7.2 · MinIO · Next.js · Web Audio API · Proxmox · Docker · Nginx Proxy Manager · Jenkins

- 13 switch sources based on Cherry-style samples
- Input tests per keyboard layout
- Imager: sound-stage visualization
- Volume and language settings
- Public API serving about 5,000 Korean proverbs and about 300 English quotes by language and category
- Up to 20 sentences per request

## Audio files multiplying per layout

Problem: At first, a DAW template produced a source for each of about 110 key positions, so every switch meant sending 110 mixed files. The number of downloads hurt performance, and I needed a way to automate and shrink this step.

Solution: Moved the mixing from the DAW to the browser with the Web Audio API. One 8 KB source with panning, frequency adjustments and keycap-size filters forms a template that covers every layout. The number of files to download fell from 110 to 1.

## Too many requests to the public API

Problem: The random sentence API is public, so traffic could spike, and it is the core server of the service, so it had to stay up. Counting remote IPs directly would strain concurrency, and the limits needed detailed rules.

Solution: Chose Bucket4j for its accuracy and how well it works with Redis TTLs. Token limits allow 20 requests per 5 minutes, so excess requests do not turn into server load.

## Architecture

underthekey deployment diagram: services, sentence API, database VM and monitoring on Proxmox

Services, databases, monitoring and CI split across VMs on one Proxmox host

underthekey sentence API diagram: Spring Boot sentence API, Redis cache, MariaDB, monitoring and Jenkins on Proxmox

Sentence API server, cache and database split across VMs

underthekey typing screen where users type along with a sentence

underthekey screen with text input and typing effects

underthekey settings for volume and keyboard switch

underthekey keyboard switch selection list

underthekey particle effects responding to typing

underthekey virtual keyboard showing the typed keys


[gloticker · macro indicators Chrome extension](https://geonwoo.kim/en/portfolio/gloticker) · [seoulpop · location-based history walks](https://geonwoo.kim/en/portfolio/seoulpop)