Branch Customer Messaging System

A full-stack customer messaging application with AI-powered analysis, real-time updates and a web dashboard.

🌐 Live Demo

Service	URL
Frontend	https://branch-chat-system-application.vercel.app
Backend API	https://branch-chat-system-application-1.onrender.com/api/health

🌟 Features

Core Functionality

• Customer Message Management: View, filter and respond to customer messages
• AI-Powered Analysis: Automatic message analysis for urgency, sentiment and suggested responses using Google Gemini AI
• Real-time Updates: Server-Sent Events (SSE) for live message notifications
• CSV Import: Bulk import messages from CSV files
• Canned Responses: Pre-built response templates for quick replies

User Experience

• Advanced Search: Search by customer name, email or message content with debouncing
• Pagination: Load more functionality for large message volumes
• Offline Detection: Visual indicator and graceful handling of offline states
• Keyboard Shortcuts: Quick actions (Escape to close modals, Ctrl+R to refresh)
• Responsive Design: Works on desktop and mobile devices

Technical Features

• Request Caching: Optimized API calls with client-side caching
• Error Boundaries: Graceful error handling with recovery options
• Skeleton Loading: Smooth loading states for better perceived performance
• Memoized Components: Optimized React rendering with React.memo

🛠️ Tech Stack

Backend

• Framework: Express.js
• Database: SQLite
• AI: Google Gemini 2.0 Flash
• Real-time: Server-Sent Events

Frontend

• Framework: React.js
• Styling: Tailwind CSS

📋 Prerequisites

• Node.js v18.0.0 or higher
• npm or yarn package manager
• Google Gemini API key (optional, for AI features)

🚀 Quick Start

1. Clone the Repository

git clone https://github.com/imhrsit/Branch-chat-system-application.git
cd Branch-chat-system-application

2. Backend Setup

cd server

# Install dependencies
npm install

# Create environment file
cp .env.example .env

# Edit .env with your configuration
# Add your Gemini API key if you want AI features

# Start the server
npm start

The backend will start on http://localhost:3001

3. Frontend Setup

cd client

# Install dependencies
npm install

# Start the development server
npm run dev

The frontend will start on http://localhost:5173

📄 CSV Import Format

The CSV file should contain the following columns:

customer_name,customer_email,customer_phone,message_content,account_type
John Smith,john@example.com,+1234567890,I need help with my account billing,premium
Jane Doe,jane@example.com,+0987654321,How do I reset my password?,standard
Bob Wilson,bob@company.com,+1122334455,URGENT: System is down for our team,enterprise

Required Columns

• customer_name - Customer's full name
• customer_email - Customer's email address
• message_content - The message content

Optional Columns

• customer_phone - Customer's phone number
• account_type - Account type: standard, premium, enterprise

⌨️ Keyboard Shortcuts

Shortcut	Action
Escape	Close modals or go back from conversation view
Ctrl + R	Refresh message list
Ctrl + Shift + I	Open CSV import modal

🔧 Development

Project Structure

branch_assignment/
├── server/                 # Backend application
│   ├── app.js             # Express app entry point
│   ├── routes/            # API route handlers
│   │   ├── messages.js    # Message endpoints
│   │   ├── customers.js   # Customer endpoints
│   │   ├── agents.js      # Agent endpoints
│   │   └── cannedResponses.js
│   ├── services/          # Business logic
│   │   └── aiService.js   # Gemini AI integration
│   ├── db/                # Database
│   │   └── init.js        # Database initialization
│   ├── utils/             # Utility functions
│   │   └── csvParser.js   # CSV parsing
│   └── data/              # Sample data
│
├── client/                 # Frontend application
│   ├── src/
│   │   ├── components/    # React components
│   │   │   ├── Navbar.jsx
│   │   │   ├── Sidebar.jsx
│   │   │   ├── MessageList.jsx
│   │   │   ├── MessageCard.jsx
│   │   │   ├── ConversationView.jsx
│   │   │   ├── Toast.jsx
│   │   │   ├── ImportCSVModal.jsx
│   │   │   ├── CannedResponsesModal.jsx
│   │   │   └── ErrorBoundary.jsx
│   │   ├── hooks/         # Custom React hooks
│   │   │   └── useSSE.js  # SSE, debounce, online status hooks
│   │   ├── services/      # API services
│   │   │   └── api.js     # API client with caching
│   │   ├── utils/         # Utility functions
│   │   │   └── helpers.js
│   │   ├── App.jsx        # Main app component
│   │   ├── main.jsx       # App entry point
│   │   └── index.css      # Global styles
│   └── index.html
│
└── README.md

📝 License

This project is created as an assignment for Branch International and is not licensed for commercial use.

🤝 Contact

For questions or feedback about this project:

• Developer: Harsh Tiwari

---