DEV Community: Ram Kumar Dhimal

Building a Sales Summary Chart for E-Commerce Admin Dashboards: A Conceptual Blueprint

Ram Kumar Dhimal — Fri, 18 Jul 2025 00:56:59 +0000

In any e-commerce platform, the admin dashboard is the nerve center that provides critical insights to business owners and managers. One of the most impactful visualizations is a sales summary chart that tracks revenue, orders, or units sold over time.

Before jumping into code, it’s essential to think through how this chart should work, what data it needs, and how to make it flexible and scalable. This post lays out a comprehensive blueprint and design concept for building a sales summary line chart tailored for e-commerce admin dashboards.

Core Goal

Enable admins to easily view a summary of sales data over a user-selected date range, visualized in a line chart. The chart must adjust dynamically to the selected time window, showing data aggregated appropriately for clarity and usability.

Designing Time Range & Aggregation Rules

One of the biggest challenges is how to aggregate sales data depending on the length of the selected date range. Show too much detail for long ranges, and the chart becomes cluttered; show too little detail for short ranges, and the insights lose value.

Here’s a practical aggregation scheme that balances detail and clarity:

Date Range	Aggregation	Chart X-Axis Label Examples
Up to 1 week	Day	Jul 1, Jul 2, ..., Jul 7
Up to 1 month (30–31 days)	Day	Jul 1, Jul 2, ..., Jul 31
More than 1 month and up to 6 months	Week	Jul 1–Jul 7, Jul 8–Jul 14, etc.
More than 6 months and up to 1 year	Month	Jul, Aug, Sep, ...
More than 1 year	Disallowed	(UI prevents selection)

This design ensures the chart remains readable and responsive without overwhelming the user or the system.

Handling Custom Date Ranges

When the admin selects a custom date range, the system should:

Calculate the number of days between the selected start and end dates.
Apply the aggregation rule based on that length (day, week, or month).
Fetch the aggregated data accordingly from the backend.
Render the chart with proper formatting on the X-axis and tooltips that respect the aggregation.

To prevent performance and usability issues, limit the custom date range selection to 1 year or less by disabling invalid date selections in the UI.

Fetching and Aggregating Data Efficiently

A key technical piece is how the backend fetches and aggregates order data:

1. Build a Flexible Aggregation API Endpoint

Design a backend function or API endpoint that:

Accepts startDate, endDate, and granularity parameters (day, week, or month).
Returns data aggregated at the specified granularity in a normalized format for the frontend.

Example API request:

GET /api/admin/sales-summary?from=2025-04-01&to=2025-07-01&granularity=week

Example response:

[
  { "date": "2025-04-01", "revenue": 5400, "orders": 21 },
  { "date": "2025-04-08", "revenue": 6300, "orders": 27 }
]

2. Optimize Queries by Aggregation

For SQL databases, use GROUP BY with date functions:
- GROUP BY DATE(createdAt)
- GROUP BY WEEK(createdAt)
- GROUP BY MONTH(createdAt)
For NoSQL (e.g., MongoDB), use aggregation pipelines with $group and $dateToString.

3. Validate Input

Make sure the backend (and frontend) validate the date range to enforce the 1-year limit.

State Management Strategy

Use a state management tool like Redux or React’s Context API to store:

The selected date range
The current aggregation granularity
The sales data ready for charting
Loading states to show spinners during fetches

Example state shape:

{
  salesData: [],
  dateRange: { start: '2025-04-01', end: '2025-07-01' },
  granularity: 'week',
  isLoading: false
}

Chart Rendering with Recharts

Use a React charting library like Recharts for the visualization:

X-Axis: show dates formatted based on aggregation (daily dates, weekly ranges, or month names).
Y-Axis: sales metric(s) like revenue or order count.
Tooltip: show detailed info, such as full date ranges for weeks.
Legend: label your data lines clearly ("Revenue", "Orders", etc.).

Example snippet:

<LineChart data={salesData}>
  <XAxis dataKey="date" />
  <YAxis />
  <Tooltip />
  <Legend />
  <Line dataKey="revenue" stroke="#8884d8" name="Revenue" />
  <Line dataKey="orders" stroke="#82ca9d" name="Orders" />
</LineChart>

Future Enhancements

To make the sales chart even more powerful and user-friendly, we can consider adding:

Metric Selector: toggle between revenue, orders, units sold, or other KPIs.
Compare Mode: let admins compare current vs previous periods (e.g., this month vs last month).
Export Options: allow chart export as image or CSV for offline analysis.
Granularity Override: advanced users can manually select day/week/month grouping.
Product or Category Filters: drill down into specific segments of your catalog.

Conclusion

Before starting development, this concept gives us a clear roadmap to build a flexible, scalable, and user-friendly sales summary chart for the admin dashboard. It’s a foundational feature that enhances decision-making and highlights the store’s performance at a glance.

Thinking through these details now will save the headaches later — and set us up for faster development and better user experience.

How to Generate PDF Invoices in a Node.js Backend Using `@react-pdf/renderer`

Ram Kumar Dhimal — Tue, 10 Jun 2025 04:16:32 +0000

Generating PDF invoices on the backend is a common need for many web applications. In this guide, we’ll build a simple way to create PDF invoices using React components with @react-pdf/renderer — but in a Node.js backend environment.

Even if you’re a beginner, this step-by-step explanation will help you understand how to create, render, and send PDFs from your backend server.

Why Use React for PDF Generation?

You might be wondering:

Why would I use React — a frontend UI library — in a Node.js backend?

Good question! Here’s the simple answer:

@react-pdf/renderer lets you build PDFs using React components — just like building a UI.
This means you describe your invoice as reusable React components with JSX syntax.
React helps structure your PDF content clearly and makes it easy to maintain and update.
Because @react-pdf/renderer uses React components internally, you need to have react and react-dom installed for it to work correctly.

Why Do We Need `react` and `react-dom` in Backend?

Even though you’re not building a frontend app, @react-pdf/renderer uses React’s core features to interpret your components and JSX.
react is the core library that understands React components.
react-dom is often used for DOM-related rendering, and some internal parts of @react-pdf/renderer depend on it, so it must be installed as well.
You won’t be using react-dom to render HTML or web pages here — it’s just a required dependency for @react-pdf/renderer.

Step 1: Set Up Your Project and Install Packages

Create a new Node.js project if you don’t have one yet:

mkdir invoice-generator
cd invoice-generator
npm init -y

Install Express (to create the backend API), @react-pdf/renderer for PDF generation, and React dependencies:

npm install express @react-pdf/renderer react react-dom

Step 2: Create a React PDF Invoice Template

Create a file named Invoice.js for your invoice React component.

// Invoice.js
import React from "react";
import { Document, Page, Text, View, StyleSheet } from "@react-pdf/renderer";

const styles = StyleSheet.create({
  page: { padding: 30 },
  section: { marginBottom: 10 },
});

const Invoice = ({ order }) => (
  <Document>
    <Page style={styles.page}>
      <View style={styles.section}>
        <Text>Invoice for Order: {order._id}</Text>
        {order.products.map((p, i) => (
          <Text key={i}>
            {p.name} — Qty: {p.quantity} — ${p.amount_total}
          </Text>
        ))}
      </View>
    </Page>
  </Document>
);

export default Invoice;

Here, we define a simple invoice that lists the order ID and products with quantities and amounts.

Step 3: Generate PDF in Backend and Send it as Response

In your backend code, you will:

Fetch the order data (from your database).
Render the React PDF component to a PDF stream.
Pipe the PDF stream to the HTTP response so the client receives the PDF file.

Example Express route:

import express from "express";
import ReactPDF from "@react-pdf/renderer";
import Invoice from "./Invoice.js"; // The React component you just created
import { getOrderById } from "./models/orderModel.js"; // Your DB function

const app = express();

app.get("/invoice/:id", async (req, res) => {
  try {
    const id = req.params.id;
    const order = await getOrderById(id);

    if (!order) {
      return res.status(404).send("Order not found");
    }

    // Set headers for PDF response
    res.setHeader("Content-Type", "application/pdf");
    res.setHeader("Content-Disposition", `inline; filename=invoice_${id}.pdf`);

    // Render PDF and pipe to response
    const stream = ReactPDF.renderToStream(<Invoice order={order} />);
    stream.pipe(res);
  } catch (error) {
    console.error(error);
    res.status(500).send("Internal Server Error");
  }
});

app.listen(3000, () => console.log("Server started on port 3000"));

What Does `stream.pipe(res)` Do?

The ReactPDF.renderToStream() method generates a stream of PDF data.
Calling stream.pipe(res) sends that PDF data directly to the HTTP response.
This way, the client’s browser receives the PDF immediately and can display or download it.

Summary

@react-pdf/renderer lets you write PDFs using React components.
You need react and react-dom installed because @react-pdf/renderer depends on React’s internals, even in backend.
Use Express (or any Node.js server) to create an API endpoint that fetches order data, generates a PDF, and streams it back.
The user can access a URL like /invoice/:id to get their invoice as a PDF in the browser.

Some of the things we can do as well:

We can customize the Invoice component to add logos, styles, totals, and more.
Test with Postman or your browser by visiting http://localhost:3000/invoice/12345 (replace 12345 with a valid order ID).
Look at @react-pdf/renderer docs for more components and styling options.

Building the Order Page After Stripe Payment: Client-Side Implementation

Ram Kumar Dhimal — Fri, 30 May 2025 04:27:54 +0000

Stripe payment is done, the transaction succeeded — but the user journey isn’t complete until customers can see, track, and manage their orders. Here’s how I built the Order Page frontend, assuming the payment flow is handled already, to deliver a smooth, secure, and scalable post-payment experience.

Core Challenges Solved

Securely fetch and display only the logged-in user’s orders
Present detailed order info with product images, quantities, prices
Enable user actions like cancelling pending orders
Keep UI performant and user-friendly, even with lots of orders
Handle authentication and edge cases seamlessly

Fetch Orders Securely with JWT

Order data is private, so every request must include the user’s JWT token for backend validation.

const fetchOrders = async () => {
  try {
    const response = await fetch("/api/orders", {
      headers: {
        Authorization: `Bearer ${localStorage.getItem("token")}`,
      },
    });
    if (!response.ok) throw new Error("Failed to fetch orders");
    const { orders } = await response.json();
    setOrders(orders);
  } catch (error) {
    console.error(error);
    setError("Unable to load orders. Please try again later.");
  }
};

This approach ensures users only see their own data and protects sensitive info.

Clean, Scannable UI with Accordion

To avoid overwhelming users, I used an Accordion UI pattern, letting users expand only the orders they want to explore.

Each order summary includes:

Order ID (shortened for readability and easy reference)
Order date and current status with intuitive color-coded badges
Total amount paid

Inside the expanded panel, users see:

List of products with images, names, quantities, and unit prices
Order total
Action buttons like Cancel Order (for pending orders)

Example React snippet:

<Accordion>
  {orders.map((order, idx) => (
    <Accordion.Item eventKey={idx.toString()} key={order._id}>
      <Accordion.Header>
        <span>Order #{order._id.slice(-6)}</span>
        <Badge variant={statusColor(order.status)}>{order.status}</Badge>
      </Accordion.Header>
      <Accordion.Body>
        {order.products.map(product => (
          <div key={product.id} className="product-row">
            <img src={product.productImages[0]} alt={product.name} />
            <div>{product.name}</div>
            <div>Qty: {product.quantity}</div>
            <div>${(product.amount_total / 100).toFixed(2)}</div>
          </div>
        ))}
        <div><strong>Total:</strong> ${(order.totalAmount / 100).toFixed(2)}</div>
        {order.status === "pending" && (
          <button onClick={() => cancelOrder(order._id)}>Cancel Order</button>
        )}
      </Accordion.Body>
    </Accordion.Item>
  ))}
</Accordion>

Handling User Actions — Cancel Order

Users can cancel orders that are still pending. The cancel button calls a secure backend endpoint:

const cancelOrder = async (orderId) => {
  try {
    const response = await fetch(`/api/orders/${orderId}/status`, {
      method: "PUT",
      headers: {
        Authorization: `Bearer ${localStorage.getItem("token")}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ status: "cancelled" }),
    });
    if (!response.ok) throw new Error("Cancel failed");
    fetchOrders(); // Refresh orders list after update
  } catch (error) {
    alert("Unable to cancel order. Please try again.");
  }
};

This soft-cancel approach maintains an audit trail while giving users control.

Edge Cases & UX Enhancements

Loading and empty states: Show spinners during data fetch and friendly messages when no orders exist
Pagination or infinite scroll: For users with many orders, load in pages for performance
Error handling: Clear user feedback for network or auth issues
Optimistic UI: Update UI instantly on cancel, roll back if API call fails
Mobile-friendly: Responsive layout with touch-friendly buttons

Final Thoughts

The order page is the final touchpoint that reassures users their purchase was successful and managed properly. By combining secure data fetching, intuitive UI, and smooth user actions, you build trust and improve customer satisfaction.

How to Use Multer with React.js and Node.js for File Uploads

Ram Kumar Dhimal — Tue, 06 May 2025 14:00:36 +0000

Handling file uploads is a common feature in modern web applications. Whether you're building a profile system, a document portal, or an image gallery, you'll likely need to upload files to a server. In this blog, you’ll learn how to use Multer (a popular Node.js middleware) to handle file uploads from a React.js frontend.

Let’s build a simple file upload app with React.js on the frontend and Node.js/Express on the backend using Multer.

Tools & Technologies Used

React.js (Frontend)
Node.js + Express (Backend)
Multer (Middleware for file uploads)
Axios (For HTTP requests)
Render or Vercel (for deployment, optional)

What is Multer?

Multer is a middleware for handling multipart/form-data, which is used to upload files. It makes handling file uploads in Express simple and customizable.

Project Structure

file-upload-app/
├── backend/
│   ├── uploads/
│   ├── index.js
│   └── package.json
└── frontend/
    ├── src/
    │   ├── App.js
    │   └── ...
    └── package.json

Backend Setup (Node.js + Express + Multer)

1. Initialize Backend

mkdir backend
cd backend
npm init -y
npm install express multer cors

2. Create `index.js`

const express = require('express');
const cors = require('cors');
const multer = require('multer');
const path = require('path');

const app = express();
app.use(cors());
app.use('/uploads', express.static('uploads'));

// Storage setup
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/')
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + path.extname(file.originalname));
  }
});

const upload = multer({ storage: storage });

// Route to handle file upload
app.post('/upload', upload.single('file'), (req, res) => {
  res.json({ filePath: `/uploads/${req.file.filename}` });
});

app.listen(5000, () => {
  console.log('Server is running on http://localhost:5000');
});

Frontend Setup (React.js + Axios)

1. Initialize Frontend

npx create-react-app frontend
cd frontend
npm install axios

2. Update `App.js`

import React, { useState } from 'react';
import axios from 'axios';

function App() {
  const [file, setFile] = useState(null);
  const [preview, setPreview] = useState("");

  const handleFileChange = (e) => {
    setFile(e.target.files[0]);
    setPreview(URL.createObjectURL(e.target.files[0]));
  };

  const handleUpload = async () => {
    const formData = new FormData();
    formData.append("file", file);

    try {
      const res = await axios.post("http://localhost:5000/upload", formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      });
      alert("File uploaded successfully: " + res.data.filePath);
    } catch (err) {
      console.error(err);
      alert("Upload failed.");
    }
  };

  return (
    <div style={{ padding: 20 }}>
      <h2>Upload a File</h2>
      <input type="file" onChange={handleFileChange} />
      {preview && <img src={preview} alt="preview" width="200" />}
      <br />
      <button onClick={handleUpload}>Upload</button>
    </div>
  );
}

export default App;

Run Your App

1. Start Backend

cd backend
node index.js

2. Start Frontend

cd frontend
npm start

Final Thoughts

You now have a working file upload system using React and Node.js with Multer. This simple setup can be extended to support:

Multiple file uploads
File validation (e.g., only images or PDFs)
Cloud storage (e.g., AWS S3, Cloudinary)
Authentication and user-specific folders

How You Can Build a Dynamic Star Rating Component in React.js (Full, Half, and Empty Stars Included)

Ram Kumar Dhimal — Mon, 28 Apr 2025 00:15:17 +0000

When it comes to modern web applications, a star rating component is almost a must.

Whether you’re working on a product page, a movie app, or a review system — users expect to see clear, beautiful ratings.

Today, I'm walking you through how you can build a powerful and flexible Star Rating component in React.js — one that handles full, half, and empty stars perfectly.

And don’t worry — it’s easier than you think. Let’s jump in!

What We're Going to Build

We'll create a React component that:

Renders full, half, and empty stars dynamically.
Always maintains a constant total number of stars (default: 5).
Looks clean and polished using react-icons.
Is reusable and customizable for different projects.

Step 1: Install the Required Package

First, we’ll need some star icons.

Let’s grab them using react-icons:

npm install react-icons

Step 2: Understand the Star Logic

Before we jump into the code, here’s the simple plan:

Term	Logic
Total Stars	A constant, usually 5.
Full Stars	`Math.floor(rating)`
Half Star	If rating is not an integer, add 1 half star.
Empty Stars	Remaining stars to complete 5.

Important rule:

There can only ever be at most one half star — no two half stars, no weird decimals!

Step 3: Code the Star Rating Component

Here’s the full working code:

// StarRating.jsx
import { FaStar, FaStarHalfAlt, FaRegStar } from "react-icons/fa";

const StarRating = ({ rating }) => {
  const totalStars = 5;

  // Full Stars
  const fullStars = Math.floor(rating);

  // Half Star
  const halfStars = Number.isInteger(rating) ? 0 : 1;

  // Empty Stars
  const emptyStars = totalStars - (fullStars + halfStars);

  // Build the stars array
  const starsArray = [];

  // Full stars
  for (let i = 0; i < fullStars; i++) {
    starsArray.push(<FaStar key={`full-${i}`} color="gold" />);
  }

  // Half star
  if (halfStars) {
    starsArray.push(<FaStarHalfAlt key="half" color="gold" />);
  }

  // Empty stars
  for (let i = 0; i < emptyStars; i++) {
    starsArray.push(<FaRegStar key={`empty-${i}`} color="gray" />);
  }

  return (
    <div style={{ display: "flex", gap: "4px", alignItems: "center" }}>
      {starsArray}
    </div>
  );
};

export default StarRating;

Step 4: How to Use It

Super simple! Just import it and pass a rating prop:

import StarRating from './StarRating';

function App() {
  return (
    <div>
      <h1>Ratings:</h1>
      <StarRating rating={4.3} />
      <StarRating rating={3} />
      <StarRating rating={2.7} />
    </div>
  );
}

export default App;

Here’s how it looks:

Rating	Visual Result
4.3	⭐⭐⭐⭐🌓
3.0	⭐⭐⭐⬜⬜
2.7	⭐⭐🌓⬜⬜

Smooth, clean, dynamic.

Dynamic Star Colors

Want ratings to feel even more alive?

Let’s color stars differently based on the rating:

// Helper function
const getStarColor = (rating) => {
  if (rating >= 4) return "green";     // High rating
  if (rating >= 2) return "orange";    // Medium rating
  return "red";                        // Low rating
};

And inside the stars loop, use it like:

starsArray.push(<FaStar key={`full-${i}`} color={getStarColor(rating)} />);

This way users can feel the rating just by glancing at the colors!

Best Practices to Follow

Validate your ratings to stay between 0 and 5.
Add accessibility labels for better UX (e.g., aria-label="Rating 4.5").
Make it dynamic — pass total number of stars as a prop if needed.
Handle edge cases like 0, 5, 4.9, 1.1 properly.

Building a reusable Star Rating Component in React.js doesn’t have to be complicated.

With this setup, you can easily plug beautiful ratings into any project — and even customize them more if you want.

Start simple, and expand — that's the React way! ✨

If you found this helpful, drop a ❤️ and let’s build more cool stuff together!

Happy coding! 🚀

Getting Started with Slugs in React: My Experience

Ram Kumar Dhimal — Tue, 22 Apr 2025 20:45:08 +0000

Hey everyone! I recently started working with React and wanted to share how I implemented slugs in my project. It was easier than I expected and made a big difference in my app's URLs.

What is a slug?

A slug is just the part of a URL that identifies a page in human-readable keywords. For example, in mysite.com/blog/learning-react, the slug is learning-react.

Why I needed slugs

I was building a small portfolio site with a blog section. At first, my URLs looked like this:

mysite.com/posts/1
mysite.com/posts/2

These numbers didn't tell users or search engines anything about the content. I wanted something more descriptive.

How I implemented slugs

1. Installing slugify

I used the slugify package:

npm install slugify

2. Creating the slugs

Here's the simple code I used:

import slugify from 'slugify';

// When creating a new post
function createPost(title, content) {
  const slug = slugify(title, { lower: true });

  // Save post with the slug
  savePost({
    title,
    content,
    slug
  });

  return slug;
}

3. Setting up routes

I used React Router to handle the slug-based URLs:

import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/posts/:slug" element={<BlogPost />} />
    </Routes>
  );
}

4. Displaying posts

In my BlogPost component:

import { useParams } from 'react-router-dom';

function BlogPost() {
  const { slug } = useParams();
  const [post, setPost] = useState(null);

  useEffect(() => {
    // Find post by slug
    const foundPost = posts.find(p => p.slug === slug);
    setPost(foundPost);
  }, [slug]);

  if (!post) return <p>Post not found</p>;

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

Problems I ran into

The only issue I had was duplicate slugs. If two posts had the same title, they'd get the same slug. I fixed this by adding a simple counter:

function createUniqueSlug(title, existingSlugs) {
  let slug = slugify(title, { lower: true });
  let counter = 1;

  while(existingSlugs.includes(slug)) {
    slug = `${slugify(title, { lower: true })}-${counter}`;
    counter++;
  }

  return slug;
}

What I learned

Using slugs was a simple change that made my React app more professional. The URLs are now readable and SEO-friendly. The slugify package handled all the complicated stuff like removing special characters and spaces.

If you're new to React like me, I'd definitely recommend implementing slugs in your projects - it's a small touch that makes a big difference!

DEV Community: Ram Kumar Dhimal

Building a Sales Summary Chart for E-Commerce Admin Dashboards: A Conceptual Blueprint

Core Goal

Designing Time Range & Aggregation Rules

Handling Custom Date Ranges

Fetching and Aggregating Data Efficiently

1. Build a Flexible Aggregation API Endpoint

2. Optimize Queries by Aggregation

3. Validate Input

State Management Strategy

Chart Rendering with Recharts

Future Enhancements

Conclusion

How to Generate PDF Invoices in a Node.js Backend Using `@react-pdf/renderer`

Why Use React for PDF Generation?

Why Do We Need react and react-dom in Backend?

Step 1: Set Up Your Project and Install Packages

Step 2: Create a React PDF Invoice Template

Step 3: Generate PDF in Backend and Send it as Response

What Does stream.pipe(res) Do?

Summary

Some of the things we can do as well:

Building the Order Page After Stripe Payment: Client-Side Implementation

Core Challenges Solved

Fetch Orders Securely with JWT

Clean, Scannable UI with Accordion

Handling User Actions — Cancel Order

Edge Cases & UX Enhancements

Final Thoughts

How to Use Multer with React.js and Node.js for File Uploads

Tools & Technologies Used

What is Multer?

Project Structure

Backend Setup (Node.js + Express + Multer)

1. Initialize Backend

2. Create index.js

Frontend Setup (React.js + Axios)

1. Initialize Frontend

2. Update App.js

Run Your App

1. Start Backend

2. Start Frontend

Final Thoughts

How You Can Build a Dynamic Star Rating Component in React.js (Full, Half, and Empty Stars Included)

What We're Going to Build

Step 1: Install the Required Package

Step 2: Understand the Star Logic

Step 3: Code the Star Rating Component

Step 4: How to Use It

Dynamic Star Colors

Best Practices to Follow

Getting Started with Slugs in React: My Experience

What is a slug?

Why I needed slugs

How I implemented slugs

1. Installing slugify

2. Creating the slugs

3. Setting up routes

4. Displaying posts

Problems I ran into

What I learned

Why Do We Need `react` and `react-dom` in Backend?

What Does `stream.pipe(res)` Do?

2. Create `index.js`

2. Update `App.js`