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
- 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.
- This could be easily down via download button on GitHub or you can use
git clone
if you prefer.
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
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
- 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 theconfig
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
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.
- 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
.
- 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 inhelpers.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