Building DBDFF - NFT Fantasy Football on Cronos

Ideation

When Pandalaki, the dev of Dead Beat Dads, told me about his idea of a Fantasy Football app using NFTs, I was instantly intrigued. Cards, players, football, and NFTs just seem meant to be together. I had also already fantasized about NFT fantasy football in the past. My response, to me, was obvious, "Yes."

The initial roadmap was fairly straight forward to transfer into development. To Pandalaki's credit, much of the thinking was already done and significantly documented.

1. Five positions - QB, RB, WR, TE, and Defense (DEF)
2. Each position has various scoring metrics (Passing, Running, etc.)
3. A full line up requires one player of each position
4. Users need a full line up to particpate
5. Each position has a different but similar scoring algorithm
6. Better stats from the submitted player (NFT) give a weighted advantage in the user's score for that position
7. Each position is weighted against the stats of the team that player is facing that week
8. The scores of each position are added together to get the score of the whole team
9. Bonus: Trophy Wives, another NFT collection from Dead Beat Dads, could be submitted with each player to give a bonus to that players scores
10. Two teams are paired
11. Top 32 teams at the end of the season go to the playoffss
12. Playoffs are single elimination

Notes:

1. The NFGL, or National Fat Guy League, is the basis of the simulated league and scoring
2. Pandalaki already had a full-season schedule of NFGL pairings
3. Pandalaki already had 32 teams with stats and home/away advantages
4. Pandalaki already had the NFT's designed, with metadata

I said it was fairly straight forward. Maybe you are laughing at me about that. I may have even got a minor detial or two wrong in my list there. But to develop this one has to see through the all the details to see how the details can work. If that makes sense. 

These requirements of the heart application could be more simply be remembered as:

1. Users have NFTs
2. Users create line ups with their NFTs
3. NFT metadata goes into a scoring API
4. Database (we agreed Web2 is fine) stores outcomes of matches

#DBDFF Art for Draft Page credits Pandalaki

The Stack - Getting Started

An application of this extensivity would be amiss without some planning. After drawing up some data structure and surveying the options and cohesiveness of the various fullstack parts, we began work on a static home page and attached informational pages.

The Frontend

The library of choice was Next.js. Next.js combines the power React with the SEO friendly, and blazing fast load times of staticly generated web pages. This allows an application to also function as a highend website.

The Backend

Next.js's serverless functions and api route also allow for enough Node power to get everything done that needed to be done in this fantasy football app. The library streamlines the transistion of data from server side to client side to better define and more easily secure which data operations can and cannot be accessed.

Next.js is also used and documented by any Web3 code structure I come across.

The Data

Because of my familiarity with MongoDB, the convenient integration of MongoDB with Next.js and the scalability of MongoDB, starting at free, was the chosen database was MongoDB. This database would store users simple profiles (name (optional), wallet, and _id) and all the data associated with the scores, matches, and seasons.

Authentication

Keeping up with Web3 authentication is a daunting task. Wallets update frequently and the packages the wallets also update. Blockchain and Web3 are ever evolving.

Next.js is also always evolving. It is possibly the fastest growing Javascripte library by usage.

A user needs to be able create an account and sign in, securely. While, compared to a web2 authentication, the amount of data to be taken from a user is minimal, what is in the wallet requires top security.

For these reason, I went with an established and reputable auth SDK from Thirdweb. This saved the repetitveness of adding different wallets and avoided the probably impossible task of one person trying to keep up with all the updates.

The user's log in with their wallet, have their data (besides user name) encrypted, and have protected rights to interacting with their account.

The NFTs

As stated, the NFTs were to be minted on Cronos blockchain. Any EVM chain basically works the same and the core fundamentals here were the ability to query the blockchain for metadata, show it to the users, and use the selected metadata in the scoring alogithms. And, of course, people need somewhere to mint their players right? #CronosNFTS

Choose Wide Receiver Screen shows NFT metadata as Stats

Beyond a Website

While the these key components of the stack may or may not seem fairly straight forward, its getting them in sync that takes time. After the styles are made, the resuable components (like buttons) are made, the auth is set up, and data in flowing in and out of the DB, the expansion is easy. Or is it?

The Dashboard

The dashboard is where logged in users do all their submissions and see all their individualized content. This is were users see their players, submit their line ups, view their matchups, and check their scores history and standings.

In the dashboard, lives the heart of the application, the line up submission form. 

Lineups

Players visit the lineup page to submit their lineups. The line up page allows users to see what NFTs are in their wallet and displays, what is technically, a form for users to submit to.

Users select a QB, RB, WR, TE, and DEF. They can also select a Trophy Wife for each position. The user, having attached one of each position (TW's are optional) clicks submit and a success message appears.

Line up submission - Sorry for poor image qualities(from old texts)

Seems straight forward? Well it's not. And that's from the guy that said the planning of this was pretty straight forward.

What if a user doesn't have at least one of each position? They need to be notififed and they cant submit. That's serverside checks and client side display.

What if a user already submitted a team this week? They need to be notififed and they cant submit. That's serverside checks and client side display.

What if a player submits and sends their NFTs to another wallet to submit again? Their submission needs to be rejected. That's serverside checks and client side display.

What is a player tampers with the frontend and tries to an NFT they do not own? That's serverside checks and client side display.

What if the player goes to the lineup page after the deadline to submit? They need to be notififed and they cant submit. That's serverside checks and client side display.

What if it's a playoff week and the user didn't qualify? They need to be notififed and they cant submit. That's serverside checks and client side display.

I think you get the point. 

Security and What If's?

The logic of both the user experience and, even more so, the integrity of the game was the most strenous part of building a fantasy footbal app using NFTs. This hybrid app setup plugs in user controlled data to a database that most be protected and controlled.

From a UI/UX perspective, users not conforming to the requirements of the apps, most be guided through a simple experience that illustrates to the user what is happening and why. 

I think there ended up being nine main different options of what happens just from a user entering the line up submission page.

The Scoring

The scoring alogrithms are simply described as random numbers, within a range, that are affected by the stats of the players, the opposing team, whether the team is home or away, and the Trophy Wives.

The actual algorithms though, are a masterful piece of work designed by Pandalaki. You can read more about the season, game, and scoring setups in this Dead Beat Dads Fantasy Football 🏈 informational blog on Medium.

My job with the scores was to translate (as we called it) Pandlaki's spreadsheet algorithms into Javascript. And make sure they work as code of course. We also had to account for "Odd man out scenarios" when an off amount of accounts submitted or somone doesn't submit in the playoffs.

Sample Scores from DBDFF Scores Page

When it's time to score a player, the metadata is entered into the corresponding algorithm and combined with the other scores to display the output. These scores are saved in their own part of the database and "linked" to the corresponding matchups. 

This allows for users to see the their match up for the week and also view their history of scores.

It's also needed to decide things like who goes to the playoffs and who wins the championship.

But this was the key to making the app work. Legitimate data submission and tested scoring. Once the data is entered securely and correctly, making it come back out of the database and display on the screen is comparatively easy.

Testing

DBDFF was tested...and tested..and tested...and tested. And when we were done testing, we started Beta testing. It's happening as I write this blog. Beta testing allows more users, across more browsers, with more wallets, to test the app. So far it is going smooth. I'd like to think the MONTHS of testing Pandalaki and I did along the way helped 😉

Shout to Pandalaki and Dead Beat Dads Community

Pandalaki - DBDFF DEV

First off all I was impressed by Pandalaki from the beginning. The amount of preparation he had the first time we talked was astounding. This showed me two things:

1. Belief in his project - Pandalaki believed enough his ideas, his project, and himself to invest the time (and money) to make it happen
2. Commitment to completion - The amount of work that went into designing teams, seasons, schedules, nft metadata, and not to mention the NFT art, had to have been tremendous

But the impressiveness did not stop there. Pandalaki spent countless hours with me in video calls, text conversations, texting, and updating our shared Google drive.

There were times I was 10 hours into a day and saw 10 more days ahead until one part of the app was done (and tested) and Pandalaki would say, "No rush, we need to get it right."

If every dev had this commitment and integrity the NFT scene would be a lot better place.

Dead Beat Dads and the DBD Community

Secondly, DBD and the community are pretty awesome. Maybe that's expected when the target audience for a project is a bunch of grown men that like NFTs and are comfortable enough to joke that they're slacking. 

Recently, I met some of the communty members in Discord. They're helpful, too the point, but also still have fun with Beta testing. 

My Key Takeaways

Throughout the struggles, the successes, and the "ah-ha!" moments, I learned a tremendous amount. I advanced in my knowledge of databases, Web3 integration, and even pushed to new limits in state management.

My knowledge of database queries and updates expanded to where I could see how a store could make a shopping cart, store the shopping cart as pending, purchases, shipped or delivered, and update the DB for each product, size, color, and price, along the way.

While this was not my first time using Web3 auth, NFT metadata, or creating NFTs and a minting page, this was my first time combining all those elements in a such a unique, cohesive, utility-driven, and Web3-required way.

State managment went to new levels on pages like the lineup page. For example, to save on API usage when getting NFT metadata, if there is not current week, or there is no current time to submit, the app won't even query the blockchain. That same page will tell someone if they are missing a position before loading the form. That same page will only allow those that qualify to the playoffs to submit. And so on.

NFTs and State Management

And that got me thinking, state management with NFTs could be severly evolved. Yes, we have token gating, we have Web3 social media, but what about state management?

What if Twitter Blue gave you NFT that blocked ads? What Facebook sold NFT's to gain access to Marketplace? What if another NFT allowed you to see your analytics? What if another, as an add on to a regualr chat, an NFT let you see the projected trends of stock charts as predicted by a backtested neural network?

This is where I'd like to spend more time in the future. (Also hoping to expand on DBFF)

Wrap Up and Connect with DBDFF

I hope you found something you enjoyed here. I wrote to share my journey in building this bad ass app but also draw a parrallel between the work I put in to the work Pandalaki put in.

The app ended up being over 10,000 lines of code and about 400 hours on my part. Pandalaki was there along the way, giving feedback and critiques, but also helping with the logic of it all. He was also writing, creating art, managing a community, networking, and making social media material along the way. 

To learn more about DBDFF you can visit the DBDFF Website. All the links are there.

Maybe I'll see you out on the DBD fantasy football field.

Tiered mint starts 7pm UTC on October 16. Check the DBDFF Post on X for more details.

You can follow Pandalaki on his X Account.

And of course, let's follow each other through my account on X #TreeFitty

#DBDFF #CroFam #CronosNFTs #NFTFantasyFootball