Watagames

Watagames

A platform for game grading
Business process automation

Business process automation

Our client’s request

Deniz Kahn image
Client's location: USA

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.

Here is 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 needed to develop 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 needed to improve this process and make it comfortable for the team behind the marketplace.
 

US Website Videogames Retrogaming
Relevance

Relevance

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.
 

Results

Duration:
November 2017 – present
Team:
Backend - 1 Frontend - 2 QA - 1 UX - 1 PM - 1 Mobile - 1
Designed the UX

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.
 

Developed the backend

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 chose Typescript for its type safety and popularity and because it’s modern. Typescript brings a type system to JavaScript, which helps avoid a number of bugs at the development stage. It also helped us write self-documenting code. All JavaScript code can be run in Typescript, so there’s no problem when someone on the team doesn’t know Typescript or when you need to integrate old libraries that are written in JavaScript.

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.
 

Developed the frontend

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.
 

Developed a cross-platform mobile application

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.

Implemented features

The first release featured the client side of the application, through which clients can send their games for grading. In the second release, we plan to launch the back-office platform that the grading team uses.

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.

Gallery

Gallery
Gallery
Gallery
Gallery
Gallery
Gallery

Technology Stack

Backend

V
Vue.js
Node.js
Node.js
T
TypeORM
PostgreSQL
PostgreSQL
TypeScript
TypeScript
Swagger
Swagger
N
Nest.js

Frontend

M
MobX
Fabric
Fabric
React.js
React.js

Mobile

W
Websockets
F
Flutter
M
Material Package
B
Barcode scan library

See more case studies

Building a promotional app with ERP features for small and midsize businesses

Building a promotional app with ERP features for small and midsize businesses

A marketplace that connects businesses with clients and equips them with effective management tools

  • Mobile
  • Qatar
  • Kuwait
  • Booking
Educational media and entertainment platform for kids

Educational media and entertainment platform for kids

Original TV shows and games plus a Quran memorization buddy for English-speaking Muslim kids

  • Android
  • iOS
  • Webapp
  • Education