Digital Binder

Story Behind the Project

Digital Binder is my capstone project created during my time at Full Sail University. The overall requirement for this project was to develop a web application using all the skills that I’ve learned at school, like React.js, Node.js, Express, MySQL, Design, and more.

I started this project with the vague goal of making a Website for my card game Clash of Bonds TCG. But, after talking with my professor liked the idea but guided me toward making something like a digital collection app. This idea got me excited, and I began diving into the project. Conducting research, I documented my proposal, worked on my wireframes, and made my style tile.

That’s not to say that I didn’t have a challenging time working on designs; I had difficulty trying to think of a way to present the information clearly and easily on the page. That’s when I began looking at different websites and seeing what works well for them and how I could incorporate my ideas into the designs to meet my goals. Eventually, with feedback and hard work, I came up with the final arrangements for my wireframes.

When it came to development, I had about a month and a half to develop the project, which meant that I had to code the frontend, and backend, set up the tables in my database, and deploy. I used my time management skills and my habit of frequent, meaningful commits to GitHub to ensure the project got done on time and that I had a track record of commits I could fall back on in the event I needed to.

Looking back, if I had to mention what the biggest challenge of this project was, I would say it was creating the login system using JWTs (JSON Web Tokens). I overcame this by conducting my independent research and by trial and error. This project was an absolute blast to work on, and I am looking forward to working on more projects like this.

About

Digital Binder is a website where users can collect, organize, and see their collection and deck stats at a glance. Digital Binder focuses on ease of use and the collection and value aspect, and users can make multiple decks and collections. Focusing on easy-to-use interfaces and more of a collection aspect will increase ease of access to users and will fill a much-needed hole missing in the market for a website like this for trading card game enthusiasts and collectors alike.

Problem Statement

The problem is that the few applications/sites that are out there try to do a bunch of things but fall short in areas that may include but are not limited to great UI/UX. They can feel clunky, slow, and even too spread out with features that make them a jack of all trades but a master of none. They also can show you a single card value but many of them don’t have a whole collection or deck stat feature. There aren’t many digital card collection apps for trading card games like Yu-Gi-Oh, Magic the Gathering, Pokemon, etc.

Solution Statement

The solution is a simple one, Digital Binder will focus on the user and their collection. Digital Binder will focus on better organization of collections and decks, make a clean and easy-to-use layout for users, and allow users to create and use multiple collections and decks. Digital Binder will be focusing on a single aspect that has been lacking in the market which is strictly the collection side of things and the user experience.

Key Features

  • See your collection and deck information at a glance (API).
  • Easy to view stats on cards, collections, and decks.
  • Allows users to have multiple collections.
  • Allows users to have multiple decks.
  • Allows a variety of different binder and deck colors.

Tech Stack

React.js, JavaScript, Node.js, Sequelize, Express, MYSQL, Full Stack development, CSS