I Built a Real-Time Analytics Dashboard with Vanilla JS — Here's How

"I Built a Real-Time Analytics Dashboard with Vanilla JS — Here's How"
published: true
description: "A production-ready analytics dashboard built with vanilla JavaScript, Firebase, and zero frameworks. Full CRUD, real-time sync, Excel import/export, and Arabic RTL support."
tags: javascript, firebase, dashboard, webdev, beginners
cover_image: https://your-screenshot-link.png
I Built a Real-Time Analytics Dashboard with Vanilla JS — Here's How
TL;DR: I built a fully functional analytics dashboard using only HTML, CSS, and vanilla JavaScript — no React, no Vue, no build tools. It has real-time data sync, authentication, CRUD operations, charts, Excel import/export, and full Arabic RTL support. Live Demo | GitHub Repo
Who Am I?
I'm Omar, a developer from Egypt. I've been coding for a while now, and today I want to share something I'm genuinely proud of — a real-time analytics dashboard that I built from scratch.
This isn't just a UI mockup. It's a full-stack application with a Firebase backend, real-time data synchronization, user authentication, and a dark glassmorphism design.
What I Built
Vertex Analytics Dashboard is a multi-view analytics panel designed for small businesses, e-commerce stores, and freelancers who need to track their data without paying for expensive SaaS tools.
Features
جدول
Feature Description
Real-Time Sync Data changes appear instantly across all connected clients via Firebase Firestore
Authentication Secure email/password login & registration
Interactive Charts Line & bar charts powered by Chart.js
Excel Import/Export Bulk data import and one-click export
Glassmorphism UI Modern dark theme with neon accents
Arabic RTL Full right-to-left support
Responsive Works on desktop, tablet, and mobile
5 Dashboard Views
Overview — Summary cards + weekly performance chart
Sales — Full sales table with add/edit/delete
Products — Inventory management with stock alerts
Traffic — Visit analytics by source
Revenue — Revenue breakdown by product
The Tech Stack
I intentionally kept this framework-free. Here's why:
No build step — Just open index.html in a browser
No dependencies to install — Everything loads via CDN
Easy to understand — Anyone can read the code
Fast to deploy — Upload one file and you're done
plain
Frontend: HTML5 + CSS3 + Vanilla JavaScript
Backend: Firebase (Auth + Firestore)
Charts: Chart.js (CDN)
Excel: XLSX.js (CDN)
Design: Custom CSS with CSS variables
Key Code Snippets

1. Firebase Real-Time Listener This is the magic that makes everything sync in real time: JavaScript function initDashboard() { // Listen to sales collection in real-time getSalesRef().orderBy('createdAt', 'desc').onSnapshot(snap => { salesData = []; snap.forEach(doc => salesData.push({ id: doc.id, ...doc.data() })); updateDashboard(); }); } Any change in the database — add, edit, delete — instantly updates the UI. No refresh needed.
2. Per-User Data Isolation Each user only sees their own data: JavaScript function getSalesRef() { return db.collection('users').doc(currentUser.uid).collection('sales'); } This creates a structure like: plain users/{userId}/sales/{saleId} users/{userId}/products/{productId} users/{userId}/visits/{visitId}
3. Excel Import with Batch Operations JavaScript async function processImport(mode) { const workbook = pendingWorkbook;

// Option 1: Append to existing data
// Option 2: Replace all data

if (mode === 'replace') await clearCollection(getSalesRef());

const rows = XLSX.utils.sheet_to_json(workbook.Sheets['المبيعات'], { header: 1 });
for (let i = 1; i < rows.length; i++) {
const row = rows[i];
if (row[0]) {
await addSale({
product: String(row[0] || ''),
customer: String(row[1] || ''),
amount: parseFloat(row[2]) || 0,
date: String(row[3] || new Date().toISOString().split('T')[0])
});
}
}
}

1. The Spider Web Background (Canvas) I added an animated canvas background for that cyberpunk feel: JavaScript const NODES = 70, CONN_DIST = 160; let nodes = [];

function draw() {
ctx.clearRect(0, 0, W, H);
for (let i = 0; i < nodes.length; i++) {
for (let j = i + 1; j < nodes.length; j++) {
const d = dist(nodes[i], nodes[j]);
if (d < CONN_DIST) {
const alpha = (1 - d / CONN_DIST) * 0.25;
ctx.strokeStyle = rgba(124,58,237,${alpha});
ctx.beginPath();
ctx.moveTo(nodes[i].x, nodes[i].y);
ctx.lineTo(nodes[j].x, nodes[j].y);
ctx.stroke();
}
}
}
requestAnimationFrame(draw);
}
Challenges I Faced

1. RTL Layout Building a right-to-left dashboard in Arabic meant reversing everything — sidebar on the right, text alignment, flex directions. CSS logical properties helped, but I ended up using a lot of custom adjustments.
2. Single-File Architecture Keeping everything in one index.html file (HTML + CSS + JS) was challenging for organization. I used clear section comments and kept CSS variables at the top for easy theming.
3. Firebase Security Rules Since this is a client-side app, I had to carefully set up Firestore security rules to ensure users can only access their own data: plain rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /users/{userId}/{document=**} { allow read, write: if request.auth != null && request.auth.uid == userId; } } } What I Learned Vanilla JS is powerful — You don't always need a framework Firebase makes backend easy — Auth and database in minutes Design matters — A good UI makes simple features look professional Single-file deployment is underrated — No build step = no headaches What's Next? [ ] Add dark/light mode toggle [ ] Add PDF report generation [ ] Add more chart types (pie, doughnut) [ ] Build a React version for comparison [ ] Add Stripe integration for payments tracking Try It Yourself Live Demo: https://engmmmar6-bit.github.io/Vertex-Dashboard/ GitHub Repo: https://github.com/engmmmar6-bit/Vertex-Dashboard Star the repo if you found it useful! Connect With Me I'm learning and building in public. If you have feedback, suggestions, or just want to say hi — drop a comment below! Built with by Omar This is my first "build in public" project. If you're a beginner, just start building. You don't need to know everything — you just need to start.