Our helpful proactive teams bot uses multiple APIs to make magic happen.
The two most obvious ones are Microsoft Graph API (for user details) and Microsoft Teams API (for the bot code itself)
We also implement the Azure Maps API to render a helpful map to pinpoint where a report was generated, and most importantly we have the Dataverse Web API to create Opportunities in CRM:
->
->
—
Our bot’s Adaptive Card not only saves users time, it delivers a clean, modern, and engaging experience out of the box. And since it runs inside Microsoft Teams, it automatically adapts to every device and screen size. That leaves us free to focus on digging for gold (or dirt) instead of fighting with breakpoints.
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:
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.
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.
Laptop/Desktop 1920 px
1440 px and 1280 px (The page width varies while the components remain responsive.)
Tables
1024 px
768 px
Mobile phones (320-414) px
“Simple process” block.
Laptop/Desktop (1920px, 1440px, 1280px) (The page width varies while the components remain responsive)
Tablet (1024px, 768 px) (The page width varies while the components remain responsive)
Phone (320-414 px) (The page width varies while the components remain responsive)
“Active tenders” block.
Laptops/Desktops 1920 px
1440, 1280 px (The page width varies while the components remain responsive)
Tables. (1024px, 768 px) (The page width varies while the components remain responsive)
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.
Our goal is to make moving around fun again, by aiming to create a hybrid Minecraft experience, both physical and digital. To keep track on player statistics and other fun aspects we have created an application that we will display on our screen at our table for everybody to see.
But at the same time, we acknowledge that our solution is created to get players up on their feet and away from their PC, and we therefore need to make our application responsive so it will work well on phones and tablets!
We also aim to match the aesthetics of our application to work well with the Minecraft theme and be bold with the colouring!!
IPhone, Mac and IPad – yes we now, not the best setup for Minecraft….
Now we are really looking forward to add the rest of the data and functionality to our solution!!
The Five-Year Plan doesn’t ask whether your workers use desktops or phones. It demands results regardless.
So we’re making sure to build the CCCP Factory Portal to adapt like a chameleon to every device. Desktop monitors at Central Planning? Full glory with detailed dashboards. Field supervisors checking quotas on tablets? Optimized layouts. Comrades reviewing production targets on phones? Clean, focused mobile experience.
Responsive by Design, Not by Accident
We’re implemented proper responsive design from foundation to finish:
Smart Layout Adaption: CSS Grid and Flexbox layouts that reorganize based on viewport. Our quota cards stack elegantly on mobile. Navigation collapses into a hamburger menu. Dashboard panels reflow intelligently.
Breakpoint Strategy: Media queries ensure smooth transitions across device classes. Nothing breaks. Nothing squishes. Everything adapts.
Mobile-First Header: We solved the hardest problem, complex navigation with logo, search, and menu items. Z-index layering keeps elements properly stacked. Flexbox ensures space distribution. The logo hides on small screens, leaving just the bold “CCCP” text with the hamburger menu.
Progressive Enhancement: The base experience works everywhere. Enhanced features layer on for larger screens. Classic Soviet efficiency, maximum utility with minimal waste.
Resize the browser. Open it on your phone. Pull it up on a tablet. The CCCP Factory Portal adapts seamlessly to every form factor while maintaining the aesthetic and functionality that makes it uniquely ours.
A solution that doesn’t adapt is a solution that fails half its users. We adapted. We delivered.
Our Minecraft server dashboard adapts to every device.
Big screens. Small screens. Phones, tablets, laptops and probably devices that haven’t been invented yet. The layout simply reshapes itself to stay readable, usable, and intact, no matter how much screen space it’s given.
Nothing breaks. Nothing overlaps. No awkward scrolling gymnastics required.
We use a mix of CSS Grid and Flexbox. Grid handles the main multi‑column sections and lets them auto‑fit into fewer columns as the viewport narrows, while Flexbox handles horizontal groups that can wrap onto new lines. A few media‑query breakpoints explicitly reduce column counts and stack items on small screens. Typography and spacing use fluid sizing so text and padding scale smoothly instead of jumping.
My computer is overheating. Even testing responsiveness lags.
Greetings, fellow wizards and witches of the digital realm!
This afternoon, we are thrilled to announce that our magical journey through the enchanted forest of user interfaces has led us to claim two prestigious badges: Glossy Pixels and Chameleon. 🪄✨
Glossy Pixels: Just like the shimmering surface of the Mirror of Erised, our Power App user interfaces are crafted with a spellbinding glossiness that captivates the eye. These interfaces are not only visually stunning but also resilient, ensuring they won’t shatter like fragile glass on smaller screens. Whether you’re viewing them on a Muggle’s smartphone or a wizard’s enchanted tablet, the glossy charm remains unbroken.
Chameleon: Much like the Animagus who can transform at will, our solutions are incredibly responsive. They adapt seamlessly to all devices and screen sizes, from the smallest of handheld devices to the grandest of desktop monitors. This badge signifies our commitment to creating interfaces that are as versatile as a Polyjuice Potion, ensuring a smooth and consistent experience for all users, regardless of their device.
With these badges, we continue to push the boundaries of digital enchantment, creating user experiences that are as magical as a Patronus charm. Stay tuned for more spellbinding updates as we continue our quest to bring a touch of magic to the world of technology.
Plug N’ Play: In the spirit of the Weasleys’ Wizard Wheezes, we have conjured an app that seamlessly integrates with both Microsoft Teams and SharePoint, bringing a touch of magic to our daily business operations. This app is not just a mere spell; it is a powerful tool designed to solve a crucial business need, ensuring our workflows are as smooth as a well-brewed potion.
Our app, much like the Room of Requirement, adapts to the needs of its users. It enhances collaboration and communication within Teams, allowing us to pull information from various systems, have meaningful conversations about it, and take action—all within the enchanted walls of Teams. Additionally, we have woven our magic into SharePoint, creating a unified experience that ensures seamless access to documents, data, and collaboration tools.
Having consistent branding is important to give the users a good experience when navigating between different user interfaces. It makes a cohesive look and feel across apps, websites, reports, etc.
Define brand identity
The focus point for our solution is Hermione’s Beaded Bag, so we wanted to use soft purple
Font
One of the most identifying things about a brand is the font. We have found a free font that we want to use with most user-facing interfaces.
We used Microsoft 365 Copilot Visual creator to help get our creativity going. It helped us find a color scheme that was exactly what we were looking for to get a soft magical feeling.
From this we created a color scheme fit for apps and websites.
Our professors are active people, always flying around and disaparting between location, so we need to ensure that they can select and review applications for wizardry schools on the go.
Power BI mobile view
Mobile version of PowerBI Segmentation report
This dedicated verson allows interactive on the go.
Mobile Model Driven Apps
For individual students, we reduced the displayed content for mobile devices, the unnecessary address data is not shown on mobile devices, improving the usability of the application while remote.
Showing desktop experienceMobile version of the app
🗺️ Interactive Map: Mapping the Shadows in Style ✨
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.
🔮 Magical Features
1. Interactive Tracking with Google Maps API 🌍
Dynamic Positioning: Real-time tracking shows the locations of both targets and hitmen.
Reward Insights: Visualize mission rewards directly on the map for clarity and motivation.
Custom Styling: The map is tailored to reflect the Dark Ledger’s mystical theme.
2. Cross-Platform Accessibility 🔗
Teams App: Add it directly to Microsoft Teams for quick and easy collaboration.
SharePoint Integration: Embed seamlessly into SharePoint sites to streamline workflows.
Responsive Design: Optimized for desktops, tablets, and smartphones—effortlessly adapting to any screen size.
State Management: Redux or Context API ensures dynamic updates without skipping a beat.
Streams: Real-time syncing keeps the map fresh and up-to-date.
SCSS: Powers cohesive, flexible, and maintainable styling.
4. Dazzling CSS Animations ✨
Fluid Transitions: Map markers and interface elements move gracefully, like spells in motion.
Hover Effects: Intuitive highlighting guides users effortlessly through the map.
Polished Touches: Every button, icon, and menu interaction feels alive and engaging.
5. Automated Deployments with GitHub Actions 🤖✨
The app is built for agility and reliability:
CI/CD Pipeline: Changes pushed to GitHub are automatically deployed to our Azure-hosted web app using GitHub Actions.
Efficiency: Ensures the latest features and fixes are available to users without manual intervention.
Azure Hosting: Provides a robust, scalable platform to support the app’s responsiveness and performance.
💼 Solving Real Business Needs
This isn’t just an enchanting app; it’s a powerful business tool:
Operational Insights: Tracks locations and rewards in real time, empowering decision-making.
Collaboration Simplified: Embeds directly into Teams and SharePoint, making it easily accessible for all users.
Efficiency Boost: Automates key processes and eliminates the manual hassle of location tracking.
🌟 Built for Versatility and Performance
Why It Stands Out:
Responsive Design: Ensures usability across all devices and screen sizes.
Modern Tech Stack: Leverages React, SCSS, and state management for a seamless experience.
Automated Deployments: GitHub Actions streamline updates and ensure consistent quality.
Azure Hosting: Provides a stable and scalable backend for flawless performance.
🖤 Enchanting Efficiency
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.” 🧙✨
