![Image generated with ChatGPT/DALL-E generated logo looks pretty nice](https://files.peakd.com/file/peakd-hive/beaker007/23wWrpDYNXRGYPs1CNXWHyMSXy66paDb1ikdFzDx8Pvt3MRHSLT4g6tN55SNX37A8b4h7.png)

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/

# <div class=phishy>Why this project?</div>
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.

# <div class=phishy>How I built it (with ChatGPT as my pair programmer)</div>
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

# <div class=phishy>The Result</div>
You get a filterable jackpot prize overview where you can easily see who won each prize — no need to click back and forth.
![image.png](https://files.peakd.com/file/peakd-hive/beaker007/23tRvE6M4Dc5oTkM8kDec1J2e1ejtsjfmB15RfBS7yh9yv2zo2VGAWFGFUT6UQH2KiBvf.png)


![image.png](https://files.peakd.com/file/peakd-hive/beaker007/23tRrM1N5qVMX7KSAMU55QzNsEpThpgbsvFonyxXQcz5vxPBNhnKo5WYLXrZQFeM336C5.png)


![image.png](https://files.peakd.com/file/peakd-hive/beaker007/Eo6BGDvyBSbH2WSpUdWzbbVLLDJ4Ku5cRKPH5ECnPR11FEhM6PQcHbDHFCNUeapjFCC.png)

Project structure:

![image.png](https://files.peakd.com/file/peakd-hive/beaker007/23swnTCaYWrNwJoxeDBbpziwZiNdxZPNJdjmAkLnaUFt1ZVMPhjDPE2VMnzxidfcY67R3.png)


# <div class=phishy>Some challenges (and where I need to learn more)</div>
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.

# <div class=phishy>What’s next?</div>
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

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

# <div class=phishy>Final thoughts</div>
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.

# <div class=phishy>Let me know what you think 💬</div>
Until next time — GLHF and watch those jackpots roll in 🎰

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


https://d36mxiodymuqjm.cloudfront.net/website/splinterlands_logo.png 

Do you also want to be part of this amazing play to earn game consider using my [referral](https://splinterlands.com?ref=beaker007) link.