Church-Music/legacy-site/documentation/md-files/QUICK_START.md

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)

cd backend
python app.py

You should see:

 * 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)

cd frontend
npm start

You should see:

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.