Prognoz Web App - web application with tournaments for football forecasters

Table of contents

• General info
• Technologies
• Setup

General info

Prognoz - a project of tournaments for football forecasters. Created, working, and complementing since 2016. The project is non-profitable - all work of developers and administrators is volunteered. The main diversity of the project is the ability to change a forecast on the match until a specific minute, depending on various tournament conditions. There are different types of tournaments - individual and team. A simplified principle of work can be described as follows:

• administrators add matches to forecast
• players add and change their forecasts
• administrators add results of the matches
• system calculates points and ratings, compares points, withdraw players, etc.

Technologies

The project Prognoz uses a client-server architecture. Respectively, this GitHub repository contains a web application that is a client. The web application is built on the popular frontend framework Angular. The following libraries used as well:

• bootstrap / ng-bootstrap / bootswatch
• ng-select
• angular2-notifications
• chart.js / ng2-charts
• fingerprintjs2
• moment
• lodash
• quill / ngx-quill
• pusher-js

A server-side part of the code is placed in a separate repository.

Setup

The web application could be run locally or in the Docker. In both options, the web application uses the next environment variables:

Environment variable	Required	Description	Example
API_BASE_URL	+	Base URL of server-side API	http://localhost:8000/api
IMAGE_BASE_URL	+	Base URL of images	http://localhost:8000/img
PUSHER_API_KEY	-	The kee for users-online list
RECAPTCHA_SITE_KEY	-	The kee for captcha

Locally

1. Install node and npm
   Install node of version 14.7 according to your platform. During the installation of node, npm will be installed automatically.
2. Make sure that node and npm are installed
   Both console commands node -v npm -v should output versions. For example v14.17.4 and 6.14.14.
3. Install Angular-CLI
   Run npm install -g @angular/cli@10.2.1 command.
4. Make sure that Angular-CLI is installed
   Run ng version command. It should print meaningful information.
5. Install dependencies
   Run npm ci command from the project root. The folder node_modules should appear afterward.
6. Launch web application
   Run ng serve command with previously set environment variables. The web application will be automatically rebuilt with each code change.
7. Open web application
   Go to http://localhost:4200/ in your browser.

Other useful command:

• ng test - run tests.
• ng generate component|directive|pipe|service|class|guard|interface|enum|module element-name - generate a new element.
• ng build - build the project.

In Docker

1. Install dependencies
   Run docker run --rm --interactive --tty --volume $PWD:/app --workdir /app node:14.17.4-alpine npm ci command.
2. Launch web application
   Run docker-compose -f docker-compose.dev.yml up web_app_dev command. The web application will be automatically rebuilt with each code change.
3. Open web application
   Go to http://localhost:4200/ in your browser.