{"id":15029,"date":"2022-03-30T00:00:00","date_gmt":"2022-03-30T00:00:00","guid":{"rendered":"https:\/\/www.dmcinfo.com\/our-work\/react-based-recipe-editor-for-confectionary-manufacturer\/"},"modified":"2025-05-29T22:46:37","modified_gmt":"2025-05-29T22:46:37","slug":"react-based-recipe-editor-for-confectionary-manufacturer","status":"publish","type":"our_work","link":"https:\/\/www.dmcinfo.com\/our-work\/react-based-recipe-editor-for-confectionary-manufacturer\/","title":{"rendered":"React-based Recipe Editor for Confectionary Manufacturer"},"content":{"rendered":"<p>DMC engineers started with an existing recipe database from the client. The database contained recipes for the manufacturer\u2019s entire Topeka, Kansas facility. DMC redesigned the database schema with the goal of modernizing and simplifying the recipe system. Next engineers wrote a web server back-end to interface with the database.<\/p>\r\n\r\n<p>The final step was creating a UI to meet customer specifications regarding front-end recipe management, which involved creation, deletion, import, export, and modification of recipes. The UI also included user management and allowed the client to download recipes to the PLC through <a href=\"https:\/\/www.dmcinfo.com\/services\/manufacturing-automation-and-intelligence\/hmi-and-scada-programming\/wonderware-programming\">AVEVA Wonderware<\/a>.<\/p>\r\n\r\n<p>This solution streamlined and simplified the client\u2019s recipe editing and management process. It allowed users to input recipes without requiring their presence on the factory floor.<\/p>\r\n\r\n<figure class=\"wp-block-image\"><img decoding=\"async\" alt=\"React based recipe editor UI\" src=\"https:\/\/cdn.dmcinfo.com\/wp-content\/uploads\/2025\/05\/27165617\/Topeka-Anonymized.png\"  \/><\/figure>\r\n\r\n<figure class=\"wp-block-image\"><img decoding=\"async\" alt=\"React based recipe editor UI\" src=\"https:\/\/cdn.dmcinfo.com\/wp-content\/uploads\/2025\/05\/27165617\/Topeka-Anonymized-2.png\"  \/><\/figure>\r\n\r\n<p><strong>Learn more about DMC&#8217;s <a href=\"https:\/\/www.dmcinfo.com\/services\/application-development\">Application Development<\/a> expertise and <a href=\"https:\/\/www.dmcinfo.com\/contact\">contact us<\/a> for your next project.<\/strong><\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>DMC engineers started with an existing recipe database from the client. The database contained recipes for the manufacturer\u2019s entire Topeka, Kansas facility. DMC redesigned the database schema with the goal of modernizing and simplifying the recipe system. Next engineers wrote a web server back-end to interface with the database. The final step was creating a [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":15026,"template":"","meta":{"customer":"Wrigley","summary":"<p>DMC developed a React-based web application for managing confectionary recipes. The solution featured user administration as well as recipe import, export, and download functionality. The program links with AVEVA Wonderware automation, which enables recipes to be downloaded to manufacturing line.<\/p>\r\n","description":"","customer_benefits":"<ul>\r\n <li>Streamlined recipe editing and management processes<\/li>\r\n <li>Globally accessible web application<\/li>\r\n <li>UX optimized interface<\/li>\r\n<\/ul>\r\n","components_used":"<ul>\r\n <li><a href=\"https:\/\/www.microsoft.com\/en-us\/sql-server\/sql-server-2019\" target=\"_blank\">Microsoft SQL Server<\/a><\/li>\r\n <li><a href=\"https:\/\/www.dmcinfo.com\/services\/application-development\/web-application-development\/aspnet-and-aspnet-mvc\">ASP.Net Core<\/a><\/li>\r\n <li>Framework Core<\/li>\r\n <li><a href=\"https:\/\/www.dmcinfo.com\/services\/digital-workplace-solutions\/microsoft-consulting-services\/enterprise-mobility-security\">Active Directory<\/a><\/li>\r\n <li><a href=\"https:\/\/reactjs.org\/\" target=\"_blank\">.React<\/a><\/li>\r\n <li><a href=\"https:\/\/v4.mui.com\/\" target=\"_blank\">Material UI<\/a><\/li>\r\n <li><a href=\"https:\/\/rxjs.dev\/\" target=\"_blank\">RxJS<\/a><\/li>\r\n<\/ul>\r\n","project":"","author":"Jeff McCormick","notes":""},"work_category":[683,696],"class_list":["post-15029","our_work","type-our_work","status-publish","has-post-thumbnail","hentry","work_category-application-development","work_category-food-and-beverage"],"yoast_head":"<title>React-based Recipe Editor for Confectionary Manufacturer | DMC, Inc.<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.dmcinfo.com\/our-work\/react-based-recipe-editor-for-confectionary-manufacturer\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React-based Recipe Editor for Confectionary Manufacturer\" \/>\n<meta property=\"og:description\" content=\"DMC engineers started with an existing recipe database from the client. The database contained recipes for the manufacturer\u2019s entire Topeka, Kansas facility. DMC redesigned the database schema with the goal of modernizing and simplifying the recipe system. Next engineers wrote a web server back-end to interface with the database. The final step was creating a [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.dmcinfo.com\/our-work\/react-based-recipe-editor-for-confectionary-manufacturer\/\" \/>\n<meta property=\"og:site_name\" content=\"DMC, Inc.\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pages\/DMC-Inc\/107982009242929\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-29T22:46:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.dmcinfo.com\/wp-content\/uploads\/2025\/05\/27165618\/React-based-recipe-editor.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1400\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\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:\/\/www.dmcinfo.com\/our-work\/react-based-recipe-editor-for-confectionary-manufacturer\/\",\"url\":\"https:\/\/www.dmcinfo.com\/our-work\/react-based-recipe-editor-for-confectionary-manufacturer\/\",\"name\":\"React-based Recipe Editor for Confectionary Manufacturer | DMC, Inc.\",\"isPartOf\":{\"@id\":\"https:\/\/www.dmcinfo.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.dmcinfo.com\/our-work\/react-based-recipe-editor-for-confectionary-manufacturer\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.dmcinfo.com\/our-work\/react-based-recipe-editor-for-confectionary-manufacturer\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn.dmcinfo.com\/wp-content\/uploads\/2025\/05\/27165618\/React-based-recipe-editor.png\",\"datePublished\":\"2022-03-30T00:00:00+00:00\",\"dateModified\":\"2025-05-29T22:46:37+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.dmcinfo.com\/our-work\/react-based-recipe-editor-for-confectionary-manufacturer\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.dmcinfo.com\/our-work\/react-based-recipe-editor-for-confectionary-manufacturer\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.dmcinfo.com\/our-work\/react-based-recipe-editor-for-confectionary-manufacturer\/#primaryimage\",\"url\":\"https:\/\/cdn.dmcinfo.com\/wp-content\/uploads\/2025\/05\/27165618\/React-based-recipe-editor.png\",\"contentUrl\":\"https:\/\/cdn.dmcinfo.com\/wp-content\/uploads\/2025\/05\/27165618\/React-based-recipe-editor.png\",\"width\":1400,\"height\":500,\"caption\":\"React based recipe editor\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.dmcinfo.com\/our-work\/react-based-recipe-editor-for-confectionary-manufacturer\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Work\",\"item\":\"https:\/\/www.dmcinfo.com\/our-work\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React-based Recipe Editor for Confectionary Manufacturer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.dmcinfo.com\/#website\",\"url\":\"https:\/\/www.dmcinfo.com\/\",\"name\":\"DMC, Inc.\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.dmcinfo.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.dmcinfo.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.dmcinfo.com\/#organization\",\"name\":\"DMC, Inc.\",\"url\":\"https:\/\/www.dmcinfo.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.dmcinfo.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdn.dmcinfo.com\/wp-content\/uploads\/2025\/05\/27171146\/dmc-logo-1.png\",\"contentUrl\":\"https:\/\/cdn.dmcinfo.com\/wp-content\/uploads\/2025\/05\/27171146\/dmc-logo-1.png\",\"width\":418,\"height\":167,\"caption\":\"DMC, Inc.\"},\"image\":{\"@id\":\"https:\/\/www.dmcinfo.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/pages\/DMC-Inc\/107982009242929\",\"https:\/\/www.instagram.com\/dmcengineering\",\"https:\/\/www.youtube.com\/DMCEngineering\",\"https:\/\/www.linkedin.com\/company\/dmc-engineering\"]}]}<\/script>","yoast_head_json":{"title":"React-based Recipe Editor for Confectionary Manufacturer | DMC, Inc.","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:\/\/www.dmcinfo.com\/our-work\/react-based-recipe-editor-for-confectionary-manufacturer\/","og_locale":"en_US","og_type":"article","og_title":"React-based Recipe Editor for Confectionary Manufacturer","og_description":"DMC engineers started with an existing recipe database from the client. The database contained recipes for the manufacturer\u2019s entire Topeka, Kansas facility. DMC redesigned the database schema with the goal of modernizing and simplifying the recipe system. Next engineers wrote a web server back-end to interface with the database. The final step was creating a [&hellip;]","og_url":"https:\/\/www.dmcinfo.com\/our-work\/react-based-recipe-editor-for-confectionary-manufacturer\/","og_site_name":"DMC, Inc.","article_publisher":"https:\/\/www.facebook.com\/pages\/DMC-Inc\/107982009242929","article_modified_time":"2025-05-29T22:46:37+00:00","og_image":[{"width":1400,"height":500,"url":"https:\/\/cdn.dmcinfo.com\/wp-content\/uploads\/2025\/05\/27165618\/React-based-recipe-editor.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.dmcinfo.com\/our-work\/react-based-recipe-editor-for-confectionary-manufacturer\/","url":"https:\/\/www.dmcinfo.com\/our-work\/react-based-recipe-editor-for-confectionary-manufacturer\/","name":"React-based Recipe Editor for Confectionary Manufacturer | DMC, Inc.","isPartOf":{"@id":"https:\/\/www.dmcinfo.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.dmcinfo.com\/our-work\/react-based-recipe-editor-for-confectionary-manufacturer\/#primaryimage"},"image":{"@id":"https:\/\/www.dmcinfo.com\/our-work\/react-based-recipe-editor-for-confectionary-manufacturer\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.dmcinfo.com\/wp-content\/uploads\/2025\/05\/27165618\/React-based-recipe-editor.png","datePublished":"2022-03-30T00:00:00+00:00","dateModified":"2025-05-29T22:46:37+00:00","breadcrumb":{"@id":"https:\/\/www.dmcinfo.com\/our-work\/react-based-recipe-editor-for-confectionary-manufacturer\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dmcinfo.com\/our-work\/react-based-recipe-editor-for-confectionary-manufacturer\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dmcinfo.com\/our-work\/react-based-recipe-editor-for-confectionary-manufacturer\/#primaryimage","url":"https:\/\/cdn.dmcinfo.com\/wp-content\/uploads\/2025\/05\/27165618\/React-based-recipe-editor.png","contentUrl":"https:\/\/cdn.dmcinfo.com\/wp-content\/uploads\/2025\/05\/27165618\/React-based-recipe-editor.png","width":1400,"height":500,"caption":"React based recipe editor"},{"@type":"BreadcrumbList","@id":"https:\/\/www.dmcinfo.com\/our-work\/react-based-recipe-editor-for-confectionary-manufacturer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Work","item":"https:\/\/www.dmcinfo.com\/our-work\/"},{"@type":"ListItem","position":2,"name":"React-based Recipe Editor for Confectionary Manufacturer"}]},{"@type":"WebSite","@id":"https:\/\/www.dmcinfo.com\/#website","url":"https:\/\/www.dmcinfo.com\/","name":"DMC, Inc.","description":"","publisher":{"@id":"https:\/\/www.dmcinfo.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dmcinfo.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.dmcinfo.com\/#organization","name":"DMC, Inc.","url":"https:\/\/www.dmcinfo.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dmcinfo.com\/#\/schema\/logo\/image\/","url":"https:\/\/cdn.dmcinfo.com\/wp-content\/uploads\/2025\/05\/27171146\/dmc-logo-1.png","contentUrl":"https:\/\/cdn.dmcinfo.com\/wp-content\/uploads\/2025\/05\/27171146\/dmc-logo-1.png","width":418,"height":167,"caption":"DMC, Inc."},"image":{"@id":"https:\/\/www.dmcinfo.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/pages\/DMC-Inc\/107982009242929","https:\/\/www.instagram.com\/dmcengineering","https:\/\/www.youtube.com\/DMCEngineering","https:\/\/www.linkedin.com\/company\/dmc-engineering"]}]}},"_links":{"self":[{"href":"https:\/\/www.dmcinfo.com\/wp-json\/wp\/v2\/our_work\/15029","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dmcinfo.com\/wp-json\/wp\/v2\/our_work"}],"about":[{"href":"https:\/\/www.dmcinfo.com\/wp-json\/wp\/v2\/types\/our_work"}],"author":[{"embeddable":true,"href":"https:\/\/www.dmcinfo.com\/wp-json\/wp\/v2\/users\/8"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dmcinfo.com\/wp-json\/wp\/v2\/media\/15026"}],"wp:attachment":[{"href":"https:\/\/www.dmcinfo.com\/wp-json\/wp\/v2\/media?parent=15029"}],"wp:term":[{"taxonomy":"work_category","embeddable":true,"href":"https:\/\/www.dmcinfo.com\/wp-json\/wp\/v2\/work_category?post=15029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}