https://github.com/loadmill/contact-center-demo
Contact Center Demo App
https://github.com/loadmill/contact-center-demo
Last synced: 10 months ago
JSON representation
Contact Center Demo App
- Host: GitHub
- URL: https://github.com/loadmill/contact-center-demo
- Owner: loadmill
- Created: 2025-03-12T16:29:08.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-07-13T20:08:56.000Z (11 months ago)
- Last Synced: 2025-07-13T22:10:27.539Z (11 months ago)
- Language: JavaScript
- Size: 266 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Loadmill Demo: Contact Center Test Automation
This project shows how Loadmill can automate testing for a contact center workflow. It features two views—one for the customer and one for the support agent.
## Project Structure
```
project-root/
├── backend/
│ ├── index.js
│ └── package.json
├── frontend/
│ ├── public/
│ │ └── index.html
│ ├── src/
│ │ ├── App.js
│ │ ├── CustomerChat.js
│ │ └── SupportAgent.js
│ └── package.json
└── package.json
```
## Setup and Running
1. **Clone the Repository**
```bash
git clone
cd project-root
```
2. **Install Dependencies**
At the project root, run:
```bash
npm install
```
This installs both backend and frontend dependencies.
3. **Start the Servers**
Use the dev script to run both servers concurrently:
```bash
npm run dev
```
- The backend (Express server) runs on port **3001**.
- The React development server runs on port **3000** with hot reloading.
- API calls from the React app are forwarded to the backend using the proxy setting in `frontend/package.json`.
4. **Open the App**
Open your browser and go to [http://localhost:3000](http://localhost:3000) to use the app.
## Customizing the Company Name
You can change the default company name ("Loadmill") by calling the URL with a query parameter. For example, to set the company to "Acme", visit:
```
http://localhost:3000/?company=Acme
```
When the Home page loads, the app saves the company name to localStorage. This value is then used across the customer and support agent views.
## Notes
- The backend uses an in-memory queue for messages. For production, consider a persistent storage solution.
- Nodemon is used for the backend to auto-restart on changes.
- The React development server provides live reloading for faster UI development.
- The company name persists across page reloads by storing it in localStorage.