CARDTURNER

DEVELOPMENT / FRONT END / LARAVEL

card turner

Card turner is a tool for users to search and find the cheapest prices for their collectable cards.

Final Site



Process

This is a project I did as part of my unviversity course. It was my main development project for a significant part of my third year. My goal with the project was to learn more about APIs and Laravel and I decided to come up with an idea that would allow me to use both of these skills.


Research

With the release of online games like hearthstone, the barrier to entry for the hobby of colelctable and competitve card gaming has decreased and more potential customers are getting involved with the industry. This is one of the reasons I thought it would be a good idea to create Card Turner. The market for "hobby games" which includes TCGs or Trading Card Games is nearly $1.2 billion strong. Card and dice games estimated to make up $60 million of that and these statistics are just from the US and Canada.[1]
Pokemon is an example of how prevalent these card games still are today. Pokemon, which many of us remember as a thing of the past that we bought as kids is still going strong, selling 2.1 billion cards last year. [2]
This was enough for me to show that there is a growing market for this type of product.


Initial Planning

My initial idea was to create a service that would allow users to easily find their collections. I decided to use some apis to pull information on prices of collectable items so you can compare the prices from two online services.

I looked into existing online services similar to this and most of them focus on a particular game such as pokemon, whereas my service would allow users to find information on a wider variety of collectables.

wireframes

This was my initial idea for how the wireframe of the site may look, it gave me a good idea for the sizes I wanted to use for certain elements and gave me a good base to work off of for the inital front-end designs.

I ended up using these designs to produce a front-end for the page (above), Initially I just coded the top section so that I had something to work on for the actual functionality of the service.

ebay api

I initially researched some different APIs and found that I could access ebay's api pretty easily after getting a developer account. I used the documentation provided by ebay to practice contacting the API and pulling information in php.

I got stuck here for a short while but discovered that I was using ebay's sandbox key from my account and not a production key, after switching to the production Key, I was able to get the api working reasonably well and pull information onto my website.

I also added the ability to set a maximum price for the product the user was searching for. This functionality would later be abandonned for the ease of use but it was a fun way to learn more about how the api worked.



pulling from the ebay api



Attempting to get ebayAPI into laravel

I completed the setup for laravel and managed to get the front-end working, began learning a lot more about how the app framework works. It was then I hit a pretty major roadblock that stumped me for a long time.

I tried for a long time to get my ebayapi working in laravel but it doesn't interact well with standard php and refused to work. After a few weeks frustration I seeked out advice from my lecturers and was recommended to look into trying to contact the ebayAPI using javascript instead of php.

Which, with the help of ebay's very friendly developer forums and developer documentation for their API, I eventually got working. during this step I also set up a way for the search to check if the box is empty and ask the user to enter a search value if empty.

TCG api

TCGplayer is an online store and tool for collectable card games.
The api for TCG is far smaller scale and less used than ebay's api. Therefore, it has less assistance and the developer documentation was also a lot less clear and easy to navigate. It took me 3 weeks to gain access to the API which set me behind on my predicted time for the project.
The base way of contacting TCG's api was using Curl in terminal. Fortunately I had some experience with curl prior to this which made this an easier starting point than it would otherwise be.

One of the issues I encountered is that the bearer token I used expires frequently and so would need to be manually updated every few weeks.



TCG in Javascript

I experimented with trying to pull any information from the TCGplayer API. After a few days of toying around with a few different ideas and trying to find some information from the sparse developer forum (most users seem to be using curl) I managed to get a response from the server, even if it was just.

I used my the code I used to contact ebay's api as a reference for how to build the code to pull from TCG's api, but still some things didn't work the same and had to make many changes, this was by far the most difficult part of this project.

pulling from the tcg api



Final Site

Click here to download the final site.

-->