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:
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.
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.
1440 px and 1280 px (The page width varies while the components remain responsive.)
1024 px
768 px
“Simple process” block.
“Active tenders” block.
1440, 1280 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
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