Web Application Plan: Song Lyrics and Chord Management with Firebase & Firestore Support

This document outlines the technical and functional plan for a web application dedicated to managing song lyrics and overlaying chords on the appropriate syllables. The application will support chord entry via direct text input or drag-and-drop, and will allow users to save their work using a REST API, Google Drive, local file operations, or Firebase Firestore. The storage format will be ChordPro. The following sections detail the frontend and backend architecture, user authentication, security considerations, and specific support for Firebase and Firestore.

---

Functional Features

Song and Chord Management

• Create, edit, and delete song lyrics.
• Overlay chords on specific syllables via:
  • Direct text input (ChordPro syntax: [C]La [G]do re)
  • Drag-and-drop from a chord palette.
• Support for song sections (verse, chorus, bridge) using ChordPro directives.
• Automatic chord transposition.
• Real-time preview in both edit and presentation modes.

Chord Library

• Built-in and user-defined chords.
• Visual chord editor (diagram, alternate names).
• Drag-and-drop chords from the library to the lyrics.

Storage Options

• Save/load songs in ChordPro format.
• Support for three storage backends:
  • Custom REST API (database backend)
  • Google Drive (OAuth2 integration)
  • Local file upload/download (ChordPro files)
  • Firebase Firestore (cloud-based NoSQL database)
• Import/export to/from ChordPro and optionally PDF or plain text.

User Management

• User registration and login (email/password and Google OAuth2).
• User roles (basic, editor, admin).
• Song sharing and collaboration (read/write permissions).
• Version history and change recovery.

---

Technical Architecture

Frontend

• Framework: React, Vue, or Angular.
• Editor: Rich text editor with ChordPro syntax highlighting and drag-and-drop capabilities.
• Chord Palette: Sidebar with chord search and creation.
• Storage Integration:
  • REST API via HTTP requests.
  • Google Drive via Google API and OAuth2.
  • Local file operations using the File API.
  • Firebase Firestore via Firebase SDK.
• Authentication: JWT (REST API), Google OAuth2, Firebase Auth.
• Responsive Design: Mobile and desktop support.

Backend

• REST API: Node.js (Express), Python (Django/Flask), or similar.
• Database: Relational (PostgreSQL/MySQL) or NoSQL (MongoDB).
• Authentication: JWT, OAuth2, Firebase Auth integration.
• Google Drive: Google Drive API.
• Firebase Firestore: Optional backend for song and user data.
• Security: Password hashing (bcrypt/Argon2), HTTPS, input validation, role-based access control.

---

Firebase & Firestore Integration

Key Features

• Firestore as a Storage Backend: Users can choose to store their songs and chord data in Firestore, enabling real-time sync and cross-device access.
• Firebase Authentication: Optional use for user sign-in/sign-up, supporting email/password and federated login (Google, etc.).
• Offline Support: Firestore SDK provides offline persistence for web and mobile clients.
• Real-time Collaboration: Firestore enables real-time updates for shared songs.

Implementation Steps

1. Firebase Project Setup

• Create a Firebase project in the Firebase Console.
• Add your web application to the project.
• Enable Firestore in the "Build" section and create a database (choose location and security mode)[1][4][6].

2. Add Firebase to the Web App

• Install the Firebase SDK:

  npm install firebase@latest --save
  

• Import and initialize Firebase and Firestore in your frontend code:

  import { initializeApp } from "firebase/app";
  import { getFirestore } from "firebase/firestore";
  
  const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    // ...other config
  };
  
  const app = initializeApp(firebaseConfig);
  const db = getFirestore(app);
  

3. Firestore Data Model

• Collections:
  • users: User profiles and settings.
  • songs: Each document represents a song, storing metadata, lyrics, chords, and sharing info.
• Document Example:

  {
    "title": "Song Title",
    "author": "UserID",
    "content": "ChordPro formatted text",
    "createdAt": "timestamp",
    "updatedAt": "timestamp",
    "sharedWith": ["UserID1", "UserID2"],
    "permissions": {
      "UserID1": "edit",
      "UserID2": "read"
    }
  }
  

4. Firestore Security Rules

• Start with test mode for development, but switch to strict security rules before production[1][4][6].
• Example rule for authenticated access:

  rules_version = '2';
  service cloud.firestore {
    match /databases/{database}/documents {
      match /songs/{songId} {
        allow read, write: if request.auth != null && request.auth.uid == resource.data.author;
        allow read: if request.auth != null && request.auth.uid in resource.data.sharedWith;
      }
      match /users/{userId} {
        allow read, write: if request.auth != null && request.auth.uid == userId;
      }
    }
  }
  

5. Firebase Authentication Integration

• Enable authentication providers in the Firebase Console.
• Use Firebase Auth SDK for sign-up, sign-in, and session management.

  import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
  const auth = getAuth(app);
  signInWithEmailAndPassword(auth, email, password)
    .then((userCredential) => { /* ... */ })
    .catch((error) => { /* ... */ });
  

6. Firestore CRUD Operations

• Create/Update Song:

  import { doc, setDoc } from "firebase/firestore";
  await setDoc(doc(db, "songs", songId), songData);
  

• Read Song:

  import { doc, getDoc } from "firebase/firestore";
  const docSnap = await getDoc(doc(db, "songs", songId));
  

• Delete Song:

  import { doc, deleteDoc } from "firebase/firestore";
  await deleteDoc(doc(db, "songs", songId));
  

• Real-time Updates:

  import { doc, onSnapshot } from "firebase/firestore";
  onSnapshot(doc(db, "songs", songId), (doc) => {
    // Handle real-time update
  });
  

7. Offline Support

• Firestore SDK enables offline data persistence by default for web and mobile clients[1][6].

8. Deployment

• Optionally, deploy the frontend to Firebase Hosting for seamless integration.

---

Security Considerations

• Authentication: All Firestore operations require authenticated sessions.
• Authorization: Firestore rules enforce user-level permissions for reading and writing documents.
• Data Validation: Validate all user inputs on both client and backend.
• Transport Security: Enforce HTTPS for all communications.
• Secrets Management: Never expose Firebase credentials or API keys in public repositories.
• Rate Limiting: Utilize Firebase security features to prevent abuse.

---

User Flow with Firebase/Firestore

1. User signs up or logs in via Firebase Auth (email/password or Google).
2. User creates or edits a song; changes are saved in Firestore.
3. Songs are synced in real-time across devices.
4. User can share songs with others by updating the sharedWith field.
5. Songs can be exported/imported in ChordPro format.
6. Optionally, users can choose other storage options (REST API, Google Drive, local files).

---

Summary Table: Storage Backends

Storage Option	Authentication	Real-time Sync	Offline Support	Sharing	Format
REST API	JWT/OAuth2	No	No	Yes	ChordPro
Google Drive	OAuth2	No	No	Yes	ChordPro
Local File	N/A	No	Yes	Manual	ChordPro
Firebase Firestore	Firebase Auth	Yes	Yes	Yes	ChordPro