DEV Community: Zain Ahmed

Currency Converter Chrome Extension

Zain Ahmed — Sun, 24 Nov 2024 11:48:39 +0000

Case study

I was working on a trading concept and I noticed as per my search that there is no platform (website/extension) where I can convert currency cases as one to all like USD to all other currencies.

Product

Here I built a Chrome extension which used to convert any currency to all others with a single click, also I wanted to save users' clicks so I built a Chrome extension so if any trader wants to check any conversion user can get conversion without navigating to any website just open the extension and convert it.

You can also filter the result after conversion, so see only your preferred currency.

Not just that, I have added Crypto coins conversion also for some most popular cryptocurrencies. So you can get normal and crypto conversion at the same time.

Link to Chrome extension https://chromewebstore.google.com/detail/currency-converter-extens/dmclabfilpimdfkififkfndpgfkffbkm

Do check out and give feedback
don't forget to leave a review/rating on extension

Demo

Tech Stack

Javascript | React.js

You can follow me here https://linktr.ee/zaahmed

Create NPM package In React.JS

Zain Ahmed — Fri, 15 Nov 2024 16:55:59 +0000

In this article, I'll walk you through the process of creating and publishing an npm package for a React.js application.

First, run the following command:

npx create-react-library react-loader

This will generate a basic React.js application/package. After running the command, you'll see a project structure like this:

in the src folder, you'll find an index.js file.

You can either create your library component directly in the index.jsfile, or you can create a new component file in the src folder and export it from the index.js file like this:

If you're using CSS for your component, be sure to import it into your component file.

Next, if you have a dist folder in your project, delete it. To test if your component is functioning correctly, navigate to the example/src folder.

In the App.js file, import your component as shown here. This is the same approach you'll use to include this library as an npm package in other projects.

To run the app, execute the following commands:

cd react-loader && npm start
cd react-loader/example && npm start

After testing your library, it's time to publish it.

If you've already set up a repository for your project, simply push the final changes. Otherwise, create a new repository and push your changes.

You also need to create a .npmignore file at the root of your project, which functions similarly to a .gitignore file for NPM. It prevents certain files and folders (like node_modules, .git, .gitignore, etc.) from being published to the NPM registry.

After pushing your changes, run the command npm login. You'll be prompted to open NPM in your browser, where you can log in to your account or sign up if you don’t have one. Then, execute npm publish, which will publish your dist folder to NPM with the version specified in your package.json file.

Once the package is published, you can view it on the NPM website by searching for your package name or by visiting your profile, where all your packages will be listed.

Follow for more You can find me here

Make your documentation with AI Tool (Spreading)

Zain Ahmed — Tue, 07 Nov 2023 13:52:33 +0000

Spreading is an advanced AI tool designed to boost the visibility of your projects or products by crafting visually striking documentation. It goes beyond just aesthetics, as it serves as a valuable resource for internal team collaboration, enabling members to efficiently generate detailed, comprehensive, and expedited documentation covering product information, features, modules, and setup procedures etc. thanks to its powerful AI-driven capabilities,

Spredding.io has versatile applications across various categories, including UI/UX, software development, resource management, and the creation of documentation for open source libraries, etc.

Benefits

University Students: This is an excellent tool for university students to quickly create proper documentation for their FYPs (Final Year Projects) and university assignments.

Freelancers: If you're a freelancer looking to impress your clients, you can use it to establish a clear roadmap for your project or develop comprehensive documentation. This ensures that anyone, from any location, can easily understand your project or product, facilitating a quick start.

Startups: If you're launching your startup, this tool can be invaluable for maintaining user guides that keep communication seamless among different teams, right from the initial stages, ensuring a thorough understanding of your product

Open Source Contributor: The open-source community plays a pivotal role in the life of developers. If you are an open-source contributor with an open-source library or project, you can utilize this documentation tool to craft well-maintained documentation. This, in turn, aids others in comprehending your concept and guides them on how they can contribute to it.

Steps

You have the option to either create a personal private page or initiate a team project.

Let's start by delving into Team Projects. Begin by creating a new team project and giving it a name; this action will take you to your team project interface

While on the Team Project screen, select the AI options. You will be prompted to input specific information for the following categories:
Developer Documentation
Product Documentation
User Guide or Other
Based on the details you provide, the system will automatically generate a folder structure for your project, similar to the example shown.

Choose the page within the folder structure where you wish to proceed.
Opt for the 'Edit' options

This will provide you with an editable view, allowing you to craft documents specific to that page.

Entering "/" will present you with numerous options, and you can choose the one that suits your needs and add it to your document.

You can also choose an option to automatically generate a detailed explanation for your code by selecting "Generate Documentation from Code.

This tool will take your code and transform it into a clear, detailed explanation that aligns with your code, similar to the example provided.

You can also generate an outline by supplying some information. For example, I chose the 'User Guide' option to create a manual guide for my open-source project, and it provided me with a well-structured document that I could continue to build upon by adding the relevant information

You have the option to utilize a preview feature located at the bottom left corner to view your document as it would appear from a user's perspective.

Additionally, you can also publish your document on a complimentary domain, enabling you to easily share it with your team or even a global audience.

You can further customize your live document by configuring settings, such as incorporating icons and selecting a unique site name.

After you deploy your document to a specific domain, you'll be able to access it online and easily distribute it to others.

You also have the option to include a personalized domain and set up a custom proxy.

Adding a custom domain will direct you to your designated reference domain.

If you prefer collaborative work and are leading a team in a project or product development, you can utilize the team feature to include your colleagues in the project. This will help you create documentation that enhances your team's efficiency and makes your project or product more comprehensive.

From this menu, you can also review a list of members who have been included in this team project.

You can invite others to your private or team project by simply copying the default link and sharing it with the relevant individuals.

Signup for free to get for features

Spreading AI is a versatile tool that benefits not only startups but also larger enterprises and their products. Unlocking professional-level features is easy – simply sign up for free at https://app.spreading.ai/login.

Streak continues for 4 years as Hacktoberfest 2023

Zain Ahmed — Sat, 04 Nov 2023 02:49:29 +0000

As most of you know about what hacktoberfest is. I’m here to just show how this year hacktoberfest2023 change my learning curve

That’s Me

Hi everyone I am Zain Ahmed (Software Engineer) who trying to become a good developer every day. I don’t have a passion about code but i have passion about impact someone’s life to make it better and for that I code to make thinks easy and sustainable for them. I also have a YouTube channel YarCoder where i post content related to Software engineering. Not just that i also write articles on different platforms about Software Engineering That’s Me

Highs and Lows

I recently relocated to Malaysia and that’s the reason I was not ready to take a part in this year hacktoberfest2023 but then I thought and decided to make things easy for this time and not to take big challenges but instead take few smaller ones but learn something new this time so I decided to take a part in time but to learn about how things structure to build and here I have learn some different architecture concepts to design a product/project to make it sustainable and optimal for everyone one

A new growth

while working on different repositories for hacktoberfest in learn/explore different things not just coding. Its kind of a new experience to take a look on different projects how they structure, How flexible they are in terms of complex scenarios, code complexity, features integration, security prospective etc. To be honest, This time I didn’t get a chance to contribute on some big projects/products but I gain a different experience/knowledge about how things design to build a solid pillar project/product.

Build In-App chatting feature with ZEGOCLOUD

Zain Ahmed — Mon, 27 Feb 2023 10:25:45 +0000

Customer service is one of the main key factor in any business and when it's comes to e-commerce business its really help to any owner to grow their business in online market, Most of the times users/costumers have different querier which they want to ask before visit any physical shop like, queries about products and shop locations, quires about order update.
let assume you order some products and the order is dispatch its been 5 to 7 days and the parcel didn't reach at your place. in that case you need to find the email address of that store then email them then wait for their response, isn't it kind of hectic, In-App feature can reduce and minimize that cycle and you can just ask any queries from their In-App chatting feature,
The In-App chatting feature not just help only in e-commerce but also in different fields like, medical, gaming, live youtube streaming etc.

When you developing any app or web feature the In-App feature can be some critical to implement as you need to create it from custom or need to use some third party library. In custom option, the feature can be take up to 15 to 20 days to develop and make it in working model. But for third party library you can just plug any play, but most of the times to use third party it become difficult to choose the best one, which can provide you all you necessary feature in one model.

What if i tell you a library/platform that can be really useful for In-App feature, in-fact not just for In-App feature but also it have more features like, Live Streaming, Video/Audio calling, Cloud recording, Super board and etc.

ZEGOCLOUD is a platform that provide varieties of features/options that are required my today's modern web/app(s). They provide best quality in terms of video calling, connectivity, Massive concurrency and much more.

ZEGOCLOUD In-App chatting feature have cool features like
Room module , Group module, Message priority, Push system notifications, Offline messages, Offline notifications and etc.

Some of the use cases where you can user ZEGOCLOUD as your In-App patner

Online shopping Build real-time purchasing-related communications with text, images, order information, and more.

Social interactions When you're planning a live-streaming event, it's important to make sure your audience can interact with you. You might want them to ask questions or get involved in the conversation--and doing so can be just as fun for you as it is for them.

Most of the time influencers use their chatting feature when they do Youtube Live events. You can create a Live chatting feature in your apps by using ZEGOCLOUD In-App feature.

Online education Online education apps are the future of education. When you develop an online education app, the in-app chatting feature of ZEGOCLOUD can create a big impact on your users' experience and grow your user base! Students can ask questions while learning, and get answers from mentors.

Online consulting If you're in the medical field, you know how important it is to be available for patients.

In-App features are a great way to make sure that you're always there for your patients. You can use these features to be a first aid for any patient and save millions of lives!

Online games Online gaming has become one of the biggest markets in today's world, with millions of people playing games together through live streaming platforms. In-app chatting is a feature that allows you to interact with your favorite gamer on any platform.

ZEGOCOLOUD Compatibility with almost every platform
Android
IOS
Windows
MacOS
Web
Flutter
React Native

Add permissions
Permissions can be set as needed.

Open the AndroidManifest.xml file from directory app/src/main, and add permissions:

<!-- Permissions required by the SDK -->
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Prevent class name obfuscation
You can prevent the ZEGO SDK public class names from being obfuscated by adding the following code in file proguard-rules.pro

-keep class **.zego.**{*;}

Import the class file
Import the class file to your project:

import im.zego.zim.ZIM

Create instance of ZEGOCLOUD. Suppose you have 2 users A and B, they both need to create instance and call a method with app id and appsign id
developer can get both ids from project dashboard and add them in code.

// Create a ZIM SDK object and pass the AppID, AppSign, and Application in Android.
ZIMAppConfig appConfig = new ZIMAppConfig();
appConfig.appID = 12345;
appConfig.appSign = "appSign";
zim = ZIM.create(appConfig, application);

add listener to listen messages from other connected client or if any error occur.

zim.setEventHandler(new ZIMEventHandler() {
    @Override
    public void onReceivePeerMessage(ZIM zim, ArrayList<ZIMMessage> messageList, String fromUserID) {
        // Implement the callback for receiving the one-to-one messages.
    }
});

// userID must be within 32 bytes, and can only contain letters, numbers, and the following special characters: '~', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '+', '=', '-', '`', ';', '’', ',', '.', '<', '>', '/', '\'.
// userName must be within 64 bytes, no special characters limited.
ZIMUserInfo zimUserInfo = new ZIMUserInfo();
zimUserInfo.userID = userID;
zimUserInfo.userName = userName;

// When logging in:
// If you are using the Token-based authentication mode, you will need to fill in the Token which you generated by referring to the [Authentication] doc.
// If you are using the AppSign mode for authentication (the default auth mode for v2.3.0 or later), leave the Token parameter blank.

zim.login(zimUserInfo, new ZIMLoggedInCallback() {
    @Override
    public void onLoggedIn(ZIMError error) {
          // You can know whether the login is successful according to the ZIMError.
    }
 });

To send one to one message

// The following shows how to send one-to-one message, the [conversationType] needs to be set to [ZIMConversationTypePeer].
String conversationID = "xxxx";

ZIMTextMessage zimMessage = new ZIMTextMessage();
zimMessage.message = "Message content";

ZIMMessageSendConfig config = new ZIMMessageSendConfig();
// Set priority for the message. 1: Low (by default). 2: Medium. 3: High.
config.priority = ZIMMessagePriority.LOW;
// Set the offline push notificaition config.
ZIMPushConfig pushConfig = new ZIMPushConfig();
pushConfig.title = "Title of the offline push";
pushConfig.content= "Content of the offline push";
pushConfig.extendedData = "Extended info of the offline push";
config.pushConfig = pushConfig;

// In 1-on-1 chats, the conversationID is the peer user ID. In group chats, the conversationID is the groupID. In the chat room, the conversationID is the roomID.
zim.sendMessage(zimMessage, conversationID, ZIMConversationType.Peer,config, new ZIMMessageSentCallback() {
    @Override
    public void onMessageAttached(ZIMMessage zimMessage){
         // The callback on the message not sent yet. You can get a temporary object here and this object must be the same as that created zimMessage object. You can make your own business logic using this as needed, for example, display a UI ahead of time.
    }
    @Override
    public void onMessageSent(ZIMMessage zimMessage, ZIMError error) {
        // Implement the event callback on message sent.
    }
});

to receive one to one message

zim.setEventHandler(new ZIMEventHandler() {
    @Override
    public void onReceivePeerMessage(ZIM zim, ArrayList<ZIMMessage> messageList, String fromUserID) {

      for (ZIMMessage zimMessage : messageList) {
          if (zimMessage instanceof ZIMTextMessage)
          {
            ZIMTextMessage zimTextMessage = (ZIMTextMessage) zimMessage;
            Log.e(TAG, "Received message:"+ zimTextMessage.message);
          }
      }
   }
});

for logout

zim.logout();

For destroy instance

zim.destroy();

You can find a working documentation here

You can find sample app here

ZEGOCLOUD Video calling UIKits in Flutter

Zain Ahmed — Mon, 09 Jan 2023 04:21:18 +0000

Flutter Introduction

Flutter is an open source Software Development kit by Google. You all are maybe confused why choose flutter when you have other platforms like swifts & Android. the reason is cross platform feature, If you use swifts you can only run your app to IOS devices, If you choose Android you can only run your app to Android devices, but with Flutter you can develop Web Application, Mobile Application and even desktop Application.

Also the best part of flutter is you can create Web Application and Mobile application with single code base, so you don't need to worry about maintain different codebase for different devices (web/mobile).

Here i am developing a basic Video calling feature with Flutter using library ZEGOCLOUD UIKit. Let's talk about what is ZEGOCLOUD and Why use it.

ZEGOCLOUD

ZEGOCLOUD is a library/platform where you can find different products like Video/Audio calling, Live Streaming, In-App Chatting and much more.
By using this library you can instantly develop app with these different features using just chunk of code.
As compare to other libraries ZEGOCLOUD has some good price margin and also free account to test your app feature.

What is UIKit

The UIKit is like plug & Play feature, You just need a very little configuration and add small chunk of code. In ZEGOCLOUD is very easy and pretty simple to integrate UIKit.

I have create an app in flutter with two screens Login and Home

Configure your project

Android

If your project is created with Flutter 2.x.x, you will need to open the your_project/android/app/build.gradle file, and modify the compileSdkVersion to 33.

And in the same file, edit the minSdkVersion.

minSdkVersion 21

Add app permissions. Open the file your_project/app/src/main/AndroidManifest.xml, and add the following code:

To prevent obfuscation of the SDK public class names, do the following:

In your project's your_project > android > app folder, create a proguard-rules.pro file with the following content as shown below

-keep class **.zego.** { *; }

Add the following config code to the release part of the your_project/android/app/build.gradle file

proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

IOS

To add permissions, open your_project/ios/Runner/Info.plist, and add the following code to the dict part:

In home screen I simple create 2 fields Id and Username on login button click I'm navigating user to Video calling screen where user will start calling with other person.

App Code

Login Screen

import 'package:flutter/material.dart';
import 'package:video/screens/video_call.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final username = TextEditingController();
  final id = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const SizedBox(
              height: 50,
            ),
            TextField(
              controller: username,
              decoration: const InputDecoration(
                labelText: 'username',
                hintText: 'username',
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.teal, width: 2.0),
                ),
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.teal, width: 2.0),
                ),
              ),
            ),
            const SizedBox(height: 16.0),
            TextField(
              controller: id,
              decoration: const InputDecoration(
                labelText: 'user id',
                hintText: 'userid',
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.teal, width: 2.0),
                ),
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.blue, width: 2.0),
                ),
              ),
            ),
            const SizedBox(height: 16.0),
            MaterialButton(
              color: Colors.teal,
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => VideoCalling(
                      id: id.text,
                      username: username.text,
                    ),
                  ),
                );
              },
              child: const Text(
                'Login',
                style: TextStyle(fontSize: 20, color: Colors.white),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Home screen

import 'dart:math' as math;

import 'package:flutter/material.dart';
import 'package:zego_uikit_prebuilt_call/zego_uikit_prebuilt_call.dart';

class VideoCalling extends StatefulWidget {
  final String username;
  final String id;

  const VideoCalling({Key? key, required this.id, required this.username})
      : super(key: key);

  @override
  State<VideoCalling> createState() => _VideoCallingState();
}

final String localUserID = math.Random().nextInt(10000).toString();

class _VideoCallingState extends State<VideoCalling> {
  final callIDTextCtrl = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 10),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              TextField(
                controller: callIDTextCtrl,
                decoration: const InputDecoration(
                  labelText: 'call id',
                  hintText: 'call id',
                  enabledBorder: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.teal, width: 2.0),
                  ),
                  focusedBorder: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.blue, width: 2.0),
                  ),
                ),
              ),
              const SizedBox(
                height: 20,
              ),
              MaterialButton(
                color: Colors.teal,
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) {
                      return CallPage(
                        callID: callIDTextCtrl.text,
                        userId: widget.id,
                        userName: widget.username,
                      );
                    }),
                  );
                },
                child: const Text("join",style: TextStyle(fontSize: 20,color: Colors.white),),
              )
            ],
          ),
        ),
      ),
    );
  }
}

class CallPage extends StatelessWidget {
  final String callID;
  final String userId;
  final String userName;

  const CallPage({
    Key? key,
    required this.callID,
    required this.userId,
    required this.userName,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: ZegoUIKitPrebuiltCall(
        appID: 177503827,
        appSign:
            '4813ca648e686180b2d6e12956bf6ba8465112251090af88228754356c3939b1',
        userID: userId,
        userName: userName,
        callID: callID,
        config: ZegoUIKitPrebuiltCallConfig.oneOnOneVideoCall()
          ..onOnlySelfInRoom = (context) {
            Navigator.of(context).pop();
          },
      ),
    );
  }
}

the Callpage method have a ZEGOCLOUD UIKit for video calling. which requires some params, AppId, AppSign, CallId, UserId & UserName.

AppId: You can get the AppId from dashboard particular app,
AppSign: You can get AppSign key from dashboard for particular app
AppId and AppSign id should of same project/app which you will create on dashboard.

CallId: Id will be unique and only number, also callid is like a room id, the other user can join the call if he/she know the callid,

CallPage method will initiate from Home screen when user put unique callid.

If the CallId associate to any channel/room he/she will join to that video call.

Documentation For Flutter UIKit

Other Features

In-App Chatting in React Native

Zain Ahmed — Tue, 03 Jan 2023 04:12:03 +0000

We often use a feature like chatting in most of the Mobile Application whether is related to banking app, Ecommerce and/or chatting apps. Its required enough time to build a chatting feature for any App in different Tech Stack, "What if i tell you a easiest way to integrate/build In App Chatting feature which required almost 15 mins to build and reliable.

ZEGOCLOUD is a library which offer may feature like Audio/Video calling, Live Streaming, Super Board, Cloud recording and much more.
In-App Chatting is one of them and I must say in my 4 years of experience I found the the platform easy to adopt in most of the features.

Here are some points which you should know before choosing any library to integrate In-App Chatting feature.

Ultra-low latency

Have you ever miss important messages due to law latency? well in ZEGOCLOUD you don't need to worry about is as t delivers real-time messages to users with an ultra-low latency as low as 200 ms.

Massive concurrency

One of the main issue is how to handle concurrent messages when the count is in millions, well ZEGOCLOUD handle it pretty perfectly as needs of large-scale and highly demanding live communication events

Instruction/Steps

Go to ZEGOCLOUD and make a account
Go to dashboard and create a APP
Select In-app chatting feature
Go to Service Management option from dashboard and select In-App chatting feature
Activate it
Copy and save AppID for later use
Run command npm i zego-zim-react-native to install library.
Import SDK in Component import ZIM from 'zego-zim-react-native';
Create a instance of ZIM using method create, You need AppID **and appSign which you can get from dashboard
I have define some state for later user
Create a login function that will login user to application
Create sendMessage function that will help to send message to other user
A useEffect is define to handle some realtime events, If user connection state change the event connectionStateChanged will notify us, If any error occur the event error will notify us & if user get any message from other user the event receivePeerMessage will have that received message from where we can show it on UI
We also have a logout & destroy method which will help to logout user when user leave screen and destroy the ZIM instance. Here is my component

import React, { useEffect, useState } from 'react';
import { Button, TextInput, View, Text } from 'react-native';
import ZIM from 'zego-zim-react-native';
ZIM.create({ appID: ******, appSign: '***********************' })
const zim = ZIM.geInstance();

const VideoCalling = (props) => {
    // const zim = ZIM.geInstance();
    useEffect(() => {
        try {
            // ZIM.caller({ appID: '177503827', appSign: '4813ca648e686180b2d6e12956bf6ba8465112251090af88228754356c3939b1' });
        } catch (error) {
            console.log(error)
        }
    }, [])
    const [userInfo, setUserInfo] = useState({
        userID: '', //
        userName: '',
        token: ''
    })
    const [state, setState] = useState({
        message: '',
        otherUserId: ''
    })

    useEffect(() => {
        // Set up and listen for the callback for receiving error codes.  
        zim.on('error', function (zim, errorInfo) {
            console.log('error', errorInfo.code, errorInfo.message);
        });

        // Set up and listen for the callback for connection status changes. 
        zim.on('connectionStateChanged', function (zim, { state, event, extendedData }) {
            console.log('connectionStateChanged', state, event, extendedData);
        });

        // Set up and listen for the callback for receiving one-to-one messages. 
        zim.on('receivePeerMessage', function (zim, { messageList, fromConversationID }) {
            console.log('receivePeerMessage', messageList, fromConversationID);
        });

        return () => {
            zim.logout();
            zim.destroy();
        }
    }, [])

    const handleLogin = () => {
        try {
            zim.login(userInfo, token)
                .then(function () {
                    // Login successful.
                })
                .catch(function (err) {
                    // Login failed.
                });
        } catch (error) {

        }
    }

    const sendMessage = () => {
        try {
            const messageTextObj = { type: 1, message: state.message };
            zim.sendMessage(messageTextObj, toUserID)
                .then(function ({ message }) {
                    // Message sent successfully.
                })
                .catch(function (err) {
                    // Failed to send the message.
                });
        } catch (error) {

        }
    }

    const onStateHandleChange = (key, value) => {
        setState({ ...state, [key]: value })
    }
    const onUserObjHandleChange = (key, value) => {
        setUserInfo({ ...state, [key]: value })
    }

    return (
        <View style={{ padding: 5 }}>
            <View>
                <View style={{ paddingVertical: 5 }}>
                    <Text>UserID</Text>
                    <TextInput
                        value={userInfo.userID}
                        onChangeText={(value) =>
                            onUserObjHandleChange('userID', value)}
                        style={{ borderWidth: 1 }} />
                </View>
                <View style={{ paddingVertical: 5 }}>
                    <Text>User Name</Text>
                    <TextInput
                        value={userInfo.userName}
                        onChangeText={(value) =>
                            onUserObjHandleChange('userName', value)}
                        style={{ borderWidth: 1 }} />
                </View>
                <View style={{ paddingVertical: 5 }}>
                    <Text>Token</Text>
                    <TextInput
                        value={userInfo.token}
                        onChangeText={(value) =>
                            onUserObjHandleChange('token', value)}
                        style={{ borderWidth: 1 }} />
                </View>
                <Button title="Login" onPress={handleLogin} />
                <View>
                    <View style={{ paddingVertical: 5 }}>
                        <Text>Other person ID</Text>
                        <TextInput
                            value={state.otherUserId}
                            onChangeText={(value) =>
                                onStateHandleChange('otherUserId', value)}
                            style={{ borderWidth: 1 }} />
                    </View>
                    <Button title="Submit" />
                </View>
                <View>
                    <View style={{ paddingVertical: 5 }}>
                        <Text>Message</Text>
                        <TextInput
                            value={state.message}
                            onChangeText={(value) =>
                                onStateHandleChange('message', value)}
                            style={{ borderWidth: 1 }} />
                    </View>
                    <Button title="Send" onPress={sendMessage} />
                </View>
            </View>
        </View>
    );
}

export default VideoCalling;

Links:

React Native In-App chatting Doc
Sample Codebase

In-App Chatting UIKit

Zain Ahmed — Thu, 29 Dec 2022 06:56:01 +0000

We often use Chatting feature in our Applications, & to build that feature we required some logic, and a lot coding. What if i tell you that you can create a chatting feature with simple integration and small chunk of code. Here is ZEGOCLOUD which have many features and In-App Chatting is one of them.

Introduction

ZEGOCLOUD is a platform which you can use to integrate multiple feature like Live Audio/Video calling, Live Streaming, In-App chatting and much more in your App/Web Application & the best part they have custom code integrations as well as UI Kits integration.

Custom Integration

They offer Libraries for different stacks like
IOS (Flutter, React Native IOS Native)
Android (Flutter, React Native, Android Native)
Web (JavaScript) (React.JS, Vue.JS, etc).

UI Kits

They offer some pre-design UI kits which just need a little configuration and a chunk of code and you feature will be ready to test and deploy.

Feature
VIDEO Calling Documentation : Video Calling

Live Streaming Documentation : Live Streaming

In-App Chatting Documentation : In-App Chatting

You can find different tech stack in each documentation for each feature.

Here for my In-App Chatting feature i am using UI Kit to integrate the feature.

Introduction of In-App Chatting SDK

As experience developer and build many chatting features, I love to use ZEGOCLOUD for many feature from now on. Here are some point to use In-App Chatting SDK

The SDK provide smooth communication and transmission for messaging even when network is poor.
The priority feature is really useful when you want to never miss any message from any user.

Integration

npm i @zegocloud/zimkit-react
Import ZIMKitManager, Common from zimkit-react
Define state for some configuration and add AppID, serverSecret along with some user details like userID, userName & avatar.
Get AppId and serverSecret from dashboard

Define <Common><Common/> in return statement for UI
Create a useEffect, which will run only once when first time render happen.
Create a function to configure UI kit with parameter we define in component state

create a instance of ZIMKitManager then call generateKitTokenForTest to generate token

call init function to inject the UI Kit
then call connection function which will create a connection for Chatting.

import React, { useEffect } from 'react';
import { ZIMKitManager, Common } from '@zegocloud/zimkit-react';
import '@zegocloud/zimkit-react/index.css';

function ZEGOCLOUDUIKIET(props) {
    const state = {
        appConfig: {
            appID:***********,        // The AppID you get from the ZEGOCLOUD admin console.
            serverSecret: '****************************' // The serverSecret you get from ZEGOCLOUD Admin Console.
        },
        // The userID and userName is a strings of 1 to 32 characters.
        // Only digits, letters, and the following special characters are supported: '~', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '+', '=', '-', '`', ';', '’', ',', '.', '<', '>', '/', '\'
        userInfo: {
            // Your ID as a user.
            userID: '12345',
            // Your name as a user.
            userName: 'Zain Ahmed',
            // The image you set as a user avatar must be network images. e.g., https://storage.zego.im/IMKit/avatar/avatar-0.png
            userAvatarUrl: 'https://storage.zego.im/IMKit/avatar/avatar-0.png'
        },
    }
    useEffect(() => {
        loadUIKIT()
    }, [])
    const loadUIKIT = async () => {
        const zimKit = new ZIMKitManager();
        const token = zimKit.generateKitTokenForTest(state.appConfig.appID, state.appConfig.serverSecret, state.userInfo.userID);
        await zimKit.init(state.appConfig.appID);
        await zimKit.connectUser(state.userInfo, token);
    }

    return (
        <div>
            <Common></Common>
        </div>
    );
}

export default ZEGOCLOUDUIKIET;

Application UIKit

Checkout In-App Chatting UI Kit Documentation In App Chatting kit

Follow for more content Find me here

In-App chat in react.js with ZEGOCLOUD

Zain Ahmed — Tue, 20 Dec 2022 07:24:44 +0000

Almost any developer create a Chat Application in their initial career as a showcase project. I also did when I start learning about MERN Stack & I build chat app in with 2 different tech, Firebase with React.js & Socket.io (Node.js) with React.js.

As we grow in over experience we learn that thing can be done more easily and quickly by taking some help from pre build libraries instead of creating it custom.

Here is another feature of ZEGOCLOUD called In-App chatting which love it, it just take a small configuration and chunk of code and your life can be easy.

What I build

I have build a basic one-to-one chatting app using ZEGOCLOUD

Tech Stack

React.js (Frontend)

Configuration

Go to ZEGOCLOUD and make a account
Go to dashboard and create a APP

Select In-app chatting feature
Go to Service Management option from dashboard and select In-App chatting feature

Active it

Copy and save AppID for later use
Create a React.JS app using create-reat-app or any React framework.
Create a component for chatting/messaging

Application work flow

install zego-zim-web package in React.js and define AppID which you copy earlier

import React, { useEffect, useState } from 'react';
import { ZIM } from 'zego-zim-web';

var appID = 1423906504;
ZIM.create({ appID });
var zim = ZIM.getInstance();

function Chatting(props) {

    const [toUserId, setToUserId] = useState('')
    const [token, setToken] = useState('')
    const [userId, setUserId] = useState('')
    const [userName, setUserName] = useState('')

return (
        <div className='p-5 flex flex-col'>

            <label className='p-2 font-bold'>Token</label>
            <input className='border p-2 m-2' value={token} onChange={(e) => setToken(e.target.value)} />

            <label className='p-2 font-bold'>Your name</label>
            <input className='border p-2 m-2' value={userName} onChange={(e) => setUserName(e.target.value)} />

            <label className='p-2 font-bold'>UserId</label>
            <input className='border p-2 m-2' value={userId} onChange={(e) => setUserId(e.target.value)} />

            <button className='border p-2 m-2' onClick={handleLogin}>Login</button>

            <label className='p-2 font-bold'>Other person User Id </label>
            <input className='border p-2 m-2' value={toUserId} onChange={(e) => setToUserId(e.target.value)} />

            <button className='border p-2 m-2' onClick={handleSendMessage}>Send Message</button>

        </div>
    );
}

I also define some other states for later use

Both user need to generate token from dashboard with unique *userID * save the taken for later use in frontend (the token can be auto generate from backend, If you are using any backend service).
After input userID and Token click login button and it will create a room for user

Once the User enter in room User can send message and can receive message from other user.
There are some event listeners which will help to indicate constantly whether the connection is stable or not also the receive event listener will constantly listen if any new message emit from any other user or not.

  useEffect(() => {
        // Set up and listen for the callback for receiving error codes. 
        zim.on('error', function (zim, errorInfo) {
            console.log('error', errorInfo.code, errorInfo.message);
        });

        // Set up and listen for the callback for connection status changes.
        zim.on('connectionStateChanged', function (zim, { state, event, extendedData }) {
            console.log('connectionStateChanged', state, event, extendedData);
            // When SDK logout occurred due to a long-time network disconnection, you will need to log in again. 
            if (state === 0 && event === 3) {
                zim.login({ userName }, token)
            }
        });

        // Set up and listen for the callback for receiving one-to-one messages. 
        zim.on('receivePeerMessage', function (zim, { messageList, fromConversationID }) {
            console.log('receivePeerMessage', messageList, fromConversationID);
        });

        // Set up and listen for the callback for token expires.
        zim.on('tokenWillExpire', function (zim, { second }) {
            console.log('tokenWillExpire', second);
            // You can call the renewToken method to renew the token. 
            // To generate a new Token, refer to the Prerequisites.
            zim.renewToken(token)
                .then(function ({ token }) {
                    // Renewed successfully.
                })
                .catch(function (err) {
                    // Renew failed.
                })
        });

        zim.on('receivePeerMessage', function (zim, { messageList, fromConversationID }) {
            console.log('receivePeerMessage', messageList, fromConversationID);
        });
    }, [])

As I define some event listeners for some Realtime work, To get current connect state, To get runtime message emit/receive, TO get is token expire and to get error if any.
Here is final component for one-to-one chatting app

import React, { useEffect, useState } from 'react';
import { ZIM } from 'zego-zim-web';

var appID = 1423906504;
ZIM.create({ appID });
var zim = ZIM.getInstance();

function Chatting(props) {

    const [toUserId, setToUserId] = useState('')
    const [token, setToken] = useState('')
    const [userId, setUserId] = useState('')
    const [userName, setUserName] = useState('')


    useEffect(() => {
        // Set up and listen for the callback for receiving error codes. 
        zim.on('error', function (zim, errorInfo) {
            console.log('error', errorInfo.code, errorInfo.message);
        });

        // Set up and listen for the callback for connection status changes.
        zim.on('connectionStateChanged', function (zim, { state, event, extendedData }) {
            console.log('connectionStateChanged', state, event, extendedData);
            // When SDK logout occurred due to a long-time network disconnection, you will need to log in again. 
            if (state === 0 && event === 3) {
                zim.login({ userName }, token)
            }
        });

        // Set up and listen for the callback for receiving one-to-one messages. 
        zim.on('receivePeerMessage', function (zim, { messageList, fromConversationID }) {
            console.log('receivePeerMessage', messageList, fromConversationID);
        });

        // Set up and listen for the callback for token expires.
        zim.on('tokenWillExpire', function (zim, { second }) {
            console.log('tokenWillExpire', second);
            // You can call the renewToken method to renew the token. 
            // To generate a new Token, refer to the Prerequisites.
            zim.renewToken(token)
                .then(function ({ token }) {
                    // Renewed successfully.
                })
                .catch(function (err) {
                    // Renew failed.
                })
        });

        zim.on('receivePeerMessage', function (zim, { messageList, fromConversationID }) {
            console.log('receivePeerMessage', messageList, fromConversationID);
        });
    }, [])


    const handleLogin = () => {
        try {
            const newUserDetails = { userName, userID: userId }
            zim.login(newUserDetails, token)
                .then(function (res) {
                    console.log("res", res)
                })
                .catch(function (err) {
                    console.log("err", err)
                });
        } catch (error) {
            console.log("error", error)
        }
    }

    const handleSendMessage = () => {
        try {
            var toUserID = toUserId;
            var config = {
                priority: 1 // Set priority for the message. 1: Low (by default). 2: Medium. 3: High.
            };

            // Send one-to-one text messages. 
            var messageTextObj = { type: 1, message: `user to ${toUserID} ` };
            zim.sendMessage(messageTextObj, toUserID, 0, config)
                .then(function ({ message }) {
                    console.log("message", message)
                })
                .catch(function (err) {
                    console.log("err", err)
                });
        } catch (error) {
            console.log("error", error)
        }
    }

    return (
        <div className='p-5 flex flex-col'>

            <label className='p-2 font-bold'>Token</label>
            <input className='border p-2 m-2' value={token} onChange={(e) => setToken(e.target.value)} />

            <label className='p-2 font-bold'>Your name</label>
            <input className='border p-2 m-2' value={userName} onChange={(e) => setUserName(e.target.value)} />

            <label className='p-2 font-bold'>UserId</label>
            <input className='border p-2 m-2' value={userId} onChange={(e) => setUserId(e.target.value)} />

            <button className='border p-2 m-2' onClick={handleLogin}>Login</button>

            <label className='p-2 font-bold'>Other person User Id </label>
            <input className='border p-2 m-2' value={toUserId} onChange={(e) => setToUserId(e.target.value)} />

            <button className='border p-2 m-2' onClick={handleSendMessage}>Send Message</button>

        </div>
    );
}

export default Chatting;

You can also get sample code in web(JavaScript) from here Sample code for In-App chatting

Documentation here In-App Chatting Documentation

Checkout my YouTube Channel for more content YarCoder

What is reverse-email-lookup

Zain Ahmed — Mon, 19 Dec 2022 07:55:49 +0000

In today's world where email scams can be done to easily and a person can really authenticate it and can be scrammed, Here is a product which can be useful in different aspects.

this tool can save you from different types of scam's and can be be useful in different ways

Scams & Fraud Prevention
In today's world where there is a proliferation of scams, it's worth worrying about your own security. But luckily, you can use a reverse email lookup to verify the identity of the emails, to further protect yourself from theft and risks.

Verification of Ecommerce Transactions
one important use case is to check and verify an online buyer or seller especially when e-commerce shopping is so prominent today

HR Talent Identification
Hiring HR recruitment firms gathering all the information available on the candidates and filter them accurately to fast-track the hiring process. Using a simple email search, they can also retrieve relevant information that is not disclosed by the candidates

Lead Generation
in sales and lead generation. Using a reverse email lookup, sales team can qualify leads accurately, thus cutting down time wasted to work on leads and instead, focus on getting sales quicker and more efficiently.

Credit Risks Analysis
Financial firms, especially those that extend credit and loans to their customers, can identify the risk level of a prospective customer before dealing with them based on the data that they are able to obtain from a reverse email lookup.

You can read more about it on this link
3 Simple Methods To Do Reverse Email Lookup

Follow for more on YarCoder

Add Voice & Video calling Feature in React Native using ZEGOCLOUD

Zain Ahmed — Sat, 10 Dec 2022 20:21:08 +0000

On one of my React Native project related to Medical field required to add a Video calling feature in Mobile application & for that I search some third part libraries/SDKs. I found ZEGOCLOUD SDK for React Native Video calling and turn out it was pretty simple and easy to integrate in React Native for Android & IOS

Setup ZEGOCLOUD Account/Project

After signup to ZEGOCLOUD you will landed to Admin panel from where create a project with suitable name.

Their will be multiple options like Video calling, Live Streaming, In App Chatting etc., we will select Video Chat

Click the next button and select Start with UIKits

Select React Native option for React Native Video Calling mobile application

You can also do some basic configuration from right side panel

Click save button on bottom right
Click on Quick start button but before click save the *AppID *_and **_AppSign**
Open package.json and add this all libraries & run command npm i

"@react-navigation/native": "^6.0.13",
"@react-navigation/native-stack": "^6.9.1",
"@zegocloud/zego-uikit-prebuilt-call-rn": "^1.2.1",
"@zegocloud/zego-uikit-rn": "^1.2.0",
"react-delegate-component": "^1.0.0",
"react-native-gesture-handler": "^2.8.0",
"react-native-safe-area-context": "^4.4.1",
"react-native-screens": "^3.18.2",
"react-navigation": "^4.4.4",
"zego-express-engine-reactnative": "^0.21.0"

Create a component and add following code, it will show a button to join a call

import { NavigationContainer, useNavigation} from '@react-navigation/native';
import React from "react";
import { Button, View} from 'react-native'
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="HomePage">
        <Stack.Screen name="HomePage" component={HomePage} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

function HomePage(props) {
    const navigation = useNavigation();
    return (
        <View style={{flex: 1,alignItems: 'center',justifyContent: 'space-around'}}>
            <Button title="Call" onPress={() => { navigation.navigate('CallPage') }} />
        </View>
    )
}

Add a component for Video calling

import ZegoUIKitPrebuiltCall, {GROUP_VOICE_CALL_CONFIG} from '@zegocloud/zego-uikit-prebuilt-call-rn';
function CallPage(props) {
  randomUserID = String(Math.floor(Math.random() * 100000))
  return (
      <View style={{flex: 1}}>
          <ZegoUIKitPrebuiltCall
            appID={1484647939}
            appSign='16e1c2b4d4c6345c8644546e8fe636d8b7e47d010e9b4a8825439ecd64ccee6f'
            userID={randomUserID}
            userName={'user_'+randomUserID}

            config={{
              ...GROUP_VOICE_CALL_CONFIG,
              onHangUp: () => {props.navigation.navigate('HomePage')},
            }}
          />
      </View>
  )
}

Add Device permission

Android

Go to file project-name/android/app/src/main/AndroidManifest.xmland add below code

<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />

Go to file my_project/android/app/proguard-rules.pro and add below code

-keep class **.zego.**  { *; }

IOS

9.Go to this file my_project/ios/my_project/Info.plist and add below code

<key>NSCameraUsageDescription</key>
<string>We need to use the camera</string>
<key>NSMicrophoneUsageDescription</key>
<string>We need to use the microphone</string>

Run Application

Run on an iOS device: yarn ios
Run on an Android device: yarn android

Checkout ZEGOCLOUD documentation for more understanding and other common use cases. You can get a sample source code for React Native Voice & Video Calling demo from their documentation a

Find Courses for Learning (Submission for Hackathon)

Zain Ahmed — Tue, 06 Dec 2022 12:31:41 +0000

What I built

A platform that will help people to find FREE courses related to their respective domain (frontend, backend, fullstack etc) from different resources like Udemy, Coursera, Youtube etc.

Category Submission: Search No More

App Link

I will deploy it soon, mean while it's an open source project you guys can clone and run the project for testing.

Screenshots

Description

Tech Stack: MERN Stack (React, Node.js, MongoDB Atlas)
On FrontEnd (React.js) i have use a basic folder structure to for CRUD operations, UI, API's calling etc, you can review below

On BackEnd (Node.js) i have use MRC structure (Model, Route, Controller). currently i have done all the functionality in a single "index.js" file for time save, I have also use Socket.io to make a Realtime connection from Backend to Frontend for some features.

On Database, I have use MongoDB Atlas to save data and use the full-text-search and auto suggest search feature of MongoDB.

Features

User can SignUp, Login & login as guest
User can search for free courses.
Courses will be free and from different resources like Udemy, Coursera, youtube etc.
Courses will be related to different domain like frontend, backend, devops, fullstack etc, with parent domain IT
User can filter courses on bases of search input
User will get some quick suggestions for search input to make search more quick.

Phase 2 Features

I will create/design a script to scrapping from different courses websites and will update database,
I will create a job using MongoDB Tigger feature which will update courses and.
check out video about this feature on my YouTube channel MongoDB Trigger

Link to Source Code

Find my course - Source Code

Permissive License

License

Background

I was making a video on recession in the field of Software engineering for my Youtube Channel Yar Coder, and I thought why not to create a platform that will help people learn new things for their future so they will have more opportunities to explore & get job easily in this recession wave.

How I built it

My main focus was to make search more quick and easy so i decided to pick search category and explore the full text search & autocomplete feature in MongoDB Atlas.

Personal note

You can check out my YouTube channel for other IT related Tutorials.
Yar Coder