🎯 Kya hoga isse?
- Customer ek mobile se review dale → dusre mobile / laptop pe turant dikhega (Firebase Firestore sync)
- Owner admin panel se hero, price, bundle, promo bar change kare → sab customers ke devices pe turant update
- Customer footer me email subscribe kare → turant Admin Panel → 👥 Subscribers me dikhega (Complete Data + CSV Export)
Bina Firebase ke bhi site chalegi (localStorage fallback), lekin sync ke liye Firebase zaroori hai.
1️⃣ Step 1 — Firebase Project Banao
A) firebase.google.com pe jao
- console.firebase.google.com → Add project
- Project name: Trent Wood (ya
trent-wood-pk)
- Google Analytics: Disable kar sakte ho (optional) → Create project
- Project ready hote hi Continue → Dashboard khulega
💡 Gmail: a69975874@gmail.com se hi banao taake owner access rahe.
2️⃣ Step 2 — Web App Add Karo & Config Copy Karo
- Dashboard pe Web icon </> (Add app) → App nickname: Trent Wood Web → Register app
- Firebase SDK config dikhega — aisa hoga:
const firebaseConfig = {
apiKey: "AIzaSy....",
authDomain: "trent-wood-pk.firebaseapp.com",
projectId: "trent-wood-pk",
storageBucket: "trent-wood-pk.appspot.com",
messagingSenderId: "123456789",
appId: "1:123456789:web:abc..."
};
- Copy karo → apne computer pe trent-wood/assets/js/firebase-config.js kholo →
YOUR_API_KEY wali lines ko apne real config se replace karo → Save → Upload.
⚠️ Important: firebase-config.js me YOUR_API_KEY ko real key se replace karna zaroori hai, warna sync nahi chalega (fallback localStorage chalega).
// Example filled firebase-config.js
const firebaseConfig = {
apiKey: "AIzaSyBxExample_Real_Key",
authDomain: "trent-wood-pk.firebaseapp.com",
projectId: "trent-wood-pk",
storageBucket: "trent-wood-pk.appspot.com",
messagingSenderId: "987654321",
appId: "1:987654321:web:xyz123"
};
const ADMIN_EMAIL = "a69975874@gmail.com";
3️⃣ Step 3 — Firestore Database Enable Karo
- Firebase Console → Left menu Build → Firestore Database → Create database
- Location: asia-south1 (Mumbai) ya asia-southeast1 (Pakistan ke qareeb) → Next
- Rules: Start in test mode select karo (baad me hum secure rules dalenge) → Create
- Database ban gaya — ab collections:
reviews, subscribers, siteConfig auto banenge jab pehla data jayega.
4️⃣ Step 4 — Authentication Enable Karo (Admin ke liye)
- Left menu Build → Authentication → Get started
- Sign-in method → Email/Password → Enable → Save
- Users tab → Add user → Email: a69975874@gmail.com → Password: 03212863019 (ya jo admin password hai) → Add user
🔑 Kyun zaroori? Admin panel Firestore me write karne ke liye request.auth.token.email == "a69975874@gmail.com" check karta hai. Sirf ye user hi hero/products/subscribers delete kar sakta hai. Customers bina login ke review/subscribe kar sakte hain.
5️⃣ Step 5 — Firestore Rules Lagao (Sabse Important)
A) Rules kahan milengi?
Firestore Database → Rules tab → wahan code dikhega. Neeche wala code copy-paste karo.
B) Ye rules paste karo → Publish
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
function isAdmin() {
return request.auth != null && request.auth.token.email.lower() == "a69975874@gmail.com";
}
// Site config — sab dekh sakte hain, sirf admin change kar sakta hai
match /siteConfig/{docId} {
allow read: if true;
allow write: if isAdmin();
}
// Reviews — sab read & create, sirf admin delete
match /reviews/{reviewId} {
allow read: if true;
allow create: if request.resource.data.keys().hasAll(['productId','name','city','rating','text','date'])
&& request.resource.data.rating >= 1 && request.resource.data.rating <= 5
&& request.resource.data.text.size() >= 10;
allow update, delete: if isAdmin();
}
// Subscribers — sab create, admin hi read/delete (testing ke liye read: if true rakha)
match /subscribers/{subId} {
allow read: if true; // testing ke baad isAdmin() kar dena
allow create: if request.resource.data.keys().hasAll(['email','date','page'])
&& request.resource.data.email.matches(".*@.*");
allow update, delete: if isAdmin();
}
}
}
C) Rules ka matlab (simple):
allow read: if true → koi bhi dekh sakta hai (site pe products/reviews dikhenge)allow create: if ... → customer bina login ke review/subscribe kar sakta hai, lekin validation hai (email me @, rating 1-5, text 10 chars)isAdmin() → sirf a69975874@gmail.com se login admin hi delete/write kar sakta hai (Firestore Auth check)
Testing tip: Agar "permission denied" error aye to allow write: if true; karke test karo, phir wapas isAdmin() pe lao.
D) Publish karo
Publish dabate hi rules live — 10 sec me active.
6️⃣ Step 6 — Test Karo (3 cheezein)
Test 1 — Review Sync
1. Mobile se product page (e.g., Cream 7-Seater) pe review likho → Submit
2. Dusre laptop se same product kholo → review turant dikhe (Firestore listener)
3. Admin → Reviews tab → Delete → sab devices se delete
Test 2 — Admin Change Sync
1. Admin login (a69975874@gmail.com) → Hero me title change → Save
2. Customer ke mobile pe refresh — naya title turant
3. Firestore → siteConfig/main → updatedAt dekho
Test 3 — Subscribe Sync
1. Footer me kisi email se Subscribe → "Subscribed ✓" toast
2. Admin → 👥 Subscribers tab → Refresh → email + date + page dikhe
3. Firestore → subscribers collection → doc dikhega
4. Export CSV → Excel me kholo
Agar Firebase config YOUR_API_KEY pe ho to ye tests localStorage pe hi pass honge — config fill karne ke baad hi cross-device sync chalega.
7️⃣ Step 7 — Updated Files
Ye files update ki gayi hain — trent-wood-purana.zip me include:
assets/js/firebase-config.js — apna config yahan daloassets/js/trent-firebase.js — auto-sync logic (reviews, subscribers, siteConfig)assets/js/firebase SDK (CDN) — har HTML ke <head> me addfirestore.rules — upar wala code (project root me)admin.html — saveAdminData + showDashboard + loadReviews ab Firebase-awareproduct-*.html — pickStar + handleAddReview ab Firebase + mobile cardindex.html / category-*.html / bundle-*.html — handleSubscribe ab Firebase sync
❓ Common Questions
Q: Firebase free hai?
Haan — Spark plan free: 50k reads/day, 20k writes/day — Trent Wood ke liye kaafi. Badhe to Blaze pay-as-you-go.
Q: Bina Firebase ke chalega?
Haan — fallback localStorage — same browser me hi dikhega. Firebase ke baad hi cross-device sync.
Q: Rules me allow read: if true safe hai?
Reviews ke liye safe (public). Subscribers ke liye testing ke baad if isAdmin() kar do taake sirf owner dekh sake.
Q: Admin password change karna ho?
Firebase Console → Authentication → Users → a69975874@gmail.com → ⋮ → Edit / Reset password.
✅ Ready? Firebase Console pe project banao, config paste karo, rules publish karo — 5 minute me live sync! Koi step pe atko to batao, me aur detail bhej dunga.