Ticketing System for Customer Support

A full-stack web application for managing customer support requests. Features separate frontend (React) and backend (Node.js) with JWT authentication, MongoDB database, and Tailwind CSS styling.

Project Structure

.
├── backend/              # Node.js + Express API
│   ├── models/          # MongoDB schemas
│   ├── controllers/     # Business logic
│   ├── routes/          # API routes
│   ├── middleware/      # Authentication middleware
│   ├── config/          # Database config
│   ├── server.js        # Main server file
│   └── package.json
├── frontend/            # React + Vite application
│   ├── src/
│   │   ├── pages/       # Page components
│   │   ├── components/  # Reusable components
│   │   ├── context/     # Auth context
│   │   ├── utils/       # API calls
│   │   ├── App.jsx      # Main app
│   │   └── main.jsx     # Entry point
│   └── package.json

Features

Customer Portal

• ✅ User registration and secure login
• ✅ Create support tickets
• ✅ Track ticket progress in real-time
• ✅ Add comments and communicate with support
• ✅ View ticket history

Admin Dashboard

• ✅ View all tickets from all customers
• ✅ Update ticket status (new → in-progress → completed → closed)
• ✅ Assign tickets to team members
• ✅ Respond to customer comments
• ✅ Filter by service type and priority

Service Types

• Web Development
• Software Development
• IT Support
• Maintenance
• Consulting
• Other

Priority Levels

• Low
• Medium
• High
• Urgent

Tech Stack

Backend:

• Node.js
• Express.js
• MongoDB
• JWT (JSON Web Tokens)
• bcryptjs (password hashing)

Frontend:

• React 18
• Vite (build tool)
• Tailwind CSS
• Axios (API calls)
• React Router

Prerequisites

• Node.js 14+ and npm
• MongoDB (local or cloud instance)
• Git

Installation & Setup

1. Backend Setup

cd backend

# Install dependencies
npm install

# Create .env file from example
cp .env.example .env

# Update .env with your MongoDB URI and JWT secret
# Example:
# PORT=5000
# MONGODB_URI=mongodb://localhost:27017/your-mongodb.url
# JWT_SECRET=your_secure_secret_key
# NODE_ENV=development
# FRONTEND_URL=http://localhost:5173

# Start the server
npm run dev

Backend will run on http://localhost:5000

2. Frontend Setup

cd frontend

# Install dependencies
npm install

# Start the development server
npm run dev

Frontend will run on http://localhost:5173

API Endpoints

Authentication

• POST /api/auth/register - Register new user
• POST /api/auth/login - User login
• GET /api/auth/profile - Get current user (requires token)

Tickets

• POST /api/tickets - Create new ticket
• GET /api/tickets - Get tickets (own if customer, all if admin)
• GET /api/tickets/:id - Get ticket details
• PUT /api/tickets/:id/status - Update status (admin only)
• PUT /api/tickets/:id/assign - Assign ticket (admin only)
• POST /api/tickets/:id/comments - Add comment

Usage

For Customers

1. Register: Click "Register" and create an account
2. Submit Ticket: Go to dashboard and click "Create New Ticket"
3. Fill Details: Enter title, description, service type, and priority
4. Track Progress: View your tickets and see status updates
5. Communicate: Add comments to tickets for real-time communication

For Admin

1. Login: Use your admin account credentials
2. View All Tickets: Admin dashboard shows all customer tickets
3. Update Status: Change ticket status as work progresses
4. Respond: Add comments to communicate with customers
5. Manage: Organize tickets by priority and service type

Database Schema

User Model

• name (string)
• email (string, unique)
• password (string, hashed)
• role (enum: 'customer', 'admin')
• company (string, optional)
• createdAt, updatedAt

Ticket Model

• ticketNumber (string, auto-generated)
• title (string)
• description (string)
• serviceType (enum)
• priority (enum: 'low', 'medium', 'high', 'urgent')
• status (enum: 'new', 'in-progress', 'completed', 'closed')
• customerId (ref: User)
• assignedTo (ref: User, optional)
• comments (array of objects)
• createdAt, updatedAt

Deployment

Backend (Node.js)

• Railway, Render, or Heroku
• Set environment variables on the platform
• Push to GitHub and connect repository

Frontend (React)

• Vercel, Netlify
• Update API_URL in src/utils/api.js to your backend URL
• Push to GitHub and connect repository

Future Enhancements

• Email notifications for ticket updates
• File attachments to tickets
• Advanced search and filtering
• Ticket templates
• Analytics dashboard
• SLA tracking
• Knowledge base integration
• Live chat support
• Mobile app

Environment Variables

Backend (.env)

PORT=5000
MONGODB_URI=mongodb://localhost:27017/ticketing-system
JWT_SECRET=your_jwt_secret_key_here
NODE_ENV=development
FRONTEND_URL=http://localhost:5173

Frontend

Update API_URL in src/utils/api.js based on your backend URL

Troubleshooting

Connection Issues:

• Ensure MongoDB is running
• Check backend is running on port 5000
• Verify frontend can reach backend URL

Authentication Problems:

• Clear browser localStorage (tokens)
• Check JWT_SECRET is set correctly
• Verify user email/password

API Errors:

• Check browser console for error messages
• Check backend terminal for server errors
• Verify CORS configuration in server.js

License

MIT

Support

For issues or questions, please create an issue in the repository.