Forem: Roopali Singh

My Startup Journey

Roopali Singh — Wed, 30 Apr 2025 23:39:08 +0000

Hi everyone,
I'm writing a blog after a long time, and it is NOT tech related.

After doing my first job as a frontend engineer in a startup for an year, I left my job. Their are multiple reasons for it, but that was the story of another time.

After that I decided to not pursue the tech career and start my chocolate factory - HAKI, a chocolate spread idea that crossed my mind.

It’s taken me 2 years to get here — yes, that's a lot of time.

I took my sweet time, enjoying the process then the reality hit, and I realized that I had no idea about anything.
The company registration, the licenses I would need for a food startup, how to make a chocolate spread, neither do I know anything about the ingredients.
Haki was completely bootstrapped and I don't have enough funds to hire people.

If anyone is thinking, why making a chocolate spread would be so hard, like I thought initially, my 1st two variants caught fungus within a week.

I don't know how to identify good cacao and good nuts.
I know nothing, From their I have came a long way to knowing how to ferment cacao, sun drying, roasting, conching, the notes of cacao, types of almonds, the machines I would need...uff

Long time, messaging a hundred people for advice and many failed attempts, now I'm here finally — with the most delicious recipe made using clean, wholesome ingredients to keep it truly healthy.

Ahh and please follow Haki on @eathaki.co to know more about it.

I still have many challenges, like the graphic designing for packaging, social medial, marketing.

We're still on the lookout for a graphic designer who's excited to help build HAKI — feel free to drop me an email if someone comes to mind.

Thank you so much for reading it till here 😊

If you’d like me to continue sharing more about HAKI or anything else you’d like to say, I’d genuinely love to read your thoughts in the comments.

Also, if there's a better place to share this, please let me know.

Adding downloaded fonts in your React app

Roopali Singh — Wed, 09 Feb 2022 12:57:57 +0000

Hola amigos👋,

There exist fonts which can't be found on Google Fonts.
And now you're left with no other option but to download and import them in the code on your own.

Lucky You🍀 It's not that difficult to add downloaded fonts in the React App.

You just need to follow these 4 steps:

1. Create a fonts folder in the src folder of your React app.

2. Add the downloaded fonts in the fonts folder created.

The Folder Structure would look something like this:

3. In the index.css file, write the following lines of code:



/* In index.css */

@font-face {
  font-family: "GilroyRegular";
  src: local("GilroyRegular"),
    url("./fonts/Gilroy-Regular.otf") format("opentype");
  font-weight: normal;
}

/* Other font formats include:
'woff2', 'truetype, 'woff', 'embedded-opentype', and 'svg' */

4. Import the index.css file in the index.js file.



// In index.js

import "./index.css";

Now to use it, you just need to add the following css:



/* In any .css file */

.selector {
font-family: "GilroyRegular";
font-style: italic;
}

😃Whoa!
We have successfully integrated the downloaded font in our webapp🔥

Building a Voice Assistant using Web Speech API

Roopali Singh — Fri, 05 Nov 2021 15:18:02 +0000

Hi there👋,

In this guide we will be learning how to integrate voice user interface in our web application.

We are working with React. To incorporate Voice User Interface (VUI) we will use Web Speech API.

For simplicity we will not be focusing on design.

Our aim is to build a voice assistant which will recognize what we say and answer accordingly.

For this we are using Web Speech API.

This API allows fine control and flexibility over the speech recognition capabilities in Chrome version 25 and later.

The Web Speech API provides us with two functionality —

Speech Recognition which converts speech to text.
Speech Synthesis which converts text to speech.

1. We will start by installing two npm packages:

// for speech recognition
npm i react-speech-recognition
// for speech synthesis
npm i react-speech-kit

Now before moving on to the next step, let's take a look at some important functions of Speech Recognition.

Detecting browser support for Web Speech API

if (!SpeechRecognition.browserSupportsSpeechRecognition()) {
    //Render some fallback function content
}

Turning the microphone on

SpeechRecognition.startListening();

Turning the microphone off

// It will first finish processing any speech in progress and
// then stop.
SpeechRecognition.stopListening();
// It will cancel the processing of any speech in progress.
SpeechRecognition.abortListening();

Consuming the microphone transcript

// To make the microphone transcript available in our component.
const { transcript } = useSpeechRecognition();

Resetting the microphone transcript

const { resetTranscript } = useSpeechRecognition();

Now we're ready to add Speech Recognition (text to speech) in our web app 🚀

2. In the App.js file, we will check the support for react-speech-recognition and add two components StartButton and Output.

The App.js file should look like this for now:

import React from "react";
import StartButton from "./StartButton";
import Output from "./Output";
import SpeechRecognition from "react-speech-recognition";

function App() {

// Checking the support
if (!SpeechRecognition.browserSupportsSpeechRecognition()) {
  return (
    <div>
      Browser does not support Web Speech API (Speech Recognition).
      Please download latest Chrome.
    </div>
  );
}

  return (
    <div className="App">
      <StartButton />
      <Output />
    </div>
  );
}

export default App;

3. Next we will move to the StartButton.js file.

Here we will add a toggle button to start and stop listening.

import React, { useState } from "react";

function StartButton() {
  const [listen, setListen] = useState(false);

  const clickHandler = () => {
    if (listen === false) {
      SpeechRecognition.startListening({ continuous: true });
      setListen(true);
      // The default value for continuous is false, meaning that
      // when the user stops talking, speech recognition will end. 
    } else {
      SpeechRecognition.abortListening();
      setListen(false);
    }
  };

  return (
    <div>
      <button onClick={clickHandler}>
        <span>{listen ? "Stop Listening" : "Start Listening"} 
        </span>
      </button>
    </div>
  );
}

export default StartButton;

4. Now in the Output.js file, we will use useSpeechRecognition react hook.

useSpeechRecognition gives a component access to a transcript of speech picked up from the user's microphone.

import React, { useState } from "react";
import { useSpeechRecognition } from "react-speech-recognition";

function Output() {
  const [outputMessage, setOutputMessage] = useState("");

  const commands = [
    // here we will write various different commands and
    // callback functions for their responses.
  ];

  const { transcript, resetTranscript } = 
                              useSpeechRecognition({ commands });

  return (
    <div>
      <p>{transcript}</p>
      <p>{outputMessage}</p>
    </div>
  );
}

export default Output;

5. Before defining the commands, we will add Speech Synthesis in our web app to convert the outputMessage to speech.

In the App.js file, we will now check the support for the speech synthesis.

import { useSpeechSynthesis } from "react-speech-kit";

funtion App() {
  const { supported } = useSpeechSynthesis();

  if (supported == false) {
    return <div>
      Browser does not support Web Speech API (Speech Synthesis).
      Please download latest Chrome.
    </div>
}
.
.
.
export default App;

6. Now in the Output.js file, we will use useSpeechSynthesis() react hook.

But before moving on, we first take a look at some important functions of Speech Synthesis:

speak(): Call to make the browser read some text.
cancel(): Call to make SpeechSynthesis stop reading.

We want to call the speak() function each time the outputMessage is changed.

So we would add the following lines of code in Output.js file:

import React, { useEffect, useState } from "react";
import { useSpeechSynthesis } from "react-speech-kit";

function Output() {
  const [outputMessage, setOutputMessage] = useState("");
  const { speak, cancel } = useSpeechSynthesis();

  // The speak() will get called each time outputMessage is changed 
  useEffect(() => {
      speak({
        text: outputMessage,
      });
  }, [outputMessage]);
.
.
.
export default Output;
}

😃Whoa!
Everything is now setup 🔥
The only thing left is to define our commands 👩🎤

7. Now we're back at our Output.js file to complete our commands.

const commands = [
  {
    // In this, the words that match the splat(*) will be passed
    // into the callback,

    command: "I am *",

    callback: (name) => {
      resetTranscript();
      setOutputMessage(`Hi ${name}. Nice name`);
    },
  },

  // DATE AND TIME
  {
    command: "What time is it",

    callback: () => {
      resetTranscript();
      setOutputMessage(new Date().toLocaleTimeString());
    },
    matchInterim: true,
    // The default value for matchInterim is false, meaning that
    // the only results returned by the recognizer are final and
    // will not change.
  },
  {
    // This example would match both:
    // 'What is the date' and 'What is the date today'

    command: 'What is the date (today)',

    callback: () => {
      resetTranscript();
      setOutputMessage(new Date().toLocaleDateString());
    },
  },

  // GOOGLING (search)
  {
    command: "Search * on google",

    callback: (gitem) => {
      resetTranscript();

      // function to google the query(gitem)
      function toGoogle() {
        window.open(`http://google.com/search?q=${gitem}`, "_blank");
      }
      toGoogle();

      setOutputMessage(`Okay. Googling ${gitem}`);
    },
  },

  // CALCULATIONS
  {
    command: "Add * and *",

    callback: (numa, numb) => {
      resetTranscript();
      const num1 = parseInt(numa, 10);
      const num2 = parseInt(numb, 10);
      setOutputMessage(`The answer is: ${num1 + num2}`);
    },
  },

  // CLEAR or STOP.
  {
    command: "clear",

    callback: () => {
      resetTranscript();
      cancel();
    },
    isFuzzyMatch: true,
    fuzzyMatchingThreshold: 0.2,

    // isFuzzyMatch is false by default.
    // It determines whether the comparison between speech and
    // command is based on similarity rather than an exact match.

    // fuzzyMatchingThreshold (default is 0.8) takes values between
    // 0 (will match anything) and 1 (needs an exact match).
    //  If the similarity of speech to command is higher than this
    // value, the callback will be invoked.
  },
]

😃We have successfully built a voice assistant using the Web Speech API that do as we say 🔥🔥

Note: As of May 2021, browsers support for Web Speech API:

Chrome (desktop)

Chrome (Android)

Safari 14.1

Microsoft Edge

Android webview

Samsung Internet

For all other browsers, you can integrate a polyfill.

Here's a demo that I have made with some styling:

I call it Aether

Integrating MongoDB database in Webapp

Roopali Singh — Thu, 04 Nov 2021 22:21:28 +0000

Hi there👋,

In this guide we will be learning how to integrate MongoDB in our project using Mongoose.
We will be assuming that you have already setup your node.js app
(or the backend of your app)

MongoDB is an open-source document database and leading NoSQL database.
Mongoose is an Object Data Modelling(ODM) library for MongoDB and Node.js.

Instead of connecting our node app directly to MongoDB, we will use Mongoose.

🚀 Fasten your seat belt cause we are about to start our journey!

For this guide, we will be storing user info. in our database.
(If you're working on complete MERN stack then all of these steps are meant to be perform in the backend of your app.)

1. Start with installing Mongoose.

npm install mongoose

2. Create a file userModel.js.

In this file, we will create a userSchema. A schema is the structure of the database.

import mongoose from "mongoose";

const userSchema = new mongoose.Schema(
  {
    // It atomatically assigns a unique _id, so we don't need to
    // define another id for it.
    firstName: { type: String, required: true },
    lastName: { type: String, required: false },
    email: { type: String, required: true, unique: true },
    pin: { type: Number, required: true },
  },
  {
    timestamps: true,
    // Timestamp of creating a record and last update of record.
  }
);

3. Now we will call mongoose.model() on our schema.

A mongoose model is responsible for creating, querying and reading documents from the mongoDB database.

const User = mongoose.model("User", userSchema);

export default User;

Your `userModel.js` file should look like this now:

import mongoose from "mongoose";

const userSchema = new mongoose.Schema(
  {
    firstName: { type: String, required: true },
    lastName: { type: String, required: false },
    email: { type: String, required: true, unique: true },
    pin: { type: Number, required: true },
  },
  {
    timestamps: true,
  }
);

const User = mongoose.model("User", userSchema);

export default User;

4. Now lets create another file named userRouter.js to define our API routes for performing CRUD operations on it.

import express from "express";
import User from "./userModel.js ";

// express.Router() =>  a function to make code Modular, instead of
// creating all routes in server.js we can define multiple files
// to have our routers...
const userRouter = express.Router();

// nature of mongoose operation is async
// so we will define the async functions here.

export default userRouter;

5. Before defining our routes in the userRouter.js, we will first connect the mongoose to the database.

For this we need to add a few lines of code in the server.js file.

import express from "express";
import mongoose from "mongoose";

mongoose.connect(process.env.MONGODB_URL ||
"mongodb://localhost/your_app_name", {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  useCreateIndex: true,
});

6. Just two more lines in the server.js to connect server.js to userRouter.js.

import userRouter from "./userRouter.js";

app.use("/api/users", userRouter);

The `server.js` file should look like this now:

import express from "express";
import dotenv from "dotenv"; // npm install dotenv
import mongoose from "mongoose";
import userRouter from "./router/userRouter.js";

dotenv.config(); // to use .env file content

const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// To connect mongoose to mongoDB database
mongoose.connect(process.env.MONGODB_URL ||
"mongodb://localhost/your_app_name", {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  useCreateIndex: true,
});

// To connect server.js to userRouter.js
app.use("/api/users", userRouter);

// listen command
const port = process.env.PORT || 5000;

app.listen(port, () => {
  console.log(`Serve at http://localhost:${port}`);
});

🌏 So now everything is connected to everything 👩🏻‍💻

7. It's time to go back to userRouter.js file and define the routes to perform the CRUD operations.

import express from "express";
import User from "./userModel.js ";

const userRouter = express.Router();

// 1) to read/fetch all users:

userRouter.get(
  "/seed",async (request, response) => {

    // there is no condition defined in find, so it will
    // fetch all users.
    const allUsers = await User.find({});

    response.send({ allUsers });
  };
);


// 2) to create new user:

userRouter.post(
  "/register",async (request, response) => {

    // A request body is data sent by the client to your API.
    const newUser = new User({
      firstName: request.body.firstName,
      lastName: request.body.lastName,
      email: request.body.email,
      pin: request.body.pin,
    });

    const createdUser = await newUser.save();

    response.send({ createdUser });
  };
);


// 3) to update existing user:
// first we need to find that user and then update its info.

userRouter.post(
  "/update",async (request, response) => {
    const editUser = await User.find({ email: request.body.email });


    // When there are no matches find() returns [].
    // So we could not use the condition: if(!editUser){...}

    if (!editUser.length) {
      response.status(400).send({ message: "No User Found" });
    } else {
        editUser.firstName: request.body.firstName,
        editUser.lastName: request.body.lastName,
        editUser.pin: request.body.pin,

        const updatedUser = await editUser.save();

        response.status(201).send({ updatedUser });
    }
  };
);


// 4) to delete a user:
// first we need to find that user and then delete it.

userRouter.delete(
  "/delete",async (request, response) => {
    const deleteUser = await User.find({ email: request.body.email });


    if (!deleteUser.length) {
      response.status(400).send({ message: "No User Found" });
    } else {
        const userDeleted = await deleteUser.deleteOne();

        response.status(201).send({ message: "User removed" });
    }
  };
);

export default userRouter;

🏆 We have successfully integrated Mongoose in our webapp 🔥.

Now we just need to make a request to our server.
For eg. To fetch all users, make a get request to:
"/api/users/seed".

There are several other functions with these, such as:

sort()
findById()
findOne()
findByIdAndUpdate()
deleteMany()
updateMany() and many more.

You could read more on this from Mongoose Docs

How to start with stripe

Roopali Singh — Thu, 04 Nov 2021 00:09:05 +0000

Hi there👋,

In this guide we will be learning how to integrate a payment gateway in our web application using stripe.

We are working with React for the frontend and Node & Express for the backend. To make api calls we are using axios library.

For simplicity we will not be focusing on design.
To start we are using create-react-app.

1. After getting our project bootstrapped with create-react-app, in your React code we need to add two dependencies.

npm install --save @stripe/react-stripe-js @stripe/stripe-js

2. Now in App.js file, call the loadStripe function to pass the stripe test publishable key which you can get from the stripe dashboard.
(it is safe to share the stripe publishable key, they aren’t secret).

import { loadStripe } from "@stripe/stripe-js";
const stripePromise = loadStripe(STRIPE_PUBLISHABLE_KEY);

// Make sure to call `loadStripe` outside of a component’s render 
// to avoid recreating the `Stripe` object on every render.

3. Next, we will pass the returned promise from loadStripe function to Elements provider which is a wrapper that allows us to access Stripe object in any nested component.

import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";

const stripePromise = loadStripe(STRIPE_PUBLISHABLE_KEY);

function App() {
  return (
    <Elements stripe={stripePromise}>
      <CheckoutPage />
    </Elements>
  );
};
// Render an Elements provider at the root of your React app
// so that it is available everywhere you need it.
export default App;

4. In the CheckoutPage component, we're going to add a CardElement which is a flexible single-line input that collects all necessary card details.

import { CardElement } from "@stripe/react-stripe-js";

function CheckoutPage() {

  function paymentHandler() {
    // We're going to make the function async in the next step
    // handling the payment
  }

  return (
    <div>
      <Form onSubmit={paymentHandler}>
        <CardElement />
        <button>Pay Now</button>
      </Form>
    </div>
  );
};

export default CheckoutPage;

The CardElement will look something like this:

5. Now we are going to use these two powerful hooks: useStripe and useElements.

useElements is used to safely pass the payment information collected by the Payment Element to the Stripe API.
useStripe hook returns a reference to the Stripe instance passed to the Elements provider (we're going to use it to confirm payments).

import { CardElement, useElements, useStripe } 
from "@stripe/react-stripe-js";

function CheckoutPage() {
  const stripe = useStripe();
  const elements = useElements();

  async function paymentHandler() {
    if (!stripe || !elements) {
      // Stripe.js has not yet loaded.
      // Make sure to disable form submission until Stripe.js has
      // loaded.
        return;
    }
      // hadling the payment
   }

 return (
   <div>
     <Form onSubmit={paymentHandler}>
       <CardElement />
         <button disabled={!stripe || !elements}>Pay Now</button>
     </Form>
   </div>
  );
};

export default CheckoutPage;

Now to complete payment with stripe, we need a clientSecret which is unique for every payment.

For this we have to create a paymentIntent by providing it with the amount and currency.

This code will be in the backend so let's move to our Node.js code.

6. First, we will install stripe in the backend.

npm install stripe

7. For this step, we will need the stripe test secret key which we can get from the dashboard.

▶️(Remember: You must keep your secret API keys confidential. Do not just put it on any version control platform)

import express from "express";
import Stripe from "stripe";

const stripeSecret = new Stripe(STRIPE_SECRET_KEY);

///////////// Getting client secret /////////////

app.post(
  "/api/payment/create", async (request, response) => {
   const total = request.query.total;
   const paymentIntent = await 
stripeSecret.paymentIntents.create({
      amount: total,
      currency: "inr",
    });
    response.status(201).send({
      clientSecret: paymentIntent.client_secret
    });
  }
);

😃Whoa!
If you have reached up till here then you have covered more than half of the journey. Just a couple more steps to go 🔥

So we have written our function to get the clientSecret at the backend.

Now back to frontend.

In the CheckoutPage component, we need to make a request to our server to create a new paymentIntent as soon as the page loads.

import React, { useEffect } from "react";

const [clientSecret, setClientSecret] = useState("");
const [errorMsg, setErrorMsg] = useState("");

useEffect(() => {
  async function getClientSecret(total) {
    try {
      const { data } = await axios.post(
        `/api/payment/create?total=${total * 100}`
      );
      // All API requests expect amounts to be provided
      // in a currency’s smallest unit.

      setClientSecret(data.clientSecret);
    } catch (error) {
      setErrorMsg(error.message);
    }
  }
  getClientSecret(the_amount);
  }, [the_amount]);

We have now received our clientSecret.

Now there's one last step to complete the payment handler function and do some error handling.

In the CheckoutPage component, we will check if the payment is completed by calling stripe.confirmPayment().

import React, { useEffect, useState } from "react";

function CheckoutPage({ amount }) {
  const [clientSecret, setClientSecret] = useState("");
  const [errorMsg, setErrorMsg] = useState("");
  const [processing, setProcessing] = useState(false);
  const [success, setSuccess] = useState(false);

  useEffect(() => {
      .
      .
      .
    getClientSecret(the_amount);
    }, [the_amount]);

  async function paymentHandler(e) {
      e.preventDefault();
      if (!stripe || !elements || errorMsg) {
        return;
      } else {
        setProcessing(true);
        await stripe.confirmCardPayment(clientSecret, {
            payment_method: {
              card: elements.getElement(CardElement),
            },
          })
          .then(({ paymentIntent }) => {
            setErrorMsg(false);
            setProcessing(false);
            setSuccess(true);
          })
          .catch((error) => {
            setErrorMsg(error.message);
            setProcessing(false);
            setSuccess(false);
          });
      }
    }

  return (
    <div>
      <Form onSubmit={paymentHandler}>
        <CardElement />
        {errorMsg && <div className="errorMsg">{errorMsg}</div>}
        <button disabled={
          !stripe || !elements || processing || success
        }>
          Pay Now
        </button>
      </Form>
    </div>
  );
};

export default CheckoutPage;

We have successfully integrated the payment gateway in our webapp using stripe.

Note: You need to change the test publishable key and test secret key with the live publishable and secret key to use it in the production enviroment.

Forem: Roopali Singh

My Startup Journey

Adding downloaded fonts in your React app

Building a Voice Assistant using Web Speech API

Here's a demo that I have made with some styling:

I call it Aether

Integrating MongoDB database in Webapp

🚀 Fasten your seat belt cause we are about to start our journey!

Your userModel.js file should look like this now:

The server.js file should look like this now:

🌏 So now everything is connected to everything 👩🏻‍💻

🏆 We have successfully integrated Mongoose in our webapp 🔥.

How to start with stripe

Here's a demo that I have made with some styling:

I call it Moon with Stripes

Your `userModel.js` file should look like this now:

The `server.js` file should look like this now: