/ App

A song management web application to store based on Vue.js

A song management web application to store based on Vue.js

SongDrive

A song management web application to store, synchronize and present songs and setlists, based on Vue.js, Firebase and Spectre.css.

SongDrive

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 and by tags
  • Transpose song tuning
  • Create, edit and delete setlists
  • Rearrange songs in setlists with simple drag and drop
  • Presentation view for setlists
  • PDF export for songs, setlists and songsheets
  • Plain text export for songs, setlists and songsheets
  • Hotkey support

Installation

  1. Get all files

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

    cd SongDrive
    yarn
    
  3. Create an empty file called config.js in SongDrive/src

    touch src/config.js
    
  4. Log in to your Firebase account and hit the "Create new project" button

  5. Enter your new project and click "Add Firebase to your web app"

  6. Copy the following code from the code that is shown to your just created config.js:

    export const config = {
        apiKey: "<your-api-key>",
        authDomain: "<your-auth-domain>",
        databaseURL: "<your-database-url>",
        projectId: "<your-project-id>",
        storageBucket: "<your-storage-bucket>",
        messagingSenderId: "<your-messaging-sender-id>"
    }
    
  7. To create the necessary database structure, go to Database in the left menu of your Firebase dashboard, click on the three dot menu on the upper right corner of the database field and choose Import JSON. In the following file selection dialog, browse for the file database.json contained in this repository and import it.

  8. Either start the development server with hot reload at localhost:8080 ...

    yarn serve
    
  9. ... or create a production build with minification

    yarn build
    

Usage

Song Syntax

The notation of the song content is simple: Just add the song lines with the corresponding chords above the exact syllable. Add two whitespaces at the end of each chord line for them to be recognized by the system for text only view or transposition.

GitHub