DEV Community: Shivansh Goel

I Got Doxxed Through My Real Email — So I Built a Free, Self-Hosted Email Aliasing Service on Cloudflare

Shivansh Goel — Thu, 23 Jul 2026 12:37:06 +0000

I signed up for a job board I'd never heard of. The listing looked legitimate — "Senior Frontend Dev, Remote, $180K." I used my real Gmail address.

Two weeks later:

14 "recruiters" I never contacted were emailing me
3 phishing attempts disguised as interview invitations
1 data breach notification from HaveIBeenPwned
My inbox was permanently polluted

My email was sold. Shared. Leaked. And there's no "un-leak" button.

I couldn't fix the past. But I could make sure it never happened again.

So I built GhostRelay — a self-hosted email aliasing service that generates unlimited masked addresses, all forwarding to your real inbox. When one gets compromised? Kill it. Your real address stays invisible forever.

The twist? It runs entirely on Cloudflare's free tier. No server. No monthly bill. No catch.

The Problem: Your Email Is Your Identity (And It's Everywhere)

Think about how many services have your real email right now:

Every SaaS free trial you signed up for
Every newsletter you subscribed to "just to get the PDF"
Every conference registration
Every sketchy WiFi captive portal
Every online order
Every forum account from 2014

Each one is a potential leak point. And when any of them gets breached, it's YOUR inbox that gets hammered.

The average person's email has been exposed in 5-7 data breaches (check yours at haveibeenpwned.com — I'll wait).

You can't control whether some random startup stores your email in plaintext. But you CAN control which email they have.

Introducing GhostRelay

GhostRelay gives every service a unique, disposable email address that forwards to your real inbox:

You sign up for SketchyJobBoard.com with:
  → jobboard-2025@yourdomain.com

That alias forwards to:
  → your.real@gmail.com

When jobboard-2025@ starts getting spam:
  → Delete the alias. Done. Zero leakage.

You never give out your real email again. Every service gets its own alias. When one is compromised, you know exactly which company leaked it (because only they had that alias).

It's email compartmentalization. The same principle as using separate passwords — but for your address itself.

How It Works (The Architecture)

The entire system runs on three free Cloudflare services:

Sender → youralias@yourdomain.com
              │
              ▼
   ┌─────────────────────┐
   │  Cloudflare Email    │  ← Intercepts incoming mail (free)
   │  Worker              │
   └──────────┬──────────┘
              │
              ▼
   ┌─────────────────────┐
   │  Cloudflare KV       │  ← Looks up alias → destination mapping (free)
   │  (Key-Value Store)   │
   └──────────┬──────────┘
              │
              ▼
   ┌─────────────────────┐
   │  Forward to real     │  ← Your Gmail/Outlook/ProtonMail receives it
   │  inbox               │
   └─────────────────────┘

Dashboard (yourdomain.com/admin):
   ┌─────────────────────┐
   │  Cloudflare Pages    │  ← Static dashboard to manage aliases (free)
   └─────────────────────┘

No servers. No Docker. No VPS. No AWS. Just Cloudflare's free tier doing what it does best.

The Email Worker (Core Logic)

When mail arrives at any address on your domain, this Worker intercepts it:

export default {
  async email(message, env) {
    // Extract alias from recipient
    const recipient = message.to;
    const alias = recipient.split('@')[0].toLowerCase();

    // Look up in KV store
    const record = await env.ALIASES.get(alias, { type: 'json' });

    // Unknown alias — reject silently (no bounce = no confirmation to spammers)
    if (!record) {
      message.setReject("Unknown recipient");
      return;
    }

    // Check if alias is disabled
    if (record.disabled) {
      message.setReject("Alias disabled");
      return;
    }

    // Check if alias is expired
    if (record.expiresAt && Date.now() > record.expiresAt) {
      message.setReject("Alias expired");
      return;
    }

    // Forward to real destination
    await message.forward(record.destination);

    // Update stats (non-blocking)
    const stats = await env.ALIASES.get(`stats:${alias}`, { type: 'json' }) || { count: 0 };
    await env.ALIASES.put(`stats:${alias}`, JSON.stringify({
      count: stats.count + 1,
      lastReceived: new Date().toISOString(),
      lastSender: message.from,
    }));
  }
}

That's the entire forwarding engine. ~30 lines. Handles unlimited aliases. Runs at edge globally. Costs nothing.

The Dashboard

The web interface (hosted on Cloudflare Pages, also free) lets you:

Create aliases — One click, or type a custom name
Auto-generate random aliases — x7k9m2@yourdomain.com for maximum anonymity
Label aliases — "Used for: LinkedIn", "Used for: Amazon", "Used for: that sketchy startup"
View stats — How many emails each alias has received, last sender, last received date
Disable aliases — Stop forwarding without deleting (in case you need it again)
Delete aliases — Permanent. Gone. No more mail accepted.
Set expiration — "Auto-disable this alias after 7 days" (perfect for free trials)
Reply anonymously — Send emails FROM your alias without revealing your real address

The Comparison: GhostRelay vs. Every Paid Alternative

Here's what the market looks like in 2026:

Feature	SimpleLogin	addy.io (AnonAddy)	Firefox Relay	Apple Hide My Email	GhostRelay
Monthly cost	€4/mo (or €9.99 w/ Proton bundle)	$1-$4/mo	$0.99/mo (Mozilla VPN bundle)	Requires iCloud+ ($0.99-$12.99/mo)	$0
Annual cost	€48/yr (standalone)	$12-$48/yr	$11.88/yr	$11.88-$155.88/yr	$0
Free tier aliases	10	20 (shared domain)	5	0 (paid only)	Unlimited
Paid tier aliases	Unlimited	Unlimited	Unlimited	Unlimited	Unlimited (always free)
Custom domain	Paid only	Paid only	No	No	Yes (required, ~$10/yr)
Self-hostable	Yes (complex — Docker + Postgres + SMTP server)	Yes (complex)	No	No	Yes (15 min, no server)
Reply from alias	Yes	Yes	No	Yes	Yes
Alias labeling	Yes	Yes	No	No	Yes
Per-alias stats	Yes	Yes	No	No	Yes
Expiring aliases	No	No	No	No	Yes
Works if company dies	No (hosted) / Maybe (self-host)	No (hosted) / Maybe (self-host)	No	No	Yes (you own everything)
Setup complexity	5 min (hosted) / 2-4 hrs (self-host)	5 min (hosted) / 2-4 hrs (self-host)	2 min	Automatic	15 minutes
Infrastructure required	None (hosted) / VPS + Docker + DB (self-host)	None (hosted) / VPS + Docker (self-host)	None	Apple device	None (Cloudflare free tier)
Vendor lock-in	Proton ecosystem	Independent	Mozilla ecosystem	Apple ecosystem	None
Open source	Yes	Yes	No	No	Yes

The Key Differentiator

Every alternative falls into one of two camps:

Camp 1: Hosted services — Easy to set up, but you're paying monthly and trusting a company with your email routing. If they shut down, raise prices, or get acquired by someone shady, your aliases die.

Camp 2: Self-hosted (complex) — You own everything, but you need a VPS ($5-20/mo), Docker, PostgreSQL, an SMTP server, DNS configuration, TLS certificates, and ongoing maintenance. Most people give up halfway through setup.

GhostRelay is Camp 3: Self-hosted (trivial). You own everything, but the "server" is Cloudflare's free edge network. No VPS. No Docker. No database management. No TLS certificate renewal. No maintenance. Deploy once, forget it exists.

Why Not Just Use Gmail's "+" Trick?

Every tech blog suggests this: yourname+service@gmail.com still delivers to yourname@gmail.com.

Here's why it's useless:

Problem	Why It Fails
Trivially strippable	Every spammer knows to remove everything after `+`. Zero protection.
Reveals your real email	`shivansh+amazon@gmail.com` still exposes `shivansh@gmail.com`
Many sites reject it	Sign-up forms often block `+` in email fields
Can't disable it	You can't "turn off" a + alias. It forwards forever.
No stats	No way to know how many emails a specific + address received

The + trick is security theater. It makes you feel protected while providing zero actual protection.

GhostRelay gives you completely unrelated addresses. x7k9m2@yourdomain.com cannot be reverse-engineered to your real email by anyone — not the service, not a hacker, not a data broker.

Real-World Usage Patterns

The "One Alias Per Service" Strategy

linkedin-2025@mydomain.com      → For LinkedIn
amazon-orders@mydomain.com      → For Amazon
github-notif@mydomain.com       → For GitHub notifications
sketchy-trial@mydomain.com      → For that SaaS free trial (expires in 7 days)
conference-reg@mydomain.com     → For event registrations
newsletter-xyz@mydomain.com     → For that newsletter you might unsubscribe from

When sketchy-trial@ starts getting spam 3 months later? You know exactly who sold your data. Delete the alias. Problem solved.

The "Temporal Alias" Strategy

For things you only need briefly:

wifi-airport-july@mydomain.com  → Airport captive portal (expires in 24 hours)
trial-figma@mydomain.com        → Figma trial (expires in 14 days)
signup-event@mydomain.com       → One-time event (expires after event date)

Set an expiration. Forget about it. The alias auto-disables itself.

The "Identity Separation" Strategy

work-freelance@mydomain.com     → All freelance inquiries
personal-dating@mydomain.com    → Dating apps (privacy critical)
finance-banking@mydomain.com    → Banks and financial services
health-medical@mydomain.com     → Healthcare providers

If your dating app gets breached, your banking email is untouched. Complete compartmentalization.

Self-Hosting Guide (15 Minutes, I Timed It)

What You Need

A Cloudflare account (free)
A custom domain (~$10/year from any registrar)
15 minutes

Step-by-Step

1. Add your domain to Cloudflare

Transfer your domain's nameservers to Cloudflare (or buy one directly from Cloudflare Registrar — cheapest option, no markup).

2. Enable Email Routing

In Cloudflare dashboard → Email → Email Routing → Enable. This tells Cloudflare to handle all email for your domain.

3. Create the KV Namespace

# Install Wrangler (Cloudflare CLI)
npm install -g wrangler

# Login
wrangler login

# Create KV namespace for aliases
wrangler kv:namespace create "ALIASES"

4. Deploy the Email Worker

git clone https://github.com/Tech-aficionado/GhostRelay---Open-Source.git
cd GhostRelay---Open-Source

# Update wrangler.toml with your KV namespace ID
# Deploy
wrangler deploy

5. Deploy the Dashboard

cd dashboard
npm install
npm run build

# Deploy to Cloudflare Pages
wrangler pages deploy dist

6. Set a catch-all email route

In Cloudflare dashboard → Email → Routing → Catch-all → Send to Worker → Select your GhostRelay worker.

Done. Every email to anything@yourdomain.com now hits your Worker. Create aliases through the dashboard.

Cost Breakdown: The Math That Makes Paid Services Embarrassing

Service	What You Get	Monthly Cost	3-Year Cost
Cloudflare Email Routing	Email interception + forwarding	$0	$0
Cloudflare Workers	100K requests/day free tier	$0	$0
Cloudflare KV	100K reads/day, 1K writes/day	$0	$0
Cloudflare Pages	Dashboard hosting	$0	$0
Custom domain	Your brand, your rules	~$0.83/mo	~$30
TOTAL	Unlimited aliases, full analytics, full control	$0.83/mo	$30

Compare to 3 years of SimpleLogin Premium: €144
Compare to 3 years of addy.io Pro: $144
Compare to 3 years of iCloud+: $35.64-$467.64

You save $100+ over 3 years AND own your infrastructure. The domain pays for itself.

Security Model

What GhostRelay Protects Against

Data broker harvesting — They get a disposable alias, not your real address
Credential stuffing — Even if a password leaks, the email is unique per service, making cross-site attacks harder
Targeted phishing — If someone obtains a leaked alias, they can't determine your real inbox
Spam avalanches — Kill one alias, all spam from that leak stops instantly
Corporate data mining — Services can't cross-reference your activity across platforms via email

What GhostRelay Does NOT Protect Against

Man-in-the-middle on Cloudflare — Cloudflare processes your email in transit (same as any email provider). For truly sensitive communication, use PGP/GPG.
Your destination inbox being compromised — If someone hacks your Gmail, aliases won't help. Use 2FA.
Legal requests — Cloudflare complies with valid legal orders. This is a privacy tool, not a crime tool.

Trust Model

You trust:

Cloudflare — To not read your email content in transit (they have no business incentive to, and their reputation depends on not doing so)
Your destination provider — Gmail/Outlook/ProtonMail processes your final mail
Yourself — You control the Worker code, the KV data, the domain

You do NOT trust:

Any third-party SaaS email aliasing company
Any database you don't control
Any service that could disappear or raise prices

FAQ

Q: What if Cloudflare cancels the free tier?
A: The Worker code is portable. Deploy to AWS Lambda, Deno Deploy, or any edge runtime in an hour. Your aliases are exportable as JSON. You're not locked in.

Q: Can I use this with ProtonMail as my destination?
A: Yes. The destination can be any email address. ProtonMail, Tutanota, Gmail, Outlook — anything that receives email.

Q: What about sending/replying FROM an alias?
A: Supported. Cloudflare Email Workers can route outbound mail too. Reply to an email and it appears to come from the alias, not your real address.

Q: How many aliases can I create?
A: Unlimited. KV's free tier handles 1,000 writes/day. Unless you're creating 1,000 aliases per day (you're not), you'll never hit the limit.

Q: Does this work with catch-all?
A: Yes. You can either create explicit aliases OR enable catch-all mode where ANY address at your domain forwards to you. Catch-all is simpler but means you can't "disable" a specific alias without adding deny rules.

The Source

GitHub: github.com/Tech-aficionado/GhostRelay---Open-Source
License: MIT
Stack: JavaScript (49.2%) + CSS (27.8%) + HTML (23.0%)
Infrastructure: 100% Cloudflare free tier
Setup time: 15 minutes
Ongoing maintenance: Zero

Final Thought

Your email is the master key to your digital life. Every password reset, every account recovery, every two-factor backup — it all routes through your inbox.

And you've been giving that master key's address to every random service with a sign-up form.

GhostRelay doesn't fix the past. Your email is already in a dozen breach databases. But it fixes the future. From today, no service ever gets your real address again.

Every interaction gets its own disposable alias. Every leak is contained. Every spam wave is killable with one click.

Your real inbox becomes a fortress that nobody can find — because nobody has the address.

Deploy GhostRelay. Give out aliases. Sleep better.

Check haveibeenpwned.com right now. How many breaches is your email in? Drop the number in the comments (no judgment — mine was 11 before I built this). Then deploy GhostRelay so that number never grows again.

Built by Shivansh Goel — AI & Full Stack Developer who believes privacy shouldn't cost a monthly subscription.

I Rebuilt the 90s Tamagotchi for the Browser — And Accidentally Learned More About State Machines Than Any Tutorial Taught Me

Shivansh Goel — Thu, 23 Jul 2026 12:29:18 +0000

In 1996, Bandai sold 82 million Tamagotchis. Kids carried egg-shaped plastic keychains everywhere, frantically pressing three buttons to feed, clean, and play with a pixelated blob that would literally die if you ignored it during math class.

It was the first time millions of people felt genuine emotional attachment to a piece of software.

30 years later, I rebuilt that entire experience — in the browser, with TypeScript, zero dependencies, completely open source.

No app store. No download. No install. Just open a tab and adopt your pet.

And in the process, I learned more about state machines, game loops, and emotional design than any computer science course ever taught me.

Why Build a Virtual Pet in 2025?

Three reasons:

1. Nostalgia Is a Distribution Hack

People share things that trigger childhood memories. It's not rational — it's emotional. A browser-based Tamagotchi hits a nerve that no todo app or dashboard ever will.

When I shared an early prototype, the response wasn't "cool tech stack." It was:

"OH MY GOD I used to cry when mine died in second grade"

That emotional reaction is worth more than any Product Hunt launch.

2. Game State Machines Are Criminally Underrated

Every tutorial teaches state machines with traffic lights or toggle buttons. Boring. Useless. Forgettable.

A virtual pet has dozens of interconnected states, real-time decay, evolution paths, conditional transitions, and edge cases that force you to actually think about state architecture. After building this, implementing complex UI flows in production apps felt trivial.

3. Not Everything Needs to Be a SaaS

The indie dev world is obsessed with "revenue-generating side projects." Sometimes you should build something purely because it makes people smile. The best projects are the ones you'd use even if nobody else existed.

Meet Your New Pet

When you open Tamagochi, you get an egg. It hatches. A tiny pixelated creature appears. It has needs. Meet them, and it thrives. Ignore them, and... well, gameOver is a valid state.

Your pet has four core needs that decay in real-time:

interface PetState {
  name: string;
  hunger: number;        // 0 = full, 100 = starving
  happiness: number;     // 100 = ecstatic, 0 = depressed
  energy: number;        // 100 = wired, 0 = exhausted
  hygiene: number;       // 100 = squeaky clean, 0 = filthy
  age: number;           // in "pet days"
  stage: 'egg' | 'baby' | 'child' | 'teen' | 'adult' | 'senior';
  alive: boolean;
  mood: 'happy' | 'neutral' | 'sad' | 'angry' | 'sleepy' | 'sick';
}

Every few seconds, stats decay. Your pet gets hungrier, sadder, dirtier, more tired. The clock never stops.

You interact through simple actions:

Feed — Reduces hunger (but too much food makes them sick)
Play — Increases happiness (but costs energy)
Clean — Restores hygiene
Sleep — Restores energy (but hunger still increases while sleeping)
Medicine — Cures sickness (only available when sick)

Simple inputs. Complex emergent behavior.

The Game Loop: Real-Time Decay

The core of any virtual pet is the tick — a periodic function that decays stats and evaluates state transitions:

const TICK_INTERVAL = 3000; // Every 3 seconds

const DECAY_RATES = {
  hunger: 1.5,      // Gets hungrier
  happiness: -0.8,  // Gets sadder
  energy: -0.6,     // Gets more tired
  hygiene: -1.0,    // Gets dirtier
};

function gameTick(pet: PetState): PetState {
  if (!pet.alive) return pet;

  const updated = {
    ...pet,
    hunger: clamp(pet.hunger + DECAY_RATES.hunger, 0, 100),
    happiness: clamp(pet.happiness + DECAY_RATES.happiness, 0, 100),
    energy: clamp(pet.energy + DECAY_RATES.energy, 0, 100),
    hygiene: clamp(pet.hygiene + DECAY_RATES.hygiene, 0, 100),
    age: pet.age + 0.01,
  };

  // Evaluate mood based on current stats
  updated.mood = calculateMood(updated);

  // Check for stage evolution
  updated.stage = evaluateEvolution(updated);

  // Check death conditions
  updated.alive = checkVitals(updated);

  return updated;
}

function clamp(value: number, min: number, max: number): number {
  return Math.max(min, Math.min(max, value));
}

This runs every 3 seconds. In a 10-minute session, your pet goes through ~200 state transitions. Leave the tab open for an hour? That's 1,200 ticks. Your pet's entire life flashes before its eyes.

The State Machine: Evolution & Life Stages

This is where it gets interesting. Your pet doesn't just exist — it evolves through life stages, and how well you care for it determines which path it takes:

                    [Egg]
                      │
                (hatch: 5 ticks)
                      │
                    [Baby]
                      │
                 (age > 20)
                      │
              ┌───────┴───────┐
              │               │
         [Happy Child]   [Sad Child]
         (avg mood > 6)  (avg mood ≤ 6)
              │               │
         (age > 50)      (age > 50)
              │               │
         [Cool Teen]    [Rebel Teen]
              │               │
         (age > 100)    (age > 100)
              │               │
        [Majestic Adult] [Grumpy Adult]
              │               │
         (age > 200)    (age > 200)
              │               │
        [Wise Senior]   [Cranky Senior]

  ─── Any Stage ───
        │
  (hunger ≥ 100) OR (happiness ≤ 0 for 30+ ticks)
        │
      [Dead] 💀

The branching creates replayability. You can't see all the evolution paths in one playthrough. Neglect creates different (sadder) variants. Perfect care unlocks rare stages.

function evaluateEvolution(pet: PetState): PetStage {
  const avgMood = getAverageMoodScore(pet.moodHistory);

  if (pet.stage === 'baby' && pet.age > 20) {
    return avgMood > 6 ? 'happy_child' : 'sad_child';
  }

  if (pet.stage === 'happy_child' && pet.age > 50) {
    return 'cool_teen';
  }

  if (pet.stage === 'sad_child' && pet.age > 50) {
    return 'rebel_teen';
  }

  // ... and so on for each branch

  return pet.stage;
}

The Tab-Close Problem (Hardest Bug I Shipped)

Here's a question that broke my brain for two days:

What happens when someone closes the tab for 8 hours?

Option A: Pet freezes while tab is closed. Problem: This removes all tension. Just close the tab whenever things get hard.

Option B: Pet dies instantly if you leave for too long. Problem: Cruel. Nobody will come back if death is guaranteed.

Option C: Catch-up calculation. When the tab regains focus, calculate what would have happened during the absence, with a mercy cap.

I went with Option C:

function calculateCatchUp(pet: PetState, lastTickTime: number): PetState {
  const now = Date.now();
  const elapsed = now - lastTickTime;
  const missedTicks = Math.floor(elapsed / TICK_INTERVAL);

  // Mercy cap: max 100 ticks of catch-up (5 minutes of real-time damage)
  // Even if you were gone for 8 hours, your pet only suffers 5 minutes
  const cappedTicks = Math.min(missedTicks, 100);

  let current = { ...pet };
  for (let i = 0; i < cappedTicks; i++) {
    current = gameTick(current);
    if (!current.alive) break; // Stop if pet died during catch-up
  }

  // If pet would have died, give a "revival" chance on first return
  if (!current.alive && missedTicks < 500) {
    current.alive = true;
    current.hunger = 90;  // Critical but alive
    current.happiness = 5;
    current.mood = 'sick';
    // Show: "Your pet almost didn't make it! It missed you."
  }

  return current;
}

// On tab focus
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible') {
    const lastTick = localStorage.getItem('lastTickTime');
    if (lastTick) {
      pet = calculateCatchUp(pet, parseInt(lastTick));
      renderPet(pet);

      if (pet.mood === 'sick') {
        showNotification("Your pet almost didn't make it! Quick, take care of it!");
      }
    }
  }
});

The mercy cap is crucial. Without it, any absence longer than a few hours = guaranteed death = nobody plays more than once. With it, you feel urgency without hopelessness.

The CSS-Only Rendering (Zero Canvas, Zero WebGL)

Here's the constraint I set for myself: no <canvas>, no WebGL, no sprite images. The entire pet is rendered with pure CSS.

Why? Because:

It keeps the bundle tiny (~15KB total)
It works everywhere — even browsers that block canvas fingerprinting
CSS animations are GPU-accelerated for free
It's a fun challenge

Pixel Art with Box Shadows

The pet is drawn using a single <div> with a massive box-shadow declaration — each shadow is one "pixel":

.pet-sprite {
  width: 4px;
  height: 4px;
  position: absolute;
  background: transparent;
  box-shadow:
    /* Row 1 - head */
    8px 0 0 #3d3d3d,
    12px 0 0 #3d3d3d,
    16px 0 0 #3d3d3d,
    /* Row 2 */
    4px 4px 0 #3d3d3d,
    8px 4px 0 #ffffff,
    12px 4px 0 #3d3d3d,
    16px 4px 0 #ffffff,
    20px 4px 0 #3d3d3d,
    /* Row 3 - eyes */
    4px 8px 0 #3d3d3d,
    8px 8px 0 #000000,  /* left eye */
    12px 8px 0 #ffffff,
    16px 8px 0 #000000, /* right eye */
    20px 8px 0 #3d3d3d,
    /* ... more rows for body, legs, etc. */
  ;
  image-rendering: pixelated;
}

Different emotional states swap to different box-shadow sets:

function getSpriteForMood(mood: string): string {
  switch (mood) {
    case 'happy':  return sprites.happy;   // Eyes as ^_^ arcs
    case 'sad':    return sprites.sad;     // Eyes as ;_; with tear pixel
    case 'angry':  return sprites.angry;   // Furrowed brow pixels
    case 'sleepy': return sprites.sleepy;  // Closed eye line, Z pixels
    case 'sick':   return sprites.sick;    // Green-tinted, swirl on head
    default:       return sprites.neutral; // Default dot eyes
  }
}

Animations with @keyframes

The idle bounce — that tiny up-and-down hop that makes the pet feel alive — is pure CSS:

@keyframes idle-bounce {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-3px); }
}

@keyframes happy-jump {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-8px) rotate(-5deg); }
  75% { transform: translateY(-8px) rotate(5deg); }
}

@keyframes sad-droop {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(2px); }
}

@keyframes sleep-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.pet[data-mood="happy"] .pet-sprite {
  animation: happy-jump 0.6s ease-in-out infinite;
}

.pet[data-mood="sad"] .pet-sprite {
  animation: sad-droop 2s ease-in-out infinite;
}

.pet[data-mood="sleepy"] .pet-sprite {
  animation: sleep-breathe 3s ease-in-out infinite;
}

The key insight: animation speed communicates emotion. Happy = fast bounces. Sad = slow droops. Sleepy = glacial breathing. Players read these cues subconsciously.

Emotional Design: Making People Care About a Div

The hardest part of this project wasn't the code. It was making players actually care about a collection of CSS pixels.

Here's what I learned about emotional design:

1. The Pet Should Look at You

When idle, the pet's "eyes" (two pixel dots) slowly drift toward the mouse cursor. It's a 5-line JavaScript addition that makes people say "aww, it's looking at me!"

document.addEventListener('mousemove', (e) => {
  const petRect = petElement.getBoundingClientRect();
  const petCenter = {
    x: petRect.left + petRect.width / 2,
    y: petRect.top + petRect.height / 2,
  };

  // Shift eye pixels 1px toward cursor (clamped)
  const dx = clamp((e.clientX - petCenter.x) * 0.01, -1, 1);
  const dy = clamp((e.clientY - petCenter.y) * 0.01, -1, 1);

  eyeLeft.style.transform = `translate(${dx}px, ${dy}px)`;
  eyeRight.style.transform = `translate(${dx}px, ${dy}px)`;
});

2. Reactions Should Be Immediate and Exaggerated

When you feed the pet:

It doesn't just update a number
It does a little jump
A tiny heart particle appears
The eyes squish into happy arcs for 1 second
Then it returns to normal

This takes 200ms but makes the interaction feel rewarding. Without it, feeding feels like clicking a button. With it, feeding feels like caring for something alive.

3. Death Should Hurt (A Little)

When the pet dies, the screen doesn't just show "Game Over." It:

Fades the pet sprite to grayscale slowly (2 seconds)
Shows small "..." above the pet before it disappears
Plays a single, quiet tone (if sound is enabled)
Shows the pet's age, how long you kept it alive, and its best mood
Offers "Adopt again" — not "Restart" (language matters)

The goal isn't to traumatize anyone. It's to make them want to do better next time.

4. Name Your Pet

The first thing you do is name your pet. This is deliberate. Naming creates attachment. "My pet died" hits different than "Sprinkles died."

What I Learned (That Transfers to Real Engineering)

1. State Machines Are the Answer to 80% of UI Bugs

Every time you've seen a UI in an "impossible state" — a loading spinner AND an error message, a form that's both submitted and editable — that's a state machine problem.

After building Tamagochi with explicit states and valid transitions, I started seeing production UI bugs differently. The fix is almost always: "define your states explicitly and make invalid transitions impossible."

// Bad: boolean soup
const [isLoading, setIsLoading] = useState(false);
const [isError, setIsError] = useState(false);
const [isSuccess, setIsSuccess] = useState(false);
// Bug: what if isLoading AND isError are both true?

// Good: state machine
type FormState = 'idle' | 'loading' | 'success' | 'error';
const [state, setState] = useState<FormState>('idle');
// Impossible to be loading AND error simultaneously

2. Time-Based Systems Are Deceptively Hard

"Decay a number every 3 seconds" sounds trivial. But then you deal with:

Tab becoming inactive (browsers throttle setInterval)
Device going to sleep
Timezone changes
Daylight saving time jumps
Users manipulating system clock

Real-time games that persist across sessions need to think about time as unreliable input, not a constant.

3. The 10% of Polish Takes 90% of the Time

The core game loop took one weekend. Making it feel good took three more weeks:

Tuning decay rates so the game is engaging but not stressful
Getting animations to feel organic, not mechanical
Making the death sequence emotional but not manipulative
Balancing difficulty so casual players survive but invested players are challenged

This ratio (10% function, 90% feel) is the same in every product. The feature works in a day. Making users love it takes a month.

The Full Feature List

Feature	Status
Real-time stat decay	Done
6 life stages with evolution branching	Done
5 emotional states with unique sprites	Done
CSS-only pixel art rendering	Done
Idle animations per mood	Done
Eye-tracking toward cursor	Done
Tab-close catch-up calculation	Done
Feeding, playing, cleaning, sleeping	Done
Overfeeding sickness mechanic	Done
Death sequence with stats	Done
LocalStorage persistence	Done
Dark mode	Done
Mobile responsive (touch actions)	Done
Sound effects	Planned
Multiple pet species	Planned
Achievement system	Planned
Multiplayer pet park	Planned
PWA with push notifications	Planned

Try It Now

Play Online

Deploy your own with one click, or clone and run locally:

git clone https://github.com/Tech-aficionado/Tamagochi---Open-Source-Game.git
cd Tamagochi---Open-Source-Game
npm install
npm run dev

Open localhost:3000. Name your pet. Try to keep it alive longer than I did my first time (I didn't last 20 minutes — I was testing the death sequence, I swear).

Deploy Your Own

What's Next

Multiple species — Choose between a cat, dog, dragon, robot, or alien (each with different stat decay rates)
Achievement system — "Kept a pet alive for 30 days", "Evolved to Majestic Adult", "Fed 1000 times"
Multiplayer pet park — Visit friends' pets in a shared space
Custom skins — Design your own pixel pet with an in-app editor
PWA + push notifications — Install on your phone, get "Your pet is hungry!" alerts
Breeding — Two maxed-out adults can create a baby with inherited traits
Seasonal events — Halloween costumes, winter snow, birthday celebrations

The Source

GitHub: github.com/Tech-aficionado/Tamagochi---Open-Source-Game
License: MIT — Adopt it, fork it, breed it
Stack: TypeScript (70.7%) + CSS (27.2%) + HTML (1.9%) + JavaScript (0.2%)
Dependencies: Zero. Pure TypeScript + CSS. No frameworks. No libraries.
Bundle size: ~15KB total

Final Thought

We spend all day building tools for productivity. Task managers. Dashboards. Analytics. Optimization engines. Everything is about output.

Sometimes the most impressive engineering goes into things that have no purpose other than making someone smile for 5 minutes.

A virtual pet won't get you a promotion. It won't generate MRR. It won't impress a VC.

But if you can make someone feel a genuine emotional connection to 200 bytes of CSS box-shadows — that's a kind of engineering that matters.

Build something useless. Build it beautifully. You'll learn more than any tutorial will teach you.

Quick poll: What was YOUR first virtual pet? Tamagotchi? Neopets? Nintendogs? A rock you put googly eyes on? Drop it in the comments — I want to see what generation everyone belongs to.

Built by Shivansh Goel — AI & Full Stack Developer who believes the best code makes people feel something.

I Built a Self-Hostable URL Shortener Because Bitly Now Charges $10/Month for Basic Links

Shivansh Goel — Thu, 23 Jul 2026 12:25:40 +0000

In 2023, Bitly's free plan gave you 100 links per month with full analytics.

In 2025, they slashed it to 5 links per month. Five. And they started showing full-screen interstitial ads before redirecting — even on links you created years ago.

In 2026, their cheapest paid plan is $10/month — just to shorten links without ads.

I was paying $120/year to turn long URLs into short ones. A problem that takes 3 lines of code to solve.

So I solved it myself. For free. Forever.

Introducing ZipLink

ZipLink is a fast, self-hostable URL shortener built with Next.js and Firebase. Deploy it once, use it forever. No monthly fees. No link limits. No ads. No "upgrade to unlock analytics."

Your links. Your data. Your domain. Your rules.

https://yourdomain.com/abc123 → https://some-really-long-url.com/path/to/thing?utm=whatever

That's it. That's the product. Except you own it completely.

The State of URL Shorteners in 2026 (It's Embarrassing)

Let me show you what the "industry leaders" are charging for what is essentially a database lookup:

The Comparison Table

Feature	Bitly	Rebrandly	Short.io	Dub.co	TinyURL Pro	ZipLink
Monthly cost	$10-$300/mo	$13-$349/mo	$19-$149/mo	$24-$299/mo	$9.99/mo	$0
Annual cost	$96-$2,388/yr	$156-$4,188/yr	$228-$1,788/yr	$288-$3,588/yr	$119.88/yr	$0
Free tier links	5/month	10/month	1,000 total	25/month	Unlimited (no analytics)	Unlimited
Custom domain	Paid only	Free (1 domain)	Required	Paid only	Paid only	Yes (yours)
Click analytics	Paid only	Paid only	Free (basic)	Paid only	Paid only	Full, free
Link expiration	Paid only	Paid only	Yes	Yes	No	Yes
Password protection	Enterprise only	Paid only	Paid	Paid	No	Yes
API access	Paid only	Paid only	Yes	Yes	Paid	Full, free
QR codes	2 free, then paid	Paid	Yes	Paid	Paid	Unlimited
Self-hostable	No	No	No	Yes (complex)	No	Yes (simple)
Data ownership	Their servers	Their servers	Their servers	Their servers	Their servers	Your Firebase
Ads/interstitials	Yes (free tier)	No	No	No	Yes (free tier)	Never
Links disappear if you stop paying	Yes	Yes	Yes	Yes	Yes	No — you own them

That last row is the killer. With every paid service, if you cancel your subscription, your links die. Years of shared URLs, printed QR codes, embedded links in emails — all broken. They're holding your links hostage.

ZipLink? Your links live as long as your Firebase project exists (which is free-tier forever for this use case).

What ZipLink Actually Does

Core Features

Instant shortening — Paste a URL, get a short link in <100ms
Custom slugs — Choose your own back-half: yourdomain.com/my-cool-link
Auto-generated slugs — Random 6-character codes when you don't care
Click analytics — Total clicks, clicks over time, referrers, countries, devices
Link expiration — Set links to auto-disable after a date or click count
Password protection — Require a password to access the destination
QR code generation — Every link gets a downloadable QR code automatically
Bulk shortening — Paste 100 URLs, get 100 short links
API — Full REST API for programmatic link creation
Dashboard — Clean UI to manage all your links

What It Doesn't Do (And Why)

No team collaboration — It's a personal tool. Fork it and add auth if you need teams.
No A/B testing — Keep it simple. Use proper A/B tools for that.
No "link-in-bio" pages — That's a different product. Focus.

The Technical Architecture

Stack

Layer	Technology	Why
Frontend	Next.js 14 (App Router)	SSR for fast link resolution, React for dashboard
Database	Firebase Firestore	Free tier handles ~50K reads/day, zero ops
Auth	Firebase Auth	Google sign-in for dashboard access
Hosting	Vercel	Free tier, global edge network
Domain	Any registrar	Point your domain, done
Analytics	Custom (Firestore)	No third-party tracking scripts

How Link Resolution Works

When someone hits yourdomain.com/abc123, the redirect happens at the edge in ~50ms:

// app/[slug]/route.ts — Next.js route handler
import { NextRequest, NextResponse } from 'next/server';
import { db } from '@/lib/firebase';
import { doc, getDoc, updateDoc, increment } from 'firebase/firestore';

export async function GET(
  request: NextRequest,
  { params }: { params: { slug: string } }
) {
  const { slug } = params;

  // Look up the short link
  const linkRef = doc(db, 'links', slug);
  const linkSnap = await getDoc(linkRef);

  if (!linkSnap.exists()) {
    return NextResponse.redirect('/404');
  }

  const link = linkSnap.data();

  // Check if link is expired
  if (link.expiresAt && new Date() > link.expiresAt.toDate()) {
    return NextResponse.redirect('/expired');
  }

  // Check if click limit reached
  if (link.maxClicks && link.clicks >= link.maxClicks) {
    return NextResponse.redirect('/expired');
  }

  // Record the click (non-blocking)
  updateDoc(linkRef, { 
    clicks: increment(1),
    lastClickedAt: new Date(),
  });

  // Record analytics
  recordClick(slug, {
    referrer: request.headers.get('referer'),
    country: request.geo?.country,
    device: parseUserAgent(request.headers.get('user-agent')),
    timestamp: new Date(),
  });

  // Redirect
  return NextResponse.redirect(link.destination, { status: 301 });
}

The Analytics Pipeline

Every click is recorded with:

interface ClickEvent {
  slug: string;
  timestamp: Date;
  referrer: string | null;
  country: string | null;
  city: string | null;
  device: 'desktop' | 'mobile' | 'tablet';
  browser: string;
  os: string;
}

These are stored in a Firestore subcollection and aggregated on-read for the dashboard. For the free tier's 50K daily reads, this handles ~5,000 link clicks per day with full analytics — more than enough for personal use.

Cost Breakdown: Why It's Actually Free

Service	Free Tier Limit	ZipLink Usage
Firebase Firestore	50K reads, 20K writes/day	~5K reads, ~1K writes for moderate use
Firebase Auth	Unlimited users	1 (you)
Vercel Hosting	100GB bandwidth/month	<1GB for a URL shortener
Domain	N/A	~$10/year (only real cost)

Total: $0.83/month (just the domain, amortized). Compare that to $10-$300/month for Bitly.

Self-Hosting Guide (15 Minutes)

Prerequisites

A GitHub account
A Firebase account (free)
A Vercel account (free)
A custom domain ($10/year)

Steps

1. Clone the repo

git clone https://github.com/Tech-aficionado/ZipLink---Open-Source.git
cd ZipLink---Open-Source

2. Create a Firebase project

Go to console.firebase.google.com
Create new project → Enable Firestore → Enable Authentication (Google)
Copy your config keys

3. Set environment variables

NEXT_PUBLIC_FIREBASE_API_KEY=your-api-key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=123456
NEXT_PUBLIC_FIREBASE_APP_ID=your-app-id

4. Deploy to Vercel

vercel deploy --prod

5. Connect your domain

In Vercel dashboard → Settings → Domains → Add your domain
Update DNS records at your registrar

Done. You now own a URL shortener that will outlast every SaaS company charging you monthly.

The "But What If Firebase Shuts Down?" Argument

Fair concern. Here's why it doesn't matter:

Firebase's free tier has existed for 10+ years — Google isn't killing it
Your data is exportable — One command to dump all links as JSON
The code is framework-agnostic — Swap Firestore for Supabase, PlanetScale, or even a JSON file in 30 minutes
You have the source code — Worst case, migrate to any database. Your slugs and destinations are just key-value pairs.

Compare this to Bitly: if Bitly shuts down (or you stop paying), you have zero recourse. Your links are gone. Your QR codes on printed materials now point to nothing.

Real-World Use Cases

For Developers

Shorten GitHub links for tweets: yoursite.com/my-repo
Create memorable links for documentation: yoursite.com/docs
Track which README links get the most clicks

For Content Creators

Clean links for video descriptions: yoursite.com/latest-video
Track click-through rates from different platforms
Password-protect exclusive content links

For Indie Hackers

Product launch links with expiration: yoursite.com/ph-launch (expires after launch week)
Track which marketing channels drive traffic
Branded links that build domain authority

For Job Seekers

Portfolio link: yoursite.com/portfolio
Resume link with click tracking: yoursite.com/resume (know when recruiters view it)
Project-specific links: yoursite.com/my-saas

Why Not Just Use `yoursite.com/redirect`? (The "DIY" Argument)

You could set up Nginx redirects or a simple Express server. But you lose:

Analytics — Who's clicking? From where? When?
Dynamic management — Adding a new link means editing server config and redeploying
Expiration — No way to auto-expire links without custom cron jobs
Dashboard — No visual overview of all your links
QR codes — Manual generation every time
Password protection — Custom middleware for every protected link

ZipLink gives you all of this in a deployable package. It's the difference between "I could build a house" and "here's a house."

What's on the Roadmap

Edge caching — Cache popular links at Vercel's edge for <10ms redirects
Link grouping — Organize links into campaigns/folders
Webhook on click — Trigger automations when specific links are clicked
Import from Bitly — Migrate your existing Bitly links with one CSV upload
CLI tool — ziplink shorten https://long-url.com from your terminal
Browser extension — Right-click any page → "Shorten with ZipLink"
Slack bot — Share a link in Slack, auto-shorten with ZipLink

The Source

GitHub: github.com/Tech-aficionado/ZipLink---Open-Source
License: MIT
Stack: TypeScript (95.7%) + CSS (4.1%) + JavaScript (0.2%)
Deploy time: 15 minutes from zero to production

Final Thought

URL shortening is a solved problem. It's a database lookup. A key-value store. It's literally:

INPUT: slug
OUTPUT: redirect(destination)

And yet companies are charging $10-$300/month for this. With link limits. With ads. With analytics paywalls. With the implicit threat of "stop paying and your links die."

That's not a service. That's a hostage situation.

ZipLink is the exit strategy. Deploy once. Own forever. Pay nothing.

Your links should outlive your subscriptions.

How much are YOU paying per year just to shorten URLs? Do the math and drop it in the comments. I bet it's more embarrassing than you think.

Built by Shivansh Goel — AI & Full Stack Developer who refuses to pay rent on solved problems.

I Built a Git-Based Decision Tracker — Branch Your Life Choices, Commit Predictions, and Let Time Score Your Judgment

Shivansh Goel — Thu, 23 Jul 2026 12:17:20 +0000

Every developer knows the power of git branch. You experiment without fear, revert mistakes, and merge only what works.

But what if you could do the same thing with life decisions?

That's exactly what I built. And it's called Forkcast.

The Problem Nobody Talks About

We all face major crossroads:

Should I take this job offer or stay?
Should I learn Rust or Go next?
Should I co-found this startup or keep freelancing?
Should I move cities for that opportunity?

We make these calls based on gut feeling, maybe a pros/cons list, and then... we never look back to evaluate how good our judgment actually was.

Think about it. Do you actually know if you're a good decision-maker? Or do you just assume you are because you can't remember the bad calls?

There's no version control for decisions. No diff. No blame. No history. No accountability.

Until now.

Introducing Forkcast

Forkcast is a decision-tracking app that uses Git metaphors to help you:

Branch — Create a fork when you face a major choice (two or more paths)
Commit — Log your prediction with a confidence level ("I'm 80% sure taking this job is the right call")
Merge — Pick the path you actually take
Score — Come back months later and honestly rate how it went. Let time be the judge.

Over time, you build a track record of your own judgment. You discover patterns:

"I'm consistently overconfident about career moves"
"My technical bets are actually solid — 75% accuracy"
"I should stop trusting my gut on financial decisions"

It's a personal prediction market — with the UX of a Git client.

Why Git Metaphors?

Because developers already think in branches. The mental model is instant:

Git Concept	Forkcast Equivalent
`git branch`	Create a decision fork
`git commit -m "prediction"`	Log what you think will happen
`git merge`	Pick the path you're taking
`git log`	Review your decision history
`git blame`	See which "you" made that call
`git diff`	Compare what you predicted vs. what happened
`git revert`	Acknowledge a bad decision and course-correct

The metaphor isn't forced — it genuinely maps 1:1 to how decisions work. You explore options (branches), commit to one (merge), and live with the consequences (production).

How It Actually Works

Creating a Decision Fork

When you hit a crossroads, you create a new fork:

const decision: Decision = {
  id: crypto.randomUUID(),
  title: "Accept Google offer vs. stay at current startup",
  createdAt: new Date(),
  deadline: new Date('2025-09-01'), // When I need to decide by
  branches: [
    {
      id: 'branch-google',
      name: 'Accept Google Offer',
      description: 'L4 SWE role, Mountain View, $320k TC',
      predictedOutcome: 'Stable career growth, learn at scale, but less ownership',
    },
    {
      id: 'branch-stay',
      name: 'Stay at Startup',
      description: 'Early engineer, equity potential, wearing many hats',
      predictedOutcome: 'Higher risk, higher potential reward, more learning',
    },
  ],
  status: 'open', // open → committed → scored
};

Committing Your Prediction

Before you decide, you log what you think will happen for each path:

const prediction: Prediction = {
  decisionId: decision.id,
  chosenBranch: 'branch-stay',
  confidence: 72, // "I'm 72% sure staying is the right call"
  reasoning: `
    The startup has product-market fit, we're growing 20% MoM.
    If we hit Series A in 6 months, my equity is worth more than 
    2 years of Google salary. Risk is manageable.
  `,
  predictedScore: 8, // On a 1-10 scale, I expect this to be an 8/10 decision
  committedAt: new Date(),
};

This is the magic moment. You're writing down exactly what you believe so Future You can't rewrite history.

Merging — The Decision Is Made

You pick your path. The fork is merged. No going back.

decision.status = 'committed';
decision.mergedBranch = 'branch-stay';
decision.mergedAt = new Date();

Scoring — Time Is the Judge

3 months, 6 months, a year later — you come back and score:

const outcome: Outcome = {
  decisionId: decision.id,
  actualScore: 6, // Honest rating: 6/10
  reflection: `
    Startup didn't hit Series A. Pivoted twice. Learning was incredible 
    but financially it was neutral. Google would have been more stable.
    My confidence of 72% was too high — should have been 50/50.
  `,
  scoredAt: new Date(),
  calibrationDelta: prediction.confidence - 60, // I was 12% overconfident
};

Now you have data on your own judgment. Not a feeling. Data.

The Dashboard — Your Decision History

Over time, Forkcast builds a visual picture of your decision-making:

Calibration Chart

A graph showing your predicted confidence vs. actual outcomes. Perfect calibration = the diagonal line. If you say "80% confident" and you're right 80% of the time, you're well-calibrated.

Most people discover they're overconfident by 15-25%. Knowing this is incredibly valuable.

Decision Timeline

A git-log-style timeline showing:

Open forks (decisions you haven't made yet)
Committed decisions (waiting to be scored)
Scored decisions (color-coded: green = good call, yellow = okay, red = regret)

Pattern Detection

After 10+ scored decisions, Forkcast identifies patterns:

"You score highest on technical decisions (avg: 7.8/10)"
"Career decisions average 5.2/10 — consider seeking more external input"
"You consistently underestimate switching costs"

The Technical Architecture

Stack

Layer	Technology
Frontend	Next.js 14 (App Router) + TypeScript
Styling	Tailwind CSS + Framer Motion for animations
State	Zustand (local-first, persists to localStorage)
Data	IndexedDB via Dexie.js (all data stays on device)
Charts	Recharts for calibration visualizations
Deployment	Vercel (static, no server needed)

Why Local-First?

Your life decisions are deeply personal. They shouldn't sit on someone else's server. Forkcast stores everything in your browser's IndexedDB:

Zero server costs
Zero data breaches
Works offline
Export as JSON anytime
Optional: sync to your own cloud via CRDTs (planned)

// Dexie.js schema
const db = new Dexie('ForkcastDB');
db.version(1).stores({
  decisions: '++id, title, status, createdAt, mergedAt',
  predictions: '++id, decisionId, confidence, committedAt',
  outcomes: '++id, decisionId, actualScore, scoredAt',
});

The Git-Style UI

The interface mimics familiar Git tools:

┌─────────────────────────────────────────────────┐
│  FORKCAST — Your Decision History               │
├─────────────────────────────────────────────────┤
│                                                 │
│  ● ─── Accept Google Offer (abandoned)          │
│  │                                              │
│  ├─┐  "Accept Google vs. Stay at Startup"       │
│  │ │   Confidence: 72% → Actual: 6/10          │
│  │ │   Calibration: -12% (overconfident)        │
│  │ │                                            │
│  ● ─── Stay at Startup (merged) ✓              │
│  │                                              │
│  │                                              │
│  ● ─── Learn Rust (active)                      │
│  │                                              │
│  ├─┐  "Rust vs. Go for systems work"           │
│  │ │   Confidence: 65%                          │
│  │ │   Status: COMMITTED — awaiting score       │
│  │ │                                            │
│  ● ─── Learn Go (abandoned)                     │
│                                                 │
└─────────────────────────────────────────────────┘

The Psychology Behind It

Forkcast is built on three cognitive science principles:

1. Hindsight Bias Elimination

Humans are terrible at remembering what they actually believed before an outcome. Once we know the result, we convince ourselves "I knew it all along."

By writing predictions down before deciding, you can't gaslight yourself later.

2. Calibration Training

Research shows that prediction calibration is a trainable skill. Weather forecasters, for example, become excellently calibrated because they get fast, frequent feedback.

Forkcast gives you that feedback loop for life decisions — which normally have zero feedback mechanism.

3. The Mere Measurement Effect

The act of formally writing down a prediction changes how carefully you think about it. You can't just type "80% confident" without actually asking yourself "Am I really 80% sure?"

The tool makes you think harder just by existing.

Who Is This For?

Forkcast is for you if:

You're at a career crossroads and want to think more clearly
You're a founder making high-stakes bets weekly
You're interested in rationality, calibration, or decision science
You want to look back in 5 years with data, not just fuzzy memories
You're a developer who appreciates the git metaphor

It's probably not for you if:

You prefer to live spontaneously without reflection
You're not comfortable being honest with yourself about outcomes
You think decisions can't be scored (they can — it's called regret)

Get Started

Try It

git clone https://github.com/Tech-aficionado/Forkcast---Open-Source-Git.git
cd Forkcast---Open-Source-Git
npm install
npm run dev

Open localhost:3000. Create your first fork. Commit a prediction. Set a reminder to come back and score it.

Deploy Your Own

One-click deploy to Vercel:

Your data stays in YOUR browser. The deployment is just a static site.

What's on the Roadmap

Decision templates — Pre-built frameworks for career, financial, technical, and relationship decisions
Reminder system — "Hey, you made a decision 6 months ago. Time to score it."
Export to Markdown — Generate a personal "decision journal" you can keep in Obsidian/Notion
CRDT sync — Optionally sync across devices without a central server
AI reflection — Plug in an LLM to challenge your reasoning before you commit
Team mode — Make group decisions with separate prediction commits from each member

The Source

GitHub: github.com/Tech-aficionado/Forkcast---Open-Source-Git
License: MIT
Stack: TypeScript (96.9%) + CSS (3.0%) + JavaScript (0.1%)
Philosophy: Local-first, privacy-respecting, no accounts required

Final Thought

You git log your code changes. You git blame bad commits. You git revert mistakes.

But for the decisions that actually shape your life — career moves, city changes, relationship choices, financial bets — you have zero version history.

You're essentially running rm -rf on your decision-making data every time you forget what you originally believed.

Forkcast fixes that. It gives you a commit history for your judgment.

And after a year of using it? You won't just think you're a good decision-maker. You'll know — with data.

What's a decision you made in the last year that you wish you'd tracked? Drop it in the comments. I'll share mine.

Built by Shivansh Goel — AI & Full Stack Developer building tools that make humans think more clearly.

I Built a React Component That Turns Any Portfolio Into a 3D Minecraft World

Shivansh Goel — Thu, 23 Jul 2026 12:08:17 +0000

I Built a React Component That Turns Any Portfolio Into a 3D Minecraft World

Every developer portfolio looks the same. Dark mode. Sans-serif font. "Hi, I'm X, a passionate developer." Scroll. Skills section with floating icons. Scroll. Projects in a grid. Scroll. Contact form nobody will fill.

Sound familiar?

I've reviewed hundreds of developer portfolios — as a peer, during hackathons, while hiring. They all blur into one. The content might differ, but the experience is identical.

So I asked myself a stupid question:

What if your portfolio was a playable Minecraft world instead?

And then I actually built it.

Introducing CraftFolio

CraftFolio is an open-source React component library that transforms your developer portfolio into a live, interactive 3D voxel environment.

Your projects become structures you can walk up to. Your skills become minable ores. Your experience becomes terrain you traverse. No two portfolios look alike because the world is generated from your data.

One component. One config object. A portfolio nobody forgets.

import { CraftFolio } from 'craftfolio';

function App() {
  return (
    <CraftFolio
      name="Shivansh Goel"
      role="Full Stack Developer"
      skills={['TypeScript', 'React', 'Python', 'FastAPI', 'Three.js']}
      projects={[
        { name: 'Forkcast', url: 'https://github.com/...', block: 'diamond' },
        { name: 'GhostRelay', url: 'https://github.com/...', block: 'obsidian' },
        { name: 'ZipLink', url: 'https://github.com/...', block: 'emerald' },
      ]}
      theme="overworld"
    />
  );
}

That's the entire integration. Drop it in, customize the config, deploy.

Why I Built This

Let me give you a number: 4.7 million.

That's how many repositories come up when you search "developer portfolio" on GitHub. Nearly five million variations of the same three-column layout with a hero section.

When a recruiter reviews 200 portfolios in a week, yours needs to be the one they remember at dinner.

"Honey, I saw this kid's portfolio today — it was literally Minecraft."

That's the unfair advantage CraftFolio gives you.

What You Actually Get

When you drop CraftFolio into your React app, it renders:

A 3D voxel world — real-time Three.js rendering with a Minecraft aesthetic
Walkable terrain — procedurally generated from your data
Project structures — your repos become buildings you can approach and click
Skill ores — your tech stack appears as glowing blocks scattered through the world
Day/night cycle — dynamic lighting that shifts over time
Keyboard navigation — WASD movement, mouse to look, click to interact
Mobile touch controls — virtual joystick + tap interaction
Responsive fallback — gracefully degrades to a styled 2D view on very old devices

The Technical Deep-Dive

Architecture

CraftFolio/
├── src/
│   ├── components/
│   │   ├── VoxelWorld.tsx        — Three.js scene, camera, renderer
│   │   ├── Terrain.tsx           — Procedural world generation
│   │   ├── PlayerControls.tsx    — First-person camera + WASD movement
│   │   ├── ProjectStructure.tsx  — Interactive project buildings
│   │   ├── SkillOre.tsx          — Floating/glowing skill blocks
│   │   └── HUD.tsx               — Overlay UI (name, minimap, controls hint)
│   ├── shaders/
│   │   ├── voxel.vert            — Vertex shader for block geometry
│   │   └── voxel.frag            — Fragment shader with pixelated lighting
│   ├── systems/
│   │   ├── WorldGenerator.ts     — Perlin noise terrain + structure placement
│   │   ├── PhysicsEngine.ts      — Simple AABB collision detection
│   │   └── InteractionManager.ts — Raycasting for click detection
│   ├── config/
│   │   └── themes.ts             — Overworld, Nether, End color palettes
│   └── index.ts                  — Public API export

Performance: 10,000+ Voxels at 60fps

The naive approach to rendering voxels is one mesh per block. At 10,000 blocks, that's 10,000 draw calls per frame. Your GPU melts.

CraftFolio uses instanced rendering — a single geometry is drawn thousands of times in one draw call, with per-instance transforms stored in a buffer:

const blockGeometry = new THREE.BoxGeometry(1, 1, 1);
const blockMaterial = new THREE.MeshLambertMaterial({ map: textureAtlas });

const instancedMesh = new THREE.InstancedMesh(
  blockGeometry,
  blockMaterial,
  MAX_BLOCKS
);

// Set position for each block instance
blocks.forEach((block, i) => {
  const matrix = new THREE.Matrix4();
  matrix.setPosition(block.x, block.y, block.z);
  instancedMesh.setMatrixAt(i, matrix);
});

// One draw call for ALL blocks
scene.add(instancedMesh);

Additional optimizations:

Frustum culling — don't render blocks behind the camera
Face culling — don't render faces between two adjacent solid blocks
LOD (Level of Detail) — distant blocks render as flat colored planes
Texture atlas — all block textures in one spritesheet = one texture bind

Result: Smooth 60fps on desktop, 30fps+ on mid-range mobile.

Terrain Generation with Perlin Noise

The world isn't random — it uses layered Perlin noise to create natural-looking hills and valleys:

function generateTerrain(width: number, depth: number): BlockData[] {
  const blocks: BlockData[] = [];

  for (let x = 0; x < width; x++) {
    for (let z = 0; z < depth; z++) {
      const baseHeight = perlin2D(x * 0.05, z * 0.05) * 8;
      const hills = perlin2D(x * 0.02, z * 0.02) * 12;
      const detail = perlin2D(x * 0.1, z * 0.1) * 2;

      const height = Math.floor(baseHeight + hills + detail) + 10;

      for (let y = 0; y <= height; y++) {
        blocks.push({
          x, y, z,
          type: y === height ? 'grass' : y > height - 3 ? 'dirt' : 'stone'
        });
      }
    }
  }

  return blocks;
}

Project structures are placed at terrain peaks — naturally visible from anywhere in the world.

The React + Three.js Marriage

Reconciling React's declarative model with Three.js's imperative scene graph is painful. Here's how CraftFolio solves it:

The scene lives in a ref — Three.js objects are created once and mutated, not re-rendered
React controls state — UI, config changes, and user data flow through React state
A bridge hook syncs them — useWorldSync() watches React state and imperatively updates the scene

function useWorldSync(config: CraftFolioConfig, sceneRef: RefObject<THREE.Scene>) {
  useEffect(() => {
    if (!sceneRef.current) return;

    rebuildProjectStructures(sceneRef.current, config.projects);
    rebuildSkillOres(sceneRef.current, config.skills);
    applyTheme(sceneRef.current, config.theme);
  }, [config.projects, config.skills, config.theme]);
}

This avoids the "React re-renders destroy my 3D scene" problem while keeping the developer API fully declarative.

Three Hard Lessons I Learned

1. Mobile Performance Is a Different Beast

On desktop with a discrete GPU, you can afford expensive shaders. On a 2020 mid-range Android phone? You're fighting for every millisecond.

I had to:

Reduce world size from 100x100 to 40x40 on mobile
Disable shadows on low-end devices
Implement a quality auto-scaler that drops render resolution if FPS dips below 24

2. Accessibility in a 3D World Is Hard (But Possible)

A recruiter using a screen reader can't "walk through" a 3D world. So CraftFolio includes:

An aria-live region that narrates: "You are near the Forkcast project. Press Enter to view details."
Keyboard-only navigation mode (arrow keys + tab)
A reduceMotion mode that shows a 2D card layout instead (respects prefers-reduced-motion)
All interactive elements in the tab order with proper labels

3. Bundle Size Wars

Three.js is ~150KB gzipped. For a portfolio component, that's heavy. My approach:

Three.js is a peer dependency — if you're already using it, no extra cost
Tree-shakeable imports — only pulling in what's needed
CraftFolio-specific code is ~45KB gzipped
Lazy loading — the 3D world only initializes when entering the viewport

Themes: Choose Your Dimension

CraftFolio ships with three themes:

Theme	Vibe	Best For
Overworld	Green grass, blue sky, warm lighting	Friendly, approachable portfolios
Nether	Dark red, lava lakes, dramatic shadows	Edgy/gaming-focused developers
End	Purple void, floating islands, ethereal glow	Creative/artistic portfolios

<CraftFolio theme="nether" />

You can also pass a custom theme object for full control over colors, skybox, and block textures.

Who Is This For?

Use CraftFolio if you're:

A junior dev who needs to stand out in a brutal job market
An experienced dev who wants something memorable for their personal brand
A game dev who wants their portfolio to demonstrate their passion
A content creator who needs a unique landing page
Anyone tired of the same Tailwind/Next.js portfolio template

Don't use CraftFolio if:

Your target audience is strictly corporate/enterprise
You need perfect Lighthouse accessibility scores
You're applying to a company that blocks WebGL

Get Started in 60 Seconds

Install

npm install craftfolio three @types/three

Basic Usage

import { CraftFolio } from 'craftfolio';

export default function Portfolio() {
  return (
    <CraftFolio
      name="Your Name"
      role="Your Title"
      skills={['React', 'Node.js', 'Python']}
      projects={[
        {
          name: 'My Cool Project',
          description: 'A brief description',
          url: 'https://github.com/you/project',
          block: 'diamond',
        },
      ]}
      theme="overworld"
      controls="wasd"
      onProjectClick={(project) => window.open(project.url)}
    />
  );
}

Deploy

Works with any React hosting:

vercel deploy
netlify deploy
GitHub Pages
Any static host

What's on the Roadmap

Multiplayer mode — Visitors see each other as pixelated avatars
Custom block textures — Upload your own pixel art
NPM CLI scaffolder — npx create-craftfolio
Weather system — Rain, snow, or sunshine based on location
Sound effects — Footsteps, ambient music, interaction clicks
Analytics integration — Track which projects visitors interact with most

The Source

GitHub: github.com/Tech-aficionado/CraftFolio---Open-Sourced-Minecraft-Portfolio-Library
License: MIT
Stack: TypeScript (83.8%) + HTML (8.0%) + CSS (5.7%) + JavaScript (2.5%)
Bundle: ~45KB gzipped (Three.js peer dependency)

Final Thought

The best portfolio isn't the one with the most impressive project list. It's the one the recruiter remembers.

Five million portfolios on GitHub. Five million dark-mode hero sections. Five million "passionate developer" taglines.

Or... one Minecraft world that someone actually played for two minutes.

Which one do you think gets the callback?

Star it if you'd use it. Fork it if you'd improve it. And drop a comment with YOUR most creative portfolio idea — I want to see what this community comes up with.

Built by Shivansh Goel — AI & Full Stack Developer building intelligent web platforms.

DEV Community: Shivansh Goel

I Got Doxxed Through My Real Email — So I Built a Free, Self-Hosted Email Aliasing Service on Cloudflare

The Problem: Your Email Is Your Identity (And It's Everywhere)

Introducing GhostRelay

How It Works (The Architecture)

The Email Worker (Core Logic)

The Dashboard

The Comparison: GhostRelay vs. Every Paid Alternative

The Key Differentiator

Why Not Just Use Gmail's "+" Trick?

Real-World Usage Patterns

The "One Alias Per Service" Strategy

The "Temporal Alias" Strategy

The "Identity Separation" Strategy

Self-Hosting Guide (15 Minutes, I Timed It)

What You Need

Step-by-Step

Cost Breakdown: The Math That Makes Paid Services Embarrassing

Security Model

What GhostRelay Protects Against

What GhostRelay Does NOT Protect Against

Trust Model

FAQ

The Source

Final Thought

I Rebuilt the 90s Tamagotchi for the Browser — And Accidentally Learned More About State Machines Than Any Tutorial Taught Me

Why Build a Virtual Pet in 2025?

1. Nostalgia Is a Distribution Hack

2. Game State Machines Are Criminally Underrated

3. Not Everything Needs to Be a SaaS

Meet Your New Pet

The Game Loop: Real-Time Decay

The State Machine: Evolution & Life Stages

The Tab-Close Problem (Hardest Bug I Shipped)

The CSS-Only Rendering (Zero Canvas, Zero WebGL)

Pixel Art with Box Shadows

Animations with @keyframes

Emotional Design: Making People Care About a Div

1. The Pet Should Look at You

2. Reactions Should Be Immediate and Exaggerated

3. Death Should Hurt (A Little)

4. Name Your Pet

What I Learned (That Transfers to Real Engineering)

1. State Machines Are the Answer to 80% of UI Bugs

2. Time-Based Systems Are Deceptively Hard

3. The 10% of Polish Takes 90% of the Time

The Full Feature List

Try It Now

Play Online

Deploy Your Own

What's Next

The Source

Final Thought

I Built a Self-Hostable URL Shortener Because Bitly Now Charges $10/Month for Basic Links

Introducing ZipLink

The State of URL Shorteners in 2026 (It's Embarrassing)

The Comparison Table

What ZipLink Actually Does

Core Features

What It Doesn't Do (And Why)

The Technical Architecture

Stack

How Link Resolution Works

The Analytics Pipeline

Cost Breakdown: Why It's Actually Free

Self-Hosting Guide (15 Minutes)

Prerequisites

Steps

The "But What If Firebase Shuts Down?" Argument

Real-World Use Cases

For Developers

For Content Creators

For Indie Hackers

For Job Seekers

Why Not Just Use yoursite.com/redirect? (The "DIY" Argument)

What's on the Roadmap

The Source

Final Thought

I Built a Git-Based Decision Tracker — Branch Your Life Choices, Commit Predictions, and Let Time Score Your Judgment

The Problem Nobody Talks About

Why Not Just Use `yoursite.com/redirect`? (The "DIY" Argument)