<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Pranay Kumar Singh</title>
    <description>The latest articles on DEV Community by Pranay Kumar Singh (@pranaykumarsingh777).</description>
    <link>https://dev.to/pranaykumarsingh777</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4026676%2F78f30e51-ba97-40d4-a414-96bdf7e8ca34.jpg</url>
      <title>DEV Community: Pranay Kumar Singh</title>
      <link>https://dev.to/pranaykumarsingh777</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/pranaykumarsingh777"/>
    <language>en</language>
    <item>
      <title>Building a Multi Page Responsive Metrics Dashboard for E Commerce</title>
      <dc:creator>Pranay Kumar Singh</dc:creator>
      <pubDate>Mon, 13 Jul 2026 09:07:53 +0000</pubDate>
      <link>https://dev.to/pranaykumarsingh777/building-a-multi-page-responsive-metrics-dashboard-for-e-commerce-528f</link>
      <guid>https://dev.to/pranaykumarsingh777/building-a-multi-page-responsive-metrics-dashboard-for-e-commerce-528f</guid>
      <description>&lt;p&gt;Hey dev community! 👋&lt;/p&gt;

&lt;p&gt;As a Bachelor computer student I’ve always believed that the best way to learn development is by actually building things that solve real world problems. Recently I wanted to understand how e commerce platforms manage their analytics, so I built a multi-page metrics dashboard project called GlobalPrime. &lt;/p&gt;

&lt;p&gt;It includes a product catalog, profit trackers, and dynamic calculators. In this post, I wanted to share the core structure and how I approached the frontend logic.&lt;/p&gt;

&lt;p&gt;Architecture&lt;/p&gt;

&lt;p&gt;For a dashboard to be clean and scannable, the layout needs to be highly organized. I divided the project into three main views:&lt;br&gt;
1.&lt;code&gt;index.html&lt;/code&gt;: The main landing page showcasing the product discovery flow.&lt;br&gt;
2.&lt;code&gt;dashboard.html&lt;/code&gt;: The core analytics engine featuring profit metrics and operational trackers.&lt;br&gt;
3.&lt;code&gt;products.html&lt;/code&gt;: The dynamic product catalog management view.&lt;/p&gt;

&lt;p&gt;The Turning Point &lt;/p&gt;

&lt;p&gt;Honestly, when I first started my engineering journey at Parul University, I was a bit overwhelmed by the massive campus strength. Like any tier 3 private university, you often hear people saying you have to figure everything out on your own. &lt;/p&gt;

&lt;p&gt;But things changed when I actively pushed myself into the core tech community here. I teamed up with a few like minded developers from my batch, and we started doing peer-programming sessions in the hostel. &lt;/p&gt;

&lt;p&gt;We actually conceptualized and refined this dashboard logic during an internal hackathon sprint organized on campus. The faculty supported us with lab access, but the real game-changer was the peer group. Having competitive peers around pushes you to write cleaner code and learn frameworks faster than any standard classroom lecture ever could.&lt;br&gt;
Here is a snippet of how I structured the layout for the core metrics cards&lt;/p&gt;

&lt;p&gt;-html&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;h3&amp;gt;Total Revenue&amp;lt;/h3&amp;gt;
&amp;lt;p&amp;gt;$12,450&amp;lt;/p&amp;gt;
&amp;lt;span&amp;gt;+18% this week&amp;lt;/span&amp;gt;


&amp;lt;h3&amp;gt;Net Profit Margin&amp;lt;/h3&amp;gt;
&amp;lt;p&amp;gt;24.5%&amp;lt;/p&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

</description>
      <category>analytics</category>
      <category>frontend</category>
      <category>showdev</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
