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

engmmmar6-bit — Fri, 31 Jul 2026 20:33:33 +0000

"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

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.
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}
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());

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

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.
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.
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.

DEV Community: engmmmar6-bit

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