# Quick Mobile Access Guide

## Problem: Cannot Access `http://192.168.100.70:3000` from Mobile

### ✅ Easiest Solution: Use ngrok (Recommended)

**Why ngrok?**
- ✅ No firewall configuration needed
- ✅ Works from any network (even different Wi-Fi)
- ✅ Provides HTTPS (required for some mobile features)
- ✅ Free for testing
- ✅ No admin privileges needed

#### Step 1: Install ngrok

1. **Download:** https://ngrok.com/download
2. **Extract** `ngrok.exe` to this folder: `D:\ai\franai\`
3. Or add to PATH (optional)

#### Step 2: Start ngrok

**Option A: Use the script (easiest)**
```powershell
.\start_ngrok.ps1
```

**Option B: Manual command**
```powershell
.\ngrok.exe http 3000
```

#### Step 3: Get Your Public URL

You'll see output like:
```
Forwarding: https://abc123-def456.ngrok-free.app -> http://localhost:3000
```

**Copy the HTTPS URL** (the one starting with `https://`)

#### Step 4: Use on Mobile

Open on your mobile browser:
```
https://abc123-def456.ngrok-free.app/mobile-test?code=XXXXX
```

**Works from anywhere!** Even if your phone is on a different Wi-Fi network.

---

### Alternative: Fix Firewall (Requires Admin)

If you prefer to use the local IP address:

1. **Open PowerShell as Administrator:**
   - Right-click PowerShell → "Run as Administrator"

2. **Run this command:**
   ```powershell
   netsh advfirewall firewall add rule name="Vite Dev Server Port 3000" dir=in action=allow protocol=TCP localport=3000
   ```

3. **Test from mobile:**
   - `http://192.168.100.70:3000`

---

### Quick Comparison

| Method | Setup | Works From | Requires Admin |
|--------|-------|------------|----------------|
| **ngrok** | Download & run | Anywhere | ❌ No |
| **Firewall Rule** | One command | Same Wi-Fi only | ✅ Yes |
| **Disable Firewall** | One command | Same Wi-Fi only | ✅ Yes |

---

### Testing Checklist

- [ ] Frontend server running (`http://localhost:3000` works)
- [ ] ngrok installed and running
- [ ] Got ngrok HTTPS URL
- [ ] Can access ngrok URL from mobile browser
- [ ] Mobile test page loads correctly

---

### Troubleshooting ngrok

**"ngrok not found"**
- Make sure `ngrok.exe` is in `D:\ai\franai\` folder
- Or add ngrok to your system PATH

**"Tunnel not found"**
- Make sure frontend is running on port 3000
- Check: `netstat -ano | findstr :3000`

**"Connection refused"**
- Frontend server might not be running
- Start it: `.\start_frontend.ps1`

---

### Example Workflow

1. **Terminal 1:** Start frontend
   ```powershell
   .\start_frontend.ps1
   ```

2. **Terminal 2:** Start ngrok
   ```powershell
   .\start_ngrok.ps1
   ```

3. **Copy ngrok URL** (e.g., `https://abc123.ngrok-free.app`)

4. **Generate registration link:**
   - Use browser console script
   - Replace `localhost` with ngrok URL

5. **Open on mobile:**
   - `https://abc123.ngrok-free.app/mobile-test?code=XXXXX`

---

**Recommendation:** Use ngrok for easiest mobile testing! 🚀

