VK Group Stats, v1.0.0

Group list (with the light theme)

Service for a collecting of a VK groups stats.

Major release. Implement the authentication UI, improve a security and a back-end and front-end UX.

Change Log

back-end:
- security:
  - improve a security by setting various HTTP headers via the Helmet package;
  - use a generic session name;
- environment variables:
  - update environment variables from a .env file;
  - check required environment variables;
  - replace a MongoDB host/port pair to a MongoDB connection URI;
  - remove session settings;
  - generate a VK app redirect URI automatically;
front-end:
- add an authentication process to the UI;
- add a group list refreshing;
- add an about app dialog;
- themes:
  - set an app background color from an app theme;
  - move counters deltas colors to an app theme;
  - support a light theme;
  - support a theme selection via an environment variable;
- fix the bug with a cookies sending via Fetch API.

Features

back-end:
- authentication:
  - an authentication via VK;
  - support of a skipping of an authentication;
- users:
  - data:
    - MongoDB ObjectId;
    - VK ID;
  - operations:
    - getting of a current user;
    - automatically addition on an authentication;
  - support of a fake user on a skipping of an authentication;
- groups:
  - data:
    - MongoDB ObjectId;
    - user ObjectId;
    - VK screen name;
  - operations (for a current user):
    - getting of all;
    - addition of one;
    - deletion of one;
- counters:
  - data:
    - MongoDB ObjectId;
    - group ObjectId;
    - addition timestamp;
    - group members counter;
  - operations (for a specified group):
    - getting of all in a descending order;
    - getting of all in a descending order beginning with a specified timestamp;
    - addition of one (automatically via VK API);
    - deletion of all;
- automatically addition of counters via VK API for all added groups by schedule;
front-end:
- design:
  - adaptive;
  - material:
    - dark;
    - light;
- group list:
  - displays:
    - groups;
  - states:
    - fetching;
    - success;
    - failure;
  - for every group:
    - displays:
      - VK screen name;
      - counters for a last day;
    - states:
      - fetching;
      - success;
      - failure;
    - for every counter:
      - displays:
        
        timestamp;
        
        number of subscribers;
        
        delta compared to a previous;
- dialogs:
  - add group dialog;
  - about app dialog;
- group list refreshing;
- authentication:
  - login;
  - logout.

Installation

Install Node.js v6+: https://nodejs.org/en/download/package-manager/

Install MongoDB Community Edition v3.4+: https://docs.mongodb.com/manual/installation/

Clone this repository:

$ git clone https://github.com/thewizardplusplus/vk-group-stats.git
$ cd vk-group-stats

Install dependencies:

$ npm run install-all

Build the project (with the dark theme by default):

$ npm run build

To use the light theme, build the project with the REACT_APP_USE_LIGHT_THEME environment variable set to TRUE:

$ REACT_APP_USE_LIGHT_THEME=TRUE npm run build

Create the VK website app: https://vk.com/dev/first_guide?f=2.+Application+registration

Its authorized redirect URI must be in the format: http://<host>[:<port>]/authentication/vk/callback.

Set environment variables in the .env.prod file in the project root and rename it to .env:

$ nano .env.prod
$ mv .env.prod .env

Update

Pull updates from the repository:

$ cd vk-group-stats
$ git pull --rebase origin master

Install new dependencies:

$ npm run install-all

Rebuild the project (with the dark theme by default):

$ npm run build

To use the light theme, rebuild the project with the REACT_APP_USE_LIGHT_THEME environment variable set to TRUE:

$ REACT_APP_USE_LIGHT_THEME=TRUE npm run build

Usage

$ npm run serve

Environment variables:

NODE_ENV — the current environment (allowed: production);
REACT_APP_USE_LIGHT_THEME — use the light theme (it's accepted only during the build time; TRUE to an use);
VK_GROUP_STATS_SERVER_HOST — the server host (default: localhost);
VK_GROUP_STATS_SERVER_PORT — the server port (default: 4000);
VK_GROUP_STATS_MONGODB_URI — the MongoDB connection URI (default: mongodb://localhost/vk-group-stats);
VK_GROUP_STATS_VK_APP_ID — the VK app ID;
VK_GROUP_STATS_VK_APP_SECRET — the VK app secure key;
VK_GROUP_STATS_SKIP_AUTHENTICATION — skip an authentication (TRUE to a skip);
VK_GROUP_STATS_SCHEDULING — scheduling settings (use the cron utility format; default: 0 0 * * *, i.e. once every day).

Environment variables can be specified in a .env file in the project root in the format:

NAME_1=value_1
NAME_2=value_2
...

See details about the format: https://github.com/motdotla/dotenv#rules

A .env file will never modify any environment variables that have already been set.

Redux state

Redux state in the JSON Schema format:

{
  "type": "object",
  "properties": {
    "login": {
      "type": "object",
      "properties": {
        "state": {
          "$ref": "#/definitions/state"
        },
        "isLogged": {
          "type": "boolean"
        }
      },
      "required": [
        "state",
        "isLogged"
      ]
    },
    "appDialog": {
      "$ref": "#/definitions/dialog"
    },
    "groupDialog": {
      "$ref": "#/definitions/dialog"
    },
    "groups": {
      "type": "object",
      "properties": {
        "state": {
          "$ref": "#/definitions/state"
        },
        "items": {
          "type": "array",
          "items": {
            "type": "object",
            "properties": {
              "state": {
                "$ref": "#/definitions/state"
              },
              "data": {
                "$ref": "#/definitions/group"
              },
              "counters": {
                "type": "object",
                "properties": {
                  "state": {
                    "$ref": "#/definitions/state"
                  },
                  "items": {
                    "type": "array",
                    "items": {
                      "$ref": "#/definitions/counter"
                    }
                  }
                },
                "required": [
                  "state",
                  "items"
                ]
              }
            },
            "required": [
              "state",
              "data",
              "counters"
            ]
          }
        }
      },
      "required": [
        "state",
        "items"
      ]
    }
  },
  "required": [
    "appDialog",
    "groupDialog",
    "groups"
  ],
  "definitions": {
    "dialog": {
      "type": "object",
      "properties": {
        "open": {
          "type": "boolean"
        }
      },
      "required": [
        "open"
      ]
    },
    "state": {
      "type": "string",
      "enum": [
        "fetching",
        "success",
        "failure"
      ],
      "default": "success"
    },
    "group": {
      "type": "object",
      "properties": {
        "_id": {
          "$ref": "#/definitions/mongodb-objectid"
        },
        "screen_name": {
          "type": "string"
        }
      },
      "required": [
        "_id",
        "screen_name"
      ]
    },
    "counter": {
      "type": "object",
      "properties": {
        "_id": {
          "$ref": "#/definitions/mongodb-objectid"
        },
        "timestamp": {
          "type": "string",
          "pattern": "^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}.\\d{3}Z$"
        },
        "value": {
          "type": "integer",
          "minimum": 0
        },
        "delta": {
          "type": "integer"
        }
      },
      "required": [
        "_id",
        "timestamp",
        "value"
      ]
    },
    "mongodb-objectid": {
      "type": "string",
      "pattern": "^[0-9A-Fa-f]+$",
      "minLength": 24,
      "maxLength": 24
    }
  }
}

Repository

Link: https://github.com/thewizardplusplus/vk-group-stats/tree/v1.0.0.

Content: code.

License: MIT.

Screenshots

Main menu (unauthorized)

Main menu (authorized)