Raffle Pro - Documentation

Thank you for purchasing Raffle Pro! This guide will walk you through the complete setup in about 10 minutes.

Part 1: Firebase Project Setup

Your app runs on Firebase, Google's powerful backend service. This setup is 100% free.

Step 1.1: Create a Firebase Project

1. Go to Firebase Console and log in with your Google account.
2. Click "Create a project".
3. Enter a name (e.g., "My Raffle App").
4. Disable Google Analytics (you don't need it).
5. Click "Create project".

Step 1.2: Get Your Firebase Config Keys

1. In your new project's dashboard, click the Web icon ( </> ) to register a web app.
2. Enter an "App nickname" (e.g., "Raffle Pro Web").
3. DO NOT check the box for "Firebase Hosting".
4. Click "Register app".
5. Firebase will show you an object named `firebaseConfig`. Copy this entire object.

// It looks like this:
const firebaseConfig = {
    apiKey: "AIzaSy...YOUR...KEY...",
    authDomain: "YOUR-PROJECT.firebaseapp.com",
    projectId: "YOUR-PROJECT-ID",
    storageBucket: "YOUR-PROJECT.appspot.com",
    messagingSenderId: "1234567890",
    appId: "1:123...YOUR...ID..."
};

Step 1.3: Paste Keys into Your Project

1. In the project folder you downloaded, go to the `js/` directory.
2. Open the file `firebase-config.js` in a text editor (like VS Code, Sublime, or Notepad).
3. You will see a `firebaseConfig` object at the top. Replace the placeholder values with the keys you just copied from Firebase.
4. Save and close the file.

Step 1.4: Enable Authentication (For Your Admin Login)

This is how you will log in to the admin panel.

1. In the Firebase Console, go to Authentication (in the "Build" menu).
2. Click "Get started".
3. Under "Sign-in providers," choose "Email/Password" and Enable it.
4. Go to the "Users" tab and click "Add user".
5. Enter your admin email (e.g., `admin@myraffle.com`) and a strong password.

Step 1.5: Enable Firestore Database & Storage

1. In the "Build" menu, click Firestore Database.
2. Click "Create database".
3. Start in Test mode. (Don't worry, we will secure it in Part 2).
4. Choose a location (e.g., `us-central`). Click Enable.
5. In the "Build" menu, click Storage.
6. Click "Get started".
7. Start in Test mode. Click Next and Done.

Part 2: Deploy Security & Indexes (Critical!)

This is the most important step. We will deploy the secure, production-ready rules that are included in your project folder.

Step 2.1: Install Firebase CLI

1. You need Node.js installed on your computer.
2. Open your computer's Terminal (or Command Prompt).
3. Run this command to install the Firebase tools:

   npm install -g firebase-tools

Step 2.2: Deploy Your Secure Rules

1. In your Terminal, navigate to your project's main folder (the one containing `index.html` and `firebase.json`).
2. Run this command to log in:

   firebase login

3. Run this command to link your project:

   firebase use --add

4. Select the Firebase Project ID you created in Step 1.1.
5. Finally, run the deploy command:

   firebase deploy --only firestore

Alternative: Manual Rules Setup (If CLI fails)

If you cannot use the terminal commands above, simply copy and paste the security rules manually:

1. Go to Firebase Console > Firestore Database > Rules tab.
2. Copy the code below and paste it there replacing everything.
3. Click Publish.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    
    function isAdmin() {
      return request.auth != null;
    }

    function isValidParticipant() {
      let data = request.resource.data;
      return data.keys().hasAll(['num', 'nombre', 'wp', 'precio', 'pagado']) &&
             data.num is number && data.num >= 0 && data.num <= 100 &&
             data.nombre is string && data.nombre.size() > 0 && data.nombre.size() < 100 &&
             data.wp is string && data.wp.size() >= 7 && data.wp.size() <= 20 &&
             data.precio is number && data.pagado == false;
    }

    match /config/global {
      allow read: if true;
      allow write: if isAdmin();
    }

    match /participants/{docId} {
      allow read: if true;
      allow create: if isValidParticipant();
      allow update, delete: if isAdmin();
    }

    match /winners/{docId} {
      allow read: if true;
      allow write: if isAdmin();
    }
  }
}

Part 3: Hosting Your Application

Your app is a static site. You can host it anywhere. We recommend Vercel for a fast, free solution.

Option 1: Vercel (Recommended)

1. Go to Vercel and sign up (a free account is fine).
2. Drag & drop your entire project folder onto the Vercel dashboard.
3. Vercel will detect it's a static site and deploy it.
4. In 1 minute, you will have a public URL (e.g., `my-raffle.vercel.app`)!

Part 4: Managing Your Raffle

Step 4.1: Log In as Admin

1. Go to your new website URL and add `/admin.html` at the end.
2. Example: `https://my-raffle.vercel.app/admin.html`
3. You will see a login screen.
4. Use the Email and Password you created in Step 1.4 to log in.

Step 4.2: Configure Your Raffle

From the Admin Panel, you can control everything without touching any code:

• Set the raffle Title, Currency, and Price.
• Set the number of participants.
• Add/Remove Prizes, including names, values, and images.
• Set your Contact WhatsApp number.

Part 5: Google Sheets Integration (Optional)

Do you want to save every ticket sale automatically to a Google Sheet in real-time? Follow these steps.

Step 5.1: Create the Google Sheet

1. Go to Google Sheets and create a new blank sheet.
2. In the first row (Header), add these titles:
   • A1: Date
   • B1: Number
   • C1: Name
   • D1: WhatsApp
   • E1: Price

Step 5.2: Add the Automation Script

1. In your Google Sheet, click on Extensions > Apps Script.
2. Delete any code there and paste the following script:

function doGet(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var params = e.parameter;

  if (params.accion == "insertar") {
    // Insert new ticket
    var fecha = new Date();
    sheet.appendRow([
      fecha,
      params.num,
      params.nombre,
      params.wp,
      params.precio
    ]);
    return ContentService.createTextOutput("Success");
    
  } else if (params.accion == "borrar") {
    // Reset Raffle: Delete all rows except header
    var lastRow = sheet.getLastRow();
    if (lastRow > 1) {
      sheet.getRange(2, 1, lastRow - 1, 5).clearContent();
    }
    return ContentService.createTextOutput("Deleted");
  }
}

Step 5.3: Deploy as Web App (Important!)

1. Click on the blue button "Deploy" > "New deployment".
2. Click on the gear icon (Select type) and choose "Web app".
3. Description: Raffle Pro v1.
4. Execute as: Me (your email).
5. Who has access: Anyone (This is critical).
6. Click "Deploy".
7. Copy the Web app URL (it ends with `/exec`).

Step 5.4: Connect to Raffle Pro

1. Go to your Raffle Pro Admin Panel.
2. Paste the URL into the field "Google script URL".
3. Click Save.
4. Done! Now every reservation will appear in your Excel sheet instantly.

Part 6: Digital Tickets & QR Codes

Raffle Pro automatically generates a PDF Ticket for your users when they reserve a number. You can customize the behavior of the QR Code.

How to customize the QR Link?

By default, the QR code on the ticket contains text with the purchase details. If you want the QR code to open a specific link (like your WhatsApp or Website) when scanned:

1. Log in to the Admin Panel.
2. Find the field "QR Link (Optional)".
3. Enter your URL.
   • Example for WhatsApp: https://wa.me/1234567890?text=VerifyTicket
   • Example for Website: https://my-raffle-site.com
4. Click Save Config.

---

That's it! Your raffle is live. If you have any issues, please contact us via our CodeCanyon profile.