A modern, feature-rich messaging interface built with React and TypeScript, showcasing dynamic message composition with inline variable insertion, multimedia support, and campaign management.
- Rich Text Messaging: Send and receive text messages with real-time updates
- Variable Insertion: Insert dynamic variables inline within messages for personalization
- Message Scheduling: Schedule messages to be sent at specific times
- Message Types: Support for text, carousel, and media messages
- Suggestion Buttons: Add interactive quick-reply buttons to messages
- Thread Management: Organize conversations into threads for better management
- Campaign Builder: Create and launch messaging campaigns to multiple recipients
- Recipient Management: Add, search, and manage recipients with detailed contact information
- Carousel Messages: Create rich carousel cards with images, titles, descriptions, and action buttons
- Media Messages: Send images, videos, and files with captions and suggestions
- View Modes: Switch between Chat, Scheduled, Sent, Threads, and Campaigns views
- Mobile-First Design: Responsive interface with dedicated mobile frame
- Dark/Light Mode Support: Built-in theme support via shadcn-ui
- Typing Indicators: Real-time typing feedback
- Empty States: Thoughtful empty state designs for all views
- Search & Filter: Search recipients and filter messages by status
- Framework: React 18 with TypeScript
- Build Tool: Vite
- Styling: Tailwind CSS with custom design system
- UI Components: shadcn-ui (Radix UI primitives)
- Routing: React Router v6
- State Management: React Query (TanStack Query)
- Date Handling: date-fns
- Icons: Lucide React
- Form Handling: React Hook Form with Zod validation
- Node.js 18+ and npm
- Git
- Clone the repository:
git clone <YOUR_GIT_URL>
cd <YOUR_PROJECT_NAME>- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
src/
├── components/ # React components
│ ├── ui/ # shadcn-ui components
│ ├── MessageBubble.tsx
│ ├── CarouselMessage.tsx
│ ├── MediaMessage.tsx
│ ├── ThreadBuilder.tsx
│ ├── CampaignItem.tsx
│ └── ...
├── pages/ # Route pages
│ └── Index.tsx # Main application page
├── lib/ # Utility libraries
│ ├── utils.ts
│ ├── chipHelpers.ts
│ └── dropdownHelpers.ts
├── utils/ # Utility functions
│ ├── messageCreator.ts
│ └── time.ts
├── hooks/ # Custom React hooks
├── index.css # Global styles & design system
└── main.tsx # Application entry point
The project uses a comprehensive design system defined in src/index.css and tailwind.config.ts:
- Semantic Color Tokens: HSL-based color system for consistent theming
- Gradients: Pre-defined gradient utilities (
bg-gradient-tech, etc.) - Message Styles: Custom message bubble colors and states
- Responsive Typography: Mobile and desktop font scaling
- Dark Mode: Automatic theme switching support
- Type your message in the input field at the bottom
- Use
{to insert variables (name, email, mobile) - Click send or press Enter
- Navigate to the Threads view
- Click "Create Thread"
- Add multiple messages with different types
- Save the thread for reuse
- Navigate to Campaigns view
- Click "Create Campaign"
- Select a thread and recipients
- Launch to send to all selected contacts
- Compose your message
- Click the clock icon
- Select date and time
- Confirm to schedule
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLint
npm run buildThe built files will be in the dist/ directory, ready for deployment.
You can deploy to any static hosting service (Vercel, Netlify, etc.) by building the project and uploading the dist/ folder.