npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

songdrive

v2.1.1

Published

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

Downloads

33

Readme

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