PraiseLink

Sheet music, lyrics and more sharing web platform for churches and other live performance groups

Idea/Roadmap

Web app for sharing the lyrics for the services

• You can then create teams
• Within team, leader can create playlist
• Within playlist, leader can add songs
  • Lyrics as main item
  • Add your own music sheets
    • Support commonly used ChordPro format
    • Even 'linking' them to the lyrics -> just make sure you add your chords over the main lyrics...
    • If the text is large, it scrolls to it
    • Make recordings of yourself singing/playing it, so that the rest can practice (such as for the drummers, for example)
  • With a practice 'view' (maybe)
• Add an liveview with a share key, like at Kahoot
  • Liveview with lyrics
  • Liveview with musicsheet
  • Allow the leader to control/scroll -> actually all users can scroll it now...
  • Add an remote API for external programs
    • Add an integration with my SongTextProjector so that it would sync to the songtext on the screen

Screenshots

Getting started

Here is a quick little guide to get you started. I probably will be making releases so you can run the production version easier, but that will come later. You can make your own one yourself and then upload the .tgz to your remote hosting. You will read that later.

Cloning this code

git clone https://edugit.org/thedutchprogrammers/praiselink.git
cd praiselink

Installing

npm install

Setup config

Copy the example.env to .env

You can change the DATABASE_URL, make sure it is in the format that can be found on this website

Then fill in the mail server details and save.

Initialize database

npm run db:generate
npm run db:push
npm run db:seed

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Testing

For testing you need to create a few files in order to use authenticated routes. (this still needs to be made...)

To run the tests, you can run:

npm run test

Building

To create a production version of the app, run:

npm run build

You can then preview the production build with npm run preview.

And you can run the production build using npm start or node . or node ./productionServer/

If you would like to only have the required (production) files on your remote host, then run this command after the build:

npm pack

This will produce a praiselink-0.0.1.tgz file that you can copy to your host, then unpack. You can then use the install_prod script (.bat for windows and .sh for linux) to install the required deps

Then you can run the npm run db:push to make sure your database is created and up-to-date.

And if it is the first time, you should run npm run db:seed, this will allow you to make your account.

Then run the start_prod script (again .bat for windows and .sh for linux) and you should be good-to-go

You will need to add some arguments/variables in order to make it work:

HOST=your.domain.com PORT=3000 ./start_prod.sh

And if you use a reverse proxy to get rid of the port, then run:

HOST=your.domain.com PORT=3000 ORIGIN=https://your.domain.com ./start_prod.sh

Without the ORIGIN variable (that will be set to http://{HOST}:{PORT} if not specified), the POST requests, like login and such will NOT WORK! This is because of some cors thingy sveltekit created. So make sure to set the ORIGIN variable! It will NOT work when put into the .env file, yet.

Running in subfolder

You can run this web platform mounted in a subfolder, Just edit the svelte.config.js like so:

 const config = {
 	kit: {
 		adapter: adapter(),
+		paths: {
+			base: '/test',
+		},
 	},
 	preprocess: vitePreprocess(),
 };

Then run the npm run build command again and it should build a version where it uses the subfolder. Then using the npm run preview or npm start, it will require you to use the subfolder to access the page.

Background information / Story

I, Miniontoby, am a christian and I help out at the Teenager church nights. I do this by controlling the computer for projecting the lyrics.

It all started when I got a connection with the other person who used to control the computer for the beamer for the lyrics. He always complained about the program we use for the lyrics presentation, that it is bad and slow. So to help him out, I actually made my own software, called SongTextProjector.

When working on improving it, I was thinking about using Speech to Text to automatically go to the next lines, when they got there/finished the previous.

But it was more difficult then I thought, so I decided to turn the tables. Instead of me syncing to the band, I would get the band synced to ME.

Since everyone on the band (like 6+ people) all have their own tablet/ipad with their lyrics + musicchords/sheets. But they all have to scroll on their own tablet/ipad by themselfs meaning they cannot play for 2 seconds.

So that got me thinking: What if I would create a web platform where the leader of the band can submit the songs (with the lyrics) and then the bandmembers can add and align their musicsheets/chords to the lyrics.

And then I would add a liveview with an share key, like at Kahoot, so they can all join. The leader would be able to scroll for everyone then. But I would also add an remote API for external programs to interact.

Then I would integrate that into my SongTextProjector and make the liveview sync when I go to the next lyrics lines. Meaning it would scroll the bandmember's views on their tablet/ipad's.