https://images.hive.blog/0x0/https://files.peakd.com/file/peakd-hive/beaker007/23uFPdKf8W8ZX71NBX84EzrbuDWKc44PmSAcGwNRzkmS25BuzUm5ySwCMfrXsDdoAMTYK.png

Hey everyone! Just wanted to drop in with a quick update on the Land Tool. **No new features this week** – sorry about that – but don’t be fooled, it wasn’t a slow week for me at all!

# <div class=phishy> 🤯 Learning Spree</div>
I’ve been deep-diving into all sorts of stuff – watching YouTube tutorials, reading docs, and chatting a lot with ChatGPT. It’s a new way of learning for me, and honestly, I’m digging it way more than the old-school classroom/book combo. It’s interactive, faster, and kinda fun when it clicks!

**Big caveat though**: ChatGPT isn’t always right 😅 — and I’m not always experienced enough to tell when it’s wrong (yet!). But I’m getting there by pulling in more sources and questioning things as I go. One thing is clear: the more you learn, the better your questions get.

# <div class=phishy> 🛠️ What I’ve Been Working On</div>
If you want to skip the techie part, just head here to check out the intermediate result:

🔗 https://next-land.spl-stats.com/
(Only the region overview has real logic for now – rest is mostly placeholder/test data.)

![Screenshot 2025-06-13 at 14.54.53.png](https://files.peakd.com/file/peakd-hive/beaker007/EnyoxHTy13vhV3UoB398e588eCAGfdYfAqCmbHYnWxoxeYbE3joPg9hASfqMv7zp9vk.png)
Try to keep it mobile friendly at the same time.
![Screenshot 2025-06-13 at 14.55.25.png](https://files.peakd.com/file/peakd-hive/beaker007/23tGZw6rhSwQU51nHfHGojRkQ47YPMkxabfbujfFEB9tNhEKo7GrxuwnLzNgi1TP4jNQB.png)


# <div class=phishy> 🔍 This Week’s Learning Highlights</div>
* Atomic Design – Design Methodology
* Storybook – Getting into designing molecules, like the summary tile. Trying to visually build and document components here.
* MUI (Material UI) – Switched from DaisyUI/Tailwind. MUI just clicks more for me.
* Server-side Filtering – Making the filtering smarter and more efficient.
* Chart Library Shootout – Compared Nivo, MUI X Chart, and Plotly React.
Plotly still wins for me. Responsive out of the box with zoom, pan, legends… the works.

## <div class=phishy> 🔬 Atomic Design</div>
I’ve been exploring the Atomic Design methodology by Brad Frost (check it out [here](https://atomicdesign.bradfrost.com/chapter-2/)). It’s a way of thinking about UI components based on how things are structured in nature — starting from the smallest building blocks and working up. The idea is to build:


![Screenshot 2025-06-13 at 15.00.11.png](https://files.peakd.com/file/peakd-hive/beaker007/23x1YSsFDk81rjyMSb3W2SLUkMKArQGThMycNv4ZQ1gwKiehtRnVKLEgs1pxHqiWAkVu2.png)


* Atoms – the basic HTML elements or smallest reusable components (like a button or input).
* Molecules – combinations of atoms (like a labeled input field).
* Organisms – groups of molecules working together (like a form).
* Templates & Pages – layouts and final views with real content.

It’s helped me approach UI in a more consistent and reusable way. That said, I usually skip building out the atom level manually — most of the basics (like buttons, icons, etc.) are already covered nicely by MUI, so I jump straight into designing molecules and up.


## <div class=phishy>📚 Storybook + Atomic Design = 🔥</div>
I’ve known about Storybook for a while through work, but I never actually used it myself — until now. Since I’m experimenting with Atomic Design, it felt like the perfect time to dive in and try it out for real.

Storybook fits in really nicely with this design approach. It lets you build and view components in isolation — starting from the smallest atoms, all the way up to full pages. Right now, I’m mostly working in the molecule and organism layers. I haven’t tackled templates or full pages yet since setting up mock/test data for that takes a bit more effort… but maybe I’ll get there eventually 😄

What I love most is how easy it is to tweak and experiment with MUI component options — themes, props, layouts — all without needing to reload the whole app. It makes it super fast to try stuff out and visually see what works.

If you want to check it out yourself, just clone the repo and run:

```
npm run storybook
```

Here are a few previews of how it looks:

![Screenshot 2025-06-13 at 15.29.44.png](https://files.peakd.com/file/peakd-hive/beaker007/23tRvSiuudWFJcffrJJFxgHqW92zEDR3SJZwRQtzggR9SBcj5MUrSwdTjf9HTC8PqnyKw.png)


![Screenshot 2025-06-13 at 15.30.00.png](https://files.peakd.com/file/peakd-hive/beaker007/Eo8JBDDY1mGozxtvubdevy17Coj1Pm3CPrTjWqAtkCJygP3ccWjp2e4DjHFPcRyaNba.png)



![Screenshot 2025-06-13 at 15.33.44.png](https://files.peakd.com/file/peakd-hive/beaker007/EoAS3c5vfWPSPbVYaxKS74mhw1qdE5psaQEtjyEdJZ2xevVhrA6TLdiBedW1bEmq6Hp.png)



## <div class=phishy> 📊 Chart Library Showdown: Nivo vs MUI X vs Plotly React</div>
This week I also started testing out some chart libraries to find out what fits best for the tool. For now, I’ve added all three into the app — you can see them side by side under the “Activity” section.


![Screenshot 2025-06-13 at 15.14.40.png](https://files.peakd.com/file/peakd-hive/beaker007/23tbRcNGX619FdUUFEuVZXzW1wxfiPsKKSM63rdgGDZgpbNnVP3sFgrisfM53Bj5WPyci.png)


Right now, I’m only using simple/basic charts, but you gotta start somewhere, right? The good news: all three libraries are pretty similar in how you set up the data and render the charts — no big limitations at this early stage.

From a user experience perspective, though, there are some noticeable differences.

### <div class=phishy> 🎯 Why Plotly React Might Win</div>
At first, I actually thought Plotly was only for Python — since that’s where I usually use it — but then I found out there’s a React version too. And wow, that was a game changer.

Here’s why I’m leaning toward Plotly React:

* Zooming and panning work right out of the box.
* You can select and isolate a specific series in the legend — just double-click one, and boom!


![Screenshot 2025-06-13 at 15.15.44.png](https://files.peakd.com/file/peakd-hive/beaker007/23u5NvYmx23S87ZWeD96uXPx4RmDQXyDLEZsDFFPRj2ubCk7xocR8kXHSFW2MrizP29rG.png)

* Drag to zoom is super smooth — no setup needed.


![Screenshot 2025-06-13 at 15.15.54.png](https://files.peakd.com/file/peakd-hive/beaker007/23vhMV98pLcc8PGk86xKYX8cgW9qinxDrXJrw3GMHJXGpN23wf1YJJAMoaFP9ieQ7caGo.png)

These kinds of interactions aren’t as intuitive or built-in with MUI X or Nivo — at least not out of the box. They can definitely be added with effort, but Plotly just has that plug-and-play feel I love.

That said, I have to admit: Nivo’s website does showcase some really good-looking charts. 

If I end up needing more advanced visualizations — like bubble charts, custom axis configs, or even a heatmap — I plotly can do all not sure how easy those are with the other libraries. I really want to build a cool heatmap someday. Not sure for what yet… but I’ll figure it out 😂


# <div class=phishy> 🧩 Still Figuring Out...</div>
The folder structure is getting messy fast. With so many tiny files, I really need to rethink how I’m organizing components and pages. Something to tackle next week!

# <div class=phishy> 🚧 What’s Next?</div>
Player data is an important part because that is a different structure. Which can lead to complete redesign of the architecture.
So tackle the hot items first before building out.
* Fetching Player Data – Since this relies on real-time API calls, I need to:
  * Avoid overloading the SPL API.
  * Implement caching (probably with node-cache or lru-cache).
In Python (with Streamlit), I did not care much just let streamlit figure it out... might end up the the same but then with node-cache 😅
  * Possibly add an admin page to monitor and manage cache.

Building out contains of:
* Continue on Fixed Data Flow – Similar structure coming for resources and production data.
* Figure Out Chart Logic – How to format/aggregate/call data without overfetching.



# <div class=phishy> 🔮 Coming Soon: Deed Overview V2</div>
When I get to the Deed Overview, I want to give it more of a BaronToolbox look – everyone seems to love that vibe!
Suggestions? Hit me up – would love to hear ideas that make it feel inspired, not copied 😎

# <div class=phishy> 🧑‍💻 GitHub Repos</div>
Want to see what’s under the hood? Be warned – it’s chaotic in there.

* 🔗 Python: https://github.com/gamerbeaker007/splinter-lands
* 🔗 Next.js: https://github.com/gamerbeaker007/splinter-lands-next

PRs welcome. Feedback welcome. “WTF is this” reactions... also welcome. Be gentle though – still figuring out Next.js/prisma/TypeScript.... 😅

# <div class=phishy> 🙌 How You Can Support</div>
* ✅ Upvote this post – Keeps the motivation flowing!
👉 [Vote for My SPS Validator Node](https://monstermarket.io/validators?validator=beaker007)
* 🧠 Drop feedback – I love hearing your ideas and weird edge cases.

# <div class=phishy> ⚠️ Final Note</div>
This is still very much a hobby project, built during late-night caffeine-fueled sprints with a half-functioning brain. If it breaks, stay chill and ping me. I’ll fix it… eventually 😂