- HTML 5
- Responsive CSS
- Adobe Photoshop
- Adobe Illustrator
For users who need to know where Xûr is and what he's got! Xûr is an NPC – non-player character - from Bungie's Destiny franchise. His role is as a vendor to player's character's, Guardians and he visits for a short time each week.
Xûr is a fictional entity of the video game Destiny 2. He is a high value target that regularly offers players quality wares. Destiny 2 is an action shooter that takes you on an epic journey across the solar system. In the cinematic campaign, you’ll enter a world filled with compelling characters and fight to take back our home. Battle alongside friends with multiple cooperative modes or challenge others in intense multiplayer matches.
With his visits, he brings an assortment of highly sought-after items which appear with somewhat randomly frequencies.
This app helps players track and interact with the mysterious fellow sent by The Nine.
How the Xûr came to be
The ideas and rationale behind the design
The same great web app with native flourishes
It started with an annoying problem: Where is Xûr, what is he selling, and can I make it look really pretty? I set out to answer this question and over several weeks and many iterations, this is where I landed.
It wasn't long before I realised that if I was going to go to all this effort specialising in Xûr, I should consider how else I could capitalise on my effort. That's when I decided to spin up a MySQL table or two and begin taking note of where he was and what he was selling.
This effort laid the ground working for the History feature which enables a user to see if Xûr had ever sold the item before or if he'd been pushing the same old story for a while already.
This feature evolved over time and was limited only by my imagination and skills. In this final version, users can see not only how many times Xûr has offered the item, but also when. Some items go months between offerings.
All of my work previous to the final version of this project has been with jQuery. Projects such as Xûr can provide excellent opportunities to try new things, push boundaries, and learn completely new and exciting paradigms.
Learning React has been a long, initially thwart with pain, rewarding journey. This version uses React and is powered by many dedicated components designed to handle and serve the purposes of Bungie's API and projects that depend on it. It's been invaluable to pushing myself to greater heights and increasing my broader skillset.
Xûr is a transient vendor in the Destiny world. He comes and goes on a schedule. For newer players, this creates a need for knowing when and where the vendor is.
The History feature allows a user to click through previous weeks and seasons of Xûr's activity and is tied to the page's router allowing users to share their view with other users in case perhaps they're trying to settle a bet or help a friend.
The Inventory feature displays the selected week's sale items, Xûr's location for that week, and the date the data was retrieved (as soon as Xûr materialises in-game).
The UI of the individual items is multi-faceted.
- Touching/hovering over items presents the user with a item tooltip.
- Clicking items takes the user to an item's details page which mirrors the tooltip is terms of information provided.
- Arrow buttons to the right of items expand and contract item's sales history.
Xûr is available in three different app stores, but the iOS version goes the extra mile. With widgets and a customised browser control, the iOS app blends native features with a powerful PWA (progressive web app).