AutonomiQ - First Move for Kids

Our client, America's Foundation For Chess uses chess as a learning tool to teach critical thinking

skill, advanced math and reading skills, improve behavioral and social skills, and build self-esteem in

2nd and 3rd grade students.

Executive Summary

Objective

The solution intended to develop powerful Chess app, that engage students in learning, create positive

educational experiences, and provide lifelong skills.

Problem Statement

Our client, America's Foundation For Chess wanted an online curriculum to stitch the flow together

with scene backdrop character, speech bubble, animations, chess board, activities with magnus and

its thought bubble, chess piece symbols, Q&A, score card, etc to create an interactive online course.

Business Requirements

Key Requirements

Summarized requirements put forth by the client were as below:

To provide the graphic library of UI elements/objects/characters. Primarily:

Scene backdrop

Character

Speech bubble

Board

Animations

Chess pieces, respective symbols and points, movements

Activities with hint, directions

Q&A

Error display, validations

Evaluation or Score card etc

●

Our Solution Structure

First Move Chess(FMC) has various modules for the users(students) to learn chess. These modules are names as First Move 200, First Move 300 ...etc. Each module has its own features and interactions to learn Chess. Total 20 lessons are there In First Move 200 series. Each lesson is a combination of video tutorial, activities and review questions.

First Move 201

First Move 201 is a sub module in First Move 200 series. This module contains 10 basic chess lessons. It starts with introduction to the chess game and explain about chess pieces and basic chess moves.

First Move 202

First Move 202 is an advanced stage in the First Move 200 series. This modules also contains 10 advanced lessons explain complex chess moves and game rules.

Solution Approach

Solution Dynamics and Interactions

User Interface

The Login UI module for SSO created using ReactJS. It is a simple web application with Register, Login and Forgot Password features. This is an independent module hosted in a server communicate with the SSO engine and redirect the user to the appropriate web application.

First Move Chess is created using ReactJS and JQuery. The chess related lessons are implemented in the JQuery application. This application has lots of DOM manipulations and customizations. Each lesson is composed of Audio, Video, Image and a customizable Chess Board. This chess board is a UI component. Each lesson is offering three important feature. Video tutorials will give a clear idea of the particular lesson using animations and narrations. Activities are added at the end of each video section. These activities will help the students to practice whatever the studied in the video section in a chess board. Practice questions will be there at the end of each lesson. After the practice questions section, students can analyze their performance.

We are using webpack to bundle the js and css files separately for each entry points. The appropriate JS and CSS files will be injected to the HTML files and rendered in the browser. In react application, we are handling user management and use authentication.

We have 3 types of users in FMC application

a) Admin Userb) Studentc) Teacher

Each user has separate landing page based on the features applicable to that user. The main features are user management and progress report.

In First Move Chess applications are using a common Single Sign On(SSO) for authenticating the users. If you register in the SSO, the user can use all applications under that SSO with the same login credentials. The user authentication details will be stored in the user authentication DB.

The idea of SSO is to provide a common point of authentication for all FMC users. The SSO is designed in such a way that the basic user details will be captured as part of registration and this basic informations will be given to the application while a user logs in to the system. Based on this information, Application can request the server to provide application specific user data. Once a user logged in to one of the FMC application, that user can user all other FMC applications using the access token provided by the auth server. The access token will get expired after a particular period of time

Technology Stack

Back end:

Python

Python is used to build a highly stable user management module for chess application. Python is also used in the SSO module as a user authentication server, that will use across the First Move sites.

MySQL

MySql is used in both Chess and SSO applications. In SSO, the user management details are stored in a MySql table to authenticate the user and provide the basic informations

Front end:

React JS and Redux

ReactJS is used to build the user management application. User who is using First Move Chess application has to be authenticated using an isolated login module. This SSO module is also developed using React and Redux. Redux helps in managing the application data.

Javascript/JQuery

Chess application is developed using Javascript/JQuery. This application is more of event driven with a lot of DOM manipulations. The chess application renders videos, images, audios based on a highly customizable configuration.

First Move for Kids - Chess Application was delivered on time with following benefits:

Easy and user engaging application with simple UI

Faster and improved version of Chess app with video integration

Scalable web app upto 3200 X 1800 resolution

Business Outcomes

HashedIn has helped many promising firms across the globe by building customized solutions to give the users a completely hassle-free experience. Kindly let us know if you

have any specific problem/use case, where we can provide more information or consult you.

https://hashedin.com/contact-us/

Business Outcomes