songdrive

A song management tool to store, synchronize and present songs and setlists. Built with Vue.js and Firebase.


Keywords
vuejs2, vuefire, firebase, firestore, music, song-management, vue, songs, setlists, spectre-css, presentation, vuejs
License
MIT
Install
npm install songdrive@1.1.4

Documentation

SongDrive Logo Title

Release Last Updated CodeQL Analysis License Contribution Guidlines

A song management web application to store, sync and present songs and setlists, based on Vue.js, Firebase and Spectre.css. Head over to the docs (EN, DE) for more information about SongDrive and how to get started.

Preview

This is how the SongDrive Dashboard currently looks like.

20211105_songdrive_dashboard

A demo page is planned.

Features

  • Create, edit and delete songs
  • Normal and viewport optimized fullscreen view for a single song
  • Switch song languages
  • Filter songs and setlists on typing, by tags and by key
  • Transpose song key
  • Create, edit and delete setlists
  • Rearrange songs in setlists with simple drag and drop
  • Presentation mode for setlists with device synchronization
  • PDF export for songs, setlists and songsheets
  • Plain text, SNG and Slack formatted export for songs and setlists
  • Hotkey support
  • General statistics, setlist and user specific stats
  • UI supports multiple languages (currently: EN, DE)
  • Export and Import of complete SongDrive data

Installation for developers

  1. Get all files from repository

    git clone https://github.com/devmount/SongDrive
  2. Install all dependencies using Yarn

    cd SongDrive
    yarn
  3. Create an environment configuration file .env from the existing example configuration in the root directory:

    cp .env.example .env
  4. Log in to your Firebase account, hit the "Add a project" button and set up a project name and a server location

  5. Now you can add an app by clicking the "Web" button, choose a nickname and click "Next"

  6. Copy API key and project ID into your .env file

  7. Go back to your Firebase console, and click Create Database under Develop > Database. Choose Start in production mode and paste the security rules that you can copy frome the firestore.rules file.

  8. Create the first user in the Firebase console under Build > Authentification > Add user. After that you'll see the User UID in the table. Copy that UID, navigate to Build > Firestore Database > + Start collection. Input users as Collection ID and click Next. Insert the copied UID as Document ID and add the following fields to the document:

    • email = string | your email address
    • name = string | your name
  9. To give necessary permisstions, click + Start collection again. Input permissions as Collection ID and click Next. Insert the copied UID as Document ID and add the following field to the document:

    • role = string | admin
  10. Now your app is ready to be launched. Either start the development server with hot reload at localhost:8080 ...

    yarn serve
  11. ... or create an optimized production build with minification. All build files can be found in the dist directory.

    yarn build
  12. (optional) You can import demo content if you don't like to start from scratch. First download the demo data file from the repository. Sign in to SongDrive with your admin user, go to Settings > Import, select the downloaded demo file and import it. You can now have a look at 8 public domain songs, one demo setlist, several song tags, English and German languages and an additional test user.

License

This project is licensed under the MIT License.


SongDrive is completely free to use. If it's useful for you and you enjoy it, please consider contributing or donating via Paypal to support further development. 💚