This project was bootstrapped with Create React App.
npm start
App is live and reload on save is enabled.
npm test
This occurs automatically on push to master
.
npm run deploy
App is live.
- 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.
- 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.