Build a React-based front-end app for your Weaviate neural search

A complete implementation guide to creating a React.js app styled with Material UI that integrates with a Weaviate dataset

Introduction

What is Weaviate?

Example of the results received from Weaviate when searching for ‘Traveling in Asia’
Example of the results received from Weaviate when searching for ‘Traveling in Asia’
Weaviate is able to identify a close relationship between the words and display these results.

Setting up Weaviate

Creating your React.js app

React.js logo

Cleaning up the React.js app

Creating the UI form to interact with Weaviate

Material UI library Image
Image of what your app should look like at this point
Image of what your app should look like at this point

Using React hooks to store the input value

Hooking up the search Button component

Image of the function.js file being added to the src folder
Image of the function.js file being added to the src folder
functions.js inside the src folder

Introducing Weaviate to our React.js app

Weaviate logo

Saving results in React state

Displaying the results in the UI

Image of the Article component being created inside the src folder
Displayed results for the Weaviate function
Displayed results for the Weaviate function

Conclusion

I'm a self-taught software developer. Other than coding, I enjoy networking with like minded people, traveling, exercising, playing tennis, trying new things.