Project & Bids – Recipe Crawler 

This document describes the Recipe functionality developed as part of the Project solution. The focus of this feature is to help the business quickly identify Minecraft items, understand their properties, and prepare accurate printed material using an innovative search-based approach. 

Business Problem 

When working with Projects, users often need to reference Minecraft items for recipes. Searching for items manually or relying on external websites is time-consuming and slows down project preparation. 

Solution Overview 

To solve this, we built a custom PCF (PowerApps Component Framework) control using Fluent UI React v9. The control integrates with the Minecraft API to dynamically retrieve item data such as: 
– Item name 
– Item description 
– Item icon 
 
All data is presented directly inside the Model Driven App, eliminating the need to leave the application. 

Technical Implementation 

The Recipe control is implemented as a PCF control built with: 
– Fluent UI React v9 for a modern, consistent user interface 
– Minecraft API as the external data source for items and recipes 

Legacy connected

Not everything needs to be revolutionary — sometimes you just want to mess with a TV from across the room. Using an IoT-enabled IR blaster to control legacy devices, because even old TVs deserve a cloud connection. Still funny every time..

Demonstration

Glossy Glossy Glossy!

Badge: Glossy Pixels 

Category: Code Connoisseur  

Step into a Minecraft-style Power Powers portal where crafting meets collaboration. With customer placing orders and Alex bringing them to life, our system turns resource requests into crafted equipment through a smooth, intuitive workflow. Wrapped in a shiny, pixel-perfect interface that looks great on any screen, this experience proves that even blocky worlds deserve beautiful, responsive design. 

Customer profile page: 

In case customer wants to order some equipment, he goes to the Projects page.  

Then he chooses an equipment, for example Nether Machine Gear. 

And in gamified mode using drag and drop put ingredients to the slot and receive the result. 

After this Alex response to the request and makes the equipment. 

Alex profile page: 

Alex goes to the Pending Requests. 

Requests page: 

Then Alex clicks on the Start button responding to the request from the customer. 

The interface is designed with a dark, high-contrast Minecraft-inspired theme, combining pixel-style typography with modern, glossy components. Clear visual hierarchy, bold status colors, and card-based layouts guide users naturally through ordering, bidding, and crafting flows. Subtle gamification elements like drag-and-drop crafting slots and progress states make complex actions feel intuitive and engaging. Every screen is fully responsive, ensuring the pixel-perfect experience stays smooth and readable across different screen sizes. 

Categories: Code Connoisseur. Technically it was described in Chameleon article because this is the same portal. 

Right now – bring real-time data to the app

Category: Pro Code

In the our Model builder app, which is helping customer recover lost recipes from the single shot, We are using websockets to update the progress of the task for model crafting.

Technical details

For the backend implementation we are using bun ServerWebSocket implementation.

In the Frontend app, we have subscription to handle different events of the tasks:

Craft Portal KPI Dashboard – Metrics Explanation

 

This document explains the key performance indicators (KPIs) and visual metrics used in the Craft Portal dashboard. The dashboard is implemented using Generative Pages with React and integrates with Microsoft Dataverse for data retrieval. Minecraft API assets are used to enhance the visual design with authentic item icons. 

Theme & Display Modes 

The dashboard supports both Light Mode and Dark Mode.  

Light Mode: 

Dark Mode 

KPI Definitions 

1. Summary Cards 

These cards provide a high-level overview of procurement activity: 

  • Total Projects: Total number of Projects in the system. 
  • Open Projects: Projects currently open for bidding. 
  • Total Bids: Total number of bids submitted across all projects. 
  • Wandering Traders: Total number of registered vendors. 

2. Project Status Distribution 

A donut chart showing the distribution of projects by status (Draft, Open, Closed, etc.). This helps users quickly understand the current lifecycle state of all projects. 

3. Bid Status Distribution 

This chart visualizes the ratio between submitted bids and selected (winning) bids, helping procurement teams evaluate bid conversion efficiency. 

4. Win Rate by Trader 

A horizontal bar chart displaying each trader’s win rate as a percentage of bids won versus bids submitted. 

5. Projects per Month 

This chart shows how many projects were created per month, allowing stakeholders to identify trends, seasonality, and workload distribution over time. 

6. Top Wandering Traders Leaderboard 

A ranked leaderboard displaying traders based on total wins. This gamified view encourages competition and makes vendor performance easy to compare. 

7. My Projects Table 

A detailed table listing all projects with sorting and search capabilities. Users can drill into and view individual projects directly from the dashboard. 

Dashboard Overview Screenshot 

Technical description for the Code Connoisseur category. 

Generative Pages with React 

This dashboard is built as a Generative Page component, which allows for dynamic, AI-assisted UI generation within the Microsoft Power Platform ecosystem. The component is written in TypeScript/React and utilizes: 

  • Fluent UI React Components (@fluentui/react-components) for base UI elements 
  • Custom Minecraft-styled components for visual theming 
  • DataGrid for tabular data display with sorting and filtering 

Microsoft Dataverse Integration 

The dashboard connects to Microsoft Dataverse using the dataApi prop provided by the Generative Pages runtime. 

Minecraft Item Icons 

All icons in the dashboard are sourced from the Minecraft API, a free public API that provides official Minecraft item and block images. 

https://minecraft-api.vercel.app/images/items

Chameleon

The Power Pages portal that manages turning basic Minecraft resources into different tools and help clients to find an appropriate vendor for printing adapts to all devices and screen sizes. 

We can consider 3 types of devices and Cascading Style Sheets (CSS) pixels for them:  

  1. Laptops/Desktops; Screen resolutions: 1920, 1440, 1280 px 
  1. Tables; Screen resolutions: 1024, 768 px 
  1. Mobile phones: 320-414 px 

Here it is important to mention that CSS pixels are logical units used by browsers to keep websites readable on high-density screens, while screen resolution is the actual number of physical pixels. 
The browser uses device pixel ratio to map CSS pixels to real pixels, so layouts stay the same size across devices. 

Let’s see how the different parts of Power Pages portal main page adapt to all these devices:  

Header with the menu. 

    1. Laptop/Desktop (1920 px, 1440 px, 1280 px) () 

    Across different laptop and desktop screen sizes (1920 px, 1440 px, 1280 px), the layout remains consistent, with width being the primary variation. Next, we will review how the interface appears on tablet and mobile screens. 

    2. Tables 

      1024 px 

        768 px 

          3. Mobile phones (320-414px) (the difference in width of page) 

            “Portal features” block. 

              1. Laptop/Desktop  1920 px 

              1440 px and 1280 px (The page width varies while the components remain responsive.) 

                1. Tables 

                1024 px 

                  768 px 

                    1. Mobile phones (320-414) px 

                    “Simple process” block. 

                      1. Laptop/Desktop (1920px, 1440px, 1280px) (The page width varies while the components remain responsive) 
                      1. Tablet (1024px, 768 px) (The page width varies while the components remain responsive) 
                      1. Phone (320-414 px) (The page width varies while the components remain responsive) 

                      “Active tenders” block. 

                        1. Laptops/Desktops  1920 px 

                        1440, 1280 px (The page width varies while the components remain responsive) 

                          1. Tables. (1024px, 768 px) (The page width varies while the components remain responsive) 
                          1. Mobile phones: (320-414 px) (The page width varies while the components remain responsive) 

                          Technical Overview 

                          This project is a React single-page application. It uses client-side routing via React Router to support multiple user flows, including public pages, a protected vendor portal, and an admin area. The application is written in TypeScript, ensuring strong typing and safer refactoring, and follows modern React patterns for component composition and state management. 

                          Project Organization 

                          Key Technologies Used 

                          • React 18 
                          • TypeScript 
                          • React Context API 
                          • Modern component-based UI architecture 

                          Feature Bombing, Here we go!

                          Categories: #Pro Code – we are using React and Type Script, Bun for the backend.  

                          We are using multiple functionalities on the single page of our portal for model building: 

                          1 – Image uploader control 

                          2 – Task list 

                          3 – Projection generation control 

                          4 – 3d model preview control 

                          5 – Download model control 

                          6 – Public sharing control 

                          Going with the Flow: Wiring Steve to the World

                          Some recipes are simple. A user-friendly UI is enough: Steve publishes a request, Wandering Traders reply with recipes, deal done.

                          But some recipes are complex. Specs are unclear. Steve doesn’t know exactly what he needs. There’s back-and-forth: questions, clarifications, files, photos, technical drawings.

                          We need proper channels. Share specs. Exchange files. Chat in real time.

                          Discord would work in the gaming world. But we’re building on Microsoft cloud.

                          So we use Modern Workplace, AI WORKFORCE suite: Teams, SharePoint, and the whole M365 family.


                          The Challenge: Connecting SharePoint, Teams, and Dataverse

                          As experienced consultants, we know the options:

                          Option 1: Server-side sync Quick. Efficient. But locked – not flexible when you want to extend. And no Teams integration.

                          Option 2: Dynamics 365 Teams Integration The out-of-the-box “Collaborate” button. Sounds good, but: it creates a separate Team or channel for each record. For our solution, that means a new channel for every single Request. Hundreds of channels.

                          And it’s not automatic – users still need to click “Collaborate,” choose to create new or merge to existing. Manual steps. Extra friction. Our users aren’t ready for that level of complexity just yet!

                          Our Use Case

                          As customer-oriented Redstone Engineers, we know adoption is everything. We wanted:

                          • Fully automated
                          • Zero clicks from user
                          • One Team, multiple channels (one per tender)
                          • Documents synced to the right place

                          The Solution: Power Automate

                          We know how OOB sync works under the hood. There’s a Document Location entity – the infrastructure connecting SharePoint to Dataverse.

                          We also know that when you create a Teams channel, SharePoint auto-generates a document library for it.

                          So we wired it up ourselves.

                          When a Tender is created:

                          1. Teams channel created under the main Tender Team
                          2. SharePoint folder structure generated
                          3. Document Location record created in Dataverse
                          4. Everything linked. Automatically.

                          Fully customized. Total freedom. Zero lines of code pro code. (Shoutout to FetchXML Builder from XRM Toolbox – making us look like we know what we’re doing since day one.)

                          Categories: #Redstone Realm, #low-code

                          Azure Local: Bring your own servers to the Azure Cloud 

                          CATEGORIES: Redstone Realm, Governance & Best Practices.

                          There are a couple of business cases that are required to comply with strict country regulations, such as keeping data in a specific location or region, or reducing delays between inter-service communication by hosting critical parts of the infrastructure close. 

                          In business, it’s called “Bring Your Own Server” (BYOS), which means using your own hardware with a provider’s infrastructure (like a data center or cloud) for hosting, or a Hybrid Cloud approach. 

                          In our project, we are using our own K8S cluster, which hosts microservices on the customer site, its allow us to build the solution that will even work during a lost internet connection without stopping the processes.  

                          Big customers which are owning a huge amount of 3d printers/farms require extra government and management capabilities. It can be covered by edge IoT gateways on the client side. At the same time, it still requires seamless Azure integration, which can cover the security model part. 
                           
                          IP owners licensing digital inventory – where manufacturers grant printing rights instead of shipping physical parts – often have stringent data sovereignty requirements (research), making our hybrid approach essential for industries like defense and aerospace.” 

                          Hopefully, Microsoft already has an approach for that case, it’s called Azure Local.  

                          Azure Local is the new, unified branding for what was previously known as Azure Stack HCI, extending Azure services to your own infrastructure for hybrid cloud management, while Azure Stack HCI was the specific hyper-converged solution.

                           
                           
                          Technical implementation  

                          As an edge device, we are using Sipeed Nano Cluster, which is the basis for several Raspberry Pi CM5 modules.  

                          High-Level diagram 

                          In our case we are hosting the following services: 

                          Core microservices responsible for: 

                          • 3D printer orchestration and job scheduling 
                          • Print pipeline execution and real-time monitoring 
                          • Device control, firmware integration, and safety checks 

                          Edge IoT gateway services: 

                          • Secure printer and sensor connectivity 
                          • Local buffering and processing of telemetry data 

                          Following that approach, we are receiving all the benefits of the cloud and private cloud.  

                          Who is the King of Integrations? Or what?

                          As you already knows, yesterday we released an article to demonstrate the ability interact with 3d printers, such as reading the temperature on turn on/off the light. In nice to have, but very limited functionality for out project. It was a challenge to grab camera stream and run the printing job using Local API…. 

                          After some nightly research, we found the solution. There is a addon for the Home Assistant which will allow us to perform any action with the 3d printer locally.  

                           To make it work in tight deadlines, we decided to run the Home Assistant app on our laptop, using Hyper-V, and expose port securely via the Cloudflare tunnels which is also providing HTTPS certificates. 

                          We are claiming the following badges: 

                          • #Nasty hackers,  
                          • #Thieving Bastards: we are using Cloudflare, Open source  Home Assistant and Bambu lab HA integration addon. 

                          Categories:  

                          • #Low code – for the integrations with Bambu lab local printer API without single line of the code 
                          • #Governance & Best Practices – following best practices of exposing only secured services to the public internet