Typing Battle - University Web Application Project

A special assignment of Web Application course at university. The application provides 3 sections: a typing area for users to practice, a shopping area with a collection of keyboards, user registration and authentication system. To have a deeper understanding of Typing Battle, please have a look at the PROJECT REPORT.

Teck Stack:

• Architecture: REST
• Design: Single Page Application
• Database: MySQL
• Front-end: HTML5, CSS, Javascript, Ajax, Bootstrap, jQuery
• Back-end: Python, Flask, Flask-SQLALchemy, JWT

Installation

1. Prerequisites

• Python 3.0 or later is required. If you haven't installed it, please visit https://www.python.org/downloads/. (version 3.8.6 is recommended since it was used during the development process).
• pip (package installer for Python). Follow the instructions in https://pypi.org/project/pip/ to get the lastest version.

2. Download the project

• This could be easily down via download button on GitHub or you can use git clone if you prefer.

3. Setting up a virtual environment

To avoid environmental conflicts, let's set up a virtual environment to run the application

• Download the virtualenv package:

$ pip install virtualenv

• Now direct to the root folder of Typing Battle, creat a new virtual environment with specific python version (here I use python 3.8). You can also change the name of the environment if you want (here I set its name is venv).

$ virtualenv venv --python=python3.8

• Now activate the environment:

$ source venv/bin/activate

4. Installing third-party libraries

All the required packages have been listed in requirements.txt. In the terminal, run the following command to install them:

$ pip install -r requirements.txt

Some of the main packages you might want to have a look at:

• Flask: Micro web framework
• Flask-SQLALchemy: Object-relational mapping (ORM)
• pyJWT: Encoding and decoding the JSON Web Token.
• marshmallow: Validating request data
• flask-hashing: Hashing user's password
• pytest: Writing unit tests

5. Setting up SQL server

• Login into MySQL and create 3 databases: typing_battle, typing_battle_development and typing_battle_test for production, development and testing environment respectively. This can be done by logging in to the MySQL server, then open a WorkBench Query Tab and execute the following statement:

CREATE DATABASE typing_battle;

CREATE DATABASE typing_battle_development;

CREATE DATABASE typing_battle_testing;

• All the tables will be automatically generated when we first run the application, thus we don't have to do it manually. However, you will need to tell the application the URI of your SQL server. To do this, look for the config.ini file in the config folder, set the attributes of the environment you want to work with. For example, if you are running mysql on a local machine with development environment:

[mysql-development]
host = localhost
database = typing_battle_development
user = root
password = 123456

6. Some configuration

In config folder, you can change these following configuration:

• SECRET_KEY: secret key used for authorization system.
• JWT_EXPIRATION_PERIOD: the length of expiration period of JWT access token.

Setting up a local host web server

• From the terminal, declare the environment variables:

$ export ENVIRONMENT=development

• Then, run the application

$ ENVIRONMENT=development python run.py

• Now, all the tables have been created in the database. We need to init some data for the application. Open an IDE, then execute 3 following files in main/data:
  

  • save_common_english_words.py
  • save_products.py
  • save_units.py

• The application is now ready at localhost: http://127.0.0.1:5000.

Testing

• Postman: You can use postman to create custom requests to our local host.
• Pytest: I wrote several tests in the tests folder. You can write some test by your own, there are functions in helpers.py may help you simplify the work. But first, let's switch to testing environment:

$ export ENVIRONMENT=testing

• After that, run this command to obtain the back-end unit testing results (85% coverage):

$ pytest --cov main/controllers