SonGlue

View the SonGlue app Here

Topics

• Overview
• MVP Features
• Video Walkthrough of MVP
• Relevant Links
• Code Snippet
• Project Screenshots
• Get Started
• Tech and Frameworks Used
• API Reference
• Contributors

---

Overview

• The ideal user for SonGlue is a musician/songwriter/composer trying to organize their songs/composition ideas
• Songwriters can upload their unfinished musical ideas as "snippets" and assign them to a song idea
• Musicians can view others' shared sounds if they mark them as public to get inspiration

MVP Features

• Musicians sign in with Google authentication
• Songwriters can browse the Shared Sounds section to view other people's public songs and public snippets only
• Musicians can create, read, update and delete their own song ideas
• Musicians can create read update and delte their own snippet ideas
• Both Snippets and Songs have information regarding BPM, Key of, Title, Description, whether it's public, and whether it's a favorite
• Users can searches their Snippets
• Users can filter out and quickly view their favortie of their own Snippets

Video Walkthrough of MVP

• https://www.loom.com/share/29511fce06db4be2bfbde6a31b344a07?sid=079313a7-2535-4f19-8c69-a1f39c361975

Relevant Links

• Check out the deployed site

• Figma Wireframes for MVP

• Project Board

• MVP ERD

• Assumption: A song can have many snippets, but each snippet is associated with one song.

• Flowchart

Code Snippet

To access the Firestore Cloud Storage:

const storage = firebase.storage();

To delete all of a Song's Snippets associated with the Song, while deleting the song too:

const deleteSongSnippets = (songId) => new Promise((resolve, reject) => {
  getSnippetsBySong(songId).then((snippetsArray) => {
    const deleteSnippetPromises = snippetsArray.map((snippet) => deleteSingleSnippet(snippet.firebaseKey));

    Promise.all(deleteSnippetPromises).then(() => {
      deleteSingleSong(songId).then(resolve);
    });
  }).catch((error) => reject(error));
});

Project Screenshots of MVP

Home Page with Musician's Snippets

Profile Page with Musician's Songs

View Details of Snippet

Get Started

1. Create a Firebase project and set up authentication.
2. Clone Songrab to your local server

git@github.com:AngieMGonzalez/grabaudio.git

1. Create a .env file at the root of the project
2. Copy the environmental variables from Firebase and paste them as the properties of the keys found in your newly created .env file
3. Import sample data found in data folder in to the Realtime Database
4. From your command line, be in the root directory and run npm install OR npm i for short
5. Then, run npm run prepare
6. To start SonGlue, run npm run dev
7. Open http://localhost:3000 with your browser

Tech and Frameworks Used

API Reference

Contributors

• Angie Gonzalez
• Badges from Alexandre Sanlim

Thank you E21