═══════════════════════════════════════════════════════════════
FIREBASE DATABASE SETUP - Detailed Instructions
═══════════════════════════════════════════════════════════════
This guide shows you how to replace the simple database
with Firebase (a real cloud database).
═══════════════════════════════════════════════════════════════
STEP 1: Get Firebase Configuration
═══════════════════════════════════════════════════════════════
1. Go to [Link]
2. Select your project (or create one)
3. Click the gear icon ⚙️ → Project settings
4. Scroll to "Your apps" → Click web icon </>
5. Copy the config object that looks like:
const firebaseConfig = {
apiKey: "AIza...",
authDomain: "[Link]",
projectId: "your-project-id",
storageBucket: "[Link]",
messagingSenderId: "123456789",
appId: "1:123456789:web:abc123"
};
═══════════════════════════════════════════════════════════════
STEP 2: Create [Link] File
═══════════════════════════════════════════════════════════════
Create a new file in your StreamHub folder called:
"[Link]"
Paste this code (replace with YOUR config from Step 1):
// Firebase Configuration
const firebaseConfig = {
apiKey: "YOUR-API-KEY-HERE",
authDomain: "[Link]",
projectId: "YOUR-PROJECT-ID",
storageBucket: "[Link]",
messagingSenderId: "YOUR-SENDER-ID",
appId: "YOUR-APP-ID"
};
// Initialize Firebase
[Link](firebaseConfig);
const firestore = [Link]();
═══════════════════════════════════════════════════════════════
STEP 3: Update [Link]
═══════════════════════════════════════════════════════════════
Open "[Link]" and BEFORE the closing </body> tag,
add these lines (before <script src="[Link]">):
<script src="[Link]
<script src="[Link]
script>
<script src="[Link]"></script>
═══════════════════════════════════════════════════════════════
STEP 4: Update [Link] for Firebase
═══════════════════════════════════════════════════════════════
Replace the Database class in [Link] with this version:
class Database {
constructor() {
[Link] = [];
[Link] = [];
[Link] = [];
[Link]();
}
async loadData() {
// Load videos
const videosSnapshot = await [Link]('videos').get();
[Link] = [Link](doc => ({
id: [Link],
...[Link]()
}));
// Load products
const productsSnapshot = await [Link]('products').get();
[Link] = [Link](doc => ({
id: [Link],
...[Link]()
}));
// If no data exists, create default data
if ([Link] === 0) {
await [Link]();
}
}
async createDefaultData() {
// Add default videos
const defaultVideos = [
{
title: 'Fashion Haul - Summer Collection',
description: 'Shop the latest summer fashion trends',
thumbnail: 'F',
products: [1, 2, 3, 4],
productTags: [
{ productId: 1, time: 5, x: 30, y: 40 },
{ productId: 2, time: 15, x: 60, y: 30 },
{ productId: 3, time: 25, x: 45, y: 50 },
{ productId: 4, time: 35, x: 70, y: 45 }
]
}
// Add more videos as needed
];
for (const video of defaultVideos) {
await [Link]('videos').add(video);
}
// Add default products
const defaultProducts = [
{ name: 'Summer Dress', price: 49.99, image: '👗', category: 'Fashion',
description: 'Beautiful summer dress' },
{ name: 'Designer Sunglasses', price: 89.99, image: '', category:
'Fashion', description: 'Premium sunglasses' }
// Add more products as needed
];
for (const product of defaultProducts) {
await [Link]('products').add(product);
}
// Reload data
await [Link]();
}
getVideo(id) {
return [Link](v => [Link] === id);
}
getProduct(id) {
return [Link](p => [Link] === id);
}
getProducts(ids) {
return [Link](id => [Link](id)).filter(p => p);
}
async saveOrder(order) {
const newOrder = {
...order,
createdAt: new Date().toISOString(),
status: 'pending'
};
const docRef = await [Link]('orders').add(newOrder);
return { id: [Link], ...newOrder };
}
getOrders() {
return [Link];
}
getOrder(id) {
return [Link](o => [Link] === id);
}
}
// Initialize database
const db = new Database();
═══════════════════════════════════════════════════════════════
STEP 5: Set Up Firestore Collections
═══════════════════════════════════════════════════════════════
In Firebase Console:
1. Go to Firestore Database
2. Click "Start collection"
3. Create these collections:
- videos
- products
- orders
The app will automatically create default data when first run,
or you can manually add data through Firebase Console.
═══════════════════════════════════════════════════════════════
IMPORTANT NOTES
═══════════════════════════════════════════════════════════════
- Firebase free tier is generous for small projects
- All data is stored in the cloud
- Orders will be saved automatically
- You can view orders in Firebase Console
═══════════════════════════════════════════════════════════════
