Hate starting new songs? Get started!
Starting a new song can be hard. Your lyrics feel uninspired. You keep falling into the same chord progressions. It's too hard to be original. Let the app do the work for you.
- Create a song at the click of a button!
- Choose which key to write a song in, and choose between major and minor.
- Want to add a little spice, add seventh chords!
- A song is generated with four lines of poetry, and a set of four chords.
- Play the chords by clicking on them!
- View the full poem, OR write your own lyrics.
- Songs can be saved and retrieved at a later date, thanks to local storage.
Visit the site and give it a try!
When the application is opened, a set of instructions is displayed below the header.
Home page example
A user can select a key, choose major or minor, or to display 'seventh' chords. When a user clicks "New Song" a song with four lines of poetry, and four chords in the chosen key, are displayed. A user can even click on each chord, to hear it!
The song display with lyrics and chords
If a user likes what they've made, they can click on "Save Song". Saved songs are displayed on the "Saved Songs" page. A user can choose to view the song in it's intirety just by clicking "Show Song".
User saving songs
If a user wants to view more than four lines of the poem, they can select "see full poem" at the bottom of the lyric display. The full poem will be displays on a new page.
Full poem being displays
Users can choose to add their own lyrics by clicking on 'add your own lyrics'. These lyrics can be added to their song, and will be saved with the chord progression."
User adding new lyrics
If a URL path doesn't exist, or a fetch call fails, an error message is displayed.
Error message is displaying!
Song Start can also be used on mobile devices.
Mobile view!
- React
- TonalJS
- PoetryDB
- Howler.js
- Router
- Cypress for Testing
- CSS / SASS
- HTML
- Lighthouse for accessibility auditing
- User can search for keywords in the poetry database.
- User can have automated playback with their chord progression.
- User can set tempo for chords to play.
- User can choose to have chords play once, twice, or four times per measure.
- Service worker to cache sound files and speed up loading.
Thank you Greyson Elkins, for your guidance, advice, and code review.
To contribute, or view the file architecture, clone this repo:
git clone git@github.com:DrewBradley/song-starter.git
Change directories into the root directory:
cd song-starter
Install dependencies:
npm install
Create a new branch and name it according to your contribution:
git checkout -b <your-name>/feature/<your-feature-name>
Check the package.json to familiarize yourself with dependencies:
TonalandHowlercypress
To test files, run cypress.io
npm run cypress- When cypress opens, select which test to run. Files should end in
spec.js.
| Drew Bradley GH |
 |