About

The inspiration for this cloneable came from our No-Code Conf 2021 speed build challenge  — a friendly livestream competition where 8 contestants went head-to-head in a bracket-style competition to build something quickly and creatively in Webflow.
‍
To keep the audience informed with the schedule and results throughout the week, we created a fully responsive bracket, powered by the CMS, and updated it in real-time. The speed build challenge inspired us to push the limits of our own CMS and Designer. So, with March madness right around the corner, we expanded our initial 8 contestant bracket to 64!

How it works

At its core, the CMS is pretty simple. Two Collections drive the entire bracket:

  • Teams
  • Brackets

Teams

Teams are about as straightforward as you can imagine: name, logo, color, record, and a seed value that determines their location on the bracket.

Brackets

Bracket Structure

With brackets this big, it’s easier to think of them as smaller brackets inside of a big bracket. So inspired from other well-known tournaments, we divided 64 total teams into 4 brackets of 16 teams each. Those teams are aptly named West, East, South, and Midwest.

The bracket is structured into multiple rounds and multiple games — all of which converge and condense toward the middle of the bracket.
This bracket uses the CMS to bind data to the components on the page. Those components include:

  • Region — which area of the bracket (upper left/right or lower left/right)
  • Round — which series of games (X-axis)
  • Game — which matchup (Y-axis)

Bracket Rounds

Corresponding to the CMS, the Bracket Rounds collection identifies each individual matchup which is populated per region, per round, and per game. Put more simply, each item in the CMS is an individual matchup, and includes a dropdown for Region, Tournament Round, and Game Number to identify where it sits on the bracket and which teams are playing. It sounds a little complex at first, but when you look at both the CMS and the Designer, it’s easy to catch on!

The bracket rounds are organized by [region] [round] [game]. For example, the upper left portion of the bracket is the west region, so the upper left game is tied to the Collection item “west - first round - game 1”. This pattern continues throughout the bracket rounds Collection with the exception of the first four games, the final four games, and the championship.

All of this data is binded to the bracket via Collection Lists. You will notice that filters, sort orders, and conditional visibility have been used to ensure the correct data is being displayed within the bracket depending on the data entered.

Game Details

Using the CMS also allows us to create individual game detail pages with final scores, team logos and colors, and high-level team stats.

Conditional Visibility

Lastly, we use conditional visibility in a few places to fine tune placement and aesthetics:

  • Displaying the home or away team is actually set in the CMS. If a team is not set, the matchup will be shown as blank.
  • Each team in the game pods have two sets of data (seed #, name, and score). One set of data is to be displayed if the team won and the other is to be displayed if the team lost. Conditional visibility is set on these items using the “home team lost?” and “away team lost?” toggles.
  • Another conditional visibility is set on the champion banner. It’ll display the team who won based on the toggle in the “championship” item within the bracket rounds CMS Collection.