#2: NBA-dle
Background
I’ve tried to build the global voting/ranking app multiple times. Each try has ended in failure, but after one of these failures, my friend Shan gave me a different idea. He regularly played Spotle, a Wordle-like game where you guess the musical artist of the day, and he wondered if I could develop something similar for the NBA. This idea was much smaller than the voting app, so I figured “let’s see if Bolt can build this on the first try.” That didn’t work (more on that later), but I did deploy the app and gained several valuable insights along the way.
What I Built
It’s similar to Wordle but each day has a new NBA player instead of a word. You start by guessing a player and seeing how their attributes compare to the day’s player. If any attributes match, they’ll be green. If they’re close, they’ll be yellow. Otherwise they’ll be gray. For example, my first guess today was Jalen Williams.
With this guess, I learned that the target player was
1) not a shooting guard
2) American
3) not in the Northwest division
4) in the league 3 seasons
5) Had an NBA 2k rating just above 89
I used this info to make the next guess and steadily got closer until I got the target player in 5 tries.
If you guess within 8 attempts, a victory modal will pop up with a button that makes it easy to share with your friends. A video of my game from June 12th is below.
If you’re an NBA-hole or know ball, see if you can guess today’s player! I added a chat window in the bottom right to collect feedback, so if there’s anything you don’t like, please message me.
If you have fun, please share it with your friends. And if you guess right, be sure to have your sound on …
What I Learned
Skill Issue is No Longer an Excuse
It took me a while to get the UI how I wanted (more on that below), but after lots of iterations, I hit what felt like an insurmountable block: CSS animations.
If you watch the above video, you can see that each attribute flips over in sequence. This gives a little suspense and looks cleaner and more polished than if I just rendered the attributes. However to write this required using CSS animations, which I had no idea how to create. I figured this would be easy for Cursor or ChatGPT to code, but for whatever reason, they couldn’t get it working. I spent a lot of time explaining what I was seeing and asking for fixes and both were completely unhelpful. I was pretty demoralized, and if it was pre-2023, I would have done one of three things.
First, I’d reach out to a friend who’s a stronger React dev and see if they could help me. Most of the time my friends are either too busy to talk at that exact moment, so I’d have to wait hours or even days before we could find a time to sync. And that assumes they’d know how to fix it. When I reached out to a friend of mine who’s a full-time frontend SWE, he said he hadn’t written an animation in years and wouldn’t be much help.
Second, if I was interested in learning the topic, I’d watch a YouTube course or find a cheap Udemy class. However, this approach has two issues. First, I’d have to learn a lot of CSS stuff I didn’t care to learn. All I really cared about was animations and didn’t want to be bothered with anything else. Second, I really just didn’t want to learn CSS at all. I’ve never liked it or cared to learn it, and the idea of paying $10 to watch some lectures on it filled me with dread.
So if those two options didn’t work, my third option would be to give up and settle for a shittier experience.
But it’s not 2022. It’s 2025. And in 2025, you can get the world’s best teacher with access to the world’s information for $20/month. So I asked ChatGPT the following:
“I want to build a CSS animation similar to how Wordle works. There are 5 cards, and each card should flip over on sequence. Cursor is struggling to implement this so I’ll need to write myself but I don’t understand CSS animations.
So with that in mind, I want you to build me a mini curriculum on CSS animations. I want you to think through what I need to know and tests/mini projects to confirm my understanding. Design this course for me.”
It then created a five module course series with code examples and quizzes to confirm my understanding. It took about 45-60 minutes, but once I completed it, I got the animations working how I wanted within 30 minutes.
This experience blew my mind. It wasn’t quite like Neo learning kung fu, but it’s the closest I’ve come. The distance between who we are and who we want to be has never been closer or easier to bridge. It’s just a matter of will, not skill, to get there. Because if you have the will but need the skill, ChatGPT will upload those missing skills to your brain.
I can say without exaggeration this is the most inspiring personal use case I’ve had with GenAI to date. If you want to learn something and can spend $20/month, you have no excuse!
GenAI Tools Only Get You So Far
When I started this project, I’d hoped I could create a quick product requirements doc (“PRD”) in ChatGPT, feed this to Bolt, and voila, I’d get my working app. As I mentioned before, the UI didn’t match my expectations, and there were several other bugs. Two of the most glaring were:
The code didn’t select the player of the day. This app had two tables: players and daily_players. Players contained the metadata on each player, while daily_players specified who the player of the day was on a given day. Bolt created both tables for me in Supabase (woo!) with no issue, which was impressive. But when I inspected the frontend code, I saw that instead of getting the player of the day from daily_players, it would randomly select a player on each page load. This was the exact opposite of what I wanted and I had to rewrite this using Cursor.
Player search was inefficient. I’d assumed that the app would first query all eligible players, store them locally, and then do lookups based on that local copy. Instead the code was doing the player search on the database itself, so it was making repeated network requests per guess instead of looking at the local cache. While this app has pretty small usage, this would be insanely inefficient at scale. I’m confident any CS student with a year of experience would not do search this way, so I was a surprised the machine gods cooked up what they did.
There were a few other issues, but I came away convinced the world still needs software engineers who understand codebases. I highly doubt a nontechnical person would have resolved these issues.
Design First, Build Second
Surprisingly what took me the most time to get right wasn’t animations or backend calls or data wrangling but figuring out a UI that worked and I didn’t hate. This meant I spent a lot of time coding multiple different ugly UIs in Cursor instead of designing one clean UI in Figma and pushing that to Cursor. Henry Ford used to say “Unless you see a thing, you can’t simplify it.” In retrospect, if I’d spent more time up front making it easy to see what I was building, I would have realized it sucked and spent more time upfront cleaning and simplifying it before turning it into code.
There’s a carpenter’s adage that you should “measure twice, cut once.” Going forward, I plan to “design twice, build once.”
Actually Design First, PRD Second, Build Third
Markets have price-makers and price-takers. When you buy milk at the grocery store, the grocery store is the price-maker, while by accepting the price, you’re a price-taker. Similarly, in large enterprises, there are people who decide what work’s to be done and there are people who do it. The former are work-makers and the latter are work-takers.
For most of my career, I’ve been a work-taker. One of my perennial frustrations is work-makers are often bad at describing or even knowing what they actually want. I cannot tell you how many times somebody’s made an ask and I’ve responded “ok but what exactly would you like me to do?” Or how many days of my life I’ve lost because of a situation like below:
Work-Maker: “Hey, could you get me X?”
Me: “Sure.”
<several hours later>
Me: “Hey, here’s X like you’d asked.”
Work-Maker: “Oh, sorry I actually don’t need X. Could I get Y?”
This is one of the few instances in my life where I was the work-maker and frankly, I did a bad job. I wasn’t explicit about the UI, UX, performance constraints, goals, purpose, motivation, etc. I made some lazy asks about a bunch of stuff and I’m sure the machines did their best, but they’re not mind readers (at least for a few more years).
So for my next project, besides starting with a clearer design, I will create a more thorough and thoughtful PRD to act as a de facto contract between myself and the machine. Anecdotally, it seems the more context you can give these tools, the more time you will save, so I will improve that going forward.
What’s Next
This app took a lot longer to build than I expected, but on the plus side, I learned way more than I expected, have a clearer sense of my skill gaps, and am proud of this cute little web app. For my next project, I plan to do the following:
Get a little dangerous in Figma: one glaring skill issue for me is Figma, as it seems the best way to quickly prototype a design and translate that design to CSS/HTML. Similar to how I learned CSS animations, I’ll have ChatGPT design a custom course for me to learn the basics of Figma so I can quickly prototype the designs before getting into the code.
Spend more time on the PRD: I’ve read (and by read, I mean skimmed and largely ignored) many PRDs in my life, but made very few. The default one ChatGPT gave me wasn’t great, but this video seems like a promising starting point and I’ll likely test out ChatPRD. If you happen to have recommendations or ideas though, please share.
Go a Little Bigger: getting this app working, and more importantly, seeing my friends have fun with it, was a blast. As I finalized it, I realized there’s a bigger version of it that could be a better product and appeal to a larger audience, which will be what I build for #3.
If you haven’t already, please test out NBA-dle.com, let me know what you think, and subscribe!