{"id":1016,"date":"2025-04-29T12:55:07","date_gmt":"2025-04-29T12:55:07","guid":{"rendered":"https:\/\/portfolio.paoloronco.it\/?p=1016"},"modified":"2025-11-18T10:08:38","modified_gmt":"2025-11-18T10:08:38","slug":"it-support-simulator-il-mio-progetto-di-simulazione-gestione-ticket-it","status":"publish","type":"post","link":"https:\/\/paoloronco.it\/en\/it-support-simulator-il-mio-progetto-di-simulazione-gestione-ticket-it\/","title":{"rendered":"IT Support Simulator: Managing IT Tickets Through Simulation"},"content":{"rendered":"<p class=\"wp-block-paragraph\"><strong>IT Support Simulator<\/strong> It is a practical project that I created to recreate real dynamics of IT support ticket management, in a simulated corporate helpdesk context.<br>A modern web application that combines <strong>technical training<\/strong>, <strong>problem solving<\/strong> And <strong>advanced frontend development<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">? <strong>Discover the project live<\/strong>: <a class=\"\" href=\"https:\/\/itsupport-simulator.paoloronco.it\/\">itsupport-simulator.paoloronco.it<\/a><br>? <strong>Source code on GitHub<\/strong>: <a class=\"\" href=\"https:\/\/github.com\/paoloronco\/itsupport-simulator\">github.com\/paoloronco\/itsupport-simulator<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Project Objective<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Ticket Manager Game<\/strong> was created with the aim of training and improving practical skills in IT ticket management. Through simulated situations \u2014 such as blocked workstations, network problems, hardware malfunctions and software configuration requests \u2014 the user must:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Analyze each request.<\/li>\n\n\n\n<li>Use virtual diagnostic tools.<\/li>\n\n\n\n<li>Select the most suitable solution from a list of real options.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The simulated solutions reflect standard IT support practices, such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Restart network services.<\/li>\n\n\n\n<li>Reset user credentials.<\/li>\n\n\n\n<li>Check hardware connections.<\/li>\n\n\n\n<li>Update or rollback drivers.<\/li>\n\n\n\n<li>Diagnose problems using system tools.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Technologies Used<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">For the development of the application I chose a <strong>modern technology stack<\/strong> and performance oriented:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Next.js<\/strong> \u2014 React framework for fast and scalable applications.<\/li>\n\n\n\n<li><strong>TypeScript<\/strong> \u2014 Typed language that improves code robustness.<\/li>\n\n\n\n<li><strong>Tailwind CSS<\/strong> \u2014 Utility-first framework for creating responsive and modern design.<\/li>\n\n\n\n<li><strong>Node.js<\/strong> And <strong>npm<\/strong> \u2014 For managing the development environment and dependencies.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Project Structure<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Architecture is meant to be <strong>modular<\/strong> and easily <strong>extensible<\/strong>, following modern frontend development best practices:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>. project\/ \u251c\u2500\u2500 .gitignore \u251c\u2500\u2500 index.html \u251c\u2500\u2500 eslint.config.js \u251c\u2500\u2500 package-lock.json \u251c\u2500\u2500 package.json \u251c\u2500\u2500 postcss.config.js \u251c\u2500\u2500 tailwind.config.js \u251c\u2500\u2500 tsconfig.app.json \u251c\u2500\u2500 tsconfig.json \u251c\u2500\u2500 tsconfig.node.json \u251c\u2500\u2500 vite.config.ts \u251c\u2500\u2500 src\/ \u2502 \u251c\u2500\u2500 main.tsx \u2502 \u251c\u2500\u2500 App.tsx \u2502 \u251c\u2500\u2500 index.css \u2502 \u251c\u2500\u2500 vite-env.d.ts \u2502 \u251c\u2500\u2500 components\/ \u2502 \u2502 \u251c\u2500\u2500 AudioManager.tsx \u2502 \u2502 \u251c\u2500\u2500 DiagnosticTool.tsx \u2502 \u2502 \u251c\u2500\u2500 DualMonitorSetup.tsx \u2502 \u2502 \u251c\u2500\u2500 EndScreen.tsx \u2502 \u2502 \u251c\u2500\u2500 GameControls.tsx \u2502 \u2502 \u251c\u2500\u2500 GameScreen.tsx \u2502 \u2502 \u251c\u2500\u2500 OfficeEnvironment.tsx \u2502 \u2502 \u251c\u2500\u2500 SolutionPanel.tsx \u2502 \u2502 \u251c\u2500\u2500 StartScreen.tsx \u2502 \u2502 \u251c\u2500\u2500 TicketCard.tsx \u2502 \u2502 \u251c\u2500\u2500 TicketMonitor.tsx \u2502 \u2502 \u251c\u2500\u2500 ToolsMonitor.tsx \u2502 \u251c\u2500\u2500 contexts\/ \u2502 \u2502 \u2514\u2500\u2500 GameContext.tsx \u2502 \u251c\u2500\u2500 data\/ \u2502 \u2502 \u251c\u2500\u2500 solutions.ts \u2502 \u2502 \u251c\u2500\u2500 tickets.ts \u2502 \u2502 \u251c\u2500\u2500 tools.ts \u2502 \u251c\u2500\u2500 hooks\/ \u2502 \u2502 \u251c\u2500\u2500 useGame.ts \u2502 \u2502 \u251c\u2500\u2500 useGameManager.ts \u2502 \u2502 \u251c\u2500\u2500 useGameState.ts \u2502 \u2502 \u251c\u2500\u2500 useTicketGenerator.ts \u2502 \u251c\u2500\u2500 types\/ \u2502 \u2502 \u251c\u2500\u2500 solution.ts \u2502 \u2502 \u251c\u2500\u2500 ticket.ts \u2502 \u2502 \u251c\u2500\u2500 tool.ts \u2502 \u2514\u2500\u2500 utils\/ \u2502 \u251c\u2500\u2500 formatters.ts \u2502 \u2514\u2500\u2500 ticketGenerator.ts<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This organization makes it simple:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add new ticket scenarios.<\/li>\n\n\n\n<li>Change or improve the user interface.<\/li>\n\n\n\n<li>Extend the game with new features.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Main Features<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Dynamic ticket generation<\/strong>: every game is different.<\/li>\n\n\n\n<li><strong>Realistic IT issue management<\/strong>.<\/li>\n\n\n\n<li><strong>Virtual Diagnostic Tool System<\/strong>.<\/li>\n\n\n\n<li><strong>Dark and modern design<\/strong>, optimized for desktop and mobile.<\/li>\n\n\n\n<li><strong>Automatic deployment on Vercel<\/strong> for maximum online accessibility.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">How to Expand the Simulator<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">IT Support Simulator was also designed to be a <strong>learning base<\/strong>. It&#039;s easy to customize:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Add new problems<\/strong> modifying <code>src\/data\/tickets.ts<\/code>.<\/li>\n\n\n\n<li><strong>Creating new IT solutions<\/strong> in <code>src\/data\/solutions.ts<\/code>.<\/li>\n\n\n\n<li><strong>Configure custom diagnostic tools<\/strong> in <code>src\/data\/tools.ts<\/code>.<\/li>\n\n\n\n<li><strong>Customize the interface<\/strong> working in React components (<code>src\/components\/<\/code>).<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Why This Project is Important to My Portfolio<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>IT Support Simulator<\/strong> it is not just a technical exercise, but a <strong>practical demonstration<\/strong> of my abilities in:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Advanced frontend design and development.<\/li>\n\n\n\n<li>Complete management of the life cycle of a software project.<\/li>\n\n\n\n<li>Mastery of modern technologies such as Next.js, TypeScript and Tailwind CSS.<\/li>\n\n\n\n<li>Developing dynamic and engaging user experiences.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Furthermore, it represents a concrete example of my <strong>autonomy in developing complete applications<\/strong>: from ideation, to coding, to online deployment.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Explore the Project<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">? <strong>Live Site<\/strong>: <a class=\"\" href=\"https:\/\/itsupport-simulator.paoloronco.it\/\">itsupport-simulator.paoloronco.it<\/a><br>? <strong>GitHub Repository<\/strong>: <a class=\"\" href=\"https:\/\/github.com\/paoloronco\/itsupport-simulator\">github.com\/paoloronco\/itsupport-simulator<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>IT Support Simulator \u00e8 un progetto pratico che ho realizzato per ricreare dinamiche reali di gestione dei ticket di supporto IT, in un contesto simulato di helpdesk aziendale.Un&#8217;applicazione web moderna che unisce formazione tecnica, problem solving e sviluppo frontend avanzato. ? Scopri il progetto live: itsupport-simulator.paoloronco.it? Codice sorgente su GitHub: github.com\/paoloronco\/itsupport-simulator Obiettivo del Progetto Il &hellip; <a href=\"https:\/\/paoloronco.it\/en\/it-support-simulator-il-mio-progetto-di-simulazione-gestione-ticket-it\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;IT Support Simulator: il mio progetto di simulazione gestione ticket IT&#8221;<\/span><\/a><\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[23],"class_list":["post-1016","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-portfolio"],"_links":{"self":[{"href":"https:\/\/paoloronco.it\/en\/wp-json\/wp\/v2\/posts\/1016","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/paoloronco.it\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/paoloronco.it\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/paoloronco.it\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/paoloronco.it\/en\/wp-json\/wp\/v2\/comments?post=1016"}],"version-history":[{"count":1,"href":"https:\/\/paoloronco.it\/en\/wp-json\/wp\/v2\/posts\/1016\/revisions"}],"predecessor-version":[{"id":1290,"href":"https:\/\/paoloronco.it\/en\/wp-json\/wp\/v2\/posts\/1016\/revisions\/1290"}],"wp:attachment":[{"href":"https:\/\/paoloronco.it\/en\/wp-json\/wp\/v2\/media?parent=1016"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/paoloronco.it\/en\/wp-json\/wp\/v2\/categories?post=1016"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/paoloronco.it\/en\/wp-json\/wp\/v2\/tags?post=1016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}