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"**[cite: 15].
3. Enter a name (e.g., "My Raffle App").
4. **Disable** Google Analytics (you don't need it)[cite: 17].
5. Click **"Create project"**[cite: 18].

Step 1.2: Get Your Firebase Config Keys

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

// 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`)!

Option 2: cPanel / FTP

1. Zip (compress) all your project files.
2. Upload the `.zip` file to your hosting (e.g., in `public_html`).
3. Unzip the file.
4. Your site is now live on `your-domain.com`.

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.
• ...and much more.

---

That's it! Your raffle is live. If you have any issues, please contact us for support.