IT Support Simulator: Managing IT Tickets Through Simulation

IT Support Simulator It is a practical project that I created to recreate real dynamics of IT support ticket management, in a simulated corporate helpdesk context.
A modern web application that combines technical training, problem solving And advanced frontend development.

πŸ”— Discover the project live: itsupport-simulator.paoloronco.it
πŸ”— Source code on GitHub: github.com/paoloronco/itsupport-simulator


Project Objective

The Ticket Manager Game was created with the aim of training and improving practical skills in IT ticket management. Through simulated situations β€” such as blocked workstations, network problems, hardware malfunctions and software configuration requests β€” the user must:

  • Analyze each request.
  • Use virtual diagnostic tools.
  • Select the most suitable solution from a list of real options.

The simulated solutions reflect standard IT support practices, such as:

  • Restart network services.
  • Reset user credentials.
  • Check hardware connections.
  • Update or rollback drivers.
  • Diagnose problems using system tools.

Technologies Used

For the development of the application I chose a modern technology stack and performance oriented:

  • Next.js β€” React framework for fast and scalable applications.
  • TypeScript β€” Typed language that improves code robustness.
  • Tailwind CSS β€” Utility-first framework for creating responsive and modern design.
  • Node.js And npm β€” For managing the development environment and dependencies.

Project Structure

Architecture is meant to be modular and easily extensible, following modern frontend development best practices:

. 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

This organization makes it simple:

  • Add new ticket scenarios.
  • Change or improve the user interface.
  • Extend the game with new features.

Main Features

  • Dynamic ticket generation: every game is different.
  • Realistic IT issue management.
  • Virtual Diagnostic Tool System.
  • Dark and modern design, optimized for desktop and mobile.
  • Automatic deployment on Vercel for maximum online accessibility.

How to Expand the Simulator

IT Support Simulator was also designed to be a learning base. It's easy to customize:

  • Add new problems modifying src/data/tickets.ts.
  • Creating new IT solutions in src/data/solutions.ts.
  • Configure custom diagnostic tools in src/data/tools.ts.
  • Customize the interface working in React components (src/components/).

Why This Project is Important to My Portfolio

IT Support Simulator it is not just a technical exercise, but a practical demonstration of my abilities in:

  • Advanced frontend design and development.
  • Complete management of the life cycle of a software project.
  • Mastery of modern technologies such as Next.js, TypeScript and Tailwind CSS.
  • Developing dynamic and engaging user experiences.

Furthermore, it represents a concrete example of my autonomy in developing complete applications: from ideation, to coding, to online deployment.


Explore the Project

πŸ”— Live Site: itsupport-simulator.paoloronco.it
πŸ”— GitHub Repository: github.com/paoloronco/itsupport-simulator