187 lines
4.6 KiB
Markdown
187 lines
4.6 KiB
Markdown
|
# 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.
|