What we’ll be building. We will be building a machine learning React frontend that will predict whether a candidate will or will not be hired based on his or her credentials. This is the last part of a three-part series we have been developing. This part is only concerned with developing the machine learning React frontend. If you haven’t read of this article you should do so before this one. part two Introduction Frontend development has proved to be irreplaceable over the years. Looking back at the disk revolution and how command-line-based programs were operated on the terminal, we have come to appreciate the frontend and how it has made the populace enjoy software products. Application Programming Interfaces (API) would have been useless if not for the simplicity that frontend development has brought to our applications. Big tech companies such as Facebook, Twitter, Apple, Windows, and Google have all built their business around solid frontend development paradigms. It is best to say that without frontend development, there will be no beauty and enjoyment of any tech product. Prerequisite To crush this tutorial, you need a good command of the following tools. React CSS Yarn package manager of this tutorial Part two What is Frontend Development Before we define the above term, let's break down some of the concepts associated with frontend development. We want to know what is frontend before defining frontend development. What is Frontend? The frontend is the visual side of software or an application. It includes all the elements that make up an application interface. For example, whenever you visit and interact with a webpage, what you are seeing is the frontend. When you open your Mac or PC, the beautiful interface you see is what we call the frontend. Almost every software or application has a frontend, this is because it helps the users operate the system. Without the frontend only a fellow software programmer can interact with your program using the command-line, but what is the beauty and gain in that? Frontend and API The frontend and an Application Programming Interface is a combination that has provided software developers with a pat on the back. It can be compared with a marriage with your long-awaited soul mate from a distant land. The combination of the frontend and API is an upgrade that developers will never be able to recover from. While the API provides the frontend with juicy resources such as security, database, and storage, the frontend consumes these resources and presents them to the user in an understandable manner. The frontend can consume resources from one or many APIs hosted on different domains on the internet. The frontend needs the resources coming from these API because it cannot make up for all the resources. For instance, the frontend can't provide scalable security and database features so it relies on the backend (API) for these services and more. Why connect a Frontend with API As briefly discoursed above, the frontend + API combination provides the following advantages and more. It provides scalable database choices. It provides scalable storage options. It provides scalable security mechanisms. It provides decentralized software architecture. It provides separation of concern for software engineers. Multiple frontend applications can share the same API. Frontend with React React, or ReactJs is a JavaScript framework/library, it comes shipped with a collection of code features, style, and configuration that enable the development of frontend applications much easier. Note that most frontend frameworks are built upon the JavaScript programming language. ReactJs makes life easier for frontend developers because of its simple style of implementation. ReactJs was developed and maintained by the Facebook team, and it is designed to solve their frontend problems, and today, it has now been provided as an open-source library and is now used by millions of developers all over the world. ReactJs combines the power of and for building an application, and as such will require a good understanding of the above programming stacks to be productive with it. HTML, CSS, JavaScript Building a Predictive Machine Learning Frontend Now that we are done with the breaking down of concepts and terminologies, it's time we dive into the implementation part of this article. Remember, this article is a three-part series, if you haven't read the part one and two, you may not understand all that is being done here. To build this predictive machine learning frontend with ReactJs, you will have to follow the steps below with care. Choosing a Development Environment We will be using VScode for writing all the codes for this part, follow the steps below to get the development environment ready. You can also visit the for instruction. Git Repo Head to site and install your OS version. NodeJs Open the terminal and install ReactJs with the following command.
npm i -g create-react-app Create or navigate to your existing projects folder. Within the projects folder, create a new react app called . predictive Copy the and directory to the root of the predictive folder. Your project structure should look like this. model api Open terminal one, navigate to the directory and run the command below
python api main.py Install the axios npm package for api communications.
yarn add axios Open a second terminal and run the below command
yarn start Open the browser and visit localhost:3000 Your project structure should be in the similitude of the image below. Fantastic, let’s proceed to the development of the glass component. Developing the Glass Component Create two files called and in the components directory and paste the codes below. See the for reference. Glass.js Glass.css Git Repo https://gist.github.com/Daltonic/7234bfca81ded249724b00fe3d236735 It may interest you to know that this stylesheet above gives our application a look. In order words, it makes our app look like glass, that’s a bonus you get from this tutorial. glassmorphism Also, let’s see how we consumed our backend API. const handleSubmit = (e) => {
    e.preventDefault()
    // Parameters
    const params = { gender, bsc, workex, etest_p, msc }
    axios
      .post('http://localhost:8080/prediction', params)
      .then((res) => {
        const data = res.data.data
        const parameters = JSON.stringify(params)
        const msg = `Prediction: ${data.prediction}\nInterpretation: ${data.interpretation}\nParameters: ${parameters}`
        alert(msg)
        reset()
      })
      .catch((error) => alert(`Error: ${error.message}`))
  } When we fill-up the form with the above parameters and click on the submit button, the method above sends an request to our predictive machine learning and returns a response. This response shows whether a candidate will be hired or not. HTTP api Setting up the App Structure The main file should contain the following codes. App.js import Glass from './components/Glass'
function App() {
  return (
    <div className="app">
      <Glass/>
    </div>
  );
}
export default App; Paste the following codes on the file. index.css https://gist.github.com/Daltonic/8a62a60b2ef93d6d50a3579d124e86d6 Congratulations, you did it, you crushed this project, you have now completed the entire tutorial. Your project should look like this. Great work, you can view the full source code . You can connect with me on my website if you have any questions. here Conclusion In conclusion, we have seen how the combination of a machine learning model, API, and Frontend can solve the business problems of our day. FastAPI and React made this so easy to implement. In the future, I believe machine learning algorithms will be running in the frontiers of all online businesses. About the Author Gospel Darlington is a remote web developer, prolific with technologies such as , , , and . He takes a huge interest in the development of high-grade and responsive web applications. Fullstack VueJs Angular ReactJs API development Gospel Darlington currently works as a that teach other developers how to integrate software products into their projects. freelancer developing apps and writing tutorials He spends his free time on how to be successful in life. His hobbies include inventing new recipes, book writing, songwriting, and singing. You can reach me on , , , , or for any discussion. coaching young people Website LinkedIn Twitter Facebook GitHub

Stacks

Apple

Facebook

Google

Twitter

2022 - HackerNoon Contributor of the Year - Blockchain

2022 - HackerNoon Contributor of the Year - Decentralized Internet

2022 - HackerNoon Contributor of the Year - Ethereum

2022 - HackerNoon Contributor of the Year - React

Watch My YouTube Channel

Hire Me 

Portfolio

Buy Me a Coffee

Nominated for 2022 - HackerNoon Contributor of the Year - Decentralized Internet

Nominated for 2022 - HackerNoon Contributor of the Year - Ethereum

Nominated for 2022 - HackerNoon Contributor of the Year - React

Nominated for 2022 - HackerNoon Contributor of the Year - Blockchain

Too Long; Didn't Read

CodeRabbit: AI Code Review, Smart Chat, Free Trial

Frontend Dev: How to Build a Predictive Machine Learning Site With React and Python (Part 3)

Frontend Dev: How to Build a Predictive Machine Learning Site With React and Python (Part 3)

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

@daltonic

RELATED STORIES