Legal:
Dev Stack:
Server Stack:
A beautiful and intuitive timezone comparison tool built with React, TypeScript, and Vite. Simplify coordination across global teams and never miss a meeting due to timezone confusion again.
- Visual Comparison: Compare multiple timezones side by side with an intuitive timeline interface
- Timezone Groups: Create and manage timezone collections for different teams or projects
- Shareable Links: Generate compact URLs to share your exact timezone configuration
- Interactive Timeline: Beautiful visualization that makes finding overlapping hours easy
- Dark/Light Themes: Comfortable viewing in any lighting condition
- Internationalization: Support for 40+ languages with automatic detection
- Responsive Design: Works perfectly on desktop, tablet, and mobile devices
- Offline Support: Use the app even without an internet connection
- Privacy-Focused: No account required, no data collection
Timezoner is a modern web application designed to simplify timezone comparisons. Whether you're coordinating with international teams, planning global events, or just keeping track of friends and family across different time zones, Timezoner provides an elegant solution with its intuitive visual interface.
- Node.js (v16 or newer)
- npm (v7 or newer)
# Clone the repository
git clone https://github.com/Coppnic/timezoner.git
cd timezoner
# Install dependencies
npm install
# Start the development server
npm run devThe application will be available at http://localhost:5173 by default.
# Install dependencies
npm install
# Start development server with hot-reload
npm run dev
# Build for production
npm run build
# Preview production build locally
npm run preview
# Run linting
npm run lint- React 18: For building the user interface
- TypeScript: For type-safe code
- Vite: For fast development and optimized builds
- date-fns & date-fns-tz: For timezone handling and date manipulation
- i18next: For internationalization with support for 40+ languages
- SCSS: For styling with a modular approach
- Lucide React: For beautiful, consistent icons
- LZ-String: For URL compression when sharing timezone comparisons
- Lottie: For smooth animations
src/
├── assets/ # Static assets like images
├── components/ # React components
│ ├── EditableTitle.tsx # Editable title component
│ ├── Footer.tsx # Footer component
│ ├── GroupSelector.tsx # Timezone group selector
│ ├── LanguageSelector.tsx # Language selection component
│ ├── MobileTimeline.tsx # Mobile-optimized timeline view
│ ├── Timeline.tsx # Main timeline visualization
│ └── ... # Other components
├── context/ # React context providers
├── data/ # Timezone data and constants
├── hooks/ # Custom React hooks
├── i18n/ # Internationalization setup and translations
├── styles/ # SCSS styles
├── types/ # TypeScript type definitions
├── utils/ # Utility functions
├── App.tsx # Main application component
└── main.tsx # Application entry point
Visualize multiple timezones side by side with an intuitive timeline interface that makes it easy to find overlapping hours. The timeline highlights working hours, making it simple to identify the best times for meetings across different regions.
Create and save groups of timezones for different teams, projects, or scenarios. Switch between them with a single click. Perfect for managing multiple distributed teams or recurring international events.
Share your timezone comparisons with others via a compressed URL that preserves your exact configuration. Recipients can view your timezone setup without needing to recreate it manually.
The application is available in over 40 languages, automatically detecting the user's preferred language. This makes Timezoner accessible to users worldwide.
Works seamlessly on desktop, tablet, and mobile devices with a responsive layout that adapts to different screen sizes. The mobile view provides a specialized interface optimized for smaller screens.
Timezoner supports all modern browsers including:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
The application is configured for easy deployment on Netlify, but can be deployed on any static hosting service.
# Build the application
npm run build
# The build output will be in the 'dist' directory
# which can be deployed to any static hosting service- Timezone data appears incorrect: Ensure your system clock is correctly set
- Sharing URL doesn't work: Check that you're copying the entire URL
- Development server won't start: Make sure all dependencies are installed with
npm install
Contributions are welcome! Please check out our Contribution Guidelines for details on how to get started.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Timezoner is designed with privacy in mind. No user data is collected or stored on servers. All timezone configurations are stored locally in your browser or encoded in shareable URLs. For more information, see our Privacy Policy.
If you discover a security vulnerability, please follow our Security Policy for responsible disclosure.
Made with ❤️ by marvinpoo