DEV Community

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

Posted on • Edited on

Vue.js app using Diablo 3 APIs

๐Ÿ‘‹ Hi everybody,

If you didn't know, 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 players' characters.

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

d3pf

It's a simple version and does not show some information like the weapon details or the character followers. I plan to add these 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-vue.vercel.app/

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

  • BattleTag: SuperRambo#2613 or MADman#2102
  • Region: EU

Feedback is 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 questions, I'm here to help.

I designed the app with a "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 know your opinions in the comments below.

Top comments (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

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

Pull request merged ๐Ÿ˜๐Ÿ˜

Thread Thread
 
baumannzone profile image
Jorge Baumann

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

๐Ÿ˜„ 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

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

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

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 • Edited

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

๐Ÿคญ Happy to hear it