Alfred-client-app NPM

Alfred Client App

This is a Single Page Application (SPA) to offer Alfred customers services such as monitoring of their services and also order new services. Feel free to make changes in this file to add more information about this project.

Requirements

Install Git.
Install yarn.

Install

Download this repository.
Open the project with the Visual Studio Code IDE.
Open a terminal in the IDE (or outside) and install project dependencies by executing:

yarn

.env

Create .env file with the following content:

REACT_APP_AWS_COGNITO_IDENTITY_POOL_ID=XXXXX
REACT_APP_AWS_COGNITO_REGION=XXXXX
REACT_APP_AWS_COGNITO_POOL_ID=XXXXX
REACT_APP_AWS_COGNITO_WEB_CLIENT_ID=XXXXX
REACT_APP_AWS_COGNITO_DOMAIN=XXXXX
REACT_APP_FETCH_URL=XXXXX
REACT_APP_TRACKING_URL=XXXX
REACT_APP_GOOGLE_API_KEY=XXXXX
REACT_APP_SENTRY_DSN=XXXXX
REACT_APP_DEBUG_MODE=false
REACT_APP_SENTRY_TRACES_SAMPLE_RATE=0.0
REACT_APP_MIXPANEL_TOKEN=XXXX
REACT_APP_GA_TRACKING_ID=XXXX

REACT_APP_SENTRY_TRACES_SAMPLE_RATE will only be taken into account in development remove REACT_APP_SENTRY_DSN to omit reports to sentry *remove REACT_APP_GA_TRACKING_ID to omit reports to Google Analytics

Run

Execute the following command to start debuging app:

yarn start

By default, 127.0.0.1:3000 will be open in your browser.

Folders structure

src/assets for images and icons.
src/commons for non-utilitarian components that can be shared across the app.
src/modules for different screens and their components in the app.
src/redux for handling all Redux configuration and implementation.

Linter

This project use eslint to format and fix errors in the code. We use airbnb standart and a list of custom rules defined by us to make the code more readeable. Please disable prettier or extensions alike that may potentially conflict with our linter.

To fix errors in the code you could execute:

npx eslint --fix .
yarn lint

At the same time you could configure your vscode to execute eslint after save.

# Inside project
mkdir .vscode
touch .vscode/settings.json

And then paste this code:

{
    "eslint.run": "onSave",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.validate": ["javascript"]
}

Note: .vscode folder is ignored by git.

Test

Not yet implemented.