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.
|