═══════════════════════════════════════════════════════════════
DEPLOYMENT GUIDE - For Non-Technical Users
═══════════════════════════════════════════════════════════════
This guide will help you deploy your shoppable video website online
and connect it to a database. Follow these steps carefully.
═══════════════════════════════════════════════════════════════
PART 1: SET UP DATABASE (Firebase - FREE & EASY)
═══════════════════════════════════════════════════════════════
STEP 1: Create Firebase Account
1. Go to: [Link]
2. Click "Get Started" (it's free!)
3. Sign in with your Google account
4. Click "Create a project"
5. Enter project name: "shopstream" (or any name you like)
6. Click "Continue" and follow the setup steps
STEP 2: Enable Firestore Database
1. In Firebase, click "Firestore Database" in the left menu
2. Click "Create database"
3. Select "Start in test mode" (for now)
4. Choose a location (pick closest to you)
5. Click "Enable"
STEP 3: Get Your Firebase Config
1. In Firebase, click the gear icon ⚙️ next to "Project Overview"
2. Click "Project settings"
3. Scroll down to "Your apps" section
4. Click the web icon </> to add a web app
5. Register app name: "ShopStream"
6. Copy the "firebaseConfig" code (you'll need this later)
STEP 4: Update Your Website Files
- Open the file "[Link]" in your StreamHub folder
- We'll add Firebase code there (see FIREBASE [Link] file)
═══════════════════════════════════════════════════════════════
PART 2: DEPLOY YOUR WEBSITE (Netlify - FREE & EASY)
═══════════════════════════════════════════════════════════════
STEP 1: Create Netlify Account
1. Go to: [Link]
2. Click "Sign up" (it's free!)
3. Sign up with your email or GitHub account
STEP 2: Deploy Your Website
METHOD A: Drag and Drop (Easiest!)
1. Log into Netlify
2. Find the "Sites" section
3. Drag your entire "StreamHub" folder onto the Netlify page
4. Wait for it to upload (takes 1-2 minutes)
5. Your site will be live at a URL like: [Link]
METHOD B: Using GitHub (More Professional)
1. Create account at: [Link]
2. Create a new repository
3. Upload your StreamHub folder files
4. In Netlify, click "Add new site" → "Import an existing project"
5. Connect to GitHub and select your repository
6. Click "Deploy site"
STEP 3: Get Your Website URL
- After deployment, Netlify will give you a URL
- Example: [Link]
- You can customize this URL in Netlify settings
═══════════════════════════════════════════════════════════════
PART 3: CONNECT DATABASE TO WEBSITE
═══════════════════════════════════════════════════════════════
STEP 1: Add Firebase to Your Website
1. Open "[Link]" in your StreamHub folder
2. Before the closing </body> tag, add these lines:
<script src="[Link]
script>
<script src="[Link]
[Link]"></script>
<script src="[Link]"></script>
STEP 2: Create [Link] File
- Create a new file called "[Link]"
- Paste your Firebase config code from Part 1, Step 3
- Format it like this:
const firebaseConfig = {
apiKey: "your-api-key",
authDomain: "[Link]",
projectId: "your-project-id",
storageBucket: "[Link]",
messagingSenderId: "123456789",
appId: "your-app-id"
};
[Link](firebaseConfig);
const db = [Link]();
STEP 3: Update [Link]
- See "FIREBASE [Link]" for detailed instructions
- This will connect your website to Firebase instead of localStorage
═══════════════════════════════════════════════════════════════
PART 4: TEST YOUR DEPLOYED SITE
═══════════════════════════════════════════════════════════════
1. Visit your Netlify URL
2. Try adding products to cart
3. Complete a test order
4. Check Firebase to see if orders are saved
═══════════════════════════════════════════════════════════════
NEED HELP?
═══════════════════════════════════════════════════════════════
If you get stuck:
- Firebase Help: [Link]
- Netlify Help: [Link]
- Check the other guide files in this folder
═══════════════════════════════════════════════════════════════