I built a collaborative pixel art game in a bottle — with 0 npm dependencies

🌊 What is Dear Stranger?

I recently launched Dear Stranger (dearst.app) — a cozy, anonymous, collaborative pixel art web game.

The concept is inspired by the old tradition of casting a message in a bottle into the ocean:

1. Cast a bottle: You start by drawing a few pixel strokes on a small canvas (or choose from 8 classic masterpieces like Van Gogh's Starry Night or Monet).
2. Drift across the sea: Your bottle travels across the world to strangers.
3. Collaborate: 2 to 4 strangers take turns painting their fair share.
4. Returns home: Once complete, the bottle journeys back to everyone who participated, complete with a celebratory replay of each painter's strokes and a travel map showing the countries it sailed through!

Play it directly in your browser (no sign-up required):
👉 https://dearst.app

🛠️ The Tech Stack: Exactly 0 npm dependencies

As web developers in 2026, our node_modules folders often weigh hundreds of megabytes just to render a button. For Dear Stranger, I set a personal challenge:

Can we build a full-featured, persistent, real-time multiplayer collaborative web app with ZERO external npm dependencies?

The answer is yes.

1. Pure Vanilla JS on the Frontend

• Zero build tools: No Webpack, Vite, or Babel. Browsers have supported native ES modules for years.
• HTML5 Canvas & SVG: Custom pixel manipulation, touch-enabled zooming/panning, and color palette sampling.
• Dynamic Voyage Map: Natural Earth 1:50m geographic landmass rasterized into an ultra-compact dot grid rendered with pure SVG paths and beacons.

2. Node.js Built-in Standard Library on the Backend

• Built on Node's native HTTP server and node:crypto.
• Pure Web Push: RFC 8291 payload encryption and RFC 8292 VAPID signatures implemented purely with node:crypto — no web-push npm package required.
• SQLite with WAL mode: Fast, zero-config persistent storage with foreign keys and immediate transactions.

3. Internationalization (i18n) from Day One

The game natively supports 5 languages:

• 🇰🇷 Korean
• 🇺🇸 English
• 🇫🇷 French
• 🇯🇵 Japanese
• 🇨🇳 Chinese

Even the system NPC (Lighthouse · Keeper) and world country labels dynamically localize using the native Intl.DisplayNames API!

🎨 Game Design: Solving the "Trolling & Slacking" Problem

Collaborative art on the internet is notorious for two problems: trolls overwriting others' work and slackers drawing 1 pixel and dumping the rest on the next person.

Here is how Dear Stranger solves it through game mechanics:

1. The 75% Fair Share Quota: Each painter receives an equal allocation of the remaining blank cells. You must fill at least 75% of your quota before the game lets you send the bottle onward.
2. No Overwriting: Pixels already laid down by earlier strangers are immutable and locked.
3. Report & Restoration (Kintsugi for pixels): If someone draws something offensive, any player can report that layer. The offender's layer is immediately hidden, and a blank space is created so another stranger can step in to restore the painting!

🖼️ What's next?

We launched with 8 classic museum masterpieces in both guided tracing mode and 64-pixel challenge mode. We plan to continuously add more classical artworks and community features.

Feel free to pick up a bottle, paint a few pixels, and see where your art travels:

🌊 Play the game: https://dearst.app

I’d love to hear your thoughts, feedback, and questions in the comments below!