Meeting Planner (React + Vite + Tailwind CSS)

Interactive meeting planner that compares local times across multiple time zones. Built with React, TypeScript, Vite, and Tailwind CSS.

Features

• Search and add time zones from a curated list.
• Color-coded chips and timeline cards that stay in sync via palette indexing.
• Scrollable 6-hour comparison grid with “next day” highlighting.
• Persistent base timezone (Asia/Shanghai) selector with live time preview.
• Responsive layout and dark mode-ready design via Tailwind tokens.

Live Demo

View the live demo here

Prerequisites

• Node.js 18+
• pnpm 9+

Scripts

Run the development server:

pnpm dev

Type-check and build for production:

pnpm build

Preview the production build locally:

pnpm preview

Lint the codebase:

pnpm lint

Tailwind CSS

Tailwind is configured via tailwind.config.js with custom color tokens, font family, and border radius extensions. Global styles and Tailwind directives live in src/index.css.

Project Structure

• src/App.tsx – Main meeting planner UI and logic.
• src/index.css – Tailwind base imports plus shared utility styles.
• tailwind.config.js – Tailwind theme configuration.
• postcss.config.js – PostCSS pipeline wiring for Tailwind.

Deployment

Any static host that serves the build output from dist/ (for example Vercel, Netlify, or GitHub Pages) will work. Run pnpm build and upload the generated artifacts.