Card Central

Collecting sports cards has been a popular hobby for decades. It can be difficult to show off your cards and keep track of all their information, so Card Central does that in an intuitive way!

Comment

Inspiration!

When we heard the theme of "Sports," we started to brainstorm some ideas, and one of those ideas was ways that we could help people who collect sports cards! We thought of the idea after one of us was reminded of a news article about sports cards. We decided to create a site that could help people digitally showcase their sports cards and keep track of them easily and intuitively!

What it does:

Card Central is a collaborative site where you can upload and organize your sports card collection! Whether you're just getting into it or you're a seasoned collector, Card Central is the place for you! Meet new people who share the same interests as you while showcasing your own beloved collection of sports cards, ranging from NBA to MLB athletes, and everything in between. You can even display the year, value, and other important information.

How we built it:

We used Visual Studio Code and it's Live Sharing extension to work together and edit code in real time (like we were using Google Docs!). We used HTML, JavaScript, and CSS to code a website for Card Central. We also used Bootstrap to help us with some difficulties in coding as well as the ever reliable Google and YouTube.

Challenges we ran into:

We first had a few problems with the "add a card" feature. It continuously refreshed the site and then refused to add a card after using the form. The "upload an image" function also kept the image under it after uploading an image and trying to add a new card, as well as refusing to upload the image, and using only the default or uploaded images on all of the cards. We solved the refreshing issue by moving the process to the buttons of "add" and "close" instead of having the form handle the process. For the image conflicts, our first idea was to get the path of the image the user selected. However, the browser prevents the website from accessing files on the device, so we decided to store the image directly within the website instead. We also had to add a default image to the card in case the user did not add a picture of the card so that it would look more professional. We also had a bit of trouble with the "edit" feature on the cards. First, the popup wouldn't show up and then when the popup showed up successfully, the page kept on refreshing uncontrollably. We also fixed this by migrating the process to the buttons rather than the actual form. The popup also appeared on the wrong side of the screen, which turned out to be because we forgot to commit it to GitHub. Another issue we had to prevent was when we added multiple cards and the the cards and forms couldn't clip into one another and cover each other. We also had to get the card layouts correctly to accurately and aesthetically display the images.

Accomplishments that we're proud of!

This is actually our first Hackathon! We're sharing our work (with the world) even though we are beginners and that requires confidence. We are also super proud of our learning skills and how we actually created a somewhat semi-functional website! So yay us!

What we learned:

We learned how to work as a cohesive team and how to create a pretty functional website! Some of us learned how to make popups and how to deal with some issues in the code, as well how to use JavaScript. This was a major step in our journey because we basically learned how to use JavaScript today and yesterday. Other teammates learned how to add Google Fonts in HTML and CSS and formatting as well as a bit of color theory to see which colors went well together.

What's next for Card Central?

We plan to actually develop the profile page (instead of a blank screen that just says "Coming soon") and allow individuals to write small blurbs introducing themselves. We also plan to introduce the ability to connect with others with the same interest. We also want to add more functionality to allow users to sort their cards and adjust card sizes to fit them into categories, rows, or columns more neatly. We also want to toy with the idea of connecting Card Central to the web so that the cards can be stored safely on a server instead of on the browser (which means that they disappear after refreshing oops)! We also want to format the home page a bit more so that it looks more professional and has less blank space.

Built With

Share this project:

Updates