crowdsource-fe

Frontend for Crowdsourcing Platform.

Features

• Supports these browsers and features.

Development

• Make sure your following requirements for npm and node are met:

Package	Version
npm	6.14.14
node	14.17.5

If you are using nvm, you can run nvm use in the root directory to install the correct version of node.

• Open your favorite Terminal and run these commands:

npm install

npm run dev

# Local dev server will automatically starts on http://localhost:8080

Available Scripts

In the project directory, you can run:

npm run clean

Clean up cached or build folders.

npm run dev

Runs the app in the development mode.
Open http://localhost:8080 to view it in the browser.

The page will reload if you make edits.

npm run dev:axe

Similar to npm run dev but also runs @axe-core/react.

npm run lint

For running eslint on source code.

npm run lint:fix

For fixing eslint errors.

npm run stylelint

For running stylelint on source code.

npm run stylelint:fix

For fixing stylelint errors.

npm run format

For running prettier on the source code.

npm run typecheck

For running typescript typecheck.

npm run test

Launches the test runner in the interactive watch mode.

npm run test:coverage

Launches the test runner with coverage.

npm run test:lh-ci

For running lighthouse-ci. Please ensure you ran npm run build first before running this command.

npm run node-talisman

For running talisman on the source code.

npm run check

For running lint, stylelint, typecheck, test with coverage and talisman.

npm run build

Builds the app for production to the .next folder.

npm run build:docker

Same as npm run build but for docker.

npm start

It will start the production server on http://localhost:8080. Please ensure you ran npm run build first before running this command.

npm run start:docker

It will start the production server on http://localhost:3000 for docker. Please ensure you ran npm run build:docker first before running this command.

App Setup Configurations

• To setup a new application, create/add the brand configuration file.

{
  "brand": {
    "initiativeBaseRoute": {
      "tts": <tts-initiative-pathname>,
      "asr": <asr-initiative-pathname>,
      "translation": <translation-initiative-pathname>,
      "ocr": <ocr-initiative-pathname>
    }
  }
}

*url should start with '/' e.g for tts: "/tts-initiative" Rename initiative pages here e.g Initiative folder name should be same as initiative url name e.g if for tts url is "/tts-initiative", then its page name should be "tts-initiative"

• To enable your brand specific changes first update config/.json file e.g. "brand": "" "contextRoot": "",

• To enable/disable your auto validation feature on UI, update config/.json file e.g. "autoValidation": "true".
  Know More

• Update sitemap.

• Custom brand images can be added inside a folder with filename format and structure similar to this folder. also change $image-context-root: for background images path to this folder

• To enable languages for contributions Add language code in config/.json "enabled_languages" to enable languages for contributions e.g. "enabled_languages": ["as", "bn", "en", "gu", "hi", "kn", "ml", "mr", "or", "pa", "ta", "te"];

• To enable languages for localisation/translations Add language code in config/.json "enabled_locales" to enable languages for localisation/translations e.g. "enabled_locales": ["as", "bn", "en", "gu", "hi", "kn", "ml", "mr", "or", "pa", "ta", "te"], create common.json folder to this folder; e.g to enable "marathi" language , create public/locales/mr/common.json; Copy all the keys from public/locales/en/common.json and paste to your folder i.e public/locales/mr/common.json; Run translation script to get translations in your language.

• Brand specific english content (text shown on UI) can be customised here. e.g "tts": "", "asr": "", "translation": "", "ocr": "", "logoTitlePrefix": "", "logoTitleSuffix": "" , // update this key only if website name contains two parts "initiativeTextSuffix": "", // update this key only if contains any suffix. e.g 'tts initiative' , here 'tts' is 'initiative name' and 'initiative' is its 'suffix' "recommendQuestionText": "Would you recommend to your friends & family?", "revisitQuestionText": "Would you revisit ?", "asrContributionStatsHeader": "Contributions made to ", "ttsContributionStatsHeader": "Contributions made to ", "ocrContributionStatsHeader": "Contributions made to ", "translationContributionStatsHeader": "Contributions made to ", "metaDescription": ": An initiative for Indian languages that will be as Indian, as you and I. We invite you to contribute data to develop Speech Recognition, Text-to-Speech, Machine Translation and Optical Character Recognition for Indian languages.", "metaOGTitle": " : An initiative for Indian languages"

    similarly update <initiative-name> used in other keys.
  

• Update T&C

• Update add in url (if required) to lighthouserc

Steps to onboard new language

• To onboard languages for contributions

  NOTE: If language code and language already added in below points you can skip that point.
  

  1. Add language code in config/.json "enabled_languages" to enable languages for contributions.

     e.g. "enabled_languages": ["as", "bn", "en", "gu", "hi", "kn", "ml", "mr", "or", "pa", "ta", "te"];

  2. Add language code and language in LOCALES_MAPPING, RAW_LANGUAGES AND DISPLAY_LANGUAGES constants to this file.

  3. Add language and their unicode in LANGUAGE_UNICODE,OTHER_LANGUAGE_UNICODE constant and language specific keyboard pattern in KeyboardLanguageLayout constant to this file.

     Refer below Link for Unicode:

     https://jrgraphix.net/r/Unicode/0E00-0E7F

     Refer below Link for keyboard layout:

     https://github.com/simple-keyboard/simple-keyboard-layouts/tree/master/build/layouts

     https://hodgef.com/simple-keyboard/demos/

  4. Add validation score for corresponding language to this file. Know More

  5. Add language key and value in en.json for localisation to this folder.

     e.g. "sanskrit": "Sanskrit",

  6. Add language code in config/.json "hasLanguage_image" to enable images and badges.

     e.g. "hasLanguage_image": ["as", "bn", "en", "gu", "hi", "kn", "ml", "mr", "or", "pa", "ta", "te"];

  7. Add badges and logos for corresponding language in images folder

     e.g. to enable "marathi" language logo , create public/images/[brand]/mr/logos and put all logos; to enable "marathi" language badges, create public/images/[brand]/mr/badges and put all badges;

• To onboard languages for localisation/translations

  NOTE: If language code and language already added in below points you can skip that point.
  

  1. Add language code in config/.json "enabled_locales" to enable languages for localisation/translations.

     e.g. "enabled_locales": ["as", "bn", "en", "gu", "hi", "kn", "ml", "mr", "or", "pa", "ta", "te"],

  2. create common.json folder to this folder.

     e.g to enable "marathi" language , create public/locales/mr/common.json;

  3. Copy all the keys from public/locales/en/common.json and paste to your folder i.e public/locales/mr/common.json;

     Run translation script to get translations in your language.

     NOTE: If you don't copy all the files from en.json and don't run the translation script then by default translations would be in english.

  4. Add language prefix in RAW_LANGUAGES,LOCALES_LANGUAGE_MAPPING AND LOCALE_LANGUAGES constants inside this file.

  5. Add language code in config/.json "hasLanguage_image" to enable logos.

     e.g. "hasLanguage_image": ["as", "bn", "en", "gu", "hi", "kn", "ml", "mr", "or", "pa", "ta", "te"];

  6. Add logos for corresponding language in public/images folder.

     e.g. to enable "marathi" language , create public/images/[brand]/mr/logos and add logos;