News Application Using React JS & Integrated with Voice Assistant


As a Part of curriculum of 5th semester of B.Tech Degree, We are supposed to make one Project. For that I have tried Implemented One React JS based news application (OnlyNews) with integration of voice assistant.

Live site


OnlyNews is conversational React JS based news application. For that Alan Platform is used which can help us to get Top Headlines, News from different Sources, different categories etc. This voice assistant also can able to read news for us and open specific articles for more details.

For Integration of voice control I have used Alan Studio and for fetching news have used NEWSAPI. Both provide great functionality for develop this kind of application.

OnlyNews is not limited to displaying News only. It is able to do a small talk which many voice assistant are used to do for casual conversation. It is also able to do some Calculator Operation by saying ‘Twelve plus five’ etc. It can also able to give Calendar Information like date, day, current time, time zone etc. Weather information like weather, temperature, humidity, pressure in any area is also provided by this application.

By opening the application, It show some Instruction how We can interact with Alan to get necessary information. By providing some voice or intent Application responds according to that.

As application is developed using React JS Framework it is fully Responsive.

What is Voice Assistant?

A voice assistant is a digital assistant that listens to specific voice commands and responds relevant information or performs specific functions as requested by the user. Based on specific commands(intents), spoken by the user, voice assistants can return relevant information by listening for specific keywords.

Voice Artificial Intelligence is now a significant part of the future of all industries and enterprises. There are going to be 200 billion connected devices by 2022, with voice as the primary interface.

Why Alan?

Humans have a natural tendency to be more comfortable when someone speaks to them. which is one reason why we thought Alan was a good addition to our app.

A1lan Platform provides an AI backend for application to create conversational experiences. It works as Voice assistant for application. By adding voice AI to the app through Alan, we want to make our app more accessible and easy to use for everyone.

Why React?

React.js is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications.

React allows developers to create large web applications that can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple. React also allows us to create reusable UI components.

Features Of Application

1. Alan AI

Here’s a snippet of our JavaScript code written in Alan Studio:

Here’s how I handle these commands in react:

2. Landing Page

Here is the landing page of my application which contains 4 cards of instruction of how Alan show news by different ways.

  1. News By Headlines : Give me the Latest News
  2. News By Categories: Tell me the recent news on Technology
  3. News By Terms: What’s up with Bitcoin
  4. News By Sources: Give me the news from CNN
  5. Getting Instruction: Give me the Instruction / Go Back
  6. Small Talk: How are you?, Can you help me?, What can I do here?
  7. Calculator: Square root of 16
  8. Calendar: What day is tomorrow?, What is Time zone?
  9. Weather: What is weather in Mumbai?, What is the Temperature?, Is it going to rain?

3. Search By Voice

Using This Application you can get news by interact with voice button placed at bottom right.

4. Search By typing

We can Search news by typing keyword in search box and we are able to get all news articles.

Here is the how we can interact with Alan.

Here is the Result of our input(‘Give me the News from Google News’)


OnlyNews is developed using React JS and integrated with Voice assistant and it provides useful and interactive User Interface to search and read News article by keywords or different Sources.




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Share HTTP snapshots with Pawprint

Javascript Scope

Running a Remix App on Firebase

Accelerating Node.js JavaScript for Visualization and Beyond with RAPIDS on GPUs

Store the Downloaded Case to the Active Case!

Building a blockchain

Communicate Between Components with Observable Subject in ReactJS

Communicate Between Components with Observable Subject in ReactJS

Briefly Explanied — How Flutter framework optimizes widget rendering?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Happy Makadiya

Happy Makadiya

More from Medium

React JS simple Blog


Building a Progressive Web App with React 18

React Routing