In one of the cases we have already talked about how, in cooperation with the chess school ABChess developed the eponymous app for teaching chess. Soon after the launch of the project in production we continued to modify the school’s digital service and began to develop a new project – ABChess Web.

‍

Not Exactly the Same

So we had to design a web site for chess school.

To emphasize that the site is not a separate product, but a part of the whole service ABChess, our designers have developed for it UX and UI, based on the concept of the app design. So we managed to implement a "native" and intuitive interface for both experienced "mobile" users and new users of the service.

The website also had to replicate the application’s functionality, that is, contain the Learning Part, the Account and the Game Module.

A year ago, when developing an application for iOS, we spent a lot of time developing a chessboard, because the Stockfish engine we needed did not have a library for Swift. No such problem was encountered when developing the website as for the frontend we used React, to which Stockfish has already been adapted.

However, this time we faced another difficulty - we had to choose Internet acquiring, which was to meet the business requirements of the project. First, ABChess Web should provide the possibility not only for standard purchases, but also promotional codes with returns. Secondly, the site should be appropriate for making purchases from other countries. As a result, we chose Paddle, which, unlike other acquiring services, gives the opportunity to sell on the European market.

‍

New Features

As the website itself was ready, we started to implement new features on the platform. We had 5 months for that.

This way, we have introduced advertising banners, which are displayed on the site depending on the language and platform of the user.

We also added the ability to buy courses separately. If previously to access courses one had to buy the whole subscription, now the user can choose what to study on his own.

Among other things, we have integrated the service with Kaspi Bank. Thanks to this, you can now buy ABChess using the bank’s mobile app.

‍

Client Site

We started by improving the logic of students' interaction with the site. For example, we added to the app and on the site a search system for courses and authors. In addition, we developed the mechanism of the advised lessons. This means that now when the student is making mistakes while completing the tasks on a certain topic, the system invites him to look at the certain lessons. Among other things, we gave users the opportunity to customize the board and draw arrows on it, so that the coaches could more clearly communicate the basics of tactics to the students.

‍

Administrative Panel

Besides the client part, we have optimized the administrative panel. E.g.: We have updated the management of statistics. The administrator can now view and upload detailed user statistics for each course, lesson and exercise.

Another significant change was the added functionality that allows the administrator to create new learning categories. So the site gained courses in English and mathematics.

Also new roles have been added to the admin panel: Content Maker, Analyst and Teacher.

The Content Maker user can only add new content. The new role allowed the school to invite outstaff coaches who could contribute to the educational program.

As to the Analyst, he sees the pages of the statistics of the students and can assess their progress, the role of the Teacher is discussed in the next block.

‍

Multiplayer

One of the most interesting tasks we encountered was the development of a multiplayer or, as it was called in the project ABChess - a webinar.

A webinar is a set of exercises that a group of students does at the same time. It is planned and created by the teacher in advance, he selects the exercise from the teaching section and sets the time limit for completing. So far webinars are only available for authorized users, but it is planned to implement open webinars in the future.

The webinar consists of three phases - Lobby, Webinar, and Totals. Students enter the Lobby before the competition. Here they can communicate with other participants and watch the timer running the countdown to the beginning of the first task.

Then, at the specified time, the webinar starts automatically. Students do already familiar platform exercises. For correct answers students earn points. A real-time updated rating adds a competitive moment.

After the webinar, the winners of this mini-competition are shown on the screen. The smartest and attentive are placed in the prize places with cups.

‍

Multiplayer vs. Time

Having tested the webinar, we offered the students of the school ABChess to try it. At first, the system went well. Users successfully logged in to the webinar, communicated in the chat room, and our customer gave students brief instructions on how to proceed.

Even though everything was going great, suddenly we faced the problem of implementing local time on the device. While some students were still counting down to the start of the webinar, others had their first exercise. The source of the problem was revealed immediately.

Some elements of the system, such as the animation of the correct moves shown after solving the exercise, cannot be calculated on the server. So we decided to implement part of the logic on the frontend and count all the processes on it. Unfortunately, this decision failed.

The time allotted for the development was coming to an end, and the problem had to be eliminated. We had only one solution – to move the maximum amount of logic from the frontend to backend. Soon the code was rewritten and the system was tested. We were ready to give the project to the customer.

At the moment, the webinars have already been fully put into operation, and the customer plans their development. For example, it is planned to implement webinars in teams.

‍

Results

We are eager to share with you photos taken by our customer, the founder of the ABChess school, that show children engaged in webinar! We believe it is the best assessment of the work done.