Bridgetime or How I’m Building a Visual Timezone Scheduler While Learning by Doing | HackerNoon

Timezone Tetris: The Daily Grind Costing Remote Freelancers and Global Teams

Every day, distributed teams waste precious time and mental energy just trying to schedule one simple meeting:

“Can everyone do 2pm EST on Tuesday?”

“That’s 3am for me in Sydney…”

“Wait—is that before or after daylight saving?”

“How about 9am PST instead?”

If you’ve worked across time zones, you’ve lived this. What should be a 30-second decision turns into a multi-day thread of confusion, frustration, and timezone math.

So I started building a solution to scratch my own itch. It’s called BridgeTime—a visual timezone scheduler that shows overlapping availability at a glance.

It’s still a work in progress, and I’m learning (and messing up) by doing—every step on the way.

My North Star: Make Scheduling Feel Instant

I didn’t set out to build a startup or sell a product. I just wanted something better than this:

The Old Way (Painful)

1. Email: “When can everyone meet?”

2. Responses in inconsistent timezones

3. Google searches or spreadsheet gymnastics

4. Endless clarification: “Wait, you mean 9am your time or mine?”

5. A suboptimal time for at least one person

   🧠 Mental drain: High

   ⏱️ Time wasted: 15–30 minutes

What I’m Building with BridgeTime

1. Click to create a meeting session

2. Share a link

3. Teammates pick their location/timezone (no login, no email)

4. A visual timeline shows the best overlaps instantly

   🧠 Mental drain: Near-zero

   ⏱️ Time spent: ~2 minutes

The goal isn’t just speed—it’s removing friction completely.

Tech Stack: Fast, Lightweight, Edge-First

I’m building BridgeTime with technologies I wanted to explore and that scale well globally:

Framework:  Next.js 15 (App Router + Edge Runtime)  
Hosting:    Cloudflare Pages  
Database:   Cloudflare D1 (SQLite)  
Cache:      Cloudflare KV  
Styling:    Tailwind CSS + CSS Custom Properties  

Why Cloudflare? Because it puts your code and data near users everywhere—important when working with time-based, location-specific data.

Why Next.js 15? I wanted to learn React Server Components and build an app that feels fast without overengineering.

Making Timezone Search Human Friendly

Users don’t search for America/New_York. They search for:

• “New York”
• “EST”
• “Eastern Time”
• “NYC”
• “US East Coast”

So I built a layered search engine with multiple strategies:

const strategies = [
  searchByCity,
  searchByCountry,
  searchByAbbreviation,
  searchByAlias,
  searchByRegion
];

for (const strategy of strategies) {
  const matches = await strategy(query);
  // merge, deduplicate, rank
}

It’s still evolving—but “NYC”, “Brazil”, and “JFK” all return sensible results. That’s the goal.

Real-Time UI (Without WebSockets)

I thought I’d need WebSockets for real-time collaboration. Turns out, simple polling does the job just fine:

useEffect(() => {
  const interval = setInterval(async () => {
    const data = await fetch(`/api/session/${sessionId}`).then(r => r.json());
    if (data.lastModified > lastKnownUpdate) {
      setParticipants(data.participants);
    }
  }, 5000);

  return () => clearInterval(interval);
}, [sessionId]);

Why it works:

• No connection management
• Fully compatible with Cloudflare Pages
• Low battery impact
• Easy to debug

Sometimes simplicity wins.

The Visual Timeline: The Core Feature

BridgeTime’s timeline is the centerpiece. It maps participants’ working hours and highlights overlaps visually:

<div 
  className={`timeline-cell ${isWorkHour ? 'available' : 'unavailable'} ${isSelected ? 'selected' : ''}`}
  style={{
    backgroundColor: isWorkHour ? '#22c55e' : '#ef4444',
    opacity: isSelected ? 1 : 0.7
  }}
/>

The Mobile Challenge

Fitting a 24-hour timeline on small screens was painful. So I built a “smart window” that auto-selects the most relevant 8 hours for mobile users:

if (isMobile) {
  const bestWindow = findOptimalWindow(calculateOverlaps(participants), 8);
  return bestWindow;
}

Still refining it, but the experience feels far more focused and usable.

Caching for Global Speed

To make timezone search blazing fast, I precompute and cache lookups during the build step:

npm run build:cache
# Generates:
# trie-cache.json
# sorted-cache.json
# bloom-cache.json

These static structures are loaded into Cloudflare KV, so search is near-instant anywhere in the world.

I also use native CSS variables for theming—no runtime CSS overhead:

:root {
  --bt-bg: #f0f9ff;
  --bt-text: #1e293b;
  --bt-accent: #2563eb;
}

What I’ve Learned (So Far)

1. Start with mobile-first for real
2. Polling beats WebSockets sometimes
3. Users don’t care about your architecture

Where It Stands

BridgeTime is fully anonymous and live today. No logins. No email. Just intuitive scheduling flows built for remote teams:

1. World Clock View – Start With Timezones

Add clocks for team members, clients, or regions. Label each with a name.Select participants → create a session → choose duration → get best overlaps.

2. Plan a Meeting – Start With a Date

Have a date in mind? Set it, share a session link, and collect time availability from invitees.Once responses are in, confirm and choose the best time visually.

Roadmap: What’s Next

TBD 🙂

I am actually using, exploring and paying attention to feedbacks.

Things might change, I may add accounts so you can have your clocks set ready from any device…

I am also aware the UI is still strange, my wife is figuring out colors and icons.

I will write another article soon presenting the next step.

Try It. Break It. Tell me what sucks 🙂

🟢 https://bridgetime.cc

What’s Coming Next (On HackerNoon)

• “How I Built a 2ms Timezone Search Engine”
• “Why I Ditched WebSockets for Simple Polling”
• …or something else, let’s see what comes next 😁

BridgeTime is my sandbox. If you’ve ever screamed internally at ‘2pm EST?’, you’re not alone. 🙂