A website that visualizes the tournament bracket from the Champs in the Making podcast!
This website is built using a combination of SvelteKit and PostgreSQL. It is still being updated with new features and matchups.
Champs in the Making is a podcast where the hosts of the Moonshot Podcast Network (previously named The Orange Groves podcast network) take a bracket of all of the Pokémon in existence and decide pair by pair, which one they want more. Since I am friends with many members of this network, I decided to take some time creating a website that can convey this bracket in a visual form.
I have used Svelte a little in the past, but I have never used it for a Full Stack website. As SvelteKit recently hit 1.0, now is a perfect time for me to try using it for myself.
For better or worse, I like minimizing the amount of JavaScript required to view a website. The HTML and CSS should be able to stand on their own, and the JavaScript that remains should be used to improve upon that experience. Admittedly, this is difficult to do with a framework like Svelte. After all, frameworks themselves are reliant on it. But even though that is true, a significant portion of the content can be created with Server-Side Rendering before being sent to the client. This means that a significant part of the website that would rely on JavaScript does not need to be run on the client, and because of that, users who cannot use Javascript miss less of the application.
While this is starting as a way to display one tournament bracket, I want to keep this open to the idea that it can be extended to others as well. This means that I need to be able to eventually support user-inputs and different types of rules used in different types of brackets. While those details don't need to be at the front of my brain right now, they should be in the back of my mind as I continue to make architecture decisions.
Throughout the creation of this website, a decent number of unexpected challenges have come up. Here are some that come to mind:
- How to query large amounts of nested data using PostgreSQL
- How to query recursively using PostgreSQL (not currently used in the project)
- How to draw generic, resizeable curves using SVG (partially solved at this point since curves that are not C2 continuous at points other than the center still can be deformed)
- How to design a bracket where previous rounds can be shuffled to reflect the order of future rounds
- How to create a custom Red Black Tree capable of defining an arbitrary ordering of elements (not currently used in the project)
- How to achieve specific CSS styling effects such as fading while scrolling (partially solved, but not entirely)
- How to draw connection lines for an entrant moving between rounds (solved with client-side JavaScript so far)
- How to create a dynamic layout for matches that adjust based on the particpants around them (not solved yet)
In order to run the application for yourself, you will first need to install dependencies with pnpm install (or npm install or yarn). Also, you will need a tournament database to load the relevant data into the application. I am currently keeping that information here! Once that is installed, you will need to run the create script to generate your database.
From here, you can start a development server with the command:
pnpm run dev
# or start the server and open the app in a new browser tab
pnpm run dev -- --openIf you would prefer to create a production build, you can do that using
pnpm run buildYou can also preview the production build with pnpm run preview.
One short-term goal is to add more data anlysis features to the website. This can lead to a really fun exploration of trends that have occured throughout the entirety of the bracket. My ultimate future goal for this website is for users to be able to submit their own pokemon bracket results to the website. This would greatly expand what the website represents and can tie back in with some of the data analysis ideas from before.