Story Behind the Project
Yu-Gi-Oh! Card Vault is one of my first projects utilizing a 3rd party API created during my time at Full Sail University. The overall requirement for this project was to develop a website using a 3rd party API of my choice.
Loving games, I felt it was only natural that I would choose to base my project on the Yu-Gi-Oh! Card game. Although surprising enough, it wasn’t my first choice when developing my project. I wanted to use a Pokemon API, but I found the available ones were a bit too unpredictable when the information returned. So with that in mind, I decided to utilize the Yu-Gi-Oh! API by YGOPRODeck.
I didn’t have much trouble developing this project; although I didn’t have too much experience with React yet, I am proud of how well this project turned out. If I had to come back to this project and make improvements, I would add an intelligent search feature where if you start typing out a name, items would appear under the search bar that you could choose from.
About
Yu-Gi-Oh! Card Vault is a website where users can view and search cards at a glance. Yu-Gi-Oh! Card Vault focuses on ease of use and utilizes the Yu-Gi-Oh! API by YGOPRODeck. Users can view random cards at a click of a button or search for specific cards by searching them and focusing on easy-to-use interfaces and Yu-Gi-Oh! Card fans, this is a great way to enjoy more ways to learn about Yu-Gi-Oh! Cards.
Solution Statement
The solution is a simple one, Yu-Gi-Oh! Card Vault will focus on the exploring random cards or you can search a card by typing it in to the search bar. Yu-Gi-Oh! Card Vault will focus on better organization of information, make a clean and easy-to-use layout for users, and allow users to view their search history. Yu-Gi-Oh! Card Vault will be focusing on a single aspect that has been lacking in many other websites which is strictly the exploration and information of Yu-Gi-Oh! cards.
Key Features
- A random card will be generated on the home screen as the random card of the day.
- User’s can search for a specific card by entering the card name in the search bar.
- User’s can generate a random card to view at the click of a button.
- User’s can view their card search history.
Tech Stack
React.js, JavaScript, API integration, Front-end development, CSS



