# Troubleshooting Mobile Access Issues

## Problem: Cannot Access IP Address from Mobile

### Quick Solutions

#### Solution 1: Add Firewall Rule (Already Done)
A firewall rule has been added to allow port 3000. Try accessing again:
- `http://192.168.100.70:3000`

#### Solution 2: Use ngrok (Recommended for Testing)

**ngrok** creates a secure tunnel that works from anywhere, even different networks.

1. **Download ngrok:**
   - Visit: https://ngrok.com/download
   - Extract the executable

2. **Start ngrok for frontend:**
   ```powershell
   # In a new terminal
   ngrok http 3000
   ```

3. **You'll get a URL like:**
   ```
   Forwarding: https://abc123.ngrok.io -> http://localhost:3000
   ```

4. **Use this URL on mobile:**
   - `https://abc123.ngrok.io/mobile-test?code=XXXXX`
   - Works from anywhere, even different Wi-Fi networks!

5. **For backend (if needed):**
   ```powershell
   # In another terminal
   ngrok http 5001
   ```
   Then update frontend API config to use the ngrok backend URL.

#### Solution 3: Check Network Connection

1. **Verify same Wi-Fi:**
   - Computer and mobile must be on the same Wi-Fi network
   - Check Wi-Fi name matches on both devices

2. **Test connectivity:**
   - On mobile, try: `http://192.168.100.70:3000`
   - If it doesn't load, try pinging from mobile (if possible)

3. **Check router settings:**
   - Some routers block device-to-device communication
   - Check if "AP Isolation" or "Client Isolation" is enabled
   - Disable it if enabled

#### Solution 4: Use Computer's Hotspot

1. **Create mobile hotspot on your computer:**
   - Windows: Settings → Network & Internet → Mobile hotspot
   - Enable "Share my Internet connection"

2. **Connect mobile to computer's hotspot**

3. **Find hotspot IP:**
   ```powershell
   ipconfig
   ```
   Look for "Wireless LAN adapter Local Area Connection* X" or similar
   - Usually starts with `192.168.137.x` or `192.168.1.x`

4. **Access from mobile:**
   - `http://HOTSPOT_IP:3000`

#### Solution 5: Temporarily Disable Firewall (Testing Only)

⚠️ **Warning: Only for testing, re-enable after!**

```powershell
# Disable firewall temporarily
netsh advfirewall set allprofiles state off

# After testing, re-enable:
netsh advfirewall set allprofiles state on
```

#### Solution 6: Check Antivirus

Some antivirus software blocks network access:
- Temporarily disable firewall/network protection
- Add exception for port 3000
- Test again

### Verification Steps

1. **Test from computer browser:**
   - Open: `http://192.168.100.70:3000`
   - Should work if server is running

2. **Test from mobile browser:**
   - Open: `http://192.168.100.70:3000`
   - If it doesn't work, try solutions above

3. **Check server logs:**
   - Look at terminal running `start_frontend.ps1`
   - Should see connection attempts

### Common Issues

| Issue | Solution |
|-------|----------|
| "This site can't be reached" | Firewall blocking, use ngrok or add firewall rule |
| "Connection refused" | Server not running or wrong IP |
| "Timeout" | Different network or router blocking |
| Works on computer but not mobile | Firewall or network isolation |
| Works on same Wi-Fi but not different | Use ngrok for cross-network access |

### Recommended Setup for Mobile Testing

**Best approach: Use ngrok**
- Works from anywhere
- Provides HTTPS (required for some mobile features)
- No firewall/router configuration needed
- Free for testing

**Steps:**
1. Start frontend: `.\start_frontend.ps1`
2. Start ngrok: `ngrok http 3000`
3. Use ngrok URL on mobile: `https://xxxxx.ngrok.io/mobile-test?code=XXX`

### Quick Test Commands

```powershell
# Check if port is accessible
Test-NetConnection -ComputerName 192.168.100.70 -Port 3000

# Check firewall rules
netsh advfirewall firewall show rule name="Vite Dev Server Port 3000"

# List all listening ports
netstat -ano | findstr LISTENING
```

