Tag Archives: Responsive design

Chameleon

Posted on by

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