Duo Ludio

Check it out here!

For a person who needs help concentrating, Duo Ludio is a web app that provides categorized binaural beats. Unlike other binaural beats players, this product is accessible anywhere since it has the option of being installed offline on any device.

The name Duo Ludio is Latin for "Two Player" ("Two" for binaural beats).

Installation

1. Install node.js 10.
2. Clone the repository using one of the following methods.
   • SSH: git clone git@github.com:neelkamath/duo-ludio.git
   • HTTPS: git clone https://github.com/neelkamath/duo-ludio.git
3. cd duo-ludio
4. npm i
5. Generate service worker: npm run sw

Usage

Development

npm run dev

Open http://localhost:1234 in your browser.

Testing Precaching

Run the following each time you have new files to test for precaching.

1. Build: npm run dev
2. After the files have been built, stop the server to run another command: Ctrl+C/command+C
3. Update service worker: npm run sw
4. Update build with updated service worker: npm run dev
5. Open http://localhost:1234 in your browser.

Production

1. Build: npm run build
2. Update service worker: npm run sw
3. Update build with updated service worker: npm run build

The dist/ directory will contain the built website.

Documentation

1. npm run doc
2. Open docs/index.html in your browser.

Testing

npm t

Documentation

Styling

The Material Design spec is not to be followed strictly, but as a guideline. Theming for things such as favicons are taken from Vaadin's Material Design specs.

The background color is #fff, and the theme color is #6200ee (both CSS colors).

TypeScript

Parcel leaks an implementation detail for certain uses of async/await (see this issue). As a workaround, the statement import 'regenerator-runtime/runtime'; is included in certain files.

All web components are imported in src/ts/web_components/components.ts.

When using TypeDoc to document web components, use the custom @attribute field to document the element's attributes.

Mandatory attribute documentation example:

@attribute `aria-label` (required) ARIA label (e.g., `Confirm deleting category Meditation`)

Optional attribute documentation example:

@attribute `aria-label` (optional, default: `Confirm`) ARIA label (e.g., `Confirm deleting category Meditation`)

TypeDoc does'nt allow you to use the event in places such as constructors. A workaround is to document Events by creating and documenting private methods which dispatch them.

Binaural Beats

The binaural beats used are from the v6.0.2 release of the Binaural Beats Dataset. The src directory from the dataset is saved as src/binaural_beats in this repo.

Continuous Deployment

Continuous delivery has been setup using Netlify to automatically update the production web app whenever there's a new commit to the master branch.

Favicon

favicon.io is used to generate the favicon. Generate it as shown below.

Storage

localForage is used to persist data.

categories

The abstraction layer for the categories item is src/ts/storage/categories.ts.

The categories item contains the user's binaural beats collection. Each key is the name of a category. Each value is an array of strings denoting the names of tracks. Track names correspond to tracks in the directory src/binaural_beats/tracks/. An example is shown below.

{
  "Meditation": [
    "Theta_6_Hz_Isochronic_Pulses.aac"
  ]
}

Binaural Beats

To access metadata on binaural beats (which are stored in src/binaural_beats/data.json), use the abstraction layer src/ts/storage/beats.ts.

Each track is downloaded a localForage item of the same name. For example, Alpha_8_Hz.mp3's Blob is saved to the Alpha_8_Hz.mp3 item.

Credits

• Description: How to Create a Product Vision by Joel Spolsky
• Favicon: favicon.io
• Binaural Beats Dataset

License

This project is under the MIT License.