📌 Support Ticket System
A simple full-stack support ticketing system built with React (frontend) and Node.js + Express (backend). Users can log in, submit support tickets, view their ticket history per product, and receive email confirmations. Admin also gets notified via email when a ticket is created.
🚀 Features
🔐 User login (hardcoded for now, can be extended with DB later)
📝 Create support tickets with:
Product name
Title
Description
Category (General, Technical, Billing)
Priority (Low, Medium, High)
📩 Email notifications (sent to both user and admin)
🗂️ View ticket history by product (popup modal)
⏳ Loading spinner on ticket submission
👋 Logout option
🛠️ Tech Stack
Frontend: React (CRA), Fetch API
Backend: Node.js, Express.js, Nodemailer
Email Service: Gmail SMTP
Styling: Basic CSS (custom spinner)
📂 Project Structure Support-Ticket-System/ │── client/ # React frontend │ ├── src/ │ │ ├── App.js # Main React app │ │ ├── App.css # Styling (spinner, UI tweaks) │ │ └── index.js # Entry point │ └── package.json # React dependencies │ │── server/ # Node.js backend │ ├── index.js # Express server & routes │ ├── package.json # Backend dependencies │ └── config.json # Email configuration │ │── README.md # Project documentation
⚙️ Installation
-
Clone the repo git clone https://github.com/your-username/support-ticket-system.git cd support-ticket-system
-
Setup backend cd server npm install
Run backend:
node index.js
Server should start at: 👉 http://localhost:5000
- Setup frontend cd ../client npm install
Run frontend:
npm start
App should open at: 👉 http://localhost:3000
🔑 Login Credentials
For now, login is hardcoded (can be extended with DB):
User Email: [email protected]
Password: password123
📧 Email Configuration
Backend uses Nodemailer with Gmail.
Check server/config.json (or put in package.json for now):
"Email": { "Username": "[email protected]", "Password": "ensfuzffghnszohk", "SmtpServer": "smtp.gmail.com", "Port": 587 }
Replace Username & Password with your Gmail and App Password.
Both admin and user get an email when a ticket is created.
🖼️ Screenshots
✅ Login page
✅ Create ticket form
✅ Ticket list with "View History" popup
✅ Spinner on submit
🚧 Future Enhancements
Database integration (MongoDB / SQL) for persistent tickets
User registration & authentication (JWT / OAuth)
Admin dashboard for managing tickets
File attachments