Chat App Frontend

A modern, responsive chat application built with Next.js 15 and TypeScript.

Features

💬 Chat Interface

• Real-time messaging with message history
• Message status indicators (sent, delivered, read)
• Typing indicators and smooth animations
• Search functionality across conversations

🎨 Customization

• Theme Support: Light/Dark mode
• Color Customization: Easy and Advanced modes
• Font Size Options: Small, Medium, Large
• Automatic Contrast: Text color adjusts based on background

📱 Responsive Design

• Mobile-first approach with bottom navigation
• Desktop layout with sidebar navigation
• Seamless experience across all devices

📞 Call History

• Combined voice and video call history
• WhatsApp-style call details interface
• Quick actions (call back, video call, message)

⚙️ Settings

• Appearance customization
• Notifications preferences
• Privacy controls
• Account management

Tech Stack

• Framework: Next.js 15
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• State Management: Zustand
• Icons: Lucide React

Getting Started

Prerequisites

• Node.js 18+
• pnpm (recommended)

Installation

# Clone the repository
git clone <repository-url>
cd chat-app

# Install dependencies
pnpm install

# Run development server
pnpm dev

Open http://localhost:3000 to view the app.

Build for Production

# Build the application
pnpm build

# Start production server
pnpm start

Project Structure

src/
├── app/                 # Next.js app router pages
├── components/          # Reusable UI components
│   ├── ui/             # shadcn/ui components
│   └── ...             # Custom components
├── hooks/              # Custom React hooks
├── lib/                # Utility functions
├── store/              # Zustand state stores
└── styles/             # Global styles

Key Components

• ChatArea: Main messaging interface
• ChatSidebar: Conversation list with search
• TwoColumnLayout: Reusable responsive layout
• ColorPickerModal: Theme customization
• BottomNavigation: Mobile navigation

State Management

The app uses Zustand for state management with separate stores for:

• Chat: Conversations and selected chat
• Messages: Message history and operations
• Theme: Color and font customization
• UI: Interface state (sidebar, search)
• Calls: Call history management

Customization

Adding New Colors

Edit src/components/color-picker-modal.tsx to add new color options.

Modifying Themes

Update src/components/accent-color-provider.tsx for theme logic.

Adding New Pages

Create new pages in src/app/ following Next.js app router conventions.

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

MIT License - see LICENSE file for details.