Skip to content

Analytics platform that tracks user check-ins on specific locations and provides real-time dashboards backed by Quarkus, Postgres, and Kafka-Streams.

Notifications You must be signed in to change notification settings

vienues/analytics-system-react

Repository files navigation

Reactive Analytics

TravisCI

Overview

Reactive Analytics is a monorepo that demonstrate how NodeJS, Apollo GraphQL, React, and Typescript can be used to develop robust data-driven web apps.

Both the server-side and client-side code use strong types which are used to generate the GraphQL schema. This allows developers to detect data and schema errors at design-time and compile-time.

Requirements

Getting started

After downloading or cloning repos open a terminal to the root folder and run yarn install to install dependencies.

    [ReactiveAnalytics] $ yarn install

Once the dependencies are install start the client and server using the start command.

    [ReactiveAnalytics] $ yarn start

This will open up a browser window to http://localhost:3005 for the client interface, and a GraphQL server on port 4000.

Data connection

By default the server will connect to the IEX trading system to retrieve realtime market information.

To connect to IEX during development, copy server/.env.example to server/.env and set the value of IEXCLOUD_PUBLIC_KEY to a valid IEX sandbox token.

Access IEX Sandbox token

  • If you haven't already done so, create a free personal IEX account at https://iexcloud.io/cloud-login#/register/
  • Login to your IEX console https://iexcloud.io/console/
  • Make sure the Sandbox testing Toggle on the bottom left hand side of the screen is set to on
  • Navigate to the API Tokens tab on the top left handside of the screen
  • Copy the Publishable Token

Generate schema and typings

Server schema

  • Ensure the backend is running locally and on port 4000
  • Run npm run generate-server-schema from root
  • A graphql-schema.json file will be generated in the server folder

Client typings

  • Run npm run generate-client-typings from root
  • The relevant typings will be generated in their respective folders
  • Global typings are stored in global-types

Core technologies used

  • Yarn workspaces - Multi-package manager to simplify the codebase in a single repository
  • Apollo GraphQL - GraphQL framework to allow rapid and reliable development of client-server communication
  • React - Interface framework
  • Styled Components - Interface styling framework

Useful developer add-ons

When working with the Reactive Analytics repo, there are many add-ons that make development and debugging painless. When using Visual Studio Code and Google Chrome as a developer environment consider trying out some of the following tools.

Visual Studio Code extensions from the marketplace

  • Apollo GraphQL - Rich editor support for GraphQL client and server development that seamlessly integrates with the Apollo platform
  • Debugger for Chrome - Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.
  • ESLint - Integrates ESLint JavaScript into VS Code.
  • JSON to TS - Convert JSON object to typescript interfaces
  • markdownlint - Markdown linting and style checking for Visual Studio Code
  • vscode-styled-components - Syntax highlighting for styled-components

Google Chrome extensions

Deployment

Deployment is through Travis CI

Merging to master will build and deploy to dev.

Manually trigger a build with custom config to deploy to uat/prod.

env:
  global:
    ENV: uat
    SKIP_BUILD: true

About

Analytics platform that tracks user check-ins on specific locations and provides real-time dashboards backed by Quarkus, Postgres, and Kafka-Streams.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published