TLDR;

VoiceNotes is dictation app for transcribing your speech to text in real time.
Here is the demo link 👉 dev.d3pfrhmntkwg6h.amplifyapp.com
Here is the repository 👉 GitHub Repo.

Features

• Single-Page Application using ReactJS.

• create buffer text before writing to actual editor

• Copy text editor content to clipboard.

• download text editor content as .txt file

Screenshot

Table of Content

• Setup speech recognition API inside React
  • Setting up a new React app
  • Initialize SpeechRecognition() constructor in Web Browser
  • Configure mic on/off and listening functionality
• Deploy to AWS Amplify
  • Install the CLI globally with NPM
  • Setup Amplify for your React.js project
  • Hosting a React.js site with AWS
• Challenges
• Final Thoughts

Setup speech recognition API inside React

Setting up a new React app

npx create-react-app voicenotes 
cd voicenotes

Once you've run the above you'll have a boilerplate React.js site ready to go on localhost:3000 You can refer to the official docs for a better understanding of React.js as it's out-of-scope for this blog.

Initialize SpeechRecognition() constructor in Web Browser

The SpeechRecognition use Web Speech API under the hood to control recognition service and also handles the SpeechRecognitionEvent sent from the recognition service.

const SpeechRecognition =
  window.SpeechRecognition || window.webkitSpeechRecognition;
const mic = new SpeechRecognition();

mic.continuous = true;
mic.interimResults = true;
mic.lang = 'en-US';

We have enabled propertymic.continuous=true so that the microphone keeps on listening to the input from the user and give results for each recognition. Also we have enabled property mic.interimResults=true to give results that are not yet final and are still processing.

Note — SpeechRecognition API is mostly only compatible with Chrome and Edge browsers. To see the cross browser compatibility, you can view the list from caniuse#search=SpeechRecognition

Configure mic on/off and listening functionality

We are using two methods mic.start() and mic.stop() along with four properties mic.onstart, mic.onend, mic.onresult, mic.onerror to implement listening functionality.

const handleListen = () => {
    if (isListening) {
      mic.start();
      mic.onend = () => {
        console.log('continue..');
        mic.start();
      };
    } else {
      mic.stop();
      mic.onend = () => {
        console.log('Stopped Mic on Click');
      };
    }
    mic.onstart = () => {
      console.log('Mics on');
    };

    mic.onresult = (event) => {
      const transcript = Array.from(event.results)
        .map((result) => result[0])
        .map((result) => result.transcript)
        .join('');
      console.log(transcript);
      setNote(transcript);
      mic.onerror = (event) => {
        console.log(event.error);
      };
    };
  };

Deploy to AWS Amplify

Amplify is unified toolchain to create, integrate, and manage the AWS cloud services for your app. Before deploy, we have to setup and configure AWS amplify. Setting up the AWS Amplify using cli command is quick and easy! Make sure you're inside the root of your project folder before running any of the following commands.

Install the CLI globally with NPM

npm install -g @aws-amplify/cli

If you want to dig deeper, you can always refer to documentation by Amplify team.

Setup Amplify for your React.js project

Run amplify configure to set up the Amplify CLI to authenticate with your AWS Account which will ask your accessKey and password for secure login.

amplify configure

After that, run amplify init which will create a new amplify folder in the root of your project. Amplify uses this folder to store about back-end code and serverless Lambda functions.

amplify init

Hosting a React.js site with AWS

Manual hosting of static build to AWS is piece of cake using just one command.

amplify publish

If you want to setup custom domain, access control or see your build status, you can view by using amplify console command.

amplify console

Challenges

• Implementing download button

  const download = () => {
    var l = document.createElement('a');
    l.href =
      'data:text/plain;charset=UTF-8,' +
      document.getElementById('textarea1').value;
    l.setAttribute('download', 'voicenotes.txt');
    l.click();
  };
  

• Implementing Copy to clipboard button

  const copy = () => {
    document.getElementById('textarea1').select();
    document.execCommand('copy');
    var message = document.getElementById('message');
  };
  

Final Thoughts

AWS interface had been intimidating to me because it has so many features, but #amplifyhashnode give me change to play around with it. In future, I want to implement rich text editor support using React Quill library for the same.

I hope you find this blog useful and learnt something new.

Feel free to ask in the comments or mentions me on my Twitter.
⚡ Happy Coding!

TL;DR

ConfCube is networking app for tech events/ conferences/ webinar/ seminar/ meetup/ summit.
Here is the site link 👉 ConCube Live.
Here is the repository 👉 GitHub Repo.

💡 Inspiration

When I started my programming journey last year, everybody advised me to attend tech events for exposure and meeting new people.

Let's be honest – conferences can be intimidating for introverts when you have to talk to a stranger and you don't know anything upfront about that person.

Another issue I faced is I wanted to find a UI/UX developer for collaboration, but unfortunately in the crowd of 1000s of people, you can only network with few people.

After covid, most of the tech events are happening virtually and there is no room for networking with each other like we used to do before.

I always thought there should be some platform where I can see the interests and skill set of attendees, so it's easy to interact with each other without being awkward. But Sadly, there is no platform available and therefore I decided to build one.

🎥 Video Demo

🎨 Design process

Here's my design process I took for ConfCube.

First, I start with Excalidraw for brainstorming and to quickly generate low-fidelity mockups.

Then, I transition to high-fidelity design with Figma.

I'm not a great designer, but I have an eye for great design and always aim for simplicity and minimalistic.

Other than that mobile-first approach also helps me to make a fully responsive design from the very start.

🏗️ Development

As I'm building a hybrid web app that consists of static pages (i.e landing page) and dynamic pages (i.e profile page), I have three options to choose from

• Create-react-app
• Gatsby
• Nextjs

I was already familiar with Gatsby and create-react-app and didn't want to learn a new framework from scratch, so I left with these two. Choosing between these two is an easy task.😉

The next challenge was choosing the right backend. First, I played with Hasura but then decided to make this whole app serverless, so chose firebase.

My Complete Tech Stack

For a list of upcoming tech conferences, I extract data from an open-source project. Shout out to tech-conferences repo for maintaining a beautiful list.

ScreenShot of Static page

• Homepage

• Conference list page

ScreenShot of Dynamic Page/ Client Side Page

• Profile page

• Conference detail page

🚧 Challenges

This particular bug took me two days to solve. Since it was my first time building a dynamic app with gatsby and I never encounter this during the static build. Below code is I used inside gatsby-node.js to solve this problem.

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /firebase/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

It is frustrating when everything works great in localhost but fails in production. I found many times errors are solved by just checking if the window is defined or not. It's like a magic pill to avoid all your SSR errors in gatsby. Below is the code in case if you stuck someday.

const browser = typeof window !== 'undefined' && window;
browser && (errorcode)

🔮 Future Scope

There will be always room for improvement. I have some plans to implement and make it more useful to the developer community. You can expect the following features in the upcoming days.

• User can change profile photo
• On platform chat option
• dark/light theme option
• write SEO for each page
• Integration test for robustness
• Documentation guide

🤝 Contributing

The project is fully open-source so you could add an issue, a pull request on Github. Create a new pull request if you want to list your event on the conference page.

Wrapping up

First of all thanks to hashnode for conducting Vercel Hashnode Hackathon. This hackathon forced me to do stuff that I thought out of my league once upon a time like reading the documentation. Overall it's a huge learning experience for me.

I feel programming gives you the superpower to manifest anything into reality. This is my first blog and the first hackathon so please give your review on how can I improve in the future. Looking forward to your words.

Feel free to ask in the comments or mentions me on my Twitter.

I would like to see your profile inside ConfCube! ❤️

⚡ Happy learning!