# Quick Start - Worship List Features

## 🎉 What's New

Your worship planning system is now called **Worship List** and includes:

- ✅ Cross-device song synchronization
- ✅ Drag-and-drop song reordering
- ✅ Fixed song display on all devices
- ✅ Updated branding throughout

---

## 🚀 Getting Started

### Step 1: Start the Backend (API Server)

```powershell
cd backend
python app.py
```

You should see:

```text
 * Running on http://127.0.0.1:5000
 * Running on http://10.5.0.2:5000
```

**Note**: The backend API runs on port **5000**.

### Step 2: Start the Frontend (React UI)

```powershell
cd frontend
npm start
```

You should see:

```text
Compiled successfully!
Local:            http://localhost:3000
On Your Network:  http://10.5.0.2:3000
```

**Note**: The frontend UI runs on port **3000**.

### Step 3: Configure Devices

#### On Main Device (Host Computer)

1. Open the app in your browser: `http://localhost:3000`
2. Go to **Settings** (⚙️)
3. **Toggle OFF "Local Mode"** to enable Online Mode
4. Enter these settings:
   - **Protocol**: `http`
   - **Hostname**: `localhost`
   - **Port**: `5000` ← **Backend API port**
5. Click **💾 Save DNS Settings**
6. Page will reload
7. Go to **Settings → Data Synchronization** and click **Full Sync**

#### On Other Devices (Phone, Tablet, Laptop)

1. **Open the frontend UI**: `http://10.5.0.2:3000` (replace with your actual LAN IP)
2. Go to **Settings** (⚙️)
3. **Toggle OFF "Local Mode"** to enable Online Mode
4. Enter these settings:
   - **Protocol**: `http`
   - **Hostname**: `10.5.0.2` ← **Your desktop's LAN IP**
   - **Port**: `5000` ← **Backend API port (NOT 3000)**
5. Click **💾 Save DNS Settings**
6. Page will reload and sync data automatically

**Important**:

- You access the **frontend** at port **3000** (the React UI)
- But you configure Settings to use port **5000** (the backend API)
- The frontend JavaScript running in your browser will make API calls to the backend at the configured hostname:port

---

## 📋 Using Worship List

### Creating a New Worship Plan

1. Click **📋 Worship List** in the menu
2. Click **➕ Create New Worship Plan**
3. Select date
4. Add notes (optional)
5. Search for songs and click **Add**
6. **Reorder songs**:
   - **Drag**: Click ⋮⋮ handle and drag to new position
   - **Arrows**: Click ▲ ▼ to move up/down
7. Click **Create Plan** or **Update Plan**

### Viewing a Worship Plan

1. Go to **📋 Worship List**
2. Click on any plan card
3. Click on a song to view lyrics/chords
4. Click **Edit Plan** to modify
5. Click **Delete Plan** to remove

### Managing Profile Songs

1. Go to **👤 Profiles**
2. Click on a profile
3. Scroll to **Saved Songs** section
4. Songs should now display on all devices
5. Click **⭐ Add to Saved** to bookmark songs

---

## 🔧 Troubleshooting

### Songs Not Showing on Other Device?

**Solution**:

1. On main device: Go to Settings → Force Full Migration
2. On other device: Refresh the page
3. Check both devices are in Online Mode
4. Verify backend IP is correct (not localhost)

### Can't Add Songs to Plan?

**Solution**:

1. Ensure backend is running (`node server.js`)
2. Check Online Mode is enabled
3. Verify the song exists in Database
4. Try refreshing the page

### Drag-and-Drop Not Working?

**Solution**:

- Desktop: Ensure you're clicking the ⋮⋮ handle
- Mobile: Use the ▲ ▼ arrow buttons instead
- Try using Chrome/Edge (best compatibility)

### Profile Songs Empty?

**Solution**:

1. Go to Settings → Data Management
2. Click **⚙️ Force Full Migration (Associations)**
3. Wait for success message
4. Refresh the page
5. Profile songs should now appear

---

## 💡 Tips

- **Reordering**: Songs automatically renumber as you reorder
- **Search**: Type partial song names to find quickly
- **Notes**: Add special instructions in the notes field
- **Sync**: Changes appear on all devices within seconds
- **Offline**: Switch to Local Mode if internet unavailable

---

## 📱 Device Support

- ✅ Windows Desktop (Chrome, Edge, Firefox)
- ✅ Android Phone/Tablet (Chrome)
- ✅ iPhone/iPad (Safari)
- ✅ Mac (Safari, Chrome)
- ✅ Linux (Chrome, Firefox)

---

## 🎯 Next Steps

1. ✅ Create your first worship plan
2. ✅ Test drag-and-drop reordering
3. ✅ Verify sync on second device
4. ✅ Add songs to profiles
5. ✅ Export or print plans

---

**Need Help?** Check `WORSHIP_LIST_UPDATE.md` for detailed technical information.