DEV Community

Cover image for Vue.js app using Diablo 3 APIs
Jorge Baumann
Jorge Baumann

Posted on

Vue.js app using Diablo 3 APIs

馃憢 Hi everybody.

In case you didn't know it, Blizzard games data is available through the game's official APIs.

I have created a Vue.js app from scratch using Diablo III APIs to show the user's players.

This project consists in web app made with Vue.js and Vuex. It uses Bootstrap-Vue as component library, axios for fetching data over OAuth from the official Diablo 3 API's and it's handmade from scratch.

d3pf

It's a simple version, and it's not showing some information like the weapons details or the character followers. Talking about this, I pretend to add this features in the future.

Source code: https://github.com/baumannzone/diablo3-vue-platzi

GitHub logo baumannzone / diablo3-vue-platzi

馃懢 Diablo 3 Profile Finder - 馃懝. Using the Diablo III official APIs

Live demo: https://diablo3.netlify.app

If you aren't a Diablo 3 player, you can use my data to see how it works:

  • BattleTag: SuperRambo#2613
  • Region: EU

Feedback welcome and really appreciated. Feel free to fork it to play around or help by creating a pull request or opening a new issue.

Also if you have any Vue.js related question, I'm here to help.

I designed the app with "dark theme" in mind because the game, Diablo 3, is about darkness. I wanted to make it a little bit more realistic.

馃 Do you know where I got the color from? What do you think? Let me your opinions in the comments below.

Discussion (16)

Collapse
alexanderjanke profile image
Alex Janke

I totally didn't know about the blizz APIs. So gonna look into these, thanks for sharing!

I'd personally remove the text within the bars in the "Time played" area though. Since you already got titles above them they're kind of redundant and cause weird issues if the playtime isn't high enough
Version without the text inside the bars
Graph

Collapse
baumannzone profile image
Jorge Baumann Author

Thank you very much for your reply! Nice to help you. 馃槉
I agree, it's a know little "issue". It's redundant, but I didn't get the time to update it yet.

Are you a coder? If so, Pull Request are welcome :DD

Collapse
baumannzone profile image
Jorge Baumann Author

Pull request merged 馃槏馃槒

Thread Thread
baumannzone profile image
Jorge Baumann Author

Check the Readme again, Alexander. You famous now 馃槀

Thread Thread
alexanderjanke profile image
Alex Janke

Ayyyyyyyyyyy. One line contribution. The maximum effort haha

Thread Thread
baumannzone profile image
Jorge Baumann Author

馃槃 You are right, but look.
It's not only about the number of lines. It's the idea, the suggestion, the time you used by doing it and the knowledge required to make the (small) change.

I have a lot of one-line pull requests fixing some typos in documentations or translations 馃拑

Be proud of yourself! 馃

Thread Thread
alexanderjanke profile image
Alex Janke

I'll look into other stuff later if I find the time to. Do you have a roadmap/list of features you want to implement or improve upon?

Haven't played Diablo in a long time but I might give it a shot now again :D

Thread Thread
baumannzone profile image
Jorge Baumann Author

No, at the moment I don't. But It could be a great idea.

I want to show more info about weapons, list character followers with items & skills and a few more things

Collapse
rizz0s profile image
Summer Rizzo

This is cool! I'm a long time Diablo fan. I like the style and it's always fun to see stats. This is probably going to spark up an urge to pick it up again ;P I wonder if there's a similar API for D2.

Heads up - I'm getting a 404 error when I click on one of my chars - "the hero ID cannot be found". Not sure if it has something to do with my account - I did make that character with a different bnet tag originally, though I wouldn't think that should affect anything since it's showing up under the current one.

Collapse
baumannzone profile image
Jorge Baumann Author

Thanks. I'm glad you like it. 馃槉

Yay! I started to play again (a little bit) when I was developing the web app 馃槄

404, never happened to me before, but seems logic what you say.
If you want, share your user (battle tag) and region so I can test it. Maybe I can help.

Collapse
__79e60a64cc2a306d27cf profile image
霃欗樃 瓿

Can you make Paragon rankings in this style?

Collapse
baumannzone profile image
Jorge Baumann Author

I don't understand, wha you mean? Can you explain it better?

Collapse
__79e60a64cc2a306d27cf profile image
霃欗樃 瓿

Can I display the level rankings of Diablo 3 Season 23 users?
Can you represent the paragon level ranking from 1 to 1000?

Thread Thread
baumannzone profile image
Jorge Baumann Author • Edited on

I don't know if that information is available on the API response. I would have to take a look, or maybe you can do it :D

Collapse
ajaymarathe profile image
Ajay Marathe

Oh that's cool 馃槄

Collapse
baumannzone profile image
Jorge Baumann Author

馃き Happy to hear it