roryokane/golubitsky-music-flashcards

Tools for practicing

This project was bootstrapped with Create React App.

Develop

npm start

App is live and reload on save is enabled.

Test

npm test

Deploy

This occurs automatically on push to master.

npm run deploy

App is live.

TODO

Features

• Display all 12 notes in random order.
  • Sometimes with flats.
  • Sometimes with sharps.
• Flashcards for polychord fractions.
  • Cards probably shouldn't be duplicated for front/back. Consumer should flip them.
• Flashcards for six and seven chord equality.
  • Half diminished 7 == minor 6
  • minor 7 == major 6
• Flashcards for chord -> mode
  • Major
  • Melodic minor
  • Harmonic minor
  • Natural minor (same as major)
  • A single page to display all data.
• Flashcards for scale degree -> mode.
• Flashcards for flatted scale degrees -> mode.
• Flashcards for half-dim7 == minor 6 chords.
• Flashcards for turnarounds (e.g. C A D G) and/or cool progressions.
  • ii V⁷ [ii V⁷]/ii (d G⁷ e A⁷)
  • ii V⁷ I△ V⁷/ii (d G⁷ C△ A⁷)
  • [ii V⁷]/iii [ii V⁷]/ii ii V⁷ I△ (f# B⁷ e A⁷ d G⁷ C△)
  • Minor 1 6 2 5 (i.e Bésame/My Favorite)
• Flashcards for intervals
  • Ascending
  • Descending (implemented via "Reverse" but this isn't a good solution for all sensible notes)
  • Descending (truly)
  • Ear training. Tones. Use this?
  • Thirds and Sevenths
    • △, m7, 7
    • o
    • ø —— might not be necessary, 3 and 7 are same as for m7.
  • 7th chords: all 4 notes.
    • Per quality.
    • All qualities.
    • Shuffled notes.
  • Triads (having realized that there are 24 permutations of each 7th chord!)
    • Per quality (M, m, dim, aug).
    • All qualities.
    • Shuffled notes.
• Flashcards UI enhancements.
  • Customization of how the lines on a flashcard will be displayed (i.e. 'main' + 'supporting'; or all same size); see Stella progression.
  • Indicate current deck (perhaps on card).
  • Front/Back is a toggle (relevant after multiple types of flashcards).
  • Optimize button placement for mobile.
  • Change behavior of "tap on card" to: 1st tap: flip card; 2nd tap: show random card.
  • Rows of buttons.
  • Implement DisplayNames.
• Random rhythms.
• Flash Cards: separate sub-screens per deckType.
  • Main menu (i.e. existing FlashCards screen) to list only deckTypes.
  • Each deckType has its own screen and has buttons for its decks + options.

Technical

• Refactor chordParser. Seek recursive implementation.
• I wouldn’t write anything serious in JavaScript without https://lodash.com/, which includes such niceties as _.shuffle, _.sum, and _.cloneDeep. Alternative libraries such as https://ramdajs.com/ can serve this purpose too.
• For your prototype, CSS Grid looks more appropriate than Flexbox. It has been safe to use in production for at least a year: https://caniuse.com/css-grid It has more properties to keep track of than Flexbox, but https://grid.layoutit.com/ makes them trivial to keep straight. After you learn what terms like “gap” and fr mean, I think there’s no need to hand-write the CSS for your grids; that tool can do it more easily.
• CSS: how to use CSS Grid (like 4 columns by 3 rows) to fill parent container horizontally and vertically?
• CSS: how to set font-size based on parent container size?
• Move shuffle logic out of UI
• Unskip interval tests.
• Flashcards
  • 2 lines of text on each back side (to support different formatting/smaller for second line).
  • 3 lines of text on each side. Simplify to single array to hold all lines per side.
  • DeckSelection React Component. Does this require state management? (no)
  • Export constants, not functions.
  • Move deck definitions out of UI.
  • Do not export DECKS (solution was to remove DECKS and rename AVAILABLE_DECKS -> DECKS).
  • Use deck.displayName to make prettier UI.
  • Clean up deck selection logic in the UI (abstract more).
• Seems like layers is the way to go: foundation, services, screens.
• Use consistent flat symbol throughout codebase (polychordFractions seem to have the symbol, others use letter "b").
• Constantize flat, sharp symbols.
• Constantize intervals. Possibly chord symbols/intervals should be in separate constants.
• Refactor chords.js tests to be more data-driven/DRY.
• notesInOneChord should be in its own module.
• Omitting "M" from Major chords could be DRYer.
• Prototype state management from child screen to parent screen (use one of the existing toggles).
• Use absolute imports using jsconfig.json to make it easier to move files around.
• Prototype end-to-end testing with cypress.