A meeting time finder with an interactive 3D globe. Select cities, pick a time, and see the local time for each location. Handles daylight saving time transitions correctly.
- Fuzzy city search with 100+ cities across all major timezones
- Interactive 3D globe with city markers and connection arcs
- Draggable 24-hour timeline with 15-minute intervals
- Date picker with automatic DST handling
- Smart meeting time suggestions based on business hours overlap
- Copy formatted times or export to .ics calendar file
- Responsive layout for desktop and mobile
| Layer | Technology |
|---|---|
| Framework | Next.js 15 (App Router) |
| 3D Rendering | React Three Fiber, drei |
| Styling | Tailwind CSS |
| Animations | Framer Motion |
| Timezones | date-fns-tz |
| State | Zustand |
| Search | Fuse.js |
app/
page.tsx - Main application
layout.tsx - Root layout
globals.css - Global styles
components/
Globe/ - 3D globe, city pins, connection arcs
Timeline/ - Time selector, date picker, time cards
CityPicker/ - Search and city selection
Header/ - Copy, export, share buttons
lib/
cities.json - City database with coordinates and timezones
timezoneStore.ts - Application state
utils.ts - Time conversion utilities
This project is licensed under CC BY-NC 4.0.
You are free to share and adapt this code for non-commercial purposes, provided you give appropriate credit.