Ticket Manager Game is an IT support ticket management simulator designed to recreate semi-realistic workplace situations within a helpdesk and office IT support environment. Through interacting with simulated requests, users learn how to recognize common issues, apply troubleshooting procedures, and propose real-world solutions.

The project is intended as a practical training tool, ideal for improving technical skills in IT support ticket management.

🔗 Live Demo: itsupport-simulator.paoloronco.it/

The system generates tickets in real time that describe typical IT issues in a work environment, such as: frozen workstations, network connectivity issues, peripheral malfunctions, software configuration requests, and security incidents.

Users must analyze each ticket, use available tools (diagnostic utilities, control panels, network monitors), and select the most appropriate solution from a list.

The solutions provided reflect real-world IT procedures, including:

• Restarting network services.
• Resetting user credentials.
• Checking hardware cabling.
• Updating or rolling back drivers.
• Diagnosing problems using standard IT tools.

• Next.js (React framework)
• TypeScript
• Tailwind CSS
• Other standard npm packages

.
project/
├── .gitignore
├── index.html
├── eslint.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── tailwind.config.js
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
├── src/
│   ├── main.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── vite-env.d.ts
│   ├── components/
│   │   ├── AudioManager.tsx
│   │   ├── DiagnosticTool.tsx
│   │   ├── DualMonitorSetup.tsx
│   │   ├── EndScreen.tsx
│   │   ├── GameControls.tsx
│   │   ├── GameScreen.tsx
│   │   ├── OfficeEnvironment.tsx
│   │   ├── SolutionPanel.tsx
│   │   ├── StartScreen.tsx
│   │   ├── TicketCard.tsx
│   │   ├── TicketMonitor.tsx
│   │   ├── ToolsMonitor.tsx
│   ├── contexts/
│   │   └── GameContext.tsx
│   ├── data/
│   │   ├── solutions.ts
│   │   ├── tickets.ts
│   │   ├── tools.ts
│   ├── hooks/
│   │   ├── useGame.ts
│   │   ├── useGameManager.ts
│   │   ├── useGameState.ts
│   │   ├── useTicketGenerator.ts
│   ├── types/
│   │   ├── solution.ts
│   │   ├── ticket.ts
│   │   ├── tool.ts
│   └── utils/
│       ├── formatters.ts
│       └── ticketGenerator.ts

Key files to modify if you want to expand or customize the project:

src/data/

tickets.ts: define new IT support scenarios.

solutions.ts: specify real-world solutions for each issue.

tools.ts: configure the available diagnostic and repair tools.

src/components/ Customize the user interaction screens such as GameScreen, TicketMonitor, SolutionPanel.

1. Install all required dependencies:

   npm install

2. Run the development server:

   npm run dev

If you want to simulate a production build locally:

npm run build
npm start

1. Create a new project on Vercel.
2. Connect your GitHub repository.
3. Vercel will automatically detect the Next.js setup and configure the deployment.
4. (Optional) Set environment variables if needed.

1. Clone the repository:

   git clone https://github.com/paoloronco/itsupport-simulator.git
   cd itsupport-simulator

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Build and run for production:

   npm run build
   npm start