{"id":1309,"date":"2025-12-19T06:00:13","date_gmt":"2025-12-19T06:00:13","guid":{"rendered":"https:\/\/monogram-theme.jkdevstudio.com\/portfolio\/celestial-murmurs\/"},"modified":"2026-04-30T16:28:21","modified_gmt":"2026-04-30T16:28:21","slug":"celestial-murmurs","status":"publish","type":"portfolio","link":"https:\/\/swapneshtilekar.com\/de\/portfolio\/celestial-murmurs\/","title":{"rendered":"Minera Group"},"content":{"rendered":"<p>In a vertically integrated steel and commodities manufacturing operation managing millions of tonnes of inventory, production schedules, and trading data across multiple facilities in India and beyond, the ability to visualize, filter, and interact with complex datasets in real time is mission-critical. Minera Group, handling raw materials (iron ore pellets, coal, bauxite), production metrics, and finished steel products, required enterprise-grade data table interfaces that balanced sophisticated functionality with intuitive usability\u2014all optimized for field operations, office dashboards, and mobile access.<\/p>\n\n\n\n<figure class=\"wp-block-gallery alignwide has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" data-id=\"706\" src=\"https:\/\/swapneshtilekar.com\/wp-content\/uploads\/2025\/11\/Minera1.webp\" alt=\"\" class=\"wp-image-706\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" data-id=\"705\" src=\"https:\/\/swapneshtilekar.com\/wp-content\/uploads\/2025\/11\/Minera2.webp\" alt=\"\" class=\"wp-image-705\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" data-id=\"704\" src=\"https:\/\/swapneshtilekar.com\/wp-content\/uploads\/2025\/11\/Minera3.webp\" alt=\"\" class=\"wp-image-704\"\/><\/figure>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Project Overview<\/h2>\n\n\n\n<div class=\"wp-block-stackable-columns stk-block-columns stk-block stk-aadf1ed\" data-block-id=\"aadf1ed\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-aadf1ed-column\">\n\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-7829651\" data-v=\"4\" data-block-id=\"7829651\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-7829651-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-7829651-inner-blocks\">\n\n<div class=\"wp-block-stackable-icon-label stk-block-icon-label stk-block stk-b1d7b3b\" data-block-id=\"b1d7b3b\"><div class=\"stk-row stk-inner-blocks stk-block-content\">\n\n<div class=\"wp-block-stackable-icon stk-block-icon has-text-align-left stk-block stk-d44da53\" data-block-id=\"d44da53\"><span class=\"stk--svg-wrapper\"><div class=\"stk--inner-svg\"><svg style=\"height:0;width:0\"><defs><lineargradient id=\"linear-gradient-d44da53\" x1=\"0\" x2=\"100%\" y1=\"0\" y2=\"0\"><stop offset=\"0%\" style=\"stop-opacity:1;stop-color:var(--linear-gradient-d-44-da-53-color-1)\"><\/stop><stop offset=\"100%\" style=\"stop-opacity:1;stop-color:var(--linear-gradient-d-44-da-53-color-2)\"><\/stop><\/lineargradient><\/defs><\/svg><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 448 512\" aria-hidden=\"true\" width=\"32\" height=\"32\"><path d=\"M176 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h16V98.4C92.3 113.8 16 200 16 304c0 114.9 93.1 208 208 208s208-93.1 208-208c0-41.8-12.3-80.7-33.5-113.2l24.1-24.1c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L355.7 143c-28.1-23-62.2-38.8-99.7-44.6V64h16c17.7 0 32-14.3 32-32s-14.3-32-32-32H224 176zm72 192V320c0 13.3-10.7 24-24 24s-24-10.7-24-24V192c0-13.3 10.7-24 24-24s24 10.7 24 24z\"><\/path><\/svg><\/div><\/span><\/div>\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-e518772\" id=\"2-months\" data-block-id=\"e518772\"><h4 class=\"stk-block-heading__text\">2 months<\/h4><\/div>\n\n<\/div><\/div>\n\n\n<div class=\"wp-block-stackable-icon-label stk-block-icon-label stk-block stk-d607d5f\" data-block-id=\"d607d5f\"><div class=\"stk-row stk-inner-blocks stk-block-content\">\n\n<div class=\"wp-block-stackable-icon stk-block-icon has-text-align-left stk-block stk-e598d1a\" data-block-id=\"e598d1a\"><span class=\"stk--svg-wrapper\"><div class=\"stk--inner-svg\"><svg style=\"height:0;width:0\"><defs><lineargradient id=\"linear-gradient-e598d1a\" x1=\"0\" x2=\"100%\" y1=\"0\" y2=\"0\"><stop offset=\"0%\" style=\"stop-opacity:1;stop-color:var(--linear-gradient-e-598-d-1-a-color-1)\"><\/stop><stop offset=\"100%\" style=\"stop-opacity:1;stop-color:var(--linear-gradient-e-598-d-1-a-color-2)\"><\/stop><\/lineargradient><\/defs><\/svg><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 640 512\" aria-hidden=\"true\" width=\"32\" height=\"32\"><path d=\"M192 64C86 64 0 150 0 256S86 448 192 448H448c106 0 192-86 192-192s-86-192-192-192H192zM496 168a40 40 0 1 1 0 80 40 40 0 1 1 0-80zM392 304a40 40 0 1 1 80 0 40 40 0 1 1 -80 0zM168 200c0-13.3 10.7-24 24-24s24 10.7 24 24v32h32c13.3 0 24 10.7 24 24s-10.7 24-24 24H216v32c0 13.3-10.7 24-24 24s-24-10.7-24-24V280H136c-13.3 0-24-10.7-24-24s10.7-24 24-24h32V200z\"><\/path><\/svg><\/div><\/span><\/div>\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-87dfe0b\" id=\"ui-developer-salesforce-developer-business-analyst\" data-block-id=\"87dfe0b\"><h4 class=\"stk-block-heading__text\">ui developer, salesforce developer, business analyst<\/h4><\/div>\n\n<\/div><\/div>\n\n<\/div><\/div><\/div>\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-0a835dc\" data-v=\"4\" data-block-id=\"0a835dc\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-0a835dc-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-0a835dc-inner-blocks\">\n\n<div class=\"wp-block-stackable-icon-label stk-block-icon-label stk-block stk-769cd78\" data-block-id=\"769cd78\"><style>.stk-769cd78 {margin-bottom:12px !important;}<\/style><div class=\"stk-row stk-inner-blocks stk-block-content\">\n\n<div class=\"wp-block-stackable-icon stk-block-icon has-text-align-left stk-block stk-a5062c1\" data-block-id=\"a5062c1\"><span class=\"stk--svg-wrapper\"><div class=\"stk--inner-svg\"><svg style=\"height:0;width:0\"><defs><lineargradient id=\"linear-gradient-a5062c1\" x1=\"0\" x2=\"100%\" y1=\"0\" y2=\"0\"><stop offset=\"0%\" style=\"stop-opacity:1;stop-color:var(--linear-gradient-a-5062-c-1-color-1)\"><\/stop><stop offset=\"100%\" style=\"stop-opacity:1;stop-color:var(--linear-gradient-a-5062-c-1-color-2)\"><\/stop><\/lineargradient><\/defs><\/svg><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\" aria-hidden=\"true\" width=\"32\" height=\"32\"><path d=\"M176 88v40H336V88c0-4.4-3.6-8-8-8H184c-4.4 0-8 3.6-8 8zm-48 40V88c0-30.9 25.1-56 56-56H328c30.9 0 56 25.1 56 56v40h28.1c12.7 0 24.9 5.1 33.9 14.1l51.9 51.9c9 9 14.1 21.2 14.1 33.9V304H384V288c0-17.7-14.3-32-32-32s-32 14.3-32 32v16H192V288c0-17.7-14.3-32-32-32s-32 14.3-32 32v16H0V227.9c0-12.7 5.1-24.9 14.1-33.9l51.9-51.9c9-9 21.2-14.1 33.9-14.1H128zM0 416V336H128v16c0 17.7 14.3 32 32 32s32-14.3 32-32V336H320v16c0 17.7 14.3 32 32 32s32-14.3 32-32V336H512v80c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64z\"><\/path><\/svg><\/div><\/span><\/div>\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-b7d6c35\" id=\"key-tools\" data-block-id=\"b7d6c35\"><h4 class=\"stk-block-heading__text\">key tools<\/h4><\/div>\n\n<\/div><\/div>\n\n\n<ul class=\"wp-block-list\">\n\n<li>Salesforce Lightning Web Components (LWC)<\/li>\n\n\n<li>HTML5<\/li>\n\n\n<li>CSS3<\/li>\n\n\n<li>SLDS (Salesforce Lightning Design System)<\/li>\n\n\n<li>Responsive Design<\/li>\n\n<\/ul>\n\n<\/div><\/div><\/div>\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-461255b\" data-v=\"4\" data-block-id=\"461255b\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-461255b-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-461255b-inner-blocks\">\n\n<div class=\"wp-block-stackable-icon-label stk-block-icon-label stk-block stk-0059197\" data-block-id=\"0059197\"><style>.stk-0059197 {margin-bottom:12px !important;}<\/style><div class=\"stk-row stk-inner-blocks stk-block-content\">\n\n<div class=\"wp-block-stackable-icon stk-block-icon has-text-align-left stk-block stk-53f6b3e\" data-block-id=\"53f6b3e\"><span class=\"stk--svg-wrapper\"><div class=\"stk--inner-svg\"><svg style=\"height:0;width:0\"><defs><lineargradient id=\"linear-gradient-53f6b3e\" x1=\"0\" x2=\"100%\" y1=\"0\" y2=\"0\"><stop offset=\"0%\" style=\"stop-opacity:1;stop-color:var(--linear-gradient-53-f-6-b-3-e-color-1)\"><\/stop><stop offset=\"100%\" style=\"stop-opacity:1;stop-color:var(--linear-gradient-53-f-6-b-3-e-color-2)\"><\/stop><\/lineargradient><\/defs><\/svg><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 640 512\" aria-hidden=\"true\" width=\"32\" height=\"32\"><path d=\"M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c10 0 18.8-4.9 24.2-12.5l-99.2-99.2c-14.9-14.9-23.3-35.1-23.3-56.1v-33c-15.9-4.7-32.8-7.2-50.3-7.2H178.3zM384 224c-17.7 0-32 14.3-32 32v82.7c0 17 6.7 33.3 18.7 45.3L478.1 491.3c18.7 18.7 49.1 18.7 67.9 0l73.4-73.4c18.7-18.7 18.7-49.1 0-67.9L512 242.7c-12-12-28.3-18.7-45.3-18.7H384zm24 80a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z\"><\/path><\/svg><\/div><\/span><\/div>\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-57bd97f\" id=\"my-role\" data-block-id=\"57bd97f\"><h4 class=\"stk-block-heading__text\">my role<\/h4><\/div>\n\n<\/div><\/div>\n\n\n<ul class=\"wp-block-list\">\n\n<li>LWC Developer & Architect<\/li>\n\n\n<li>UI Component Designer<\/li>\n\n\n<li>Mobile-First Optimization Specialist<\/li>\n\n\n<li>QA & Accessibility Lead<\/li>\n\n<\/ul>\n\n<\/div><\/div><\/div>\n\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-icon-label stk-block-icon-label stk-block stk-04c6bc9\" data-block-id=\"04c6bc9\"><style>.stk-04c6bc9 {margin-bottom:0px !important;}<\/style><div class=\"stk-row stk-inner-blocks stk-block-content\">\n\n<div class=\"wp-block-stackable-icon stk-block-icon has-text-align-left stk-block stk-dbe7764\" data-block-id=\"dbe7764\"><span class=\"stk--svg-wrapper\"><div class=\"stk--inner-svg\"><svg style=\"height:0;width:0\"><defs><lineargradient id=\"linear-gradient-dbe7764\" x1=\"0\" x2=\"100%\" y1=\"0\" y2=\"0\"><stop offset=\"0%\" style=\"stop-opacity:1;stop-color:var(--linear-gradient-dbe-7764-color-1)\"><\/stop><stop offset=\"100%\" style=\"stop-opacity:1;stop-color:var(--linear-gradient-dbe-7764-color-2)\"><\/stop><\/lineargradient><\/defs><\/svg><svg data-prefix=\"fa\" data-icon=\"star\" class=\"svg-inline--fa fa-star fa-w-18\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 576 512\" aria-hidden=\"true\" width=\"32\" height=\"32\"><path fill=\"currentColor\" d=\"M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z\"><\/path><\/svg><\/div><\/span><\/div>\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-97a8601\" id=\"scope\" data-block-id=\"97a8601\"><h4 class=\"stk-block-heading__text\">Scope<\/h4><\/div>\n\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-columns stk-block-columns stk-block stk-154649b\" data-block-id=\"154649b\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-154649b-column\">\n\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-fcac123\" data-v=\"4\" data-block-id=\"fcac123\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-fcac123-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-fcac123-inner-blocks\">\n\n<ul class=\"wp-block-list\">\n\n<li>Custom Table Layout Design (Headers, Rows, Cells\u2014all bespoke styling)<\/li>\n\n\n<li>Dynamic Input Fields with Conditional Rendering<\/li>\n\n<\/ul>\n\n<\/div><\/div><\/div>\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-6334e2d\" data-v=\"4\" data-block-id=\"6334e2d\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-6334e2d-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-6334e2d-inner-blocks\">\n\n<ul class=\"wp-block-list\">\n\n<li>Custom Button Components & Controls<\/li>\n\n\n<li>Table Height Optimization & Performance Tuning<\/li>\n\n<\/ul>\n\n<\/div><\/div><\/div>\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-a3d8a05\" data-v=\"4\" data-block-id=\"a3d8a05\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-a3d8a05-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-a3d8a05-inner-blocks\">\n\n<ul class=\"wp-block-list\">\n\n<li>Mobile Responsiveness with Horizontal Scroll Implementation<\/li>\n\n\n<li>Label & Conditional Input Logic<\/li>\n\n<\/ul>\n\n<\/div><\/div><\/div>\n\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">The Challenge<\/h2>\n\n\n\n<p>Minera\u2019s data-heavy operations required displaying massive datasets\u2014production orders, inventory allocations, shipment tracking, quality metrics\u2014in interfaces that users on the shop floor could navigate as easily as office-based analysts. The standard SLDS data table component, while robust, didn\u2019t meet Minera\u2019s specific needs: custom row styling for priority-flagging, conditional inline editing for production adjustments, and fluid mobile responsiveness for warehouse teams accessing dashboards on tablets.<\/p>\n\n\n\n<p>The core complexity was\u00a0<strong>building a fully custom table system from scratch<\/strong>\u2014headers, row structures, cells, and input fields\u2014without relying on pre-built Salesforce components, ensuring pixel-perfect design consistency and meeting exacting performance requirements for datasets with hundreds to thousands of rows.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Research & Design Process<\/h2>\n\n\n\n<p>I conducted workflow analysis with Minera\u2019s operations and warehouse teams:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Shop Floor Operators:<\/strong>\u00a0Needed quick visibility into production batch data and real-time status updates<\/li>\n\n\n\n<li><strong>Office Analysts:<\/strong>\u00a0Required sorting, filtering, and export capabilities for reporting<\/li>\n\n\n\n<li><strong>Mobile Users:<\/strong>\u00a0Warehouse staff accessing inventory data on tablets during shift work<\/li>\n<\/ul>\n\n\n\n<p>Key findings shaped the design:<\/p>\n\n\n\n<p><strong>Custom button styling<\/strong>\u00a0boosted action discoverability compared to generic SLDS buttons<\/p>\n\n\n\n<p><strong>80% of users accessed tables on desktop<\/strong>, but 20% on mobile required seamless experience<\/p>\n\n\n\n<p><strong>Horizontal scroll was preferable<\/strong>\u00a0to column hiding for warehouse staff (muscle memory from legacy systems)<\/p>\n\n\n\n<p><strong>Height-constrained tables<\/strong>\u00a0improved cognitive load\u2014users could see 10\u201315 rows at a time without fatigue<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Design & Development Iterations<\/h2>\n\n\n\n<p><strong>Phase 1: Component Architecture<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Mapped table requirements into reusable LWC components<\/li>\n\n\n\n<li>Designed data model for columns, rows, and cell configurations<\/li>\n\n\n\n<li>Planned responsive breakpoints and scroll strategies<\/li>\n<\/ul>\n\n\n\n<p><strong>Phase 2: Custom Styling & Layout<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Built base table structure with flexbox for flexible column widths<\/li>\n\n\n\n<li>Implemented fixed header with scrollable body<\/li>\n\n\n\n<li>Crafted custom button and input field styles<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/swapneshtilekar.com\/wp-content\/uploads\/2025\/11\/Minera_Table.webp\" alt=\"\" class=\"wp-image-708\"\/><\/figure>\n\n\n\n<p><strong>Phase 3: Conditional & Dynamic Logic<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Developed cell-level conditional rendering<\/li>\n\n\n\n<li>Integrated Apex controllers for data fetching and row-level actions<\/li>\n\n\n\n<li>Added real-time validation and error handling<\/li>\n<\/ul>\n\n\n\n<p><strong>Phase 4: Mobile Responsiveness<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tested on iOS Safari, Chrome for Android, desktop browsers<\/li>\n\n\n\n<li>Optimized horizontal scroll UX with touch-friendly interactions<\/li>\n\n\n\n<li>Adjusted font sizes and spacing for legibility on smaller screens<\/li>\n<\/ul>\n\n\n\n<p><strong>Phase 5: QA & Accessibility<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Keyboard navigation support (Tab through cells, Enter for actions)<\/li>\n\n\n\n<li>ARIA labels for screen readers<\/li>\n\n\n\n<li>Performance testing with 500\u20131000 row datasets<\/li>\n\n\n\n<li>Cross-browser compatibility (Chrome, Firefox, Safari, Edge)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Key Outcomes & Impact<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Performance:<\/strong>\u00a0Rendered 1000-row tables in < 2 seconds; smooth scrolling without jank<\/li>\n\n\n\n<li><strong>User Adoption:<\/strong>\u00a095% task completion rate for inline edits; users praised intuitive layout<\/li>\n\n\n\n<li><strong>Mobile Efficiency:<\/strong>\u00a0Warehouse teams completed inventory checks 30% faster with optimized mobile view<\/li>\n\n\n\n<li><strong>Design Fidelity:<\/strong>\u00a0Pixel-perfect custom components matched Minera\u2019s internal design system and brand guidelines<\/li>\n\n\n\n<li><strong>Maintainability:<\/strong>\u00a0Modular LWC architecture allowed rapid iterations and feature additions<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/swapneshtilekar.com\/wp-content\/uploads\/2025\/11\/Minera_Modal.webp\" alt=\"\" class=\"wp-image-707\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Technical Depth: CSS & Responsive Design<\/h2>\n\n\n\n<p>The table employed advanced CSS techniques:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>CSS Grid & Flexbox<\/strong>\u00a0for responsive column management<\/li>\n\n\n\n<li><strong>CSS Variables<\/strong>\u00a0for theming and dynamic styling<\/li>\n\n\n\n<li><strong>Media Queries<\/strong>\u00a0for breakpoint-specific layouts<\/li>\n\n\n\n<li><strong>CSS Transitions<\/strong>\u00a0for smooth hover and state changes<\/li>\n\n\n\n<li><strong>Calc()<\/strong>\u00a0functions for dynamic sizing based on viewport<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Retrospective<\/h2>\n\n\n\n<p>This project reinforced the importance of\u00a0<strong>designing from first principles<\/strong>\u00a0when off-the-shelf components don\u2019t fit the bill. By building custom table infrastructure, I gained deep insight into responsive web design, performance optimization, and the nuances of mobile-first UX for data-heavy applications.<\/p>\n\n\n\n<p>Key learnings:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Custom components require rigorous testing:<\/strong>\u00a0Edge cases with different data types, screen sizes, and user behaviors emerged through iterative QA<\/li>\n\n\n\n<li><strong>Mobile-first is critical:<\/strong>\u00a0Designing for mobile constraints first, then scaling up to desktop, resulted in cleaner, more efficient code<\/li>\n\n\n\n<li><strong>Conditional rendering saves real estate:<\/strong>\u00a0Showing only relevant fields per row reduced cognitive load significantly<\/li>\n\n\n\n<li><strong>Fixed heights improve scannability:<\/strong>\u00a0Users could quickly parse datasets when table height was bounded, preventing endless scrolling fatigue<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>In a vertically integrated steel and commodities manufacturing operation managing millions of tonnes of inventory, production schedules, and trading data across multiple facilities in India and beyond, the ability to visualize, filter, and interact with complex datasets in real time is mission-critical. Minera Group, handling raw materials (iron ore pellets, coal, bauxite), production metrics, and [&hellip;]<\/p>\n","protected":false},"featured_media":4665,"template":"","portfolio_category":[40],"portfolio_tag":[33,39,41,46,58],"portfolio_industry":[43],"class_list":["post-1309","portfolio","type-portfolio","status-publish","has-post-thumbnail","hentry","portfolio_category-illustrations","portfolio_tag-creative-direction","portfolio_tag-graphic-design","portfolio_tag-interaction-design","portfolio_tag-motion-graphics","portfolio_tag-visual-identity","portfolio_industry-marketing-teams"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Minera Group - Swapnesh Tilekar<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/swapneshtilekar.com\/de\/portfolio\/celestial-murmurs\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Minera Group - Swapnesh Tilekar\" \/>\n<meta property=\"og:description\" content=\"In a vertically integrated steel and commodities manufacturing operation managing millions of tonnes of inventory, production schedules, and trading data across multiple facilities in India and beyond, the ability to visualize, filter, and interact with complex datasets in real time is mission-critical. Minera Group, handling raw materials (iron ore pellets, coal, bauxite), production metrics, and [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/swapneshtilekar.com\/de\/portfolio\/celestial-murmurs\/\" \/>\n<meta property=\"og:site_name\" content=\"Swapnesh Tilekar\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-30T16:28:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/swapneshtilekar.com\/wp-content\/uploads\/2025\/12\/Minera-Group-Featured.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1440\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"5\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/swapneshtilekar.com\\\/portfolio\\\/celestial-murmurs\\\/\",\"url\":\"https:\\\/\\\/swapneshtilekar.com\\\/portfolio\\\/celestial-murmurs\\\/\",\"name\":\"Minera Group - Swapnesh Tilekar\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/swapneshtilekar.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/swapneshtilekar.com\\\/portfolio\\\/celestial-murmurs\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/swapneshtilekar.com\\\/portfolio\\\/celestial-murmurs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/swapneshtilekar.com\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/Minera-Group-Featured.webp\",\"datePublished\":\"2025-12-19T06:00:13+00:00\",\"dateModified\":\"2026-04-30T16:28:21+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/swapneshtilekar.com\\\/portfolio\\\/celestial-murmurs\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/swapneshtilekar.com\\\/portfolio\\\/celestial-murmurs\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/swapneshtilekar.com\\\/portfolio\\\/celestial-murmurs\\\/#primaryimage\",\"url\":\"https:\\\/\\\/swapneshtilekar.com\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/Minera-Group-Featured.webp\",\"contentUrl\":\"https:\\\/\\\/swapneshtilekar.com\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/Minera-Group-Featured.webp\",\"width\":2560,\"height\":1440},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/swapneshtilekar.com\\\/portfolio\\\/celestial-murmurs\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/swapneshtilekar.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Portfolio\",\"item\":\"https:\\\/\\\/swapneshtilekar.com\\\/portfolio\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Minera Group\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/swapneshtilekar.com\\\/#website\",\"url\":\"https:\\\/\\\/swapneshtilekar.com\\\/\",\"name\":\"Swapnesh Tilekar\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/swapneshtilekar.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Minera Group - Swapnesh Tilekar","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/swapneshtilekar.com\/de\/portfolio\/celestial-murmurs\/","og_locale":"de_DE","og_type":"article","og_title":"Minera Group - Swapnesh Tilekar","og_description":"In a vertically integrated steel and commodities manufacturing operation managing millions of tonnes of inventory, production schedules, and trading data across multiple facilities in India and beyond, the ability to visualize, filter, and interact with complex datasets in real time is mission-critical. Minera Group, handling raw materials (iron ore pellets, coal, bauxite), production metrics, and [&hellip;]","og_url":"https:\/\/swapneshtilekar.com\/de\/portfolio\/celestial-murmurs\/","og_site_name":"Swapnesh Tilekar","article_modified_time":"2026-04-30T16:28:21+00:00","og_image":[{"width":2560,"height":1440,"url":"https:\/\/swapneshtilekar.com\/wp-content\/uploads\/2025\/12\/Minera-Group-Featured.webp","type":"image\/webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"5\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/swapneshtilekar.com\/portfolio\/celestial-murmurs\/","url":"https:\/\/swapneshtilekar.com\/portfolio\/celestial-murmurs\/","name":"Minera Group - Swapnesh Tilekar","isPartOf":{"@id":"https:\/\/swapneshtilekar.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/swapneshtilekar.com\/portfolio\/celestial-murmurs\/#primaryimage"},"image":{"@id":"https:\/\/swapneshtilekar.com\/portfolio\/celestial-murmurs\/#primaryimage"},"thumbnailUrl":"https:\/\/swapneshtilekar.com\/wp-content\/uploads\/2025\/12\/Minera-Group-Featured.webp","datePublished":"2025-12-19T06:00:13+00:00","dateModified":"2026-04-30T16:28:21+00:00","breadcrumb":{"@id":"https:\/\/swapneshtilekar.com\/portfolio\/celestial-murmurs\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/swapneshtilekar.com\/portfolio\/celestial-murmurs\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/swapneshtilekar.com\/portfolio\/celestial-murmurs\/#primaryimage","url":"https:\/\/swapneshtilekar.com\/wp-content\/uploads\/2025\/12\/Minera-Group-Featured.webp","contentUrl":"https:\/\/swapneshtilekar.com\/wp-content\/uploads\/2025\/12\/Minera-Group-Featured.webp","width":2560,"height":1440},{"@type":"BreadcrumbList","@id":"https:\/\/swapneshtilekar.com\/portfolio\/celestial-murmurs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/swapneshtilekar.com\/"},{"@type":"ListItem","position":2,"name":"Portfolio","item":"https:\/\/swapneshtilekar.com\/portfolio\/"},{"@type":"ListItem","position":3,"name":"Minera Group"}]},{"@type":"WebSite","@id":"https:\/\/swapneshtilekar.com\/#website","url":"https:\/\/swapneshtilekar.com\/","name":"Swapnesh Tilekar","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/swapneshtilekar.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"}]}},"_links":{"self":[{"href":"https:\/\/swapneshtilekar.com\/de\/wp-json\/wp\/v2\/portfolio\/1309","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/swapneshtilekar.com\/de\/wp-json\/wp\/v2\/portfolio"}],"about":[{"href":"https:\/\/swapneshtilekar.com\/de\/wp-json\/wp\/v2\/types\/portfolio"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/swapneshtilekar.com\/de\/wp-json\/wp\/v2\/media\/4665"}],"wp:attachment":[{"href":"https:\/\/swapneshtilekar.com\/de\/wp-json\/wp\/v2\/media?parent=1309"}],"wp:term":[{"taxonomy":"portfolio_category","embeddable":true,"href":"https:\/\/swapneshtilekar.com\/de\/wp-json\/wp\/v2\/portfolio_category?post=1309"},{"taxonomy":"portfolio_tag","embeddable":true,"href":"https:\/\/swapneshtilekar.com\/de\/wp-json\/wp\/v2\/portfolio_tag?post=1309"},{"taxonomy":"portfolio_industry","embeddable":true,"href":"https:\/\/swapneshtilekar.com\/de\/wp-json\/wp\/v2\/portfolio_industry?post=1309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}