📱 ScanRed

A simple static web application that allows you to open URLs on one device from another using QR codes.

🚀 Features

• Device 1 (PC/Desktop): Displays a unique QR code
• Device 2 (Mobile): Scans the QR, enters a URL
• Device 1: Automatically opens the specified URL

📋 Requirements

• A Firebase project (free)
• A local web server or static hosting (GitHub Pages, Netlify, Vercel, etc.)

🔧 Configuration

Step 1: Create a Firebase Project

1. Go to Firebase Console
2. Click "Add project"
3. Follow the steps to create your project
4. Once created, go to "Realtime Database" in the side menu
5. Click "Create database"
6. Select the location closest to you
7. Start in test mode (allows read/write for 30 days)
   • ⚠️ IMPORTANT: For production, configure appropriate security rules
8. The database is ready

Step 2: Get Firebase Configuration

1. In the Firebase console, go to "Project settings" (⚙️ icon)
2. Scroll down to "Your apps"
3. Click the </> icon (Web)
4. Register your app (give it a name)
5. Copy the firebaseConfig that appears

Step 3: Configure the Files

1. Open index.html
2. Find the firebaseConfig section (line ~111)
3. Replace the values with your configuration:

const firebaseConfig = {
    apiKey: "YOUR_REAL_API_KEY",
    authDomain: "your-real-project.firebaseapp.com",
    databaseURL: "https://your-real-project-default-rtdb.firebaseio.com",
    projectId: "your-real-project",
    storageBucket: "your-real-project.appspot.com",
    messagingSenderId: "123456789012",
    appId: "1:123456789012:web:abcdef123456"
};

4. Repeat the same in remote.html (line ~158)

Step 4: Deploy

Option A: Local Server

# Using Python 3
python -m http.server 8000

# Or using Node.js (npx http-server)
npx http-server

Then open http://localhost:8000 in your browser.

Option B: GitHub Pages

1. Upload the files to a GitHub repository
2. Go to Settings → Pages
3. Select the branch and folder
4. Your site will be at https://your-username.github.io/your-repo

Option C: Netlify/Vercel

1. Drag the folder to Netlify Drop or use Vercel
2. Your site will be ready in seconds

🎯 How to Use

1. On your PC: Open index.html in the browser
2. You'll see a QR code generated automatically
3. Scan the QR with your phone
4. Enter the URL you want to open on your PC
5. Your PC will automatically open that URL

🔒 Firebase Security Rules (Production)

For production, update the Firebase Realtime Database rules:

{
  "rules": {
    "sessions": {
      "$sessionId": {
        ".write": true,
        ".read": true,
        ".validate": "newData.hasChildren(['url', 'timestamp'])",
        "url": {
          ".validate": "newData.isString() && newData.val().length < 2048"
        },
        "timestamp": {
          ".validate": "newData.isNumber()"
        }
      }
    }
  }
}

You can also add automatic session expiration:

{
  "rules": {
    "sessions": {
      "$sessionId": {
        ".write": "!data.exists() || data.child('timestamp').val() > (now - 3600000)",
        ".read": true,
        ".validate": "newData.hasChildren(['url', 'timestamp'])"
      }
    }
  }
}

📁 File Structure

scaan.in/
├── index.html      # Main page (Device 1)
├── remote.html     # Control page (Device 2)
└── README.md       # This file

🛠️ Technologies Used

• HTML5 / CSS3 / JavaScript (Vanilla)
• Firebase Realtime Database
• QRCode.js

⚠️ Important Notes

• Security: This is a demonstration implementation. For production, implement authentication and appropriate security rules.
• HTTPS: Firebase requires HTTPS in production. Use hosting that provides it (GitHub Pages, Netlify, Vercel do this automatically).
• Free tier limits: Firebase Realtime Database has generous limits on the free tier:
  • 1 GB of storage
  • 10 GB/month of data transfer
  • 100 simultaneous connections

🆘 Troubleshooting

QR code doesn't generate

• Verify that you've configured Firebase correctly
• Open the browser console (F12) to see errors
• Make sure the databaseURL URL is correct

Phone doesn't connect

• Verify that both devices have Internet access
• Make sure Firebase rules allow read/write
• Check that the Firebase configuration is identical in both files

URL doesn't open

• Verify that the URL has the correct format (with http:// or https://)
• Some browsers block automatic redirects - allow pop-ups
• Check the browser console for errors

📄 License

MIT - Free to use

🤝 Contributions

Contributions are welcome! Feel free to open issues or pull requests.