Zwift Achievements Showcase

I started using the indoor-cycling workout app Zwift right at the start December last year. I’ve been a huge fan ever since!

If you’re not familiar with Zwift, think of it as a more accessible alternative to Peloton. It’s a work out app, and a community, that you can easily hook up with any Bluetooth-enabled bike (like the Pooboo D616, which I use), or you can even build your own.

At first, I’ve been using their pre-made Zwift workouts, but lately I’ve been really enjoying unlocking all the achievement badges.

Unfortunately, there doesn’t seem to be an easy way to showcase them, so I figured I can put something together that others can easily reuse.

How to manage your achievements

Below I will walk you through two easy options that let you host your showcase page for free. Regardless of where you decide to host it, the first step will be to download the project files from the project’s GitHub page. (Here’s the direct link that downloads a ZIP file.) With the project files open, go to the data folder, and rename the file my-achievements.example.json to my-achievements.json. You can edit this file in any text or code editor, but if you’re having trouble opening it, you can skip this step for now and edit the file after you upload it following the instructions below.

You will notice the following structure:

{
  "General achievements": {
    "show": true,
    "badges": [
    ]
  },
  "Cycling achievements": {
    "show": true,
    "badges": [
    ]
  },
  "Running achievements": {
    "show": false,
    "badges": []
  },
  "Extra credit": {
    "show": true,
    "badges": []
  },
  "Route achievements": {
    "show": true,
    "badges": [
    ]
  }
}

You can change "show": true to "show": false" to hide any of these sections. For example, I only use Zwift with my stationary bike, so I have the running achievements hidden.

To add badges, simply add the name of the achievement inside its corresponding section. Here’s a simple example with a few badges in some of the sections, and the “Running achievements” badges disabled.

{
  "General achievements": {
    "show": true,
    "badges": [
      "Habitual",
      "You're Popular",
      "Ride On"
    ]
  },
  "Cycling achievements": {
    "show": true,
    "badges": [
      "Can't Stop Now",
      "Speed Demon",
      "Warmed Up"
    ]
  },
  "Running achievements": {
    "show": false,
    "badges": []
  },
  "Extra credit": {
    "show": true,
    "badges": [
    ]
  },
  "Route achievements": {
    "show": true,
    "badges": [
      "Volcano Circuit",
      "Hilly Route",
      "Flat Route",
      "Volcano Circuit CCW",
      "Volcano Flat"
    ]
  }
}

Hosting on Neocities

Once you sign up for an account on neocities.org, head to your dashboard. Here you can simply drag and drop all the files into the upload section.

Note that some of the files will be rejected, but these are not needed for the site to function. Once the upload is finished, you can return to the dashboard and click the URL of your site on top of the page to view your showcase.

Hosting with Glitch

First, import the project from GitHub. After the import finishes, click the Preview button on bottom of the screen, and then either of the two options that will pop up to see your showcase page.

More hosting options

I kept the project structure as simple as possible to make it easy to host anywhere. If you’re more technically inclined, you can also extend the project, customize the styles, tweak it to your liking. Do note that if you intend to deploy it using git, you will want to update the .gitignore file, which currently prevents the my-achievements.json file inside the data folder from being committed,

Hope you’ll enjoy the project, and feel free to share it with me, or reach out if you have any questions!