567 dance! 💃

Try the demo 🕺

Hello! raulmar here :) I have developed this application with ♥️ for you to a blast learning and practicing your Latin rhythmic skills. You can contact me on raulmar.me

First, you have the instrument components, which consist of a mute/unmute switch and a volume slider, with the only exception of the voice component, as I have added counter buttons so you can choose the desired count. Also, at the bottom you have the rhythm controls to control the speed.

Technical info

This app is built with

• ⚛️ React and vanilla CSS for the UI
• 🔒 TypeScript for type safety
• 🔈 Howler for audio manipulation
• ⚡️ Capacitor for native app build
• 🎣 React Hooks and context
• 🔨 GitHub Actions
• 📦 Vite as bundler

The main part of this project is what I call the rhythm engine, which is made of a setInterval that iterates over an array representing the 16 beats of the salsa rhythm (8 regular beats and 8 intermediate beats).

Getting started

If you want to use the app locally run:

git clone https://github.com/raulmar0/567-dance.git
cd 567-dance
npm i
npm run dev

If you want to try the app on iOS or Android, first remove the base url in vite.config.js. Then:

git clone https://github.com/raulmar0/567-dance.git
cd 567-dance
npm i
npm run mobile:ios / npm run mobile:android

and when Android Studio or Xcode opens, click on run.

Figma mockup vs final design