Acappella Championships

Congrats! You are a building a website for the the Collegiate A Cappella Network. Below are the app deliverables.

You will be using the json-server package to mock an external API. You can make the same RESTful requests to this server that you would to any API. If you haven't yet, install json-server.

npm install -g json-server

Then run the server with:

json-server db.json

This will serve your code on http://localhost:3000.


  • Your list of a cappella groups must be fetched from http://localhost:3000/a_cappella_groups
  • Get the list of groups to display on the page and fill the table with relevant information.
  • Your table HTML might look something like this: <tr><td>*Insert College*</td> <td>*Insert Group Name*</td> <td>*Insert Membership*</td> <td>*Insert Division*</td> <td><img src='./assets/trophy.png' data-id='*put an id here*'/></td> </tr>
  • On click of a button, remove the associated group from the table and add it to the Winner h2.
  • If you are struggling with identifying which group has been clicked, try reading this.
  • BONUS: If a new group is selected as winner, the new group should be removed from the table and replace the old group in the Winner h2. The old group should also return to the table. At any given time, all groups should be visible on the app, but each should appear only once.
  • DOUBLE BONUS: Can you add a delete button which removes a group from the competition table?
  • TRIPLE BONUS: Can you make clicking on a table headers sort by that column attribute?


Unlock your future in tech
Learn to code.

Learn about Flatiron School's Mission

With a new take on education that falls somewhere between self-taught prodigy and four-year computer science degree, the Flatiron School promises to turn students with little programming experience into developers.

In the six months since the Manhattan coding school was acquired by WeWork, it has spawned locations in Washington, D.C., Brooklyn, and London. Now, WeWork is opening a fourth Flatiron School location, this time in Houston.

Adam Enbar, Flatiron School's cofounder, believes now is the time to grow. "How the world is changing has impacted working and learning in very similar ways. We think education fundamentally is about one thing: enabling people to pursue a better life."

Learn. Love. Code.
Students come to Flatiron School to change their lives. Join our driven community of career-changers and master the skills you need to become a software engineer or a data scientist.
Find Us