Timez - Time Zone Converter 時區轉換工具

​

專案簡介

「Timez - Time Zone Converter 時區轉換工具」是一個網頁應用程式，幫助你輕鬆在不同時區之間轉換時間並比較重疊時間段。

我與 Carol Hsiao 一起開發了這個專案，她用 Figma 設計了整個 UI，而我使用 Next.js 和 Tailwind CSS 將它實作出來。

​

Demo & 程式碼

Timez 是一個開源專案，你可以在這裡玩玩 Demo 網站和程式碼：

• Demo：timez.eason.ch
• 程式碼：github.com/Kamigami55/timezone-converter

​

為什麼我們要開發這個專案

我們最近剛從台灣搬到加拿大。台灣（UTC+8）和加拿大（UTC-7）之間有 15 小時的時差。

我們發現在台灣的家人和朋友常常不知道現在在加拿大是幾點，很難找到一個合適的時間來打電話給我們。

因此我們想開發一個小工具，幫助他們更容易在不同時區之間轉換時間、和比較重疊的時間段。

這就是為什麼我們決定開發「Time Zone Converter 時區轉換工具」。

​

主打功能

• **時區轉換：**輕鬆地在任何時區之間轉換時間。
• **晝夜時間比較：**比較重疊的晝夜時間段，以找到最合適的溝通時間。
• **深色模式支持：**UI 支援深色模式！

​

技術架構

我使用了我最喜歡的 Tech Stack 來開發這個專案：

• Next.js v14：開發體驗極佳的 React.js Framework，支援 Server Side Rendering 以利於 SEO
• TypeScript：加上型別的 JavaScript，讓長期維護更容易
• Tailwind CSS：用於快速 UI 開發的 CSS 框架
• shadcn/ui：美觀且功能全面的 UI 元件
• luxon：用來轉換日期和時間的程式庫
• @vvo/tzdb：時區列表的程式庫
• @dnd-kit：實現可拖曳（Drag and Drop）的介面
• Vercel：網站架設平台

​

畫面截圖

​

結語

我們希望這個小工具能幫助到你，讓你更輕鬆地在不同時區之間轉換時間，並找到最合適的溝通時間。

如果你有任何建議或問題，歡迎在下方留言讓我們知道，謝謝你的支持和閱讀！