WickedRank

Engage in The Wicked Craniums community by ranking craniums in a head-to-head battle of aesthetics.

Comment

WickedRank

Inspiration

There are two key factors that determine the value of a cranium:

  1. Rarity (objective)
  2. Aesthetics (subjective)

The first point is well-covered by tools like https://rarity.tools/, a straightforward web app that calculates rarity scores by using a weighting algorithm based on the ratio of traits implicit in a fixed collection. But what about the second point of aesthetics? What if there was a tool that allowed users to rank craniums according to their subjective preference, completely leaving rarity by the wayside?

Resources like "rarity.tools" and Rarity Sniper provide an objective measure of property rarity. But who's to say the mix of properties are aesthetic? There's currently no way to learn the community's aesthetic sensibilities, and we aim to fix that with an application that:

  1. welcomes newcomers and veterans alike to the community
  2. adds another metric of value for craniums
  3. is just plain fun

What it does

The Home page explains the app with some summaries and FAQ's. Oh! And there's a fun lore easter egg, in which the written content is based on some Captain James material (but can be changed to align with official canon lore).

The Play page allows the user to select the more aesthetically pleasing of the two craniums pitted head-to-head against one another. We placed great focus on making a delightful and fast-paced game with slick animations that supports multiple playstyles. Perhaps you're slower and more thoughtful about your decisions. If you're streaming, maybe you want to consult the chat before making your selection. Or maybe you go in with a speed-run mentality where your selection is based on nothing more than your gut instinct.

The Rankings page enables the user to view the complete aesthetics rankings of The Wicked Craniums collection, determined from all games played within the Play page. As more games are played, the rankings will change. With greater participation over time, gaps may begin to widen between rankings, thus solidifying placements in our aesthetics leaderboard. The listed rankings can provide additional community value as a resource used in future competitions, raffles, or giveaways.

How we built it

Tech Stack

WickedRank is a Next.js React web app that utilizes a backend Node.js Express server that talks to a FaunaDB database.

Elo Rating System

Each round of the game results in an update to the two contestants' Elo ratings stored in our FaunaDB collection. All craniums begin with the same rating.

Challenges we ran into

  • Vercel only allows API requests with HTTPS, so we quickly had to figure out how to use OpenSSL to generate a self-signed certificate for our Express server
  • OpenSea's API had a hidden limit to its offset parameter which forced us to make additional API calls

Accomplishments that we're proud of

We're proud of our beautiful and performant UX and the rigorous functionality it provides. Most of all we're proud that we've managed to create something that can provide tons of value for the community.

What we learned

  • OpenSea API: Aside from the quirk listed above, OpenSea's API was straightforward. The lack of sophisticated authentication enabled us to move quickly.

  • Framer Motion: This was our first time using this front-end animation library, and we were really satifised with the software principles and patterns of the library. We're super pleased with how the animations came out.

  • Next.js: We've used Gatsby.js in the past and heard wonderful things about Next.js, its primary competitor. Next.js's client-side routing tools and build process were effortless to use. We'll definitely consider using this again in the future.

What's next for WickedRank

Here are several additions and improvements we're keen to implement soon:

  • More community-focused metrics, like number of unique pairs of craniums seen (100% here would be a huge achievement for the community and would be cause for a celebration)
  • Potentially adding a "draw" button if the user can't decide between two contestants in the game
  • Surfacing more info on the Rankings page without having to click to the dialog to see it
  • Adding a variety of filtering and sorting tools (we originally did have min, max, and sort controls but they didn't work well with the infinite scroll approach we took to load in the rankings)
  • Creating an API so folks like danner can include data into his Dune Analytics dashboard, create a Discord bot (just imagine a new !rank or !aesthetics command), and integrate with the Cradle
  • Holding aesthetics-related giveaways as one of, if not the first, NFT community to have its own sophisticated Elo rating tool (more participation means more confident data)

Demo Site Instructions

Because we use a self-signed SSL certificate for the Express server, your browser likely won't allow the API call and give you the following error code: net::ERR_CERT_AUTHORITY_INVALID. The way around that is to allowlist the origin of the server, which is https://143.244.161.90:3001. We found that the Edge browser automatically does that by visiting https://143.244.161.90:3001/api/exposure, and clicking through the "Advanced options" -> "Continue anyways". After doing so, refresh https://wickedrank.vercel.app, and data should start flowing in.

Built With

Share this project:

Updates