DEV Community: Ansh Narula

Deepgram x DEV Hackathon Submission x Deepgram-translator

Ansh Narula — Sun, 10 Apr 2022 15:12:14 +0000

—

Overview of My Submission

Deepgram-translator is a tool for converting a speech (which is then converted to text by Deepgram API) to specified language. Users have a choice to choose any language in which they want to convert their message.

Working

Used react to create this app.
Added allow microphone functionality.
Passed the input speech to Deepgram API to get the required text.
Then took the result obtained and passed it thorugh libretranslate api to get the translated text.

Submission Category:

Accessibility Advocates

Link to Code on GitHub

anshnarula5 / deepgram-translator

This project was bootstrapped with Create React App.

Deepgram-translator

Deepgram-translator is a tool for converting a given text (extracted by Deepgram API) to specified language. Users have a choice to choose any language in which they want to convert their message.

APP URI :

https://deepgram-translator.vercel.app/

Run this app locally :

Clone Repo :

git clone https://github.com/anshnarula5/deepgram-translator

Install Packages and run server on port 3000 :

npm install
npm start

Demo Images :

View on GitHub

Live Project : https://deepgram-translator.vercel.app/

Additional Resources / Info

Screenshots

Demo Video : https://drive.google.com/drive/folders/1T696e1MeVjpNtpUceVIU5NaefP0chHZO?usp=sharing

Future Updates

Improve UI of the app.
Add more features including speech-to-text API.

—

Setup Redux for your react application in few simple steps!

Ansh Narula — Wed, 23 Feb 2022 18:30:47 +0000

In this article, we are going to see how to integrate redux in your project by following few simple steps.
So, lets begin!

Step 1 : Create a new project and add all the dependencies

npx create-react-app my-app

After the installation is done, you can remove all unnecessary code in App.js.
Now we need to use following dependencies in the project.

npm i redux redux-devtools-extension redux-thunk react-redux

Let us see briefly what are the function of these dependencies.

redux : Redux maintains the state of an entire application in a single immutable state tree (object), which can't be changed directly. To read more about redux, you can refer to its documentation. It has one of the most easiest documentation you will find.
redux-devtools-extension :
This is basically an extension that you can use to visualize redux workflow in your browser. To use this in your browser, you need to install this extension in your browser as well. link
redux-thunk :
This is basically a middleware that allows us to use dispatch and getState methods inside store.
react-redux :
React Redux is the official React binding for Redux. It allows React components to read data from a Redux Store, and dispatch Actions to the Store to update data. Redux helps apps to scale by providing a sensible way to manage state through a unidirectional data flow model. You can refer to its documentation. It will surely help you to clear most of your doubts, so please give it a read.

Step 2 : Redux folder and store

Add a redux folder in src folder and use following structure for the folder.

redux
 ├── actions
 │    ├── counterActions.js
 │    ├── ...
 ├── reducers
 │    ├── counterReducer.js
 │    ├── index.js
 |    ├── ...
 ├── constants.js

Now, let us setup store for the project.

Create a file named store.js in src folder.

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";
import rootReducer from "./redux/reducers";

const store = createStore(
  rootReducer,
  {},
  composeWithDevTools(applyMiddleware(thunk))
);

export default store;

The empty brackets after the rootReducer denotes initial state, which in our case is empty.

Please note :- We havn't yet added rootReducer, so it might give you an error. We will solve this in next step.

Now, to connect redux store to react application, we need to add a provider in src/index.js file.

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "react-redux";
import store from "./store";

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

reportWebVitals();

The Provider component wraps whole app's components with store.

Step 3 : Root Reducer Now let us add root reducer. We are using a root reducer so that we can combine all the reducers inside a single function. Inside redux/reducers/index.js, we write following code to combmine reducers.

import { combineReducers } from "redux";

const rootReducer = combineReducers({});

export default rootReducer;

That's it!. Now let us see an example to get a clear understanding.

Counter Example

Create constants

Here we are going to have three constants for increasing, decreasing and reset. Although you can skip this step, but for a large scale application this is very useful as it reduces chances of spelling mistake.
Inside redux/constants.js

export const INCREASE = "INCREASE"
export const DECREASE = "DECREASE"
export const RESET = "RESET"

Create actions.

In redux/actions/counterActions we add following actions:

import {DECREASE, INCREASE, RESET} from "../types"

export const increase = () => (dispatch) => {
    dispatch({type : INCREASE})
}

export const decrease = () => (dispatch) => {
    dispatch({type : DECREASE})
}

export const reset = () => (dispatch) => {
    dispatch({type : RESET})
}

Create reducers.

In redux/actions/counterReducer we add following reducer:

import { DECREASE, INCREASE, RESET } from "../types";

const counterReducer = (state = 0, action) => {
  const { type, payload } = action;
  switch (type) {
    case INCREASE:
      return state + 1;
    case DECREASE:
      return state - 1;
    case RESET:
      return 0;
    default:
      return state;
  }
};

export default counterReducer;

Here we are not passing any data so payload is set empty, otherwise we can pass any data in an action on dispatch.

Add reducer to rootReducer :

import { combineReducers } from "redux";
import counterReducer from "./counterReducer";

const rootReducer = combineReducers({ counter: counterReducer });

export default rootReducer;

Final step : dispatch action on click of button

In App.js :

import { useSelector } from "react-redux";
import { useDispatch } from "react-redux";
import "./App.css";
import { decrease, increase, reset } from "./redux/actions/counterActions";

function App() {
  const dispatch = useDispatch();
  const counter = useSelector((state) => state.counter);
  return (
    <div className="App">
      <div>
        <button onClick={() => dispatch(increase())}>Increase</button>
        <button onClick={() => dispatch(reset())}>Reset</button>
        <button onClick={() => dispatch(decrease())}>Decrease</button>
      </div>
      <div>{counter}</div>
    </div>
  );
}

export default App;

It works!!. You can see all dispatch events and state of the application in the redux devtools extension.
For this press alt+shift+tab and switch to redux tab.

You can see the full code here

Please note :- You might think that using redux for such a small task is quiet an overkill, but when you are creating a medium to large scale application, this will surely benefit you.

If you want to know more about redux I will recommend you to read this article

Thanks for reading this article. I hope you get some basic understanding of working with redux.

Happy coding 🚀

Make a React-Auth form using Bootstrap in few simple steps!

Ansh Narula — Wed, 16 Feb 2022 17:11:04 +0000

In this post, we are going to make an authentication form in react that can toggle between login and register tabs.

This is what we are going to build today :

We will not use any libraries or external tools for creating form and make authentication forms really easy.

Step 1 : Create a react project and run it by using following commands.



npx create-react-app auth

Then open up the newly created project folder in your favorite editor, it should look like this.



npm start

Step 2 : Now create a file and that component to App.js file.

Your New File should look like this. (I named this file Auth.js)



import React from 'react'

const Auth = () => {
  return (
    <div>Auth</div>
  )
}

export default Auth

Add this component to App.js



import './App.css';
import Auth from './Auth';

function App() {
  return (
    <div className="App">
      <Auth />
   </div>
  );
}

export default App;

Step 3 : Add React-Bootstrap to your project using following command



npm install react-bootstrap bootstrap@5.1.3

and now include following line in your src/index.js or App.js file.



import 'bootstrap/dist/css/bootstrap.min.css';

Step 4 : Create form.

Let us now begin creating form.

Import following to your Auth.js file. We are going to wrap our form inside a card and to center the card we are going to put the card inside row and column using grid system.



import { Card, Col, Row, Form } from "react-bootstrap";

Now add Row, Col and Card in following way :



 <Row className="justify-content-center">
    <Col xs={10} md={4}>
       <Card className="my-5 px-5 py-3">
          <h1 className="m-3 text-center">Sign up</h1>
       </Card>
    </Col>
</Row>

Now you can see this in you browser.

(p.s. I added background-color: #7c8baa; and min-height: 100vh; in App.css to App)

Now let us add formData state. ```javascript

const [formData, setFormData] = useState({
email: "",
name: "",
password: "",
password2 : ""
});
const { email, name, password, password2 } = formData;

(*We are destructuring each field so that we can use these inside our input fields*)

* Now, we can create a basic form that show all the fields.
```javascript


<Form.Group controlId="email" className="my-2">
    <Form.Label>Username</Form.Label>
    <Form.Control
      type="text"
      placeholder="enter name"
      name="name"
      value={name}
    />
  </Form.Group>
  <Form.Group className="my-2">
    <Form.Label>Email Address</Form.Label>
    <Form.Control
      type="email"
      placeholder="enter email"
      value={email}
      name="email"
    />
  </Form.Group>
  <Form.Group className="my-2">
    <Form.Label>Password</Form.Label>
    <Form.Control
      type="password"
      placeholder="enter password"
      value={password}
      name="password"
    />
  </Form.Group>
  <Form.Group className="my-2">
    <Form.Label>Confirm Password</Form.Label>
    <Form.Control
      type="password"
      placeholder="enter password again"
      value={password2}
      name="password"
    />
</Form.Group>

This should display something like this :

Add toggle logic

Since in login form, we need to display only email and password fields and for register, we are displaying all the fields, so we can use following logic to dynamically toggle between login and register form.



const [isLogin, setIsLogin] = useState(true);

We change username and confirm password fields as follows :



 {!isLogin && (
    <Form.Group  className="my-2">
      <Form.Label>Username</Form.Label>
      <Form.Control
        type="text"
        placeholder="enter name"
        name="name"
        value={name}
      />
    </Form.Group>
  )}
  <Form.Group className="my-2">
    <Form.Label>Email Address</Form.Label>
    <Form.Control
      type="email"
      placeholder="enter email"
      value={email}
      name="email"
    />
  </Form.Group>

  <Form.Group className="my-2">
    <Form.Label>Password</Form.Label>
    <Form.Control
      type="password"
      placeholder="enter password"
      value={password}
      name="password"
    />
  </Form.Group>
  {!isLogin && (
    <Form.Group className="my-2">
      <Form.Label>Confirm Password</Form.Label>
      <Form.Control
        type="password"
        placeholder="enter password again"
        value={password2}
        name="password2"
      />
    </Form.Group>
)}

Also, we need to add onChange function in each input fields. We define a function named handleChange and trigger this function whenever input field is changed



const handleChange = (e) => {
    setFormData({...formData, [e.target.name] : e.target.value})
}

Now to toggle between login and register tabs, we make a function and name it handleToggle and this function is called whenever we click on toggle button. Also, when we toggle, we want clear the input fields.



 const handleToggle = () => {
    setIsLogin(prev => !prev)
    setFormData({ email: "", name: "", password: "", password2: "" });
 }

Buttons :



<div className="mt-3 text-center">
    <p>
      {isLogin ? "Don't" : "Already"} have an account ?{" "}
      <Button size="sm" variant="outline-primary" onClick={handleToggle}>
        Sign {isLogin ? "Up" : "In"}
      </Button>
    </p>
    <Button className="btn btn-block">Sign {isLogin ? "In" : "Up"}</Button>
</div>

Final Code :



import React, { useState } from "react";
import { Button, Card, Col, Form, Row } from "react-bootstrap";

const Auth = () => {
  const [formData, setFormData] = useState({
    email: "",
    name: "",
    password: "",
    password2: "",
  });
  const { email, name, password, password2 } = formData;
  const [isLogin, setIsLogin] = useState(true);
  const handleToggle = () => {
    setIsLogin((prev) => !prev);
  };
  return (
    <Row className="justify-content-center">
      <Col xs={10} md={4}>
        <Card className="my-5 px-5 py-3">
          <h1 className="m-3 text-center">Sign {isLogin ? "In" : "Up"}</h1>
          {!isLogin && (
            <Form.Group className="my-2">
              <Form.Label>Username</Form.Label>
              <Form.Control
                type="text"
                placeholder="enter name"
                name="name"
                value={name}
                onChange = {handleChange}
              />
            </Form.Group>
          )}
          <Form.Group className="my-2">
            <Form.Label>Email Address</Form.Label>
            <Form.Control
              type="email"
              placeholder="enter email"
              value={email}
              name="email"
              onChange = {handleChange}
            />
          </Form.Group>

          <Form.Group className="my-2">
            <Form.Label>Password</Form.Label>
            <Form.Control
              type="password"
              placeholder="enter password"
              value={password}
              name="password"
              onChange = {handleChange}
            />
          </Form.Group>
          {!isLogin && (
            <Form.Group className="my-2">
              <Form.Label>Confirm Password</Form.Label>
              <Form.Control
                type="password"
                placeholder="enter password again"
                value={password2}
                name="password2"
                onChange = {handleChange}
              />
            </Form.Group>
          )}
          <div className="mt-3 text-center">
            <p>
              {isLogin ? "Don't" : "Already"} have an account ? {" "}
              <Button
                size="sm"
                variant="outline-primary"
                onClick={handleToggle}
              >
                Sign {isLogin ? "Up" : "In"}
              </Button>
            </p>
            <Button className="btn btn-block">
              Sign {isLogin ? "In" : "Up"}
            </Button>
          </div>
        </Card>
      </Col>
    </Row>
  );
};

export default Auth;

Final Result

Thank you for reading this article and happy coding 🚀