Building MicroTZ: A Timezone Coordination Tool for Remote Teams

#productivity #sideprojects #showdev #tooling

As someone who's worked with remote teams across multiple continents, I thought building a Timezone coordination tool would be cool. I know there are several but none that served my needs all in one.

That led me to build MicroTZ - a simple timezone coordination tool that visualizes overlapping working hours across multiple timezones. And recently, I added a Slack bot integration that brings this functionality directly into your workspace.

MicroTZ shows you at a glance when everyone on your team is awake and working:

The core feature is a 24-hour timeline grid that displays:

Working hours for each timezone (9 AM - 5 PM by default)
Green highlights where ALL timezones overlap
Optimal meeting time suggestions with overlap scores
Shareable links (no login required)

Features

Free tier:

Compare up to 3 cities
Visual timeline grid
Working hours overlap detection
Shareable links
Save up to 3 timezone sets

Pro tier ($1/month):

Unlimited cities
Unlimited saved sets
CSV/ICS export
No watermark
Slack bot integration

Tech Stack: Keeping It Simple

Here's what powers MicroTZ:

const techStack = {
  frontend: "Next.js 14 + TypeScript + Tailwind CSS",
  backend: "Next.js API Routes",
  database: "Supabase (PostgreSQL)",
  auth: "Supabase Auth",
  payments: "Paddle",
  timezones: "Luxon",
  slackBot: "@slack/bolt + @slack/web-api",
  deployment: "Coolify"
}

Why These Choices?

Next.js 14: The App Router makes it incredibly easy to build both the UI and API in one codebase. Server Components help with performance, and the API routes are perfect for webhooks.

Supabase: PostgreSQL + instant APIs + auth + real-time subscriptions out of the box. I can focus on building features instead of auth flows.

The Slack Integration: Where It Gets Fun

I used Slack's Bolt SDK which makes building Slack apps surprisingly pleasant:

import { App } from '@slack/bolt'

const app = new App({
  token: process.env.SLACK_BOT_TOKEN,
  signingSecret: process.env.SLACK_SIGNING_SECRET
})

// Slash command: /timezone New York London Tokyo
app.command('/timezone', async ({ command, ack, say }) => {
  await ack()

  const cities = command.text.split(' ')
  const timezones = cities.map(city => cityToTimezone(city))
  const overlap = calculateTimezoneOverlaps(timezones)
  const meetingTimes = findOptimalMeetingTimes(overlap)

  await say({
    blocks: buildSlackBlocks(timezones, meetingTimes)
  })
})