programming remote-working-tools learning-by-doing coding-projects developer-journey timezone-management bridgetime visual-timezone-scheduler time-scheduler

Bridgetime или то, как я строю визуальный планировщик часового пояса во время обучения, делая

1 августа 2025 г.

Timezone Tetris: Daily Grind стоимость отдаленных фрилансеров и глобальных команд

Каждый день распределенные команды тратят драгоценное время и умственную энергию, просто пытаясь назначить одну простую встречу:

«Можно ли сделать 2 часа дня по восточному пост во вторник?»
«Это 3 часа ночи для меня в Сиднее…»
«Подожди - это до или после дневного света?»
«Как насчет 9 утра PST?»

Если вы работали по часовым поясам, вы прожили это. То, что должно быть 30-секундным решением, превращается в многодневную нить путаницы, разочарования и математики часового пояса.

Поэтому я начал создавать решение, чтобы поцарапать свой собственный зуд. Это называетсяБриджит время- Визуальный планировщик часового пояса, который показывает перекрывающуюся доступность с первого взгляда.

Это все еще находится в стадии разработки, и я учусь (и испорчу), делая - каждый шаг на пути.

Моя северная звезда: заставьте планирование чувствовать себя мгновенным

Я не собирался создавать стартап или продавать продукт. Я просто хотел чего -то лучшего, чем это:

Старый путь (болезненный)

Электронная почта: «Когда все могут встретиться?»
Ответы в непоследовательных часовых поясах
Поиск Google или гимнастика электронной таблицы
Бесконечное разъяснение: «Подожди, ты имеешь в виду 9 утратвойвремя или мое? »
Субоптимальное время как минимум для одного человека
🧠 Ментальная утечка:Высокий
⏱Время потрачено впустую:15–30 минут

Что я строю с Бриджит

Нажмите, чтобы создать сессию встречи
Поделиться ссылкой
Товарищи по команде выбирают свое местоположение/часовой пояс (без входа, без электронной почты)
Визуальная временная шкала показывает лучшие перекрытия мгновенно
🧠 Ментальная утечка:Близкий
⏱Время потрачено:~ 2 минуты

Цель - не просто скорость - это полностью удаляет трение.

Технологический стек: быстрый, легкий, по краю первого

Я строю Bridget -Time с технологиями, которые хотел изучить, и это хорошо масштабируется во всем мире:

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

Почему Cloudflare?Потому что он ставит ваш код и данные рядом с пользователями повсюду, что важно при работе с данными, ориентированными на местоположение.

Почему следующий.js 15?Я хотел изучить компоненты сервера React и создать приложение, которое чувствует себя быстро без перегрузки.

Делать часовой поиск по человеческому

Пользователи не ищутAmerica/New_YorkПолем Они ищут:

"Нью-Йорк"
"СТАНДАРТНОЕ ВОСТОЧНОЕ ВРЕМЯ"
«Восточное время»
«Нью -Йорк»
«Ист -побережье США»

Итак, я построил многослойную поисковую систему с несколькими стратегиями:

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

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

Это все еще развивается - но «Нью -Йорк», «Бразилия» и «JFK» - все возвращают разумные результаты. Это цель.

Пользовательский интерфейс в реальном времени (без веб-питания)

Я думал, что мне понадобятся веб-питания для сотрудничества в реальном времени. Оказывается, простой опрос отлично справляется:

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]);

Почему это работает:

Нет управления соединением
Полностью совместим с страницами CloudFlare
Низкое воздействие батареи
Легко отлаживать

Иногда простота побеждает.

Визуальная временная шкала: основная функция

Временная шкала Бриджит - это центральная часть. Это картирует рабочее время участников и выделяется визуально:

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

Мобильный вызов

Установка 24-часовой временной шкалы на маленьких экранах была болезненной. Поэтому я создал «умное окно», которое автоматически выбирает наиболее релевантные 8 часов для мобильных пользователей:

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

Все еще усовершенствование, но опыт кажется гораздо более сосредоточенным и пригодным для использования.

Кэширование для глобальной скорости

Чтобы сделать поиск часового пояса быстро, я предварительно выпускаю и смотрит на кеш во время шага сборки:

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

Эти статические структуры загружаются в Cloudflare KV, поэтому поиск почти в любой точке мира.

Я также использую нативные переменные CSS для тематической темы - без накладных расходов времени выполнения:

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

Что я узнал (пока)

Начните с мобильного первого
Иногда опросы бьет веб -питания
Пользователи не заботятся о вашей архитектуре

Где он стоит

Bridgetime полностью анонимно и живет сегодня. Нет логин. Нет электронной почты. Просто интуитивно понятные потоки планирования, построенные для удаленных команд:

1. Всемирный вид часов - начните с часовых поясов

Добавьте часы для членов команды, клиентов или регионов. МАРЕКИ КАЖДЫЙ С помощью имени. Выберите участники → Создать сеанс → Выберите продолжительность → Получить лучшее перекрытие.

2. Планируйте встречу - начните с даты

У меня есть дата? Установите его, поделитесь ссылкой на сеанс и соберите доступность времени от Invitees.Once ответы, подтвердите и выберите лучшее время визуально.

Дорожная карта: что дальше

TBD :)

Я на самом деле использую, изучаю и обращаю внимание на отзывы.

Вещи могут измениться, я могу добавить учетные записи, чтобы вы могли подготовить свои часы с любого устройства ...

Я также знаю, что пользовательский интерфейс по -прежнему странно, моя жена выясняет цвета и значки.

Вскоре я напишу еще одну статью, представляющую следующий шаг.

Попробуйте. Сломать это. Скажи мне, что отстой :)

🟢 https://bridgetime.cc

Что будет дальше (на Hackernoon)

«Как я построил поисковую систему часового пояса 2 мс» »
«Почему я отказался от веб -питания для простых опросов»
... или что -то еще, давайте посмотрим, что будет дальше 😁

Bridgetime - моя песочница. Если вы когда -либо закричали внутренне в 2 часа дня? », Вы не одиноки. :)

Оригинал