{"id":19382,"date":"2025-12-20T12:54:56","date_gmt":"2025-12-20T12:54:56","guid":{"rendered":"https:\/\/offline-web.com\/project\/opap-s-a-opap-play-betting-machines-ui\/"},"modified":"2026-08-14T16:18:01","modified_gmt":"2026-08-14T13:18:01","slug":"opap-sa","status":"publish","type":"project","link":"https:\/\/offline-web.com\/en\/project\/opap-sa\/","title":{"rendered":"OPAP S.A. \u2013 OPAP Play Betting Machines UI"},"content":{"rendered":"\t\t<div data-elementor-type=\"page\" data-elementor-id=\"19113\" class=\"elementor elementor-19113\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\" data-elementor-post-type=\"elementor_library\">\n\t\t\t\t<div class=\"elementor-element elementor-element-38ff0c92 e-flex e-con-boxed tm-col-stretched-none tm-bg-color-over-image e-con e-parent\" data-id=\"38ff0c92\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-4d84c6b0 e-con-full e-flex tm-col-stretched-none tm-bg-color-over-image e-con e-child\" data-id=\"4d84c6b0\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t<div class=\"elementor-element elementor-element-1cb10c66 e-con-full e-flex tm-col-stretched-none tm-bg-color-over-image e-con e-child\" data-id=\"1cb10c66\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t<div class=\"elementor-element elementor-element-4b4fbcf9 e-con-full e-flex tm-col-stretched-none tm-bg-color-over-image e-con e-child\" data-id=\"4b4fbcf9\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3e90d164 project-feature-image elementor-widget elementor-widget-image\" data-id=\"3e90d164\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1600\" height=\"900\" src=\"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/opap-sa-banner.png\" class=\"attachment-full size-full wp-image-20624\" alt=\"OPAP S.A. case study \u2014 Rebuilt the retail betting machine UI and migrated it from Vue 2 to Vue 3 inside Electron\" srcset=\"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/opap-sa-banner.png 1600w, https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/opap-sa-banner-300x169.png 300w, https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/opap-sa-banner-1024x576.png 1024w, https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/opap-sa-banner-768x432.png 768w, https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/opap-sa-banner-1536x864.png 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5263195e e-con-full e-flex tm-col-stretched-none tm-bg-color-over-image e-con e-child\" data-id=\"5263195e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t<div class=\"elementor-element elementor-element-1ebddd8d e-con-full e-flex tm-col-stretched-none tm-bg-color-over-image e-con e-child\" data-id=\"1ebddd8d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-73391389 elementor-widget elementor-widget-tm-ele-text-editor-advanced\" data-id=\"73391389\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"tm-ele-text-editor-advanced.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"tm-text-editor-advanced\">\r\n\t\t\t\t\t<div class=\"each-item elementor-repeater-item-3a4f152\" >\r\n\t\t\t\t<p>Client:<\/p>\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<div class=\"each-item elementor-repeater-item-8b12c64\" >\r\n\t\t\t\tOPAP S.A.\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-547cac06 e-con-full tm-col-stretched-none e-flex tm-bg-color-over-image e-con e-child\" data-id=\"547cac06\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6b4efee7 elementor-widget elementor-widget-tm-ele-text-editor-advanced\" data-id=\"6b4efee7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"tm-ele-text-editor-advanced.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"tm-text-editor-advanced\">\r\n\t\t\t\t\t<div class=\"each-item elementor-repeater-item-3a4f152\" >\r\n\t\t\t\t<p>Date:<\/p>\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<div class=\"each-item elementor-repeater-item-8b12c64\" >\r\n\t\t\t\t2024\u20132025\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2281579 e-con-full tm-col-stretched-none e-flex tm-bg-color-over-image e-con e-child\" data-id=\"2281579\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-946c45c elementor-widget elementor-widget-tm-ele-text-editor-advanced\" data-id=\"946c45c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"tm-ele-text-editor-advanced.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"tm-text-editor-advanced\">\r\n\t\t\t\t\t<div class=\"each-item elementor-repeater-item-3a4f152\" >\r\n\t\t\t\t<p>Duration:<\/p>\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<div class=\"each-item elementor-repeater-item-8b12c64\" >\r\n\t\t\t\t18 months\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-18561d34 e-con-full tm-col-stretched-none e-flex tm-bg-color-over-image e-con e-child\" data-id=\"18561d34\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t<div class=\"elementor-element elementor-element-dbeab39 e-con-full e-flex tm-col-stretched-none tm-bg-color-over-image e-con e-child\" data-id=\"dbeab39\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-150b6588 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"150b6588\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-29b55989 elementor-widget elementor-widget-tm-ele-text-editor\" data-id=\"29b55989\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"tm-ele-text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"tm-text-editor\" >\r\n\t\tOPAP S.A. \u2013 OPAP Play Betting Machines UI\t\t<\/div>\r\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-383389de elementor-widget elementor-widget-text-editor\" data-id=\"383389de\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\tA full rewrite of the OPAP Play Betting Machines UI, the desktop application running in OPAP stores across Greece. It combined a complete UI rebuild with a controlled frontend migration inside Electron on a system that takes real money all day.\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c9f7e47 elementor-widget elementor-widget-shortcode\" data-id=\"c9f7e47\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div class=\"offline-proj-gallery\" style=\"display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;\"><img decoding=\"async\" src=\"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/opap-sa-1-1024x683.png\" alt=\"OPAP S.A. terminal UI \u2014 Betting terminal screen as it runs in the shop\" loading=\"lazy\" style=\"width:100%;height:auto;display:block;border-radius:12px;\" \/><img decoding=\"async\" src=\"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/opap-sa-2-1024x683.png\" alt=\"OPAP S.A. Vue 3 migration \u2014 Options API components rebuilt as typed SFCs\" loading=\"lazy\" style=\"width:100%;height:auto;display:block;border-radius:12px;\" \/><\/div><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ee6d20c elementor-widget elementor-widget-heading\" data-id=\"ee6d20c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">About the client<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3c76891 elementor-widget elementor-widget-text-editor\" data-id=\"3c76891\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\tOPAP S.A. is the largest gaming and betting organisation in Greece, with a nationwide retail network and digital platforms. The systems in its stores are mission-critical in the literal sense: when they stop, the shop stops.\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a075adf elementor-widget elementor-widget-heading\" data-id=\"a075adf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Project Overview<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d0a0dfd elementor-widget elementor-widget-text-editor\" data-id=\"d0a0dfd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\tThis is the interface on the betting machines in OPAP retail stores. It gets used constantly, by a lot of people, in a shop, with a queue behind them. Nobody using it is feeling patient.\n\nThe visual rebuild was the visible half. The other half was structural. Years of accumulated technical debt had made every new feature slower to build than the one before it, and the codebase had reached the point where that cost was obvious to everyone. The objective was a modular frontend architecture an enterprise system can actually live in.\n\nModernising the stack had to happen without a single day of disruption. Better component structure, real separation of concerns, predictable data handling, all inside an Electron desktop application deployed to physical stores where you cannot simply push a fix and refresh.\n\nEvery architectural decision was weighed against stability. This is a system where being right matters more than being modern, and the migration only earned its place by leaving the machines more reliable than it found them.\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1383c846 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"1383c846\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5896966 e-con-full e-flex tm-col-stretched-none tm-bg-color-over-image e-con e-child\" data-id=\"5896966\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t<div class=\"elementor-element elementor-element-818494d e-con-full e-flex tm-col-stretched-none tm-bg-color-over-image e-con e-child\" data-id=\"818494d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-32b867c6 horizontal-line-align-left vertical-line-align-bottom elementor-widget elementor-widget-tm-ele-section-title\" data-id=\"32b867c6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"tm-ele-section-title.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"tm-sc-section-title section-title \">\r\n\t<div class=\"title-wrapper\">\r\n\t\t\t\t\t\t\t<h2 class=\"title \"  >\r\n\r\n\t\t\r\n\t\t\t\t<span class=\"title-part1 \">The Challenge<\/span>\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t<\/h2>\r\n\t<div class=\"title-seperator-line\"><\/div>\t\t\t\t\t\t<\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-678448a1 e-con-full tm-col-stretched-none e-flex tm-bg-color-over-image e-con e-child\" data-id=\"678448a1\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1e31b7a2 elementor-widget elementor-widget-tm-ele-text-editor\" data-id=\"1e31b7a2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"tm-ele-text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"tm-text-editor\" >\r\n\t\tRewriting the UI of a live business-critical system is the hard version of this job. High traffic, a retail environment, and performance and reliability that are not open to negotiation.\n\nThe framework migration ran on top of that, inside Electron. It had to be incremental, planned in stages, and compatible at every step with existing functionality, the hardware in the stores, and how people actually use the machines. A big-bang rewrite was never an option, and it should not have been.\t\t<\/div>\r\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-558c3bf6 e-flex e-con-boxed tm-col-stretched-none tm-bg-color-over-image e-con e-parent\" data-id=\"558c3bf6\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7427a4b elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"7427a4b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-af4b431 elementor-widget elementor-widget-heading\" data-id=\"af4b431\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\"><p>My Contribution<\/p><\/h3>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-030d331 e-flex e-con-boxed tm-col-stretched-none tm-bg-color-over-image e-con e-parent\" data-id=\"030d331\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9d749f7 elementor-widget elementor-widget-html\" data-id=\"9d749f7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\tI was deep in the frontend redevelopment, on both day-to-day features and the architectural direction. That meant rebuilding large parts of the interface and giving the codebase a structure new work could be added to safely.\n\nThe framework migration inside the Electron desktop application is the piece I am most pleased with. I reorganised components and paid down debt incrementally while the machines in stores kept taking bets.\n\nI worked closely with the backend and product teams, which on a system like this mostly means agreeing precisely what a betting flow does before anyone builds it.\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f449a5f elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"f449a5f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fc269f2 elementor-widget elementor-widget-heading\" data-id=\"fc269f2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\"><p>Technology Stack<\/p><\/h3>\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-24736805 e-con-full e-flex tm-col-stretched-none tm-bg-color-over-image e-con e-child\" data-id=\"24736805\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-458bd0eb elementor-widget elementor-widget-tm-ele-list\" data-id=\"458bd0eb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"tm-ele-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<ul class=\"tm-sc-list \">\r\n\t<li class=\"\">\r\n\t\t\t\t<i aria-hidden=\"true\" class=\" flaticon-common-confirmation\"><\/i>\t\t\t\t<span>\r\n\tVue.js (versions 2 and 3), TypeScript, Electron, component-based frontend architecture, enterprise-scale UI systems, high-traffic retail application constraints<\/span><\/li><\/ul>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8d79716 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"8d79716\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1a28db7 elementor-widget elementor-widget-heading\" data-id=\"1a28db7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">Tags<\/h6>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6164aa5 elementor-widget elementor-widget-post-info\" data-id=\"6164aa5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"post-info.default\">\n\t\t\t\t\t\t\t<ul class=\"elementor-inline-items elementor-icon-list-items elementor-post-info\">\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-repeater-item-12c28ab elementor-inline-item\" itemprop=\"about\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-tags\" viewBox=\"0 0 640 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M497.941 225.941L286.059 14.059A48 48 0 0 0 252.118 0H48C21.49 0 0 21.49 0 48v204.118a48 48 0 0 0 14.059 33.941l211.882 211.882c18.744 18.745 49.136 18.746 67.882 0l204.118-204.118c18.745-18.745 18.745-49.137 0-67.882zM112 160c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm513.941 133.823L421.823 497.941c-18.745 18.745-49.137 18.745-67.882 0l-.36-.36L527.64 323.522c16.999-16.999 26.36-39.6 26.36-63.64s-9.362-46.641-26.36-63.64L331.397 0h48.721a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882z\"><\/path><\/svg>\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-terms\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-post-info__terms-list\">\n\t\t\t\t<a href=\"https:\/\/offline-web.com\/en\/tag\/betting-systems\/\" class=\"elementor-post-info__terms-list-item\">Betting Systems<\/a>, <a href=\"https:\/\/offline-web.com\/en\/tag\/electron\/\" class=\"elementor-post-info__terms-list-item\">Electron<\/a>, <a href=\"https:\/\/offline-web.com\/en\/tag\/enterprise-ui\/\" class=\"elementor-post-info__terms-list-item\">Enterprise UI<\/a>, <a href=\"https:\/\/offline-web.com\/en\/tag\/frontend-architecture\/\" class=\"elementor-post-info__terms-list-item\">Frontend Architecture<\/a>, <a href=\"https:\/\/offline-web.com\/en\/tag\/retail-systems\/\" class=\"elementor-post-info__terms-list-item\">Retail Systems<\/a>, <a href=\"https:\/\/offline-web.com\/en\/tag\/vue-2\/\" class=\"elementor-post-info__terms-list-item\">Vue 2<\/a>, <a href=\"https:\/\/offline-web.com\/en\/tag\/vue-3\/\" class=\"elementor-post-info__terms-list-item\">Vue 3<\/a>, <a href=\"https:\/\/offline-web.com\/en\/tag\/vue-js\/\" class=\"elementor-post-info__terms-list-item\">Vue.js<\/a>\t\t\t\t<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-68e616d elementor-widget elementor-widget-heading\" data-id=\"68e616d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">Categories<\/h6>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7e0ca46 elementor-widget elementor-widget-post-info\" data-id=\"7e0ca46\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"post-info.default\">\n\t\t\t\t\t\t\t<ul class=\"elementor-inline-items elementor-icon-list-items elementor-post-info\">\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-repeater-item-276f4a9 elementor-inline-item\" itemprop=\"about\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-tags\" viewBox=\"0 0 640 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M497.941 225.941L286.059 14.059A48 48 0 0 0 252.118 0H48C21.49 0 0 21.49 0 48v204.118a48 48 0 0 0 14.059 33.941l211.882 211.882c18.744 18.745 49.136 18.746 67.882 0l204.118-204.118c18.745-18.745 18.745-49.137 0-67.882zM112 160c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm513.941 133.823L421.823 497.941c-18.745 18.745-49.137 18.745-67.882 0l-.36-.36L527.64 323.522c16.999-16.999 26.36-39.6 26.36-63.64s-9.362-46.641-26.36-63.64L331.397 0h48.721a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882z\"><\/path><\/svg>\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-terms\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-post-info__terms-list\">\n\t\t\t\t<a href=\"https:\/\/offline-web.com\/en\/category\/betting-gaming\/\" class=\"elementor-post-info__terms-list-item\">Betting &amp; Gaming<\/a>, <a href=\"https:\/\/offline-web.com\/en\/category\/desktop-applications\/\" class=\"elementor-post-info__terms-list-item\">Desktop Applications<\/a>, <a href=\"https:\/\/offline-web.com\/en\/category\/enterprise-systems\/\" class=\"elementor-post-info__terms-list-item\">Enterprise Systems<\/a>\t\t\t\t<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2be1224 elementor-widget elementor-widget-tm-ele-projects-pre-next\" data-id=\"2be1224\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"tm-ele-projects-pre-next.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"single-post-next-prev-links\">\r\n\t<div class=\"nav-previous\">\r\n\t\t<a rel=\"prev\" href=\"https:\/\/offline-web.com\/en\/project\/adidas-ag\/\" title=\"Adidas AG \u2013 B2B Sales Desktop Application\" class=\" \"><span>Adidas AG \u2013 B2B Sales Desktop Application<\/span><\/a>\t<\/div>\r\n\r\n\t<div class=\"nav-next \">\r\n\t\t<a rel=\"next\" href=\"https:\/\/offline-web.com\/en\/project\/vertrical\/\" title=\"Vertrical \u2013 Digital Health Frontend Leadership & Delivery\" class=\" \"><span>Vertrical \u2013 Digital Health Frontend Leadership & Delivery<\/span><\/a>\t<\/div>\r\n<\/div> \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-753783f elementor-widget elementor-widget-heading\" data-id=\"753783f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Read More<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-39a9f3c elementor-grid-3 elementor-grid-tablet-2 elementor-grid-mobile-1 elementor-posts--thumbnail-top elementor-widget elementor-widget-posts\" data-id=\"39a9f3c\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;classic_columns&quot;:&quot;3&quot;,&quot;classic_columns_tablet&quot;:&quot;2&quot;,&quot;classic_columns_mobile&quot;:&quot;1&quot;,&quot;classic_row_gap&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:35,&quot;sizes&quot;:[]},&quot;classic_row_gap_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;classic_row_gap_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"posts.classic\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-posts-container elementor-posts elementor-posts--skin-classic elementor-grid\" role=\"list\">\n\t\t\t\t<article class=\"elementor-post elementor-grid-item post-19390 project type-project status-publish has-post-thumbnail hentry category-mobile-applications category-social-platforms category-user-generated-content category-web-applications tag-analytics-dashboards tag-bootstrap tag-hybrid-mobile-apps tag-ionic tag-laravel tag-social-applications tag-user-generated-content tag-video-platforms tag-vue-js tag-vuetify\" role=\"listitem\">\n\t\t\t\t<a class=\"elementor-post__thumbnail__link\" href=\"https:\/\/offline-web.com\/en\/project\/the-box-app-ike\/\" tabindex=\"-1\" >\n\t\t\t<div class=\"elementor-post__thumbnail\"><img decoding=\"async\" width=\"300\" height=\"169\" src=\"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/the-box-app-ike-banner-300x169.png\" class=\"attachment-medium size-medium wp-image-20614\" alt=\"The Box App case study \u2014 Built the full ecosystem: mobile app, moderation dashboard and the challenge engine\" srcset=\"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/the-box-app-ike-banner-300x169.png 300w, https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/the-box-app-ike-banner-1024x576.png 1024w, https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/the-box-app-ike-banner-768x432.png 768w, https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/the-box-app-ike-banner-1536x864.png 1536w, https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/the-box-app-ike-banner.png 1600w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/div>\n\t\t<\/a>\n\t\t\t\t<div class=\"elementor-post__text\">\n\t\t\t\t<h3 class=\"elementor-post__title\">\n\t\t\t<a href=\"https:\/\/offline-web.com\/en\/project\/the-box-app-ike\/\" >\n\t\t\t\tThe Box App IKE \u2013 Social Video Challenge Platform\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\t\t<div class=\"elementor-post__excerpt\">\n\t\t\t<p>Short-form video with a competition mechanic. Someone posts a video, other people answer it. Admin dashboard, mobile app and backend.<\/p>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/article>\n\t\t\t\t<article class=\"elementor-post elementor-grid-item post-19403 project type-project status-publish has-post-thumbnail hentry category-corporate-websites category-financial-services category-web-applications tag-content-management tag-corporate-websites tag-credit-risk tag-financial-services tag-international-organizations tag-seo tag-wordpress\" role=\"listitem\">\n\t\t\t\t<a class=\"elementor-post__thumbnail__link\" href=\"https:\/\/offline-web.com\/en\/project\/icap-crif-ae\/\" tabindex=\"-1\" >\n\t\t\t<div class=\"elementor-post__thumbnail\"><img decoding=\"async\" width=\"300\" height=\"169\" src=\"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/icap-crif-ae-banner-300x169.png\" class=\"attachment-medium size-medium wp-image-20639\" alt=\"ICAP CRIF AE case study \u2014 Built the corporate site and kept 200+ service and editorial pages consistent across the group\" srcset=\"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/icap-crif-ae-banner-300x169.png 300w, https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/icap-crif-ae-banner-1024x576.png 1024w, https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/icap-crif-ae-banner-768x432.png 768w, https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/icap-crif-ae-banner-1536x864.png 1536w, https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/icap-crif-ae-banner.png 1600w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/div>\n\t\t<\/a>\n\t\t\t\t<div class=\"elementor-post__text\">\n\t\t\t\t<h3 class=\"elementor-post__title\">\n\t\t\t<a href=\"https:\/\/offline-web.com\/en\/project\/icap-crif-ae\/\" >\n\t\t\t\tICAP CRIF AE \u2013 Corporate Website\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\t\t<div class=\"elementor-post__excerpt\">\n\t\t\t<p>The Greek public face of a credit risk group. The hard part was editorial: making complicated financial services readable.<\/p>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/article>\n\t\t\t\t<article class=\"elementor-post elementor-grid-item post-19412 project type-project status-publish has-post-thumbnail hentry category-art-technology category-enterprise-systems category-saas-platforms category-web-applications tag-art-market-platforms tag-backoffice-applications tag-custom-components tag-frontend-development tag-saas-architecture tag-tailwind-css tag-vue-js\" role=\"listitem\">\n\t\t\t\t<a class=\"elementor-post__thumbnail__link\" href=\"https:\/\/offline-web.com\/en\/project\/arcual\/\" tabindex=\"-1\" >\n\t\t\t<div class=\"elementor-post__thumbnail\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"169\" src=\"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/arcual-banner-300x169.png\" class=\"attachment-medium size-medium wp-image-20631\" alt=\"Arcual case study \u2014 Rebuilt the enterprise SaaS backoffice UI on a custom, scalable Vue component library\" srcset=\"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/arcual-banner-300x169.png 300w, https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/arcual-banner-1024x576.png 1024w, https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/arcual-banner-768x432.png 768w, https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/arcual-banner-1536x864.png 1536w, https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/arcual-banner.png 1600w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/div>\n\t\t<\/a>\n\t\t\t\t<div class=\"elementor-post__text\">\n\t\t\t\t<h3 class=\"elementor-post__title\">\n\t\t\t<a href=\"https:\/\/offline-web.com\/en\/project\/arcual\/\" >\n\t\t\t\tArcual \u2013 Art Market Backoffice Redesign\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\t\t<div class=\"elementor-post__excerpt\">\n\t\t\t<p>I rebuilt the interface of the Arcual backoffice, where galleries and art institutions run sales. The team now assembles new screens from components that already exist.<\/p>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/article>\n\t\t\t\t<\/div>\n\t\t\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b16a854 e-con-full tm-col-stretched-none e-flex tm-bg-color-over-image e-con e-child\" data-id=\"b16a854\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f1d2905 tm-contact-form-7-button-full-width elementor-widget elementor-widget-tm-ele-contact-form-7\" data-id=\"f1d2905\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"tm-ele-contact-form-7.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"tm-contact-form-7-wrapper\">\r\n\t\t\t\t<div class=\"tm-contact-form tm-contact-form-7 tm-contact-form-f1d2905 placeholder-show tm-contact-form-align-default\"><div class=\"tm-contact-form-7-heading\"><h5 class=\"tm-contact-form-subtitle tm-contact-form-7-subtitle\">\r\n\t\t\t\t\t\t\t\tTell me about your project and get a price, timeline and project scope by email \u2014 no call needed.\r\n\t\t\t\t\t\t\t<\/h5><h5 class=\"tm-contact-form-title tm-contact-form-7-title\">\r\n\t\t\t\t\t\t\t\tLike what you see? Let\u2019s work together\r\n\t\t\t\t\t\t\t<\/h5><\/div>\n<div class=\"wpcf7 no-js\" id=\"wpcf7-f6-o1\" lang=\"en-US\" dir=\"ltr\" data-wpcf7-id=\"6\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/en\/wp-json\/wp\/v2\/project\/19382#wpcf7-f6-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Contact form\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"6\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.6\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_US\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f6-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/><input type=\"hidden\" name=\"_wpcf7_recaptcha_response\" value=\"\" \/>\n<\/fieldset>\n<div class=\"contact\">\n  <div class=\"row g-3\">\n    <div class=\"col-sm-12\">\n       <div class=\"ow-howit\" style=\"font-size:13px;line-height:1.55;opacity:.72;margin-bottom:2px;\">\n         <div style=\"text-transform:uppercase;letter-spacing:.06em;font-size:11px;opacity:.85;margin-bottom:6px;\">How it works<\/div>\n         <div style=\"margin-bottom:3px;\"><strong>1.<\/strong> Tell me about your project below.<\/div>\n         <div style=\"margin-bottom:3px;\"><strong>2.<\/strong> I'll email you a few quick questions (about 3 minutes).<\/div>\n         <div><strong>3.<\/strong> You get a price, timeline and project scope by email \u2014 no call.<\/div>\n       <\/div>\n    <\/div>\n    <div class=\"col-sm-6\">\n       <label for=\"fname\">Name *<\/label>\n       <span class=\"wpcf7-form-control-wrap\" data-name=\"your-name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control\" autocomplete=\"name\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Jane Doe\" value=\"\" type=\"text\" name=\"your-name\" \/><\/span>\n    <\/div>\n    <div class=\"col-sm-6\">\n       <label for=\"femail\">Email *<\/label>\n       <span class=\"wpcf7-form-control-wrap\" data-name=\"your-email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email form-control\" autocomplete=\"email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"you@example.com\" value=\"\" type=\"email\" name=\"your-email\" \/><\/span>\n    <\/div>\n    <div class=\"col-sm-12\">\n       <label for=\"fcompany\">Company or website (optional)<\/label>\n       <span class=\"wpcf7-form-control-wrap\" data-name=\"your-company\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text form-control\" aria-invalid=\"false\" placeholder=\"Company name or website, if you have one\" value=\"\" type=\"text\" name=\"your-company\" \/><\/span>\n       <small class=\"form-hint\">A link helps me scope your project faster.<\/small>\n    <\/div>\n    <div class=\"col-sm-12\">\n       <label for=\"fservice\">Which service? *<\/label>\n       <span class=\"wpcf7-form-control-wrap\" data-name=\"your-service\"><select class=\"wpcf7-form-control wpcf7-select wpcf7-validates-as-required form-control\" aria-required=\"true\" aria-invalid=\"false\" name=\"your-service\"><option value=\"\">&#8212;Please choose an option&#8212;<\/option><option value=\"Vue 2 to 3 migration\">Vue 2 to 3 migration<\/option><option value=\"jQuery to Vue migration\">jQuery to Vue migration<\/option><option value=\"Nuxt migration\">Nuxt migration<\/option><option value=\"Vanilla JS to Vue migration\">Vanilla JS to Vue migration<\/option><option value=\"Excel to web app \/ dashboard\">Excel to web app \/ dashboard<\/option><option value=\"Custom web app development\">Custom web app development<\/option><option value=\"AI features \/ LLM integration\">AI features \/ LLM integration<\/option><option value=\"Something else\">Something else<\/option><\/select><\/span>\n    <\/div>\n    <div class=\"col-sm-12\">\n       <label for=\"fmessage\">What do you want to build or fix? *<\/label>\n       <span class=\"wpcf7-form-control-wrap\" data-name=\"your-message\"><textarea cols=\"40\" rows=\"4\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required form-control\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"e.g. Migrate a Vue 2 dashboard to Vue 3, or turn an Excel workflow into a web app. A sentence or two is enough.\" name=\"your-message\"><\/textarea><\/span>\n    <\/div>\n    <div class=\"col-sm-12\">\n       <input class=\"wpcf7-form-control wpcf7-submit has-spinner btn btn-theme-colored2\" type=\"submit\" value=\"Get a price &amp; timeline\" \/>\n    <\/div>\n    <div class=\"col-sm-12\">\n       <p class=\"form-sla\">Complete the short questionnaire to receive your indicative price, timeline and scope by email.<\/p>\n       <p class=\"offline-recaptcha-note\">This site is protected by reCAPTCHA and the Google <a href=\"https:\/\/policies.google.com\/privacy\" target=\"_blank\" rel=\"noopener\">Privacy Policy<\/a> and <a href=\"https:\/\/policies.google.com\/terms\" target=\"_blank\" rel=\"noopener\">Terms of Service<\/a> apply.<\/p>\n    <\/div>\n  <\/div>\n<\/div><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n<\/div>\r\n\t\t\t<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n","protected":false},"excerpt":{"rendered":"<p>The UI on OPAP betting machines in stores across Greece. A full rewrite and controlled frontend migration inside Electron, while the machines kept taking bets.<\/p>\n","protected":false},"featured_media":20624,"template":"","meta":{"_acf_changed":false},"categories":[64,63,62],"tags":[71,68,70,69,72,67,66,65],"class_list":["post-19382","project","type-project","status-publish","has-post-thumbnail","hentry","category-betting-gaming","category-desktop-applications","category-enterprise-systems","tag-betting-systems","tag-electron","tag-enterprise-ui","tag-frontend-architecture","tag-retail-systems","tag-vue-2","tag-vue-3","tag-vue-js"],"acf":{"project_img_1":20579,"project_img_2":20602,"project_img_3":null,"main_text":"This is the interface on the betting machines in OPAP retail stores. It gets used constantly, by a lot of people, in a shop, with a queue behind them. Nobody using it is feeling patient.\n\nThe visual rebuild was the visible half. The other half was structural. Years of accumulated technical debt had made every new feature slower to build than the one before it, and the codebase had reached the point where that cost was obvious to everyone. The objective was a modular frontend architecture an enterprise system can actually live in.\n\nModernising the stack had to happen without a single day of disruption. Better component structure, real separation of concerns, predictable data handling, all inside an Electron desktop application deployed to physical stores where you cannot simply push a fix and refresh.\n\nEvery architectural decision was weighed against stability. This is a system where being right matters more than being modern, and the migration only earned its place by leaving the machines more reliable than it found them.","client":"OPAP S.A.","date":"2024\u20132025","duration":"18 months","second_paragraph":"Rewriting the UI of a live business-critical system is the hard version of this job. High traffic, a retail environment, and performance and reliability that are not open to negotiation.\n\nThe framework migration ran on top of that, inside Electron. It had to be incremental, planned in stages, and compatible at every step with existing functionality, the hardware in the stores, and how people actually use the machines. A big-bang rewrite was never an option, and it should not have been.","intro_summary":"A full rewrite of the OPAP Play Betting Machines UI, the desktop application running in OPAP stores across Greece. It combined a complete UI rebuild with a controlled frontend migration inside Electron on a system that takes real money all day.","my_contribution":"I was deep in the frontend redevelopment, on both day-to-day features and the architectural direction. That meant rebuilding large parts of the interface and giving the codebase a structure new work could be added to safely.\n\nThe framework migration inside the Electron desktop application is the piece I am most pleased with. I reorganised components and paid down debt incrementally while the machines in stores kept taking bets.\n\nI worked closely with the backend and product teams, which on a system like this mostly means agreeing precisely what a betting flow does before anyone builds it.","tech_stack":"Vue.js (versions 2 and 3), TypeScript, Electron, component-based frontend architecture, enterprise-scale UI systems, high-traffic retail application constraints","about_the_client":"OPAP S.A. is the largest gaming and betting organisation in Greece, with a nationwide retail network and digital platforms. The systems in its stores are mission-critical in the literal sense: when they stop, the shop stops."},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.8 (Yoast SEO v28.1) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>OPAP: OPAP Play betting machines UI | OFFLINE<\/title>\n<meta name=\"description\" content=\"The UI on OPAP Play betting machines in stores across Greece: a full interface rewrite and controlled frontend migration inside Electron, with no downtime.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/offline-web.com\/en\/project\/opap-sa\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"OPAP S.A. \u2013 OPAP Play Betting Machines UI\" \/>\n<meta property=\"og:description\" content=\"The UI on OPAP Play betting machines in stores across Greece: a full interface rewrite and controlled frontend migration inside Electron, with no downtime.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/offline-web.com\/en\/project\/opap-sa\/\" \/>\n<meta property=\"og:site_name\" content=\"offline-web.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=61565994551139\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-14T13:18:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/opap-sa-banner.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"900\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@offline_web\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/offline-web.com\\\/en\\\/project\\\/opap-sa\\\/\",\"url\":\"https:\\\/\\\/offline-web.com\\\/en\\\/project\\\/opap-sa\\\/\",\"name\":\"OPAP: OPAP Play betting machines UI | OFFLINE\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/offline-web.com\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/offline-web.com\\\/en\\\/project\\\/opap-sa\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/offline-web.com\\\/en\\\/project\\\/opap-sa\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/offline-web.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/opap-sa-banner.png\",\"datePublished\":\"2025-12-20T12:54:56+00:00\",\"dateModified\":\"2026-08-14T13:18:01+00:00\",\"description\":\"The UI on OPAP Play betting machines in stores across Greece: a full interface rewrite and controlled frontend migration inside Electron, with no downtime.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/offline-web.com\\\/en\\\/project\\\/opap-sa\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/offline-web.com\\\/en\\\/project\\\/opap-sa\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/offline-web.com\\\/en\\\/project\\\/opap-sa\\\/#primaryimage\",\"url\":\"https:\\\/\\\/offline-web.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/opap-sa-banner.png\",\"contentUrl\":\"https:\\\/\\\/offline-web.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/opap-sa-banner.png\",\"width\":1600,\"height\":900,\"caption\":\"OPAP S.A. \u2014 Betting terminals. 18 months \u00b7 2024\u201325. Built with Vue 3, TypeScript, Electron.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/offline-web.com\\\/en\\\/project\\\/opap-sa\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/offline-web.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"OPAP S.A. \u2013 OPAP Play Betting Machines UI\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/offline-web.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/offline-web.com\\\/en\\\/\",\"name\":\"offline-web.com\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/offline-web.com\\\/en\\\/#\\\/schema\\\/person\\\/520626b2a7a5c2d1fbeb91e5bd8b4aa3\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/offline-web.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/offline-web.com\\\/en\\\/#\\\/schema\\\/person\\\/520626b2a7a5c2d1fbeb91e5bd8b4aa3\",\"name\":\"Stelios Kitziris\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/offline-web.com\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/0404afea-ad5d-45e2-8111-d489cd7935ab.png\",\"url\":\"https:\\\/\\\/offline-web.com\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/0404afea-ad5d-45e2-8111-d489cd7935ab.png\",\"contentUrl\":\"https:\\\/\\\/offline-web.com\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/0404afea-ad5d-45e2-8111-d489cd7935ab.png\",\"width\":1122,\"height\":1402,\"caption\":\"Stelios Kitziris\"},\"logo\":{\"@id\":\"https:\\\/\\\/offline-web.com\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/0404afea-ad5d-45e2-8111-d489cd7935ab.png\"},\"sameAs\":[\"https:\\\/\\\/offline-web.com\",\"https:\\\/\\\/www.facebook.com\\\/profile.php?id=61565994551139\",\"https:\\\/\\\/www.instagram.com\\\/offline_web_\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/offline-web\\\/\",\"https:\\\/\\\/x.com\\\/offline_web\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"OPAP: OPAP Play betting machines UI | OFFLINE","description":"The UI on OPAP Play betting machines in stores across Greece: a full interface rewrite and controlled frontend migration inside Electron, with no downtime.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/offline-web.com\/en\/project\/opap-sa\/","og_locale":"en_US","og_type":"article","og_title":"OPAP S.A. \u2013 OPAP Play Betting Machines UI","og_description":"The UI on OPAP Play betting machines in stores across Greece: a full interface rewrite and controlled frontend migration inside Electron, with no downtime.","og_url":"https:\/\/offline-web.com\/en\/project\/opap-sa\/","og_site_name":"offline-web.com","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=61565994551139","article_modified_time":"2026-08-14T13:18:01+00:00","og_image":[{"width":1600,"height":900,"url":"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/opap-sa-banner.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@offline_web","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/offline-web.com\/en\/project\/opap-sa\/","url":"https:\/\/offline-web.com\/en\/project\/opap-sa\/","name":"OPAP: OPAP Play betting machines UI | OFFLINE","isPartOf":{"@id":"https:\/\/offline-web.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/offline-web.com\/en\/project\/opap-sa\/#primaryimage"},"image":{"@id":"https:\/\/offline-web.com\/en\/project\/opap-sa\/#primaryimage"},"thumbnailUrl":"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/opap-sa-banner.png","datePublished":"2025-12-20T12:54:56+00:00","dateModified":"2026-08-14T13:18:01+00:00","description":"The UI on OPAP Play betting machines in stores across Greece: a full interface rewrite and controlled frontend migration inside Electron, with no downtime.","breadcrumb":{"@id":"https:\/\/offline-web.com\/en\/project\/opap-sa\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/offline-web.com\/en\/project\/opap-sa\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/offline-web.com\/en\/project\/opap-sa\/#primaryimage","url":"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/opap-sa-banner.png","contentUrl":"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/opap-sa-banner.png","width":1600,"height":900,"caption":"OPAP S.A. \u2014 Betting terminals. 18 months \u00b7 2024\u201325. Built with Vue 3, TypeScript, Electron."},{"@type":"BreadcrumbList","@id":"https:\/\/offline-web.com\/en\/project\/opap-sa\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/offline-web.com\/en\/"},{"@type":"ListItem","position":2,"name":"OPAP S.A. \u2013 OPAP Play Betting Machines UI"}]},{"@type":"WebSite","@id":"https:\/\/offline-web.com\/en\/#website","url":"https:\/\/offline-web.com\/en\/","name":"offline-web.com","description":"","publisher":{"@id":"https:\/\/offline-web.com\/en\/#\/schema\/person\/520626b2a7a5c2d1fbeb91e5bd8b4aa3"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/offline-web.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/offline-web.com\/en\/#\/schema\/person\/520626b2a7a5c2d1fbeb91e5bd8b4aa3","name":"Stelios Kitziris","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/06\/0404afea-ad5d-45e2-8111-d489cd7935ab.png","url":"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/06\/0404afea-ad5d-45e2-8111-d489cd7935ab.png","contentUrl":"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/06\/0404afea-ad5d-45e2-8111-d489cd7935ab.png","width":1122,"height":1402,"caption":"Stelios Kitziris"},"logo":{"@id":"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/06\/0404afea-ad5d-45e2-8111-d489cd7935ab.png"},"sameAs":["https:\/\/offline-web.com","https:\/\/www.facebook.com\/profile.php?id=61565994551139","https:\/\/www.instagram.com\/offline_web_\/","https:\/\/www.linkedin.com\/company\/offline-web\/","https:\/\/x.com\/offline_web"]}]}},"yoast_title":"OPAP: OPAP Play betting machines UI | OFFLINE","yoast_metadesc":"The UI on OPAP Play betting machines in stores across Greece: a full interface rewrite and controlled frontend migration inside Electron, with no downtime.","yoast_focuskw":"OPAP Play Betting Machines UI","_links":{"self":[{"href":"https:\/\/offline-web.com\/en\/wp-json\/wp\/v2\/project\/19382","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/offline-web.com\/en\/wp-json\/wp\/v2\/project"}],"about":[{"href":"https:\/\/offline-web.com\/en\/wp-json\/wp\/v2\/types\/project"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/offline-web.com\/en\/wp-json\/wp\/v2\/media\/20624"}],"wp:attachment":[{"href":"https:\/\/offline-web.com\/en\/wp-json\/wp\/v2\/media?parent=19382"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/offline-web.com\/en\/wp-json\/wp\/v2\/categories?post=19382"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/offline-web.com\/en\/wp-json\/wp\/v2\/tags?post=19382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}