مبارح Claude وقف عليا في نص الشغل.

engmmmar6-bit — Mon, 24 Aug 2026 06:28:21 +0000

مبارح Claude وقف عليا في نص الشغل.
قعدت ساعة أفكر: "أكمل ولا ألعب؟"

قررت أكمل. بدون AI. CSS بإيدي. Debugging بدماغي.

النتيجة؟ خلصت 3 شاشات Dashboard في 4 ساعات.

الـ AI أداة مساعدة. مش بديل عن دماغك. 💯

تابعني عشان تشوف النتيجة النهائية 🚀
أول 100 = شهر مجاني 🎁

I'm a student developer who hates planning. So I built an AI that does it. You tell it your classes, deadlines, and goals. It builds the perfect schedule. Launching soon. First 100 followers get free access. Follow me if interested!

engmmmar6-bit — Sun, 23 Aug 2026 09:56:33 +0000

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

مبارح Claude وقف عليا في نص الشغل.

I'm a student developer who hates planning. So I built an AI that does it. You tell it your classes, deadlines, and goals. It builds the perfect schedule. Launching soon. First 100 followers get free access. Follow me if interested!

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