DEV Community

Cover image for Building a Fullstack E-Commerce Platform with Node.js, React, and Grafana Observability
senthilkumar sugumar
senthilkumar sugumar

Posted on

Building a Fullstack E-Commerce Platform with Node.js, React, and Grafana Observability

In this post, I’ll walk you through the design and implementation of a full-fledged e-commerce platform built using Node.js microservices and a ReactJS frontend, complete with distributed tracing and observability via Grafana Tempo.

🛠️ Tech Stack

Backend (Microservices)

  • Node.js + Express for individual microservices
  • MongoDB for persistent storage
  • Redis for session and cart caching
  • Kafka for inter-service communication
  • OpenTelemetry for distributed tracing

Frontend

  • ReactJS
  • Redux Toolkit + RTK Query for state management and API calls

Observability

  • OpenTelemetry SDK for instrumentation
  • Grafana Tempo for tracing
  • Grafana Dashboard for visualization

🧩 Microservices Architecture

We follow a modular architecture using Docker Compose:

1. Auth Service

  • Handles user signup, signin, and signout
  • JWT-based authentication
  • Redis for refresh token/session store

2. User Service

  • Stores and updates user profiles
  • Triggered by Kafka event user.registered

3. Product Service

  • Manages product catalog with image uploads
  • Stores metadata in MongoDB, images in AWS S3
  • Emits events like product.created

4. Cart Service

  • Stores temporary carts in Redis
  • Emits cart.checkedout event

5. Order Service

  • Consumes cart.checkedout, processes orders
  • Persists in MongoDB

6. Frontend

  • Built with React
  • Login/Register, product listing, cart view, order history
  • Uses Redux slices and RTK Query

🔎 Observability with Grafana Tempo

To make our system observable, we integrated OpenTelemetry into each Node.js service.

Instrumentation Includes:

  • @opentelemetry/sdk-node
  • @opentelemetry/instrumentation-express
  • @opentelemetry/exporter-otlp-http

Export Path 

Service → OTEL SDK → OTEL Collector → Tempo → Grafana
Enter fullscreen mode Exit fullscreen mode

Grafana Dashboard

  • View traces by service, span duration, and errors
  • Filter by endpoint or user action

Docker Compose

We use two Compose files:

  • kafka-docker-compose.yml: for app services
  • docker-compose.yml: for Grafana, Tempo, OTEL Collector

To run everything together:

docker-compose -f kafka-docker-compose.yml -f docker-compose.yml up --build
Enter fullscreen mode Exit fullscreen mode

⚙️ Development Flow

  1. Build and start the backend microservices
  2. Start the frontend React app
  3. Add OTEL instrumentation to each backend
  4. Verify trace data in Grafana after making API requests

🧵 Repository

https://github.com/senthilkumar3282/base-setup-nodejs-microservices-reactjs

✅ Conclusion

This project demonstrates how to build a modular and scalable e-commerce app using Node.js and React, while maintaining full observability using OpenTelemetry and Grafana Tempo.

Top comments (0)