Final Fantasy XIV Item Search

Dec 2022

A screenshot of the item search tool on tablet dimensions.

A screenshot of the item search tool

Overview

The item search tool gives users the ability to search for items from the video game Final Fantasy XIV. For this project I used XIVAPI, giving me more experience consuming third party APIs. This website builds upon the skills and knowledge gained from creating the character search tool, a similar application which lets users search for player characters.

The Item Search UI in FFXIV

My project was inspired by the ingame interface which is used to buy and sell items.

An ingame screenshot of the Item Search interface in FFXIV.

An ingame screenshot of the Item Search interface with items matching the search term 'cuirass'.

In my project, I reused the character search tool’s code and added an additional feature: the ability to filter items by category.

A screenshot of the player search tool application which does not have a filtering.

The player character search tool does not have filtering

A screenshot of the item search tool which does have a filtering.

A screenshot of the options when you click on the filter

Adding filter by category

Challenges

Implementing the filter was the main challenge as the browser would now call the API with 3 parameters: the name of the item, the item’s category and the page number. The issue was updating each parameter individually. This led to calling the API with old parameters causing unexpected behaviour.

To solve this problem, I grouped the parameters together into an object. When one parameter is changed, for example the name, a new object is created with the updated parameter(s). For simplicity, the page number is set back to 1 whenever the user changes the name or category. The API is then called with the newly created object’s parameters and the UI is updated accordingly.

This fix makes the code readable and maintainable. It also allows me to easily add more parameters in the future like the level of the item. Above all the user experience is improved.

I rolled out the fix to both the item search tool and character search tool. You can have a look at the git commits here:

Future Features

As mentioned, I’d like to give users the ability to filter items by their level. This would be a perfect use case for MUI’s range slider component wherein users could filter items within a certain range or by an exact number. I also want to add more information to the table and fix a bug where the description of meals is displaying incorrectly.

A screenshot showing information on Garlean Pizza in the item search tool. The description is not displaying properly.

An example of the bug with the description of meals where HTML <span> tags can be seen

Another feature I’m considering is the ability for users to compare two different items, a very useful utility in FFXIV.

An ingame screenshot of the Item Comparison interface.