31
How to Build a Predictive Machine Learning Site With React and Python (Part Three: Frontend Development)
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 part two of this article you should do so before this one.
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.
To crush this tutorial, you need a good command of the following tools.
- React
- CSS
- Yarn package manager
- Part two of this tutorial
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 HTML, CSS, and JavaScript for building an application, and as such will require a good understanding of the above programming stacks to be productive with it.
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 Git Repo for instruction.
- Head to NodeJs site and install your OS version.
- 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 model and api directory to the root of the predictive folder. Your project structure should look like this.
Open terminal one, navigate to the api directory and run the command below
python main.pyInstall the axios npm package for api communications.
yarn add axiosOpen a second terminal and run the below command
yarn startOpen 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 Glass.js and Glass.css in the components directory and paste the codes below. See the Git Repo for reference.
It may interest you to know that this stylesheet above gives our application a glassmorphism look. In order words, it makes our app look like glass, that’s a bonus you get from this tutorial.
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 HTTP request to our predictive machine learning api and returns a response. This response shows whether a candidate will be hired or not.
Setting up the App Structure
The main App.js file should contain the following codes.
import Glass from './components/Glass'
function App() {
return (
<div className="app">
<Glass/>
</div>
);
}
export default App;Paste the following codes on the index.css file.
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 here. You can connect with me on my website if you have any questions.
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.
Gospel Darlington is a remote Fullstack web developer, prolific with technologies such as VueJs, Angular, ReactJs, and API development. He takes a huge interest in the development of high-grade and responsive web applications.
Gospel Darlington currently works as a freelancer developing apps and writing tutorials that teach other developers how to integrate software products into their projects.
31