In addition to our API, the nr. 1 howler service also has a website. It is built using React Router, with an impeccable developer-experience with hot-reloading, react hooks, sass, and more!
Using GitHub Secrets and Workflows ensures secure handling of sensitive information through encryption and access control. As an example from the github-actions yml-file: azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_THANKFUL_HILL_0CC449203 }}
Greetings, wizarding developers! ✨ At PowerPotters of Cepheo, we’ve mastered the art of separating concerns, ensuring our solution is as efficient as it is elegant. By shifting complex logic to the backend with X++ and creating responsive, user-friendly frontends, we’ve built a scalable, intuitive system for potion production. This approach ensures developers can specialize, users get a seamless experience, and the system can grow effortlessly.
Our backend services, crafted with X++, perform the heavy lifting, allowing the frontend to remain clean and lightweight.
InventTable and generating BOM and route IDs.AdEngEntityActionLogTable), ensuring traceability and stability.AdEngEntityActionLogTable, align with our Ad-prefixed ALM standards, ensuring clarity and maintainability.
With the backend performing heavy computations, the frontend remains focused on delivering a smooth user experience.
By combining backend processing in X++ with responsive frontend frameworks, we’ve created a system that:
Our approach exemplifies the principles of Client Side Salsa:
With backend power driving the magic and frontend charm engaging users, we’ve created a potion production system that’s as delightful as a perfectly executed salsa dance. We humbly submit our case for the Client Side Salsa Badge and invite you to explore the elegance of our solution: acdc.blog/category/cepheo25.
#ACDC2025 #ClientSideSalsa #PowerPotters #BackendMagic
Our Interactive Map WebApp has masterfully combined modern technology, responsive design, and captivating aesthetics. Developed with React, TypeScript, SCSS, and enhanced with fancy CSS animations, this map is the perfect companion for tracking the mystical operations of the Dark Ledger. With seamless integrations into Microsoft Teams and SharePoint, paired with automated deployments via GitHub Actions, this tool bridges functionality and style, solving critical business needs like a pro.
To ensure smooth performance and usability:
The app is built for agility and reliability:
This isn’t just an enchanting app; it’s a powerful business tool:
With React, SCSS, Google Maps API, and Azure-hosted automation, our Interactive Map WebApp stands as a spellbinding example of innovation. Whether you’re plotting missions or tracking rewards, this tool ensures you’re always ahead, wrapped in elegance and functionality.
“When modern magic meets technical wizardry, the results are simply spellbinding.” 🧙✨
Long time since the last badge hunt…
In the fast-paced and exhilarating world of hackathons, few events shine as brightly as the ACDC Hackathon. This year, participants from all corners of the tech community gathered with one goal in mind: to push the boundaries of innovation and creativity. Amidst the coding sprints and problem-solving marathons, a unique and thrilling aspect stood out – the quest for badges and achievements.
Collecting badges in the ACDC Hackathon isn’t just about a sense of accomplishment; it’s a testament to the skills, perseverance, and collaborative spirit of the participants. From early morning brainstorming sessions to late-night debugging frenzies, every moment was a step closer to earning those coveted badges that symbolize mastery and ingenuity.
Join us as we delve into the journey of collecting badges and achievements in the ACDC Hackathon. We will explore the different challenges faced by the participants, the strategies they employed, and the unforgettable moments that defined their path to success. Whether you’re a seasoned hacker or a curious onlooker, this blog post will give you an insider’s view of what it takes to excel in one of the most dynamic and rewarding hackathons around.
When entering the HogWorkPlace Power App for the first time, you’ll be greeted by a landing page that seamlessly integrates with your house. Using Azure AD groups, we represent each house in vivid detail.
But wait, what’s that in the corner? It’s DobbAI, your personal AI house-elf assistant, ready to cater to your every need. DobbAI is a Copilot Studio agent, imbued with the charm and wit of a real house-elf. Its knowledge is deeply integrated with the rest of the intranet housed on SharePoint. Curious about tonight’s dinner? Simply ask DobbAI to fetch the menu from a SharePoint list.
For us, SharePoint isn’t just a repository; it’s the lifeblood of our data, securely storing and managing it alongside connectors to tables in Dataverse for seamless solution engagement. When you interact with DobbAI, you’ll authenticate using the robust Azure Active Directory V2 method. The AI is then published to a custom website channel, providing an iframe that seamlessly integrates with our React PCF component, all meticulously deployed to the power app solution.
But wait! There’s more to this dance we call “client-side salsa”. Within SharePoint, you’ll find an embedded Viva Engage and SPFx web part that displays the Hogwarts academic calendar, keeping you updated on both school events and social engagements. And lastly a Daily Proft newsfeed. All available via the canvas app, or just ask Dobby for directions 😉
Our OwlExpress solution needs to get the list of possible future wizards from a different set of data sources. We are merging these data into a PowerBI report so that the segmentation can be easily done using the slicers in a more intuitive way.
This Report is integrated into an MDA using a PCF control that House Elves Limited created that can save the segment chosen by the user using the Export Segment command.
This will trigger a Power Automate flow that will create the applications for all future students of the chosen segment.
To integrate the PowerBI report the following API’s are being consumed:
The PCF component has been developed using Test Driven Development and Storybook which allows you to fail fast and often and reach success faster.
The component is a react/virtual component, which simplifies a lot the separation of concerns into different components.
The code has been structured using the best practices for PCF components. We are using a Solution Project to simplify the build of the Solution that contains the component.
To standardize the build and deployment process and to ensure that the PCF Version is always kept in sync with the containing Solution version a couple of PowerShell scripts have been written. This helps also with the Azure DevOps pipelines because these can be simplified to execute the exact scripts that the developer executes on their machine.
The registration process utilizes a custom PCF control built in REACT, designed to seamlessly capture a picture of the user:
We are also utilizing the same technology for our Flying Game:
NOTE TO THE JURY: we have taken your comment in and added details in the bottom of this article.
In our Wayfinder Academy, we take a comprehensive and magical approach to understanding the student’s history, aspirations, and potential to recommend the best possible new school. The process is detailed, thorough, and personalized, ensuring the student is matched with an environment where they can thrive.
Just to remind the process, here we assume a student who didn’t feel right about their current faculty, filed an application. Immediately after that we request the tabelle from their current faculty (historical data), ask a student to upload some photos from most memorable moments, and then invited to an interview. While we are still working on the interview step and will share the details later, with this article we want to add more details about one of our approaches to mining extra insight from the student’s interview by analysing the emotions.
We use this emotional recognition along with the interview, to get 360 degree insight on the student`s reaction to the questions, that are designed to figure out their values, aspirations, fears, etc we can use to calculate the probability of their relation to the faculties and identify the one with the highest score (the scoring approach will be shared in a different post).
So, we are using a video stream capture to record an interview session and extract the emotional dataset.
It allows us to receive one more dimension that will extend standard datasets of the student, such as feedback, historical data from previous schools, etc.
We use the imentiv.ai API to analyze the video and grab the final report. We then make the final dashboard in Power BI (we love it)
and embed it into OneLake.
Imentiv AI generates emotion recognition reports using different types of content, such as video, photos, text, and audio.
We implemented the single-page application to create an interactive experience by recognizing the emotions in the image captured via the webcam on our tablet. The analysis of the video stream takes more time, so we will demonstrate it later.
The app consists of two parts: a PoC to recognize the emotions in a photo from a webcam and an example of an emotion recognition report.
To build that PoC application, we decided to use the NodeJS stack. The engine is based on Bun, which is a modern and highly effective alternative to NodeJs. Compared to NodeJs, Bun was written with Rust.
For the front end, we are using React and ChartJs. We are hosting the PoC on our laptop. To make it available to the public internet, we are using CloudFlare tunnels. It also covers the SSL certificate termination, so your service will be secured by default without any significant effort.
The app server and the client app run inside a docker container, so you can deploy easily with a single command: docker-compose up—build.
To optimize the final container size and improve the speed of the build, we are using docker files with two stages: one to build the app and the second one to run the final artifacts.
PS:
Badges we claim:
Thieving bastards – we are using third party platform to recognize emotions in video and photo.
Hipster – we use BUN to run the application
Hogwarts Enchanter – we use Mystical AI imentiv.ai API to grab the emotional reports and visualize it in an user friendly way (see the screenshot above). Our enchanted workflow is using the data and making it available in OneLake. Wizarding world becomes closer when we see the AI based deep insight from various data sources in one place, in easy to read and interpret format.
Right now – we are using web socket server to implement real time communication between client and server site.
Client side salsa – we use React to implement front end.
PS2: pls come over to our camp and test it out! We want to know how you feel! 🙂
As the ACDC Hackathon draws to its climax, our team’s dedication and innovative spirit have led us to target three advanced badges, each reflecting our commitment to solving complex problems with cutting-edge technology and best practices.
In our quest for the “Crawler” badge, we’ve integrated Copilot Studio into our Power Page site, embedding a Copilot bot designed to aid users when they’re stuck on a course level. This ingenious feature utilizes a cloud flow triggered by the user’s input, leveraging the Dataverse action “Search Rows (Preview)” to find and return answers for the specified course level. This not only enhances user experience but also showcases our innovative use of search to solve a real-world business problem.
Our pursuit of the “Client Side Salsa” badge highlights our application’s fluidity, achieved by running entirely within the client’s browser without becoming a cumbersome monolith. By crafting a PCF control for our interactive course game using TypeScript and React, we ensure our setup’s compatibility across a wide range of browsers. This approach underlines our strategic use of modern front-end frameworks to deliver a seamless and responsive user interface.
The “ACDC Craftsman” badge is a testament to our adherence to development and deployment best practices. We’ve established three environments (dev, UAT, & prod), focusing our component development within the dev environment. Our deployment strategy is streamlined through Power Platform ALM pipelines, incorporating a pre-deployment approval step via Teams. This allows for meticulous control over deployment timing and participants. Moreover, our use of Azure DevOps Repositories for the PCF control exemplifies our commitment to source control and project management excellence.
As we conclude this hackathon journey, these badges represent more than just our technical achievements; they signify our team’s holistic approach to innovation, user engagement, and operational efficiency. Our efforts to blend advanced technological solutions with practical application and meticulous project management illustrate the essence of true ACDC craftsmanship, setting a high bar for what can be accomplished in such a collaborative and competitive environment.
Our dazzling frontend application is implemented with the coolest of the coolest technologies. React allows us to run our application seamlessly in the client’s browser. In addition to our static code analysis pipeline, these technologies make sure we are compliant and protects the privacy of the user.
We used:
Not only are they hippety hip, they are third party libraries super useful for our application! Weehoo!
While this is a great visualisation, we must announce that the CSS and JS was not created by us, but by the great Developer VictorNP, which proposed a vanilla JS solution which we transformed into React functional components. As stated by the designer, It is mainly designed to be a read-only component used to display information – Therefore we’ve limited to bounded context fields.
This is an great example of how the limited possibilities of Dashboards in Dynamics directly, can easily be mitigated, as well making the visualisation reusable for different contexts through PCFs, making custom, code-first visuals in our Low-code solution. By harnessing the power of client-side processing, we ensure that our solutions are not burdened by heavy monolith front-ends, guaranteeing a seamless and responsive user experience every time. Of course, memorisation is applied to improve the transitions and performance of the visualisation.
Moreover, the PCFs functions as plugins for Power Apps, which further enriches the user experience through customisation. Our use cases will be mostly related to displaying important business and plumbing related KPI’s to keep track on the current state of our business. Lastly we wanted others to be able to reuse this visual and provide improvements to it, so we Open sourced it and made available on Github! Contributions are very welcome!