Text Translation Application in Gatsby

In this article, I'll show how to build a text translation app with gatsby.

So let’s get started.

Application setup

Install the gatsby starter template by running the following command.

npm init gatsby

Add material UI to the project. To add material UI to the project we have to install the material UI plugin and add the plugin in the gatsby-config.js file.

npm install gatsby-plugin-material-ui@next @emotion/react

Create a new file gatsby-config.js and add the following code in that file. This will enable material UI features in our app.

module.exports = { plugins: [`gatsby-plugin-material-ui`], };

Now our application will support the material UI in the code.

Now we will update index.js with the following code.

Update CSS file with the following code.