TimezoneCrew ⏰🌍

A cyberpunk style timezone collaboration tool for remote teams! Solve the "what time is it there?" problem once and for all.

Features ✨

• 🕐 Real-time Team Time Display - See everyone's local time at a glance
• 📅 Schedule Parser - Paste any schedule text and automatically convert to everyone's local time
• 📊 Free Time Heatmap - Visualize overlapping working hours to find the perfect meeting time
• 👥 Team Management - Add, remove, and manage team members easily
• 🔗 Shareable Links - Generate links to share your team's timezone dashboard
• 🎨 Cyberpunk Aesthetic - Beautiful neon cyberpunk style interface
• 🌐 Global Team Visualization - Animated team connection visualization

Tech Stack 🛠️

• React 18 + TypeScript - Modern, type-safe frontend framework
• Vite - Lightning fast build tool and dev server
• Tailwind CSS - Utility-first CSS framework
• Zustand - Lightweight state management
• date-fns-tz - Timezone handling made easy
• Lucide Icons - Beautiful, consistent icon set

Getting Started 🚀

Installation

npm install

Development

npm run dev

Open http://localhost:5173 to view the application.

Build for Production

npm run build

Deploy to GitHub Pages

1. Create a repository on GitHub
2. Update vite.config.ts with your repository name
3. Configure your remote repository:

   git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO_NAME.git

4. Deploy:

   npm run deploy

Usage Guide 📖

1. Add Team Members - Click "ADD MEMBER" to add new team members with their timezone information
2. View Real-time Times - The main dashboard shows everyone's current time and date
3. Parse Schedules - Paste any text with dates/times in the Schedule Parser to see converted times
4. Find Meeting Times - Use the Free Time Heatmap to see when everyone is available
5. Share - Click "SHARE" to copy a shareable link to your team dashboard

Project Structure 📁

/workspace
├── src/
│   ├── components/         # React components
│   │   ├── Globe3D.tsx     # Team visualization component
│   │   ├── TimezoneCard.tsx # Individual timezone card
│   │   ├── ScheduleParser.tsx # Schedule parser
│   │   ├── FreeTimeHeatmap.tsx # Availability heatmap
│   │   └── AddMemberModal.tsx # Modal for adding members
│   ├── hooks/              # Custom React hooks
│   ├── store/              # Zustand state management
│   ├── utils/              # Utility functions
│   ├── types/              # TypeScript type definitions
│   ├── pages/              # Page components
│   ├── App.tsx             # Main app component
│   └── main.tsx            # App entry point
├── public/                 # Static assets
├── .trae/documents/        # Project documentation
├── package.json
├── vite.config.ts
├── tailwind.config.js
└── tsconfig.json

License 📄

MIT License - Feel free to use this project for your team!

Built with ❤️ for global remote teams

Never ask "what time is it there?" again!