# WowChat - Omnichannel Communication Platform

## Overview

WowChat is a modern omnichannel SaaS communication platform that enables businesses to manage multiple communication channels (WhatsApp, Email, SMS, Facebook, Instagram, VoIP) from a unified dashboard. The application is built as a full-stack web application with a React frontend and Express.js backend.

## User Preferences

Preferred communication style: Simple, everyday language.

## Recent Changes

### Contact Information Update (January 30, 2025)
- Updated all contact information across the website with actual WowChat.co details
- Email changed from hello@wowchat.co to info@wowchat.co
- Phone updated to +1 (630) 534-0223
- Address updated to 30 N Gould St., Sheridan, WY 82801 USA
- Removed placeholder office locations (San Francisco, London, Singapore)
- Updated company location from San Francisco to Sheridan, WY on About page
- Changes applied to: Home page, Contact page, and About page

### Color Scheme Update (January 28, 2025)
- Updated brand colors to match logo color #0066ff
- Changed primary brand color from orange to blue: `hsl(220, 100%, 50%)`
- Orange now serves as secondary/accent color: `hsl(14, 100%, 60%)`
- Updated all CTAs, navigation hovers, and feature highlights to use blue
- Applied blue-primary, orange-accent hierarchy throughout the website
- Completed full website migration: Home, Features, Pricing, About, and Contact pages
- All primary buttons, icons, highlights, and headlines now use blue color scheme
- This ensures brand consistency between logo and website colors

## System Architecture

### Frontend Architecture
- **Framework**: React 18 with TypeScript
- **Build Tool**: Vite for fast development and optimized production builds
- **Routing**: Wouter for lightweight client-side routing
- **State Management**: TanStack Query (React Query) for server state management
- **UI Framework**: shadcn/ui components built on Radix UI primitives
- **Styling**: Tailwind CSS with custom CSS variables for theming
- **Form Handling**: React Hook Form with Zod validation

### Backend Architecture
- **Runtime**: Node.js with Express.js framework
- **Language**: TypeScript with ES modules
- **API Pattern**: RESTful API endpoints
- **Data Storage**: In-memory storage (MemStorage) with interface for future database integration
- **Session Management**: Prepared for PostgreSQL session storage with connect-pg-simple

### Database Architecture
- **ORM**: Drizzle ORM configured for PostgreSQL
- **Schema**: Defined in shared directory for type safety across frontend/backend
- **Migrations**: Managed through Drizzle Kit
- **Current State**: Uses in-memory storage but configured for PostgreSQL migration

## Key Components

### 1. Shared Schema (`shared/schema.ts`)
- Centralized database schema definitions
- Type-safe data models for User and ContactSubmission entities
- Zod validation schemas for form inputs
- Single source of truth for data structures

### 2. Storage Layer (`server/storage.ts`)
- Abstract IStorage interface for data operations
- MemStorage implementation for development/testing
- Prepared for database implementation with minimal changes
- Handles users and contact submissions

### 3. API Routes (`server/routes.ts`)
- Contact form submission endpoint (`POST /api/contact`)
- Contact submissions retrieval (`GET /api/contact-submissions`)
- Error handling with Zod validation
- RESTful design patterns

### 4. Frontend Pages
- **Home**: Landing page with hero section and feature highlights
- **Features**: Detailed feature showcase with omnichannel capabilities
- **Pricing**: Tiered pricing plans (Starter, Professional, Enterprise)
- **About**: Company information and team details
- **Contact**: Contact form with validation
- **Blog**: Content marketing section

### 5. UI Components
- Reusable components built on shadcn/ui
- Form components with validation
- Navigation and layout components
- SEO optimization components

## Data Flow

1. **Frontend Form Submission**: User fills contact form with validation
2. **API Request**: Form data sent to `/api/contact` endpoint
3. **Validation**: Server validates using Zod schemas
4. **Storage**: Data stored via storage interface
5. **Response**: Success/error response sent to frontend
6. **UI Update**: Toast notification shown to user

## External Dependencies

### Core Dependencies
- **@neondatabase/serverless**: PostgreSQL serverless driver
- **drizzle-orm**: Type-safe ORM for database operations
- **@tanstack/react-query**: Server state management
- **@radix-ui/***: Accessible UI primitives
- **wouter**: Lightweight router
- **react-hook-form**: Form handling
- **zod**: Schema validation

### Development Tools
- **Vite**: Build tool and dev server
- **TypeScript**: Type safety
- **Tailwind CSS**: Utility-first styling
- **ESBuild**: Production bundling

## Deployment Strategy

### Development
- Vite dev server for frontend with HMR
- tsx for TypeScript execution in development
- File watching and auto-reload

### Production Build
- Vite builds optimized frontend bundle
- ESBuild bundles backend for Node.js
- Static assets served from Express
- Single deployment artifact

### Environment Configuration
- Environment-based configuration
- Database URL from environment variables
- Replit-specific optimizations included

### Architecture Decisions

1. **Monorepo Structure**: Frontend, backend, and shared code in single repository for easier development and type sharing

2. **In-Memory Storage**: Chosen for rapid prototyping with clear migration path to PostgreSQL via Drizzle ORM

3. **Shared Schema**: TypeScript types and Zod schemas shared between frontend and backend ensure data consistency

4. **Component-Based UI**: shadcn/ui provides consistent, accessible components while maintaining customization flexibility

5. **API-First Design**: RESTful API design allows for future mobile app or third-party integrations

6. **Type Safety**: End-to-end TypeScript ensures compile-time error catching and better developer experience