Today’s post is a little different...

I’ve always wanted to dive into a new tech stack — and what better way to learn than by building something around a game I play every single day: Splinterlands. The fact that they offer an open API for third-party developers is just awesome. From marketplaces to stat trackers, there’s so much you can build.

This post is a bit more technical, so if you're just here to see the end result — check it out here:
👉 https://spl-jackpot-prizes.vercel.app/

Why this project?

If you’ve followed me before, you know I’ve built some Splinterlands tools using Python. Python is super intuitive for data wrangling and analysis — great for any data scientist. But when it comes to building slick frontends… let’s just say Python isn’t always the smoothest.

That’s where JavaScript and TypeScript frameworks shine. I decided it was finally time to explore Next.js and Prisma.

Instead of a boring “Hello World,” I built something useful:
A Jackpot Prize Overview page inspired by the one on the official Splinterlands site. I already love that screen — huge improvement lately — but I wanted to expand it a bit, especially with filtering by rarity. I just want to see the legendary drops.

How I built it (with ChatGPT as my pair programmer)

I started exploring how to bootstrap a Next.js project. I’ve played around with npm, node, and TypeScript a bit before, but just basic stuff. With ChatGPT guiding me, I was able to set things up and build out the site in about a day.

This is what I ended up with:

• 💻 A frontend built in Next.js using Tailwind CSS
• ⚙️ A backend route to cache mint_history results, avoiding 100s of calls to the Splinterlands API on every reload
• 🧠 Logic to fetch extra data for each card’s foil types (like Gold, Diamond, etc.)
• 📦 Deployed to Vercel (smooth process: git push → connect → done)

And of course...
🔓 It’s open source! Check out the repo here:
👉 https://github.com/gamerbeaker007/spl-jackpot-prizes

The Result

You get a filterable jackpot prize overview where you can easily see who won each prize — no need to click back and forth.

Project structure:

Some challenges (and where I need to learn more)

Tailwind CSS still dazzles (or confuses?) me. All those classes in one tag? 😵
Here’s an example I’m still wrapping my head around:

<div className="flex w-full rounded border p-2 gap-4 items-center">
  <Image
    src={imageUrl}
    alt={card.name}
    width={100}
    height={150}
    className="h-full max-h-[200px] w-auto object-contain"
  />
  <div className="flex-1 space-y-1">
    <h2 className="text-base font-bold">{card.name}</h2>
    {/* ...more JSX... */}
  </div>
</div>

Coming from a Python + Streamlit/Dash background, layout in those tools feels more intuitive to me. You have row(), column(), and boom — your layout is set. In HTML/JSX + Tailwind, the flexibility is amazing, but the learning curve is real.

Also, I’m still not writing this code from scratch — but I can read and understand it, which is my first goal.

What’s next?

Right now there’s no database or scheduled tasks yet. But eventually I’d love to:

• Cache results to a DB (using Prisma properly)
• Schedule updates so data is always fresh
• Polish the UI more (maybe with component libraries like daisyui or somthing else)
• Explore charting libraries navi or react-plotly

If any of you have idea or tips lets me know in the comments
For now, I’m happy with this as my "hello world" for the new stack.

Final thoughts

It’s a long learning process — but honestly, that’s what makes it fun. I’m excited to finally get into the JavaScript/TypeScript world in a meaningful way, and doing it with a Splinterlands side project made it way more engaging.

Any feedback on the app is welcome — and if you want to fork it or contribute, go wild!
Next stop is to explore if the splinter-lands app can be written with this stack... will be missing the pandas library, need to be google what replace that functionality.

Let me know what you think 💬

Until next time — GLHF and watch those jackpots roll in 🎰

See you on the battlefield! 🧙‍♂️⚔️

Do you also want to be part of this amazing play to earn game consider using my referral link.