Digital Repertoire App

This project is a digital repertoire and chord management app designed for (amateur) guitarists. It allows users to manage their song library, including tagging, formatting chords, editing, and importing/exporting songs. This README includes details of the design, my current progress, and ideas for future improvements.

Current progress

• ☑️ Search (index) page is fully implemented.
• ☑️ Database (saving/loading) is fully implemented.
• ☑️ Editor page works (except the split button), but there might be bugs.
• ☑️ Usable in Android as a proof of concept.
• ❌ Not working on web, as database is not ported yet.
• ❌ Editor page split button is not working.
• ❌ Editor might have bugs, the logic is janky.
• ❌ Chord selecting is not ergonomic for a mobile app.
• ❌ No settings page.
• ❌ UI is mostly WIP, needs tweaking, and testing.
• ❌ No way to import/export/share songs (including bulk operations).
• ❌ No OCR or AI.

Data Structure

The core structure of the app revolves around how songs and chords are stored. Each new song is saved as an entry in the JSON song database. The song name is the main method of access and search. Everything else (e.g., genre, composer) is categorized using tags. Tags are case-insensitive. Lyrics and chords are stored in SongJson objects. Chords are marked with stylings. Additional style markers are disabled.

Database
- lastSongId: int // id of the last song added (used as song id increment)
- songs: Song[]   // list of song objects

Song
- id: int         // id of song
- name: str       // name of the song (not unique)
- SongJson: str   // object of song text and chords   
- tags: str[]     // list of tags (tags are strings)
- mod_date: int   // modification date of song 

SongJson
- text: str                            // lyrics of song
- selections: [start: int, end: int][] // A way for storing chord locations 

App Structure

• Home / Search Page

  • Allows search by song name
  • Allows search by tag
  • Sorting by modification date
  • Combination of search and sort options
  • Songs are shown as a grid or list view (user preference set in settings)
  • Clicking a song opens it in the Viewer page
  • Long pressing on a song opens selection and deletion mode

• Editor Page

  • Song text edit
  • Change name
  • Transpose chords
  • Change font size,
  • Toggle text alignment (split)
  • Add or remove tags
  • Save as new or update existing

Editor Page

This page will have the following components in editor mode:

• Save Button
• Transpose Button +/-
• Scale Text Button +/-
• Split Text Button
• Select Chord Button
• Tag Selector Button
• Undo/Redo buttons
• Tags Bar

Import / Export

The app should support importing and exporting songs in the following formats:

• txt
• docx
• pdf
• png*

(*PNG import may require OCR or AI-powered text recognition, especially for handwritten lyrics. This can be developed later if needed.)

Settings

• Language selection
• Theme (light/dark/custom)
• Chord color settings
• Optional API key for OCR or AI
• Mass import/export tools (optional, can also be part of settings)

Additional Features

• Multi-selection for tags and songs (e.g., bulk delete or bulk tagging)
• Sharing songs from the viewer page (e.g., sending as text or PDF)

How does songs stored and processed?

Songs are stored as a JSONs in the DB. Those JSONs are very simple in structure. They consist of two components:

• Song text
• An array conatining a pair of starting (inc.) and ending (exc.) indexes of selections (chords) For example:

{
   text: "This is an example string, really simple!",
   selections: [(0, 4), (19, 25)]
}

To select "This" and "string".

Those JSONs are stringified for storing in the DB. The "selections" can be used to implement any kind of functionality, or style, only to selected parts. In this case, they will be used to select, style, and modify our chords.

Initial purpose of the selection of chords, is to be able to style them with ease, and to be able transpose them. The editor in the project, 10tap, uses TipTap library internally. It uses a special kind of JSON object to store and display the content. So, to use the songJSON, we must convert it to the editorJSON first.

For viewing mode:

1. Display content:
   1. Simply convert songJSON to editorJSON
2. Transpose:
   1. Extract chords from songJSON
   2. Transpose each legal chord
   3. Skip illegal ones
   4. Convert newSongJSON to newEditorJSON and set content
3. Scale:
   1. Change editor font style -> font size
4. Split:
   1. NA
5. Save:
   1. Convert editorJSON to songJSON
   2. Save marks as selections
   3. To be able to save correctly, disable shortcut-key-markings. (Ctrl+B bold etc.)
   4. Create a new SONG object, also updating tags and modify date
   5. Save back to DB
6. Mark:
   1. Marks directly songJSON
7. Tag Selector:
   1. Index tag selector

How buttons control the editor?

All editor buttons (in the editor toolbar) have access to the songJSON of the song. In editor and viewer mode, function calls modify the songJSON directly.

• songJSON is shared as a state variable.
• Only the main editor component has a editorJSON, which automatically changes as the songJSON changes.

Adding new songs

A new song can be added by one of the following methods:

1. Create a blank new song (From the homepage)
2. Save a copy of a song (While saving, click "save as copy")
3. Importing a single song (From settings)
4. Bulk importing multiple songs (From settings)

Removing songs

A song can be removed only from the home (index) page.

1. Long press on a song to select it
2. Now in selection-deletion mode
3. Press on other songs to select them
4. Press on selected to unselect
5. At the top (header) show bulk operations (remove, export, share etc.)