A marketplace for retro video game collectors to grade, restore and sell video games
Our client, Deniz Kahn, is a video game collector. Deniz asked us to develop a marketplace platform that would allow game collectors to grade their video games and offer them for sale if they wish so. He came to us with his own UI design.
Why the retro gaming industry?
There will always be people who like antique furniture, jewelry, classic comics, and retro video games. Those who appreciate the uniqueness of retro video games tend to collect and play them. People are nostalgic about playing the old way using retro gaming consoles such as the Nintendo 64, Sega 32X, and Neo Geo. But collectors might not even know how much their collections are worth unless they grade them. Also, a lot of retro games are shabby and need to be restored so users could play them. Services like Wata Games can revive the retro gaming industry by offering both grading procedures and restoration.
We built a platform for game grading. Here’s how it works: people send their old video games by mail to our client’s team who then grade and restore those games. Game owners can see the grading stages their games are going through using a web interface. Then our client's team ships the games back.
In addition to the marketplace, we also developed back-office software for our client’s team so they could interact and grade games easily. The process of grading is complex and involves a lot of steps. We improved this process and made it comfortable for the team behind the marketplace.
Wata Games was a very interesting project. We tried out a number of approaches to interpreting our client's requirements. We helped him optimize the order flow and gave advice on the business logic for the service.
The back-office business processes are not trivial at all. We needed to create a tool for six different specialists who work on each order in the sequence.
Our client was involved in the process, so we were able to highlight the six personas operating within the service after several interview sessions. After that, we wrote user tasks and rounded them off with user scenarios that looked like flowcharts. We worked on the interface in a rather linear way. Each persona could start their work when the preceding one finished. We worked thoroughly on each persona’s interface separately, taking into account our client’s requirements and requests. Then we moved to the next persona’s interface. Finally, we prepared comprehensive wireframes and gave them to our client for approval.
Node.js fit our goals perfectly for the backend of this project. It’s fast, secure, and flexible. Node.js allowed us to share code and libraries between the frontend and backend, reducing time spent on development.
We needed to make isolated modules and ensure ease of testing, so we settled on nest.js. It’s a modern backend framework that repeats the ideas and approach of the Angular frontend framework. Nest.js allowed us to implement dependency injection and isolation at the module level.
Since TypeORM integrates perfectly with nest.js and is written in Typescript, we chose it to store data in a structured way. We also made use of a PostgreSQL database.
We found no better alternative to the Swagger OpenAPI, so we used it to document REST APIs.
This project was quite small and we had a strict deadline, at least for the client side of the app. Therefore, we decided to use the Mobx architecture with Mobx-State-Tree (MST), which required less code than Flux or Redux. MST helped us keep models structured and get all the advantages of mutability and immutability.
A lot of calculations had to be done on the frontend before sending data to the backend. We chose Mobx in order to do these calculations in models instead of in view components. This helped keep views as pure as possible and keep business logic in models and stores.
On the back-office side, we created a system for marking issues on video game boxes. It’s a simple graphics editor based on Canvas that lets users draw lines and points and delete them. We created it with a flexible graphics library called FabricJS.
We developed a cross-platform mobile app (Android and iOS) using a new reactive framework from Google called Flutter. The mobile app is for scanning the QR codes of items and syncing data with rich web applications. We used the Flutter material package for UI implementation and the WebSockets dart library for all network communications including signing in and out. We also used the WebSocket dart library to sync QR code data with the backend. We implemented the barcode_scan library for scanning QR codes with a device camera. There weren’t any platform-specific needs, so the Android and iOS apps have a 100% shared code base. This nearly halved the time spent on mobile app development.
Wata offers clients special bonuses for using the service. These bonuses, in the form of discounts, are displayed on the site and depend on the number of gradings the client requests.
There’s also a special field for promo codes. Some clients may have received a promo code at an expo. If so, they can enter this code into the field and receive a discount. Promo codes are generated and managed by the back-office system.
When a client has completed an order, the system generates a QR code with the order details. The client then prints this code and puts it in the box with their games before sending them. When the box arrives at Wata, the receiver opens it and scans the QR code. This pulls up the order summary on the screen, which lists all games in the order.
To submit an order, a client needs to choose the service level that fits their needs and choose the game system, game title, and declared value. The client can also choose from add-on services including gentle cleaning, testing, and a grader’s report for an additional charge. The system clearly shows when the game will be returned and the price for this turnaround time. Clients can pay for the services they choose right away using the convenient Braintree payment system. Braintree ensures a seamless user experience and offers advanced fraud protection.
Clients can create profiles to keep track of their games. To register, they simply need to input their email and confirm the registration through a link they receive by email.
Clients can place orders from their accounts. From their profiles, they can track the status of games they’ve submitted:
- awaiting — a new order that hasn’t been worked on yet;
- scanned — the receiver has scanned the order;
- crating — games from the order have been added to crates;
- grading — games are being graded;
- canceled — there’s some issue with the order and it should be sent without grading upon discussion with the admin;
- held — there’s some issue with the order and the admin is resolving it or discussing it.