Starting Implementation

Now finally we could start implementing. But it's not just about implementing the voice search feature into Sikhi To The Max app. We have to make a accessible solution that any developer can use to implement this feature in their app. Most importantly to implement this feature in other apps of Khalis Foundation. We have two major options. First is to make a github repo which developers can clone and copy paste the code in their app. Second app is to make an npm package. Developers can simply install this package and use without worrying about anything. Obviously second option is way better. So the first step is to make an npm package.

Planning NPM Package

We read the documentation of how to publish an npm package. Turned out it is simpler than it sounds. Here is the steps to create your own npm package. Then we decided what kind of package are we going to make. Over a meeting me and Simarjot decided that we are going to make a "mic component". As explained here this component will take two parameters and return transcript based on input parameters. This component should also be completely customizable so we do not restrict developer in any way. Also it should be compatible with js and ts both. So we decided to make the package using TypeScript.

Creating NPM Package

The documentation provided in above paragraph tells how to make an npm package that simply calls a function to print "Hello World". But obviously we need more than that. So here is the link to a ChatGPT conversation that explains the steps to create a component using TypeScript and publish it as npm package. We made this Github Repo. The mic component was successfully created. We tested it by importing it in a local project. It has following customizable variables:

interface Props {
    Mic?: React.ElementType;
    activeMicColor?: string;
    micDefaultColor?: string;
    micDefaultBGColor?: string;
    micActiveBGColor?: string;
    micSize?: number;
    borderRadius?: string;
    searchType: string;
}
                            

Just like our Demo Project this project is first sending the audio data to the express backend. It simply returns the transcript in a variable called "transcript". The only problem that we are facing right now is with the hosted backend. It was hosted on Render at https://gurbani-search.onrender.com/ Response from Render are pretty slow. So we were using localhost for testing. But we can not use either of them in the final npm package. So we have to find alternative way to host the express app. We will explore this further in Week 8.