Beat Wall

A mini beat-sharing site: likes, a most-liked list, and a button that opens a beat in RockBlocks.

0/5 steps

Step 1: Likes on the server

Read the starter first: server.py saves beats and lists them, and app.js puts a card on the wall for each one. (If the wall is empty, it saves three demo beats.)

Add a "like" action to server.py. It adds 1 to store[name]["likes"] and returns {"ok": True, "likes": …} with the new count.

If the name isn't in store, return ok False instead.

  • ○Liking a beat twice gives 2 likes
  • ○Liking a beat that doesn't exist gets ok: False

💡 Who uses this? Social apps run on this: save posts, count likes, sort by what's popular. The recommendation systems at YouTube and Spotify are much fancier versions of "sort by likes".

📖 Studio guide

index.html is what's on the page, style.css is how it looks, app.js is what it does (the frontend), and server.py is your Python backend. It keeps running between requests, and anything in the store dictionary is saved even after a reload.

  • rb.play("kick")Play one drum right now. rb.play("snare", 2) plays two quick hits.
  • rb.playBeat({ kick: [1, 5], snare: [3, 7] })Loop a whole beat, like the course's drum commands. [3, 2] means beat 3 with 2 hits. Add a tempo: rb.playBeat(beat, 120).
  • rb.stop()Stop the beat.
  • await rb.server({ action: "save" })Send a request to your server.py's handle(request) and wait for its answer.
  • rb.saveBeat({ kick: [1, 5] })Open a beat in RockBlocks, in a new tab.
  • rb.msPerBeat(120)How many milliseconds one beat lasts at that tempo — handy for setInterval.

Drums: crash, ride, openhat, hihat, hightom, tom, lowtom, rimshot, snare, kick

Your app
Console

console.log() and your server's print() show up here.