Code an AI Voice Recognition app with ALAN AI- Complete Setup ๐Ÿ—ฃ๏ธ

Subscribe to my newsletter and never miss my upcoming articles

Hey there, I'm Savio Martin, A 13-year-old boy on an intention to enhance as a successful full-stack web developer. I love building full-stack web applications and mobile apps. I have proved my superiority in frontend technologies. I love to share my resources and expertise with the dev community. I regularly write articles on @hashnode.

Today, I'm gonna help you how to develop a hackathon winning AI Conversational Voice Controlled React News Application. I hope I have written this in my best way and you would be able to create your own AI Conversational Voice Controlled React News Application. First of all, we should have a good understanding of our app and what our app does.

Understanding our project

light.png

AI Voice Recognition News App is a simple yet powerful project built with React and Alan AI. This app could deliver you the latest news from top sources like BBC, CNN, etc simply through your voice. For example: "Give me the latest news from CNN" could deliver you the latest news from CNN. Also, it could deliver the top news by sorting into categories. For example: "Give me the latest sports news", this would deliver the latest sports news. And next, this app could give you the latest news about a particular object or a person. For example: "What's up with ps5" will give you the latest news about ps5. The app should be well sufficient with the best UI and should fully responsive. This app also has the ability to answer moon talks like 'How are you' or 'Where do you come from' etc. Another interesting feature is that this app will read the news for us. Also, we could open an article simply by voice like 'Open article 4'.

All Its features

  • Voice to retrive news from a source
    Say 'Give me the latest news from CNN'
  • Voice to retrive news about something
    Say 'What's up with playstation 5'
  • Voice to retrive news from a topic
    Say 'Give me the latest sports news'
  • Read us headlines of top news
    Ans 'yes' when the bot asks
  • Voice to open articles
    Say 'Open article 4'
  • Voice to go back to home
    Say 'Go back'
  • Superb UI/UX
    Well designed UI created in Figma
  • Fully Responsive
    Compactible with all devices like mobiles, laptops and ipads.

Try It out

So, as the next step, we can start developing the app. We are not just developing a model, we are gonna develop a hackathon winning app. A good mindset and A cup of coffee are very much needed. So, let's get started. First of all, let us divide the app into 5 steps ๐Ÿ’ช

1. Design the UI

2. Start Coding

3. Uploading to Github

4. Creating A Video

5. Submitting our project

Design the UI

A good UI design is very much needed for an app or a project to perform well before others. Also, another important thing is that one project should be 100% mobile responsive. For creating a good UI, there are apps like Adobe XD and Figma. I prefer the Figma. If you don't have Figma installed, Install it from here. If you're using Linux os, use the web version or Install It from here

Figma is a vector graphics editor and prototyping tool which is primarily web-based, with additional offline features enabled by desktop applications for macOS and Windows. The Figma Mirror companion apps for Android and iOS allow viewing Figma prototypes on mobile devices. So, let's start designing

Gaining Inspiration

There are so many sites on the internet for us to gain inspiration. This is really important as this would give us the best font that suits our project as well as the colors and the elements. So, give some time to gain the best inspiration. I usually use 3 websites to gain inspiration.

Dribble

Dribbble is a self-promotion and social networking platform for digital designers and creatives. It serves as a design portfolio platform, jobs and recruiting site and is one of the largest platforms for designers to share their work online. The company is fully remote with no headquarters.

Behance

Behance is a social media platform owned by Adobe which claims "to showcase and discover creative work".

Mobbin

Mobbin is a hand-picked collection of the latest mobile design patterns from apps that reflect the best in design. Get inspiration from over 250 iOS apps and 25,000 patterns (screenshots from iPhone 12) available on the platform. Sign up to save your favorite patterns.

Wireframing

Wireframing is a simple process of creating a sample idea of what our website gonna look like. It could be as a paper drawing or a digital drawing. A good wireframe can provide the vision for the entire layout and functionality of a website. It can serve as the first stage of a design, give an idea of the overall structure pages will take, and how navigation will flow.

๐ŸŽฅ Video by Adrian Twarog from Free code camp

Designing

As I said earlier a good design is very much necessary, for creating a good design, Figma makes it easy. Figma is a web-based (with a companion desktop app enabled by Electron) UI design and prototyping tool. In this tutorial by DesignCourse, He creates a mobile layout while discovering many of its features. This video is so helpful if you're a very beginner and don't know anything about Figma.

๐ŸŽฅ Video by DesignCourse

For our project, I created a Figma file and added a desktop frame, just added some squares, put some corner radius, added soft shadows, added headings, added some text, found a good colour palette, found a font combination and simply made a UI. That's it, you have created our UI for our app.

Prototyping

๐ŸŽฅ Video by Figma

Prototypes in Figma is a simple thing that is a little hard to explain. For example, If I clicked on a link on a nav, I should go to the desired location. Prototypes do that, it will take us to the desired location. We just have to draw from an element to another frame. Also, there are additional feature like we could decide how our app will go like fade in, fade out, tilt or smart scroll etc.

I would also like to introduce a very nice plugin that makes the job easier - Autoflow.

Autoflow

Autoflow makes it easy to draw flows. Simply select 2 objects and a line will be magically drawn between them.

  1. Run Autoflow
  2. Select any 2 shapes while holding down โ‡งSHIFT and a line will be drawn
  3. Keep selecting until you're all wired up!

Start Coding

So, it is time to start coding our project. The best code editor I prefer is VS Code, the huge list of extensions make it a next-level app from other code editors. But, it totally depends upon you. Actually, we are gonna code react for this app but you could still improve the code by working on the backend as well as the frontend. First of all, be ready with your coffee and mindset because coding is the most time-consuming part of our project. A good mindset is very much necessary as we want to complete our app and don't want to mess or stop when we get trouble. If you don't have VS code installed locally on your machine, Install it from here

Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity).

Knowing Components

Our app is a kind of Progressive Web App (PWA). A progressive web application is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices.

For this project, we are mostly gonna use React. React is an open-source, front end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

Some advantages of React are

  1. Declarative
  2. Component-Based
  3. Learn Once, Write Anywhere

Coding Frontend

So, it is time to start up coding. First, We need to install react on our project. There are 3 ways to install React as mentioned on Github. React has been designed for gradual adoption from the start, and you can use as little or as much React as you need:

You can use React as a <script> tag from a CDN, or as a react package on npm.

For Now, we can use the command-line version that is by putting npx create-react-app .

This is what we will get after we run the command npx create-react-app .

Now, let's start the server. For this, simply type npm start. Then, open http://localhost:3000/ to see this output.

Now, we have finished the setup, next is to start building the app.

For this, we are using

npm is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js

Material-UI is an open-source project that features React components that implement Google's Material Design. With over 35,000 stars on GitHub, Material-UI is one of the top user interface libraries for React out there.

Now Let's install all our dependencies, simply paste the down code to your terminal

npm i @alan-ai/alan-sdk-web @material-ui/core classnames words-to-numbers

Now, let's check the file structure of our app, Here it is

root/
โ”œโ”€โ”€ public/
         โ”œโ”€โ”€ index.html
         โ”œโ”€โ”€ logo.png
         โ”œโ”€โ”€ maifest.json
         โ””โ”€โ”€ robots.txt
โ”œโ”€โ”€ src/
         โ”œโ”€โ”€ components/
                  โ”œโ”€โ”€ NewsCards/
                            โ”œโ”€โ”€ NewsCard/
                                     โ”œโ”€โ”€ NewsCard.css
                                     โ”œโ”€โ”€ NewsCard.js
                                     โ””โ”€โ”€ styles.js
                            โ”œโ”€โ”€ NewsCards.css
                            โ””โ”€โ”€ NewsCards.js
                  โ””โ”€โ”€ index.js
         โ”œโ”€โ”€ App.css
         โ”œโ”€โ”€ App.js
         โ”œโ”€โ”€ Footer.css
         โ”œโ”€โ”€ Footer.js
         โ”œโ”€โ”€ index.css
         โ”œโ”€โ”€ index.js
         โ””โ”€โ”€ styles.js
โ”œโ”€โ”€ LICENSE
โ”œโ”€โ”€ README.md
โ”œโ”€โ”€ package-lock.json 
โ””โ”€โ”€ package.json

So large, no problem. Let's start code.

We don't have much to interfere with the public folder. This is the place where the index.html is situated. We just have to use index.html to add meta tags and icons.

The place where we have to concentrate on is the src folder. Here is the file structure of the src folder ๐Ÿ‘‡

src/
โ”œโ”€โ”€ components/
โ”œโ”€โ”€ App.css
โ”œโ”€โ”€ App.js
โ”œโ”€โ”€ Footer.css
โ”œโ”€โ”€ Footer.js
โ”œโ”€โ”€ index.css
โ”œโ”€โ”€ index.js
โ””โ”€โ”€ styles.js

index.js renders the whole app

import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

App.js renders all the files of our app. Inside App.js whole work take place.

import React, { useState, useEffect } from "react";
import { Typography } from "@material-ui/core";
import wordsToNumbers from "words-to-numbers";
import alanBtn from "@alan-ai/alan-sdk-web";
import Footer from "./Footer";
import "./App.css";
import { NewsCards } from "./components";
import useStyles from "./styles";

const App = () => {
  const [activeArticle, setActiveArticle] = useState(0);
  const [newsArticles, setNewsArticles] = useState([]);
  const [isOpen, setIsOpen] = useState(false);

  const classes = useStyles();
  const key =
    "MY_PERSONAL_KEY";

  useEffect(() => {
    alanBtn({
      key: key,
      onCommand: ({ command, articles, number }) => {
        if (command === "newHeadlines") {
          setNewsArticles(articles);
          setActiveArticle(-1);
        } else if (command === "instructions") {
          setIsOpen(true);
        } else if (command === "highlight") {
          setActiveArticle((prevActiveArticle) => prevActiveArticle + 1);
        } else if (command === "open") {
          const parsedNumber =
            number.length > 2
              ? wordsToNumbers(number, { fuzzy: true })
              : number;
          const article = articles[parsedNumber - 1];

          if (parsedNumber > articles.length) {
            alanBtn().playText("Please try that again...");
          } else if (article) {
            window.open(article.url, "_blank");
            alanBtn().playText("Opening...");
          } else {
            alanBtn().playText("Please try that again...");
          }
        }
      },
    });
  }, []);

  return (
    <div className="app">
      <h1>Access latest news directly with your voice</h1>
      <div className="line"></div>
      <div className={classes.logoContainer}>
        {newsArticles.length ? (
          <div className="infoContainer">
            <div className="card">
              <Typography variant="h5" component="h2">
                Try saying: <br />
                <br />
                Open article number [4]
              </Typography>
            </div>
            <div className="card">
              <Typography variant="h5" component="h2">
                Try saying: <br />
                <br />
                Go back
              </Typography>
            </div>
          </div>
        ) : null}
      </div>
      <div className="">
        <NewsCards articles={newsArticles} activeArticle={activeArticle} />
        <Footer />
      </div>
    </div>
  );
};

export default App;

Inside App.js you could see a code like this ๐Ÿ‘‡

const key =
    "MY_PERSONAL_KEY";

This is a very important part of our project. If we really need to add voice capability, a key is very much important.

You could your key from Alan Studio

  1. Go to Alan Home Page
  2. Create an Account
  3. Then, you will be redirected to this page. I have already created an App for you it will be blank. Click Create Voice Assistant scrnli_26_12_2020_20-24-29.png

  4. This is how it will look like now. At the top, you could see a button called Integrations Just click that button. scrnli_26_12_2020_20-29-21.png

  5. That's It! Here you could find your Alan AI SDK key. scrnli_26_12_2020_20-49-10.png

  6. Just go and paste it in App.js

Now let's take a look at Footer.js This is optional, I did it because I taught a footer should be there. I have put my name with my social profile links in the Footer.js

import React from "react";
import "./Footer.css";

function Footer() {
  return (
    <div>
      <div className="footer">
        <h2>Project Developed By Savio Martin</h2>
        <p>
          Folow me on <a href="#">Github</a> and <a href="#">Instagram</a>
        </p>
      </div>
    </div>
  );
}

export default Footer;

Inside the src folder you could see another folder called components All our app works here. Inside it there is another folder called NewsCards is situated. NewsCards folder acts as the parent of our project. Here is the file structure of components folder ๐Ÿ‘‡

components/
โ”œโ”€โ”€ NewsCards/
โ””โ”€โ”€ index.js

Basically, our app has 2 kinds of pages.

  1. This is our homepage.

scrnli_26_12_2020_20-55-02.png

  1. And if we ask for news our page will be changed into this. We could go back to the home page simply by saying go back

scrnli_26_12_2020_20-55-28.png

NewsCards folder consists of another folder called NewsCard This folder consists of the single news cards that would be rendered as news on the second page. This would be the file structure of the NewsCards folder ๐Ÿ‘‡

NewsCards/
โ”œโ”€โ”€ NewsCard/
โ”œโ”€โ”€ NewsCards.css
โ””โ”€โ”€ NewsCards.js

This is the code that is present inside NewsCards.js Here you could see we created an array called infoCards This is done to avoid duplication of the same divs and add more sense to our code. I have avoided the use of classes module as I felt it weird. You could use it as per your wish. We have made a good use of material-ui that makes our app responsive

import React from "react";
import { Grid, Grow, Typography } from "@material-ui/core";

import NewsCard from "./NewsCard/NewsCard";
import "./NewsCards.css";

const infoCards = [
  {
    color: "#A49CF4",
    title: " Latest News",
    info:
      "CNN, Wired,Bitcoin, PlayStation 5, Smartphones, BBC News, Business, Entertainment, General, Health",
    text: "Give me the latest news",
  },
  {
    color: "#FFA49C",
    title: "News by Categories",
    info:
      "Business, Entertainment, General, Health, Science, Sports, Technology",
    text: "Give me the latest Technology news",
  },
  {
    color: "#FFC58C",
    title: "News by Terms",
    info: "Bitcoin, PlayStation 5, Smartphones, Donald Trump...",
    text: "What's up with PlayStation 5",
  },
  {
    color: "#8EE7B2",
    title: "News by Sources",
    info: "CNN, Wired, BBC News, Time, IGN, Buzzfeed, ABC News...",
    text: "Give me the news from CNN",
  },
];

const NewsCards = ({ articles, activeArticle }) => {
  // const classes = useStyles();

  if (!articles.length) {
    return (
      <div className="cont">
        <Grow in>
          <Grid
            className="container"
            container
            alignItems="stretch"
            spacing={3}
          >
            {infoCards.map((infoCard) => (
              <Grid item xs={12} sm={6} md={4} lg={3} className="infoCard">
                <div
                  className="card"
                  style={{ backgroundColor: infoCard.color }}
                >
                  <Typography variant="h3" component="h3">
                    {infoCard.title}
                  </Typography>

                  {infoCard.info ? (
                    <Typography variant="h6" component="h6" className="mid">
                      <strong>{infoCard.title.split(" ")[2]}:</strong>{" "}
                      {infoCard.info}
                    </Typography>
                  ) : null}

                  <Typography variant="h5" component="h5">
                    Try saying: <br /> <b>{infoCard.text}</b>
                  </Typography>
                </div>
              </Grid>
            ))}
          </Grid>
        </Grow>
      </div>
    );
  }

  return (
    <Grow in>
      <Grid className="container" container alignItems="stretch" spacing={3}>
        {articles.map((article, i) => (
          <Grid item xs={12} sm={6} md={4} lg={3} style={{ display: "flex" }}>
            <NewsCard activeArticle={activeArticle} i={i} article={article} />
          </Grid>
        ))}
      </Grid>
    </Grow>
  );
};

export default NewsCards;

Now lets work on the NewsCard folder. It consists of NewsCard.css where we put all our css code, NewsCard.js where we render all our single cards and styles.js where some of our styles with respect to the material-ui is situated. Here is the file structure ๐Ÿ‘‡

NewsCard/
โ”œโ”€โ”€ NewsCard.css
โ”œโ”€โ”€ NewsCard.js
โ””โ”€โ”€ styles.js

Here is the code for our NewsCard.js

import React, { useState, useEffect, createRef } from "react";
import {
  Card,
  CardActions,
  CardActionArea,
  CardContent,
  CardMedia,
  Button,
  Typography,
} from "@material-ui/core";
import "./NewsCard.css";

import useStyles from "./styles";

const NewsCard = ({
  article: { description, publishedAt, source, title, url, urlToImage },
  activeArticle,
  i,
}) => {
  const classes = useStyles();
  const [elRefs, setElRefs] = useState([]);
  const scrollToRef = (ref) => window.scroll(0, ref.current.offsetTop - 50);

  useEffect(() => {
    window.scroll(0, 0);

    setElRefs((refs) =>
      Array(20)
        .fill()
        .map((_, j) => refs[j] || createRef())
    );
  }, []);

  useEffect(() => {
    if (i === activeArticle && elRefs[activeArticle]) {
      scrollToRef(elRefs[activeArticle]);
    }
  }, [i, activeArticle, elRefs]);

  return (
    <Card
      ref={elRefs[i]}
      className={activeArticle === i ? "activenewsCard" : "newscard"}
    >
      <CardActionArea href={url} target="_blank" className="mid">
        <CardMedia
          className="media"
          image={
            urlToImage ||
            "https://www.industry.gov.au/sites/default/files/August%202018/image/news-placeholder-738.png"
          }
          title={title}
        />
        <div className="details">
          <Typography variant="body2" color="textSecondary" component="h2">
            {new Date(publishedAt).toDateString()}
          </Typography>
          <Typography variant="body2" color="textSecondary" component="h2">
            {source.name}
          </Typography>
        </div>
        <Typography className="title" gutterBottom variant="h5" component="h2">
          {title}
        </Typography>
        <CardContent>
          <Typography variant="body2" color="textSecondary" component="p">
            {description}
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions className="cardActions">
        <Button size="small" color="primary" href={url}>
          Learn More
        </Button>
        <Typography variant="h5" color="textSecondary" component="h2">
          {i + 1}
        </Typography>
      </CardActions>
    </Card>
  );
};

export default NewsCard;

In the src folder you could see files like App.css, Footer.css, index.css, NewsCards.css and NewsCard.css These are simply the css files that we use to design our webpages. You could design them as per you wish.

Also you might be wondering, what is styles.js It has the same use of css It is used to style the components with respect to the material ui Here is a sample ๐Ÿ‘‡

import { makeStyles } from "@material-ui/core/styles";

export default makeStyles({
  card: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "space-between",
    height: "75vh",
    borderBottom: "10px solid white",
  },
});

Now, I hope you're clear with all our frontend part and lets just jump into the backend

View the complete code

If you need step by step, visual referance, This video is really helpful.

๐ŸŽฅ Video by JavaScript Mastery

Working on Backend

Now, it is time to know about How voice recognition is working, how are we doing it. For this, there is a super awesome tool called Alan AI that makes our work easier. Alan Platform provides an AI backend for your application to create conversational experiences

Alan Studio, a simple but powerful IDE, is tailored to the challenges of voice interface design. Write and test conversational scenarios, maintain dialog versions and publish the results to a sandbox or the production environment. Focus on bigger things and let Alan take care of the rest. With lightweight Alan SDKs, you can target any platform and any device. Design a voice interface once and deploy it to Web, iOS, Android and cross-platform solutions: Flutter, Ionic, Apache Cordova, React Native and even Power Apps. You wonโ€™t have to rebuild it separately. These are some of the outstanding features of Alan AI

  1. Recognizes user context
  2. Works with any Domain
  3. Easily innovate and iterate

Alan AI has its own code editor. Here is the code that should be put there for the app to perform well. To connect Alan AI to our project we simply have to integrate our react app as mentioned in the video by Javascript Mastery

Here is the code that should be put up at the Alan Studio.

intent('What does this app do?', 'What can I do here?', 
      reply('This is a news project.'));

const API_KEY = '7bdfb1b10aca41c6becea47611b7c35a';
let savedArticles = [];

// News by Source
intent('Give me the news from $(source* (.*))', (p) => {
    let NEWS_API_URL = `https://newsapi.org/v2/top-headlines?apiKey=${API_KEY}`;

    if(p.source.value) {
        NEWS_API_URL = `${NEWS_API_URL}&sources=${p.source.value.toLowerCase().split(" ").join('-')}`
    }

    api.request(NEWS_API_URL, (error, response, body) => {
        const { articles } = JSON.parse(body);

        if(!articles.length) {
            p.play('Sorry, please try searching for news from a different source');
            return;
        }

        savedArticles = articles;

        p.play({ command: 'newHeadlines', articles });
        p.play(`Here are the (latest|recent) ${p.source.value}.`);

        p.play('Would you like me to read the headlines?');
        p.then(confirmation);
    });
})

// News by Term
intent('what\'s up with $(term* (.*))', (p) => {
    let NEWS_API_URL = `https://newsapi.org/v2/everything?apiKey=${API_KEY}`;

    if(p.term.value) {
        NEWS_API_URL = `${NEWS_API_URL}&q=${p.term.value}`
    }

    api.request(NEWS_API_URL, (error, response, body) => {
        const { articles } = JSON.parse(body);

        if(!articles.length) {
            p.play('Sorry, please try searching for something else.');
            return;
        }

        savedArticles = articles;

        p.play({ command: 'newHeadlines', articles });
        p.play(`Here are the (latest|recent) articles on ${p.term.value}.`);

        p.play('Would you like me to read the headlines?');
        p.then(confirmation);
    });
})

// News by Categories
const CATEGORIES = ['business', 'entertainment', 'general', 'health', 'science', 'sports', 'technology'];
const CATEGORIES_INTENT = `${CATEGORIES.map((category) => `${category}~${category}`).join('|')}|`;

intent(`(show|what is|tell me|what's|what are|what're|read) (the|) (recent|latest|) $(N news|headlines) (in|about|on|) $(C~ ${CATEGORIES_INTENT})`,
  `(read|show|get|bring me|give me) (the|) (recent|latest) $(C~ ${CATEGORIES_INTENT}) $(N news|headlines)`, (p) => {
    let NEWS_API_URL = `https://newsapi.org/v2/top-headlines?apiKey=${API_KEY}&country=us`;

    if(p.C.value) {
        NEWS_API_URL = `${NEWS_API_URL}&category=${p.C.value}`
    }

    api.request(NEWS_API_URL, (error, response, body) => {
        const { articles } = JSON.parse(body);

        if(!articles.length) {
            p.play('Sorry, please try searching for a different category.');
            return;
        }

        savedArticles = articles;

        p.play({ command: 'newHeadlines', articles });

        if(p.C.value) {
            p.play(`Here are the (latest|recent) articles on ${p.C.value}.`);        
        } else {
            p.play(`Here are the (latest|recent) news`);   
        }

        p.play('Would you like me to read the headlines?');
        p.then(confirmation);
    });
});

const confirmation = context(() => {
    intent('yes', async (p) => {
        for(let i = 0; i < savedArticles.length; i++){
            p.play({ command: 'highlight', article: savedArticles[i]});
            p.play(`${savedArticles[i].title}`);
        }
    })

    intent('no', (p) => {
        p.play('Sure, sounds good to me.')
    })
})

intent('open (the|) (article|) (number|) $(number* (.*))', (p) => {
    if(p.number.value) {
        p.play({ command:'open', number: p.number.value, articles: savedArticles})
    }
})

intent('(go|) back', (p) => {
    p.play('Sure, going back');
    p.play({ command: 'newHeadlines', articles: []})
})

Prettify our code

Now the app is working nicely and is ready to be hosted. But, as we are participating for a hackathon, mentors will inspect our code so we there is a need to prettify our code.

For this, we could use a VS Code extension called Prettier

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

๐ŸŽฅ Video by Code Wizard

Follow this video and you could setup Prettier on your device. If you like to automatically format your code whenever you save your file, you could do this by

  • Adding this script to settings.json file
"editor.formatOnSave": true

Hosting

To host our app, we are gonna use Netlify. Wondering how to Host & Deploy your React Application using Netlify? Look no further, this is the ultimate resource you need! I

To host our website

  1. Run npm run build to get a minified version of all essentials
  2. Drag the build folder here

  1. That's It, We have hosted our app online, Hurray

That's It, Our app is now working well and we have hosted our app on the server. Now, everyone can use it and share.

Uploading to Github

There is a very important need for uploading our project to Github. The judges could inspect our code by viewing our Github. Github is a very important aspect of a developer's life. Github is responsible for our work and it hosts our code.

GitHub offers its basic services free of charge. Its more advanced professional and enterprise services are commercial. Free GitHub accounts are commonly used to host open-source projects. As of January 2019, GitHub offers unlimited private repositories to all plans, including free accounts, but allowed only up to three collaborators per repository for free.

Creating a Good Readme

Before, uploading to Github you should make a good readme that depicts all that our project does. Github supports markdown, that makes it easy as markdown is so simple.

Here are some of the common markdown syntax, I hope it will be helpful.

  • Headings
# This is an <h1> tag
## This is an <h2> tag
###### This is an <h6> tag
  • Images
 ![Alt Text](image-url)
  • Links
[Text to display](Url)
  • Ordered List
1. Item 1
2. Item 2
3. Item 3
  • Unordered List
- Item 1
- Item 2
- Item 3
  • Format
_This text will be italic_

**This text will be bold**
  • Blockquotes
> I am a Blockquotes

If you would like to know the code for my readme in my Github, Here it is


# AI Conversational Voice Recognition News App
This app will fetch you the latest news from different sources simply through your Voice. ๐Ÿ—ฃ๏ธ

## Project Overview โšก

<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1608873764695/-z-2M5Xzi.png" width='80%'/>

AI Voice Recognition News App is a simple yet powerful project built with React and Alan AI. This app could deliver you the latest news from top sources like BBC, CNN, etc simply through your voice. For example: "Give me the latest news from CNN" could deliver you the latest news from CNN. Also, it could deliver the top news by sorting into categories. For example: "Give me the latest sports news", this would deliver the latest sports news. And next, this app could give you the latest news about a particular object or a person. For example: "What's up with ps5" will give you the latest news about ps5. The app should be well sufficient with the best UI and should fully responsive. This app also has the ability to answer moon talks like 'How are you' or 'Where do you come from' etc.

## Try It out ๐Ÿ”ฅ

- [https://ai-voice-news.web.app/](https://ai-voice-news.web.app/)
- [https://github.com/saviomartin](https://github.com/saviomartin)
- [https://youtu.be/QssSkIu64yU](https://youtu.be/QssSkIu64yU)

## AI Voice News App Features ๐ŸŽฎ

- **Voice to retrive news from a source** <br>
  Say 'Give me the latest news from CNN'
- **Voice to retrive news about something** <br>
  Say 'What's up with playstation 5'
- **Voice to retrive news from a topic** <br>
  Say 'Give me the latest sports news'
- **Read us headlines of top news** <br>
  Ans 'yes' when the bot asks
- **Voice to open articles** <br>
  Say 'Open article 4'
- **Voice to go back to home** <br>
  Say 'Go back'
- **Superb UI** <br>
  Well designed UI created in Figma
- **Fully Responsive** <br>
  Compactible with all devices like mobiles, laptops and ipads.

## Built With ๐Ÿ’ช
![](https://camo.githubusercontent.com/9d07c04bdd98c662d5df9d4e1cc1de8446ffeaebca330feb161f1fb8e1188204/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4a6176615363726970742d4637444631453f7374796c653d666f722d7468652d6261646765266c6f676f3d6a617661736372697074266c6f676f436f6c6f723d626c61636b)
![](https://camo.githubusercontent.com/3a0f693cfa032ea4404e8e02d485599bd0d192282b921026e89d271aaa3d7565/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f435353332d3135373242363f7374796c653d666f722d7468652d6261646765266c6f676f3d63737333266c6f676f436f6c6f723d7768697465)
![](https://camo.githubusercontent.com/d63d473e728e20a286d22bb2226a7bf45a2b9ac6c72c59c0e61e9730bfe4168c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f48544d4c352d4533344632363f7374796c653d666f722d7468652d6261646765266c6f676f3d68746d6c35266c6f676f436f6c6f723d7768697465)
![](https://camo.githubusercontent.com/268ac512e333b69600eb9773a8f80b7a251f4d6149642a50a551d4798183d621/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f52656163742d3230323332413f7374796c653d666f722d7468652d6261646765266c6f676f3d7265616374266c6f676f436f6c6f723d363144414642)
![](https://camo.githubusercontent.com/2c2e3cab0541596a12e216df86e68fa554256f25826b55a068993a3edfbcd0e8/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4d6174657269616c2d2d55492d3030383143423f7374796c653d666f722d7468652d6261646765266c6f676f3d6d6174657269616c2d7569266c6f676f436f6c6f723d7768697465)
![](https://camo.githubusercontent.com/49a2fa2acaa9d581d8f14ffce81f7b1b3ae60f39cbbece9065e699b370b8c091/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6669676d612d3041433937463f7374796c653d666f722d7468652d6261646765266c6f676f3d6669676d61266c6f676f436f6c6f723d7768697465)

## Build ๐Ÿš€

**1. Clone the repo**
`git clone https://github.com/saviomartin/ai-voice-news-app.git`

**3. Entering project directory**
`cd ai-voice-news-app/`

**3. Installing Dependencies**
`npm install`

**4. Starting server**
`npm start`

**4. Production Build For Deployment**
`npm run build`

## Contributing ๐Ÿค—

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.

## License ๐Ÿ›ก๏ธ

Discord Clone is licensed under the MIT license. [https://opensource.org/licenses/MIT](https://opensource.org/licenses/MIT)

<h5 align='center'>โญ this project, if you found it helpful</h5>

Uploading to Github

As I said earlier, Uploading to Github is very much essential and Github is the place where judges could see our code and validate it.

There are mainly 2 ways for uploading our code to Github

  1. Manually through their website
  2. Using Git through the command line

Here are the common git commands that every developer should know, but this time we can use the direct drag and drop method as it is easy and simple.

Common Git Commands

  • To create a new repository locally: git init
  • To add files to the staging area: git add . or git add ~filename~
  • To check the status of staging area: git status
  • To commit new changes: git commit -m "commit message"
  • To create a new branch: git checkout -b ~branch name~
  • To switch between branches: git checkout ~branch name~
  • To merge branches together: git merge ~branch name~
  • To add a remote repository: git remote add ~remote name~ ~https://yourremoteurl~
  • To pull changes from a remote repository: git pull ~remote name~ ~branch name~
  • To push changes to a remote repository: git push ~remote name~ ~branch name~

This is how you can upload to Github by drag and dropping

  1. On GitHub, navigate to the main page of the repository.
  2. Above the list of files, using the Add file drop-down, click Upload files.
  3. Drag and drop the file or folder you'd like to upload to your repository onto the file tree.
  4. At the bottom of the page, type a short, meaningful commit message that describes the change you made to the file. You can attribute the commit to more than one author in the commit message.
  5. Click Commit changes.

That's it. We have uploaded our code to Github. Judges could now view and validate our files.

scrnli_25_12_2020_11-54-41.png

Creating A Video

A Video demonstrating our app is very much necessary is we are in a will to win the hackathon. For creating a video representation, I use Canva. I'm not a good video editor and I don't know much about the video editing tools and trends. So, I felt using canva is so easy. That took me to use Canva. Canva has many templates to start with and making it easier for a newbie to create a video.

Using Canva

Canva is a graphic design platform, used to create social media graphics, presentations, posters, documents and other visual content. The app already includes templates for users to use. The platform is free to use and offers paid subscriptions like Canva Pro and Canva for Enterprise for additional functionality.

Editing

๐ŸŽฅ Video by Aurelius Tjin

In this video, you'll learn HOW TO USE CANVA FOR BEGINNERS. If you're just getting started, this EASY CANVA TUTORIAL 2020 will guide you step by step on getting started as a complete beginner of Canva. You'll learn how to use Canva like a pro in no time!. This is such a super awesome video for beginners to get into Canva.

Yeah, this is the video I created with the help of Canva, I hope it reflected all the necessary features.

Submitting our project

Now, all our work process has completed and it is time to submit our project. Here is what I have done for the submission. Explaining what our app does before the judges make our project strong. I have tried my best in writing these. I have answered all the questions -

  • short tagline
  • Inspiration
  • What it does
  • The main features of the app
  • How I built it
  • Challenges I ran into
  • Accomplishments that I'm proud of
  • What I learned
  • What's next for AI Voice Recognition News App
  • Try it out
  • Images
  • Video

That's It, we have completed our project and submitted it, now it is time just to wait and grab the prize for our hard work. ๐Ÿ†๐Ÿฅ‡

You did it, Go wait for a while. Don't give up if you don't win. Just code into the high.

Be brave

Hey, you have done it. Creating a project is more big than winning a prize. Doing and coding more will enhance your skills and will make you a good developer. So, I just wanna tell you, Be brave and conquer your world ๐Ÿคฉ๐Ÿ˜Ž

Wrapping Up

Thanks to everyone for being with me to the end and reading the article. Hope everyone is totally satisfied with the article and was able to develop a Conversational AI Voice Recognition app.

If you liked this project, Do give reactions to this article, give feedback and share this to your friends. Thanks, everyone for your valuable time. ๐Ÿ™โœŒ๏ธ

Find me around the Web ๐ŸŒ

Wishing You A Good Day! Happy Hacking! โšกโœŒ๏ธ

Xavier's photo

Loved this article, very well written with clear concept, thanks ๐Ÿ‘๐Ÿ‘ image.png

Savio Martin's photo

Hey, this is so much, thanks for this, I appreciate it, thank you

Tony Tin Nguyen's photo

It's astonishing article. Thank you.

Savio Martin's photo

Awesome, Glad you find it helpful ๐Ÿฅณ

Rahul's photo

Amazing article.

If anyone didn't understood they can visit this link Savio 13 year old full stack developer I dare you to visit. Thank You.

Savio Martin's photo

Yeah, you must watch this video to get a good understanding. Go watch It ๐Ÿš€๐Ÿ”ฅ