A full-stack support ticket management system built with Node.js, Express, TypeScript, MongoDB, React, Vite, and TailwindCSS.
-
Dual Integration Modes:
- 🔗 Embeddable widget for any application
- 🌐 Standalone support portal
-
Core Functionality:
- ✅ Create and track support tickets
- 💬 Real-time chat with WebSocket support
- 🚨 Ticket escalation with email notifications
- 📊 Ticket status tracking (Open, In Progress, Resolved, Closed)
- 🎯 Priority levels (Low, Medium, High, Critical)
- 📧 Email notifications for escalations and updates
- 🔍 Filter and search tickets
- 📱 Responsive design
support-system/
├── backend/ # Node.js + Express + TypeScript
│ ├── src/
│ │ ├── models/ # MongoDB models
│ │ ├── controllers/ # Route controllers
│ │ ├── routes/ # API routes
│ │ ├── config/ # Database config
│ │ ├── utils/ # Utilities (email, ticket generator)
│ │ ├── middleware/ # Express middleware
│ │ └── server.ts # Main server file
│ ├── package.json
│ └── tsconfig.json
│
└── frontend/ # React + Vite + TypeScript
├── src/
│ ├── components/ # React components
│ ├── pages/ # Page components
│ ├── services/ # API and Socket services
│ ├── store/ # State management (Zustand)
│ ├── types/ # TypeScript types
│ ├── widget.tsx # Embeddable widget entry
│ └── main.tsx # Main app entry
├── public/
│ └── embed-example.html
├── package.json
└── vite.config.ts
- Node.js (v18 or higher)
- MongoDB (v6 or higher)
- npm or yarn
- Navigate to the backend directory:
cd backend- Install dependencies:
npm install- Create a
.envfile (copy from.env.example):
cp .env.example .env- Configure your environment variables in
.env:
PORT=5000
MONGODB_URI=mongodb://localhost:27017/support-system
NODE_ENV=development
CORS_ORIGIN=http://localhost:5173
# Email Configuration (optional, for escalation notifications)
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_USER=your-email@gmail.com
SMTP_PASS=your-app-password
SUPPORT_EMAIL=support@yourcompany.com- Start MongoDB:
# Using MongoDB service
mongod
# Or if using Docker
docker run -d -p 27017:27017 --name mongodb mongo:latest- Start the development server:
npm run devThe backend will run on http://localhost:5000
- Navigate to the frontend directory:
cd frontend- Install dependencies:
npm install- Create a
.envfile (copy from.env.example):
cp .env.example .env- Configure your environment variables in
.env:
VITE_API_URL=http://localhost:5000/api
VITE_SOCKET_URL=http://localhost:5000- Start the development server:
npm run devThe frontend will run on http://localhost:5173
Backend:
cd backend
npm run build
npm startFrontend (Standalone App):
cd frontend
npm run buildFrontend (Embeddable Widget):
cd frontend
npm run build:widgetAdd the following code to your application (e.g., kofoAfro):
<!-- Add before closing </body> tag -->
<link rel="stylesheet" href="http://your-domain.com/support-widget.css">
<script src="http://your-domain.com/support-widget.iife.js"></script>
<script>
window.addEventListener('load', function() {
window.SupportWidget.init({
applicationSource: 'KofoAfro',
position: 'bottom-right', // or 'bottom-left'
primaryColor: '#0ea5e9' // optional custom color
});
});
</script>Add a button or link in your application:
<a href="http://your-support-domain.com" target="_blank" class="support-button">
Get Support
</a>In your kofoAfro/frontend/index.html or layout component:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Your existing head content -->
</head>
<body>
<div id="root"></div>
<!-- Support Widget Integration -->
<link rel="stylesheet" href="http://localhost:5173/dist/support-widget.css">
<script src="http://localhost:5173/dist/support-widget.iife.js"></script>
<script>
window.addEventListener('load', function() {
if (window.SupportWidget) {
window.SupportWidget.init({
applicationSource: 'KofoAfro',
position: 'bottom-right',
primaryColor: '#0ea5e9'
});
}
});
</script>
</body>
</html>POST /api/tickets- Create a new ticketGET /api/tickets- Get all tickets (with filters)GET /api/tickets/stats- Get ticket statisticsGET /api/tickets/:ticketNumber- Get ticket by numberPOST /api/tickets/:ticketNumber/messages- Add message to ticketPATCH /api/tickets/:ticketNumber/status- Update ticket statusPOST /api/tickets/:ticketNumber/escalate- Escalate ticket
join-ticket- Join a ticket roomleave-ticket- Leave a ticket roomsend-message- Send a messagenew-message- Receive new messagestyping- User typing indicatoruser-typing- Receive typing notifications
You can customize the widget by passing configuration options:
window.SupportWidget.init({
applicationSource: 'Your App Name',
position: 'bottom-right', // 'bottom-right' or 'bottom-left'
primaryColor: '#your-color' // Any valid CSS color
});The widget uses TailwindCSS. You can override styles by targeting the widget classes in your application's CSS.
- CORS: Configure
CORS_ORIGINin backend.envto restrict API access - Email: Use app-specific passwords for email services
- MongoDB: Use authentication in production
- Environment Variables: Never commit
.envfiles - Rate Limiting: Consider adding rate limiting for API endpoints
The system sends email notifications for:
- Ticket escalations (to support team)
- Ticket updates (to users)
Configure SMTP settings in backend .env file.
Test the embeddable widget using the example HTML file:
# Open in browser
frontend/public/embed-example.htmlMIT
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
For issues or questions, create a support ticket using the system itself! 😄