Custom Fortnite Item Shop with PHP, HTML, CSS

Today we will be learning how to create a custom Fortnite item shop so we can display daily items on our own webpage. We will use PHP to talk to the Fortnite API, and get us back a list of items on the item shop for the current day. We will then use HTML/CSS to style up the list of items we got back from the API and create our own item shop.

Step 1: Connect to the Fortnite API

First thing we need is an API key. This will be passed along with each call we make to any of the API endpoints. You can get your API key here https://fortnitetracker.com/site-api

We are going to be using the store endpoint to retrieve the current items on the item shop. Here is the function we will use to hit the store endpoint, pass along our API key as a header, and get back the list of store items.

/**
 * Get store data from the fortnite api and save it in a json file
 *
 * @param String $date of the store to save
 *
 * @return void
 */
function getStoreDataFromAPI( $date ) {
    // store api endpoint, we hit those endpoints!
    $apiUrlEndpointStore = 'https://api.fortnitetracker.com/v1/store';

    // curl setup
    $ch = curl_init();
    
    // specify the store endpoint
    curl_setopt( $ch, CURLOPT_URL, $apiUrlEndpointStore );

    // pass our api key along as the TRN-Api-Key header
    curl_setopt( $ch, CURLOPT_HTTPHEADER, array(
        'TRN-Api-Key:' . FN_API_KEY
    ) );

    // set a few other things to make curl happy
    curl_setopt( $ch, CURLOPT_RETURNTRANSFER, TRUE );
    curl_setopt( $ch, CURLOPT_HEADER, FALSE );
    curl_setopt( $ch, CURLOPT_SSL_VERIFYPEER, FALSE );
		
    // response from the store endpoint
    $response = curl_exec( $ch );

    // create a file titled 'YYYY-MM-DD' and save the json repsonse to the file
    $storeFile = fopen( 'store_json_files/' . $date . '.json', 'w' );
    fwrite( $storeFile, $response );
    fclose( $storeFile );
}

To avoid API limits, we are going to save the store items into a JSON file. We will then read the items from this JSON file instead of hitting the API. We will hit the API one time per day and save the response in a JSON file named by date. For example 2019-01-20.json would hold items for the item shop on the 20th. Since we will have an item shop JSON file for each day, we can go back and look at what was on the item shop in the past as long as we have a JSON file for that day.

Step 2: Style It Up

Once we have our data. We can go ahead and start giving it a nice Fortnite look and feel. If we want our item shop to feel like Fortnite, we need the correct font face. Here is the font face I am using.

@font-face {
    font-family: 'Fortnite';
    src: url( 'BurbankBigCondensed-Bold.otf' );
}

The other important thing is to match colors. We want to make sure our items have the same rarity color as Fortnite. Here are the rarity colors I found by inspecting the Fortnite tracker website.

.rarity-fine {
    background: #fb9625;
}

.rarity-quality {
    background: #7907a5;
}

.rarity-sturdy {
    background: #3dc7ff;
}

.rarity-handmade {
    background: #5bad03;
}

Custom Fortnite Item Shop

Put everything together and we get our own Fortnite item shop! I only highlighted what I thought were the key elements for setting up our own custom Fortnite item shop. The full code is up on GitHub.

Links

Live Demo

YouTube Video

Code on GitHub

That is going to do it for this post! Leave any comments/questions/concerns below and thanks for stopping by the blog!