Get the current market value of each deposited trading card.
This project was developed by Nils-Christopher Wiesenauer (NurNils) and Jonas Bihr (Rhib) during the 4th semester as part of the Webengineering II lecture at DHBW Stuttgart. The main purpose of this web application is to track and display the current market value of each deposited trading card.
💚 The system is based on the MEAN (MongoDB, Express.js, Angular, Node.js)-Stack with the CRUD (Create, Read, Update, Delete) functionality in the backend.
📈 Scrapy is used to track the Ebay API to get the values and appreciations. More info
🎓 The project was rated with a 1.6
This Tradingcardprice App was generated with Angular CLI version 12.0.2. More Info
-
Run
npm installto download all needed packages and it's dependencies. -
Run
ng servefor a dev server. Navigate tohttp://localhost:4200/. The app will automatically reload if you change any of the source files. -
Run
ng buildto build the project. The build artifacts will be stored in thedist/directory.
This Tradingcardprice API was created with Node.js version 12.16.x. More Info
-
Run
npm installto download all needed packages and it's dependencies. -
Go to the API folder and create a
.envfile with the following content (update if necessary):
PRODUCTION=false
PORT=3000
JWT_SECRET="YOUR-JTW-SECRET"
DB_PORT=27017
DB_DOMAIN="localhost"
DB_TABLE="tradingcardprice"
DB_USER="username"
DB_PASSWORD="password"
EBAY_CLIENTID="YOUR-EBAY-CLIENT-ID" // Your ebay client ID
EBAY_MODE="PRODUCTION" // SANDBOX or PRODUCTION- Run
npm startfor a Node.js server. Navigate tohttp://localhost:3000/or defined port in.envfile. The app will automatically reload if you change any of the source files because of nodemon.
The system is based on the MEAN (MongoDB, Express.js, Angular, Node.js)-Stack with the CRUD (Create, Read, Update, Delete) functionality in the backend.
MongoDB is a document-oriented NoSQL database used for high volume data storage.
Express.js is the most popular Node web framework and is the underlying li-brary for several other popular Node web frameworks. It provides many mechanisms.
Angular is a TypeScript based front-end framework which is published as open source software.
Node.js is a JavaScript free and open source cross-platform for server-side programming that allows users to build network applications quickly.
The web application is available for everyone without registration. On the home page there is information about the project and its content. The website is responsive and therefore available on different devices.
Two games have been created: Pokémon and Yu-Gi-Oh! In the navigation you can navigate to the respective games. Here you get an overview of the game in the selected language (English or German).
In this overview you can find a description of the card game, as well as a list of all created card game sets in their respective collection. (e.q. "Base Series" collection contains the sets "Base Set", "Jungle Set", "Fossil Set", "Base Set 2", "Team Rocket", "Gym Heroes" and "Gym Challenge"). Here, all information were maintained in German and English and the appropriate logos and symbols were added.
If you now click on the desired card set (shown in the example "Base Set"), you get a list of all trading cards that are in this card set. In addition, a translated description and the logo of the set have been maintained. The displayed table can be sorted by number, name and rarity and furthermore filtered by any search criteria (input into the "Filter" input field). Here you can now click on any trading card to get more detailed information about it.
Arrived at the trading card "Charizard/Glurak", you can now find information about this card. In the past, when playing Pokemon trading cards, there were differences in the print runs. The first printing got a "1st Edition" feature icon (Seen in the bottom right two images). These different versions and misprint cards can also be seen in this overview.
The second big point that we have implemented with our project is the price statistics. Such statistics can be seen in every trading card. Using the Ebay API and our crawler, we were able to crawl sales data for the "Charizard" trading card and generate price statistics and a table of sales. To do this, we stored the price, title, end date, auction ID, seller ID, and sale type of the auction, and added a link to the auction. Everything runs automatically in the backend and does not need to be executed manually.
The login and register page was implemented with the use of FormGroups and Validators in Angular. Here the user gets feedback about his input and learns whether it is valid or invalid.
The project presentation files can be be found here.