Table of Content

com-dict-client
Deployed on
Community
User Guide
1. How to Setup
2. How to Use
Set-up-Firebase
1. How to Deploy Firebase Cloud Functions
Firebase Emulator Flow
Install, Configure and Integrate Firebase Emulator Suite
1. How to install
2. How to Configure
Integrate With your CI System.
1. To Start the Emulators:-
2. Import and Export:-

com-dict-client

CommunityDict is a software tool developed by the SCoRE Lab that facilitates community-driven vocabulary development. It allows users to collaborate and contribute to the creation of shared dictionaries, which can be used to support natural language processing tasks such as machine translation, sentiment analysis, and information retrieval.

With CommunityDict, users can easily add new terms, definitions, and translations to the dictionary, as well as vote and comment on existing entries. The tool also provides a range of features to help users manage and organize the dictionary, including search functionality, automatic term extraction, and customizable filters.

Overall, CommunityDict is a powerful and flexible tool that enables communities to develop and maintain their own specialized vocabularies, improving the accuracy and effectiveness of natural language processing applications in a variety of domains.

Deployed on

https://community-dictionary-dev.web.app/

Community

Join and communicate with other members on our community. We communicate on gitter

User Guide

How to Setup

Clone the repository.

For cloning this repo: Run git clone https://github.com/scorelab/com-dictionary.git.

Run the above command in the folder in which you want to make a clone.

How to Use

Run npm install in com-dict-client folder.

 cd com-dict-client/
 npm install

NOTE: If npm install is not executing successfully, then use node v14 and npm install --legacy-peer-deps and try again.

First you need to create a .env file in com-dict-client folder following the template provided in the file .env.sample.

Set-up-Firebase

Sign in to https://console.firebase.google.com/.
Click Add Project and necessary information about the project.(Below mentioned the Steps to add project to firebase)
- To add Firebase resources to an existing Google Cloud project, enter its project name or select it from the dropdown menu.
- To create a new project, enter the desired project name. You can also optionally edit the project ID displayed below the project name
- Firebase generates a unique ID for your Firebase project based upon the name you give it. If you want to edit this project ID, you must do it now as it cannot be altered after Firebase provisions resources for your project. Visit Understand Firebase Projects to learn about how Firebase uses the project ID.
Agree to the terms and click Create Project.
After creating the project, click Add Firebase to your web app.
- In the center of the Firebase console's project overview page, click the Web icon to launch the setup workflow.
- If you've already added an app to your Firebase project, click Add app to display the platform options.
- Enter your app's nickname.
- This nickname is an internal, convenience identifier and is only visible to you in the Firebase console.
- Click Register app.
Copy the firebase configuration.
Paste the configuration .env file.
You can find your <FIREBASE_DATABASE_URL> in the Realtime Database section of the Firebase console. Depending on the location of the database, the database URL will be in one of the following forms:
- https://DATABASE_NAME.firebaseio.com (for databases in us-central1)
- https://DATABASE_NAME.REGION.firebasedatabase.app (for databases in all other locations)
You can get your <FIREBASE_VAPID_KEY> from Cloud-Messaging tab
- navigate to the setting of your project Open the Cloud Messaging tab.
- scroll to the Web configuration section.
- In the Web Push certificates tab, click Generate Key Pair. The console displays a notice that the key pair was generated. You get your Vapid key form there.

You should fill in these values in their relevent fields in the .env file.

To run the project:
$ npm start

If you failed to run the project do the following steps :

delete node modules
delete package-lock.json
re run npm install If error still exists add SKIP_PREFLIGHT_CHECK=true in your .env file

NOTE: Before starting the server create a file named .env same as .env.sample and add your Firebase Configurations in the file.

Visit localhost:3000 to browse.

How to Deploy Firebase Cloud Functions

NOTE:To Deploy firebase cloud functions you have to satisfy following requirements

Your Firebase project should have Blaze plan or higher version ##steps to upgrade to blaze plan
1. Log in to the Firebase Console. In the lower left, you will see that your project is listed on the Spark plan. Click the upgrade button.
2. Select the Blaze plan
3. Select a billing account. Then click Continue and Purchase. And there you go on the Blaze plan.
You should have installed Firebase CLI tool in your machine To install Firebase CLI machine you can use the command npm install -g firebase-tools

Run npm install in com-dict-client/functions folder.

 cd com-dict-client/functions
 npm install

Then you have to generate a private key file for your service account.To get the key file go to this link and follow the instructions https://firebase.google.com/docs/admin/setup#initialize-sdk.

Once you have obtained the key, create a folder named as 'private' in the directory 'com-dict-client/functions'. Then copy and paste the key file in private folder. Rename the key file as 'cl-dev-pk.json'

After that change the database url to your project database url in 'com-dict-client/functions/auth.js'

Move to the root directory and open a command prompt and type following commands

 npm run-script build
 firebase login
 firebase projects:list

Find the project ID from the project list that you want to deploy the cloud functions

firebase use <project_id>
firebase deploy

To run storybook : npm run storybook It will redirect to 6006 port. Find detailed information here

To run cypress tests: npx cypress run It will open a prompt displaying all the tests. You can find detailed information here

Firebase Emulator Flow

flowchart TB
     sougatarmail("Email Pass Login \n \n [email protected] \n\n Pass : 123456 ")
    com-dict-clientusermail("Google Login \n \n com-dict-client User")
    shivanandamail("Email Pass Login \n \n [email protected] \n\n Pass : com-dict-client ")
    mahendarmail("Google Login \n \n Mahendar Goud")
    sarfarazmail("Google Login \n \n sarfaraz")

    org[(Organization)]-->sougataijuorg
    org[(Organization)]-->com-dict-clientorg
    org[(Organization)]-->google
    org[(Organization)]-->github
    org[(Organization)]-->youtube

    ft[(Firestore)]---sougatariju1---id1(organization)-->sougataijuorg
    ft[(Firestore)]---com-dict-clientuser---id2(organization)-->com-dict-clientorg
    ft[(Firestore)]---shivananda---id3(organization)-->google
    ft[(Firestore)]---mahendar---id4(organization)-->github
    ft[(Firestore)]---sarfaraz---id5(organization)-->youtube

    auth[(Authentication)]--->sougatarmail--->sougatariju1
    auth[(Authentication)]--->com-dict-clientusermail--->com-dict-clientuser
    auth[(Authentication)]--->shivanandamail--->shivananda
    auth[(Authentication)]--->mahendarmail--->mahendar
    auth[(Authentication)]--->sarfarazmail--->sarfaraz

Install, Configure and Integrate Firebase Emulator Suite

How to install

Before installing the Emulator Suite you will need:-

Node.js version 8.0 or higher.
Java JDK version 11 or higher.

To install the Emulator Suite:

Install the Firebase CLI. If you don't already have the Firebase CLI installed, install it (https://firebase.google.com/docs/cli#install-cli-windows). You will need CLI version 8.14.0 or higher to use the Emulator Suite.
You can install the Firebase CLI using npm (the Node Package Manager). Note that you will need to install Node.js and npm. Installing Node.js should install npm as well.

npm install -g firebase-tools

You can check which version you have installed using the following command in the terminal.

firebase --version

After Installation, Initialize the firebase Using

firebase init

Now Set up the Emulator Suite. The Below Command Provides you the emultors Like, Authentication,Firestore, Realtime Database,Storage DataBase etc. Select the emulators you needed

firebase init emulators

How to Configure

Configure Emulator Suite:-

You can optionally configure the emulators network ports and path to Security Rules definitions in the firebase.json file:
Change emulator ports by running firebase init emulators or by editing firebase.json manually.

Note:-(Recommended)If you don't configure these settings, the emulators will listen on their default ports, and the Cloud Firestore, Realtime Database and Cloud Storage emulators will run with open data security.

Port Configuration - These are the Default Ports Provided you can change them while initializing(if needed)

Emulator	Ports
Authentication	9099
Emulator Suite UI	9099
Cloud Functions	9099
Realtime Database	9099
Cloud Firestore	8080
Cloud Storage	8080
Firebase Hosting	5000
Pub/Sub	8085

The emulators will take Security Rules configuration from the database, firestore and storage configuration keys in firebase.json.

Integrate With your CI System.

Installation and configuration of the Emulator Suite with containers in a typical CI setup is straightforward.

To Start the Emulators:-

The Emulators can be start according to the user preferences, .Find detailed information here

firebase emulators:start

npm run emulator

You need to run firebase emulators:start or npm run emulator first and then run npm start inorder to run the com-dict-client webpage.
You can check/open Emulator suite by visiting localhost:4000.

Import and Export:-

To import npm run emulator-import
To export npm run emulator-export
Note:- To understand beforehand about importing data from and to emulators, please see this.
READ THE RULE-SET FILE PRIOR TO USING "testdata" FILE.

Migrating Code To Tailwind CSS

I noticed that the project is using Inline CSS, which can quickly become unmanageable as the size of a project grows. It is often used for small-scale projects and prototypes, but the CSS becomes increasingly challenging to maintain and scale as the project becomes more complex. This is where Tailwind CSS comes in.

Tailwind CSS is a CSS framework that provides a consistent and structured approach to styling web pages. It provides a set of predefined CSS classes and a grid system to make it easier to style your website. This makes it easier to maintain and scale your CSS as your project grows.

Here are some of the key benefits of using Tailwind CSS over inline CSS:

Consistency: Tailwind CSS provides a consistent look and feel across all pages of your website, making it easier to maintain a consistent design.

Reusability: Tailwind CSS provides a set of predefined CSS classes that can be reused throughout your project, reducing the amount of CSS you have to write and maintain.

Scalability: Tailwind CSS is designed to be scalable, making it easier to add new features and pages to your website as it grows.

Responsiveness: Tailwind CSS includes a responsive grid system that automatically adjusts your website's layout based on the screen size, making it easier to create responsive websites.

In conclusion, Tailwind CSS provides a more maintainable and scalable approach to styling web pages, making it the ideal choice for big projects. Using Tailwind CSS, you can reduce the time and effort required to style your website, allowing you to focus on developing other aspects of your project.

Thus I would recommend migrating to tailwind CSS .