In this video tutorial by Traversy Media, you will learn how to build and deploy a keyword extractor powered by OpenAI using React, Vite, and Chakra UI. The tutorial covers various topics, including setting up the project, using Chakra UI components, implementing the keyword extraction function, and deploying the project. It also includes a sponsorship mention of Hostinger, an all-in-one hosting provider, and provides a coupon code for a discount on their services. The tutorial provides step-by-step instructions, along with a blog post and a GitHub repository with code snippets, making it easy for you to follow along and create your own keyword extractor.
The keyword extractor app allows users to input any type of text and extract the best keywords from it using the OpenAI Completions API. Whether you’re writing a blog post or an article and struggling to find the right keywords, this app will help you generate a list of relevant keywords quickly and easily. By customizing the prompt sent to the API, you can extract keywords for different purposes. With the tutorial’s guidance and the power of React, Vite, and Chakra UI, you’ll have the skills to build and deploy your own keyword extractor in no time.
Brief Overview of Technologies and Libraries Used
In this tutorial, we will be exploring various technologies and libraries to build a keyword extractor app powered by OpenAI. The main technologies and libraries used in this project are React, Vite, Chakra UI, and the OpenAI API.
Understanding React
React is a popular JavaScript library used for building user interfaces. It allows developers to create reusable UI components and efficiently update and render them based on changes in data. React follows a component-based architecture, making it easy to build complex applications.
Introduction to OpenAI API
The OpenAI API is a powerful tool that provides access to state-of-the-art artificial intelligence models. In this project, we will be utilizing the OpenAI Completions API to extract keywords from user-provided text. By sending a prompt to the API, we can retrieve a list of relevant keywords that can be used for various purposes.
What is Chakra UI?
Chakra UI is a popular library for building user interfaces in React. It provides a set of accessible and customizable UI components that are designed to work well together. Chakra UI follows a design system approach, making it easy to create visually appealing and responsive interfaces.
Role of Vite in the Project
Vite is a build tool that provides fast and efficient development and production setups for modern web projects. It offers features like instant server startup, blazing-fast hot module replacement, and efficient code bundling. Vite is used in this project to set up the development environment and build the production-ready application.
Now that we have a brief understanding of the technologies and libraries used in this project, let’s move on to setting up the project.
Setting Up the Project
To get started with building the keyword extractor app, we need to set up the project environment. This involves installing the necessary dependencies, configuring Vite, cleaning up default files, and importing required assets.
Installing the Necessities
First, we need to install Node.js and npm (Node Package Manager) if they are not already installed on your machine. Node.js is required to run JavaScript applications outside of the browser, and npm is used to manage the project’s dependencies.
Once Node.js and npm are installed, navigate to the project directory in your terminal and run the following command to initialize a new project:
npx create-vite@latest ai-keyword-extractor This command will create a new Vite project called “ai-keyword-extractor” in the current directory.
Configuring Vite
After the project is created, navigate into the project directory by running cd ai-keyword-extractor. Inside the project directory, you will find a file named vite.config.js. Open this file in your preferred code editor.
In the vite.config.js file, we need to add a server object to change the default port number. Set the port property to 3000. This step is optional but can be useful if you want to run the development server on a different port.
Cleaning Up the Default Files
By default, Vite creates some files and folders that we don’t need for this project. Delete the src/App.vue file, as we will be creating our own App component. Also, delete the src/styles folder as we will be utilizing Chakra UI for styling.
Importing Required Assets
In the project directory, locate the public folder. Inside this folder, delete the favicon.ico file. This file is the default favicon that is displayed in the browser tab.
Next, create an assets folder inside the public folder. In this assets folder, add two images: a light bulb image and an OpenAI logo image. These images will be used later in the project for visual elements.
With the project set up and the necessary assets imported, we are ready to start building the application’s structure.
Building the Application’s Structure
Now that we have set up the project environment, we can start building the structure of our keyword extractor application. This involves modifying the index HTML title, adding the Chakra Provider to the main file, and building the App component.
Modifying index HTML title
Open the public/index.html file in your code editor. Inside the head tag, locate the element. Modify the content of this element to “AI Keyword Extractor”. This will set the title of the application as displayed in the browser tab.
Adding Chakra Provider to the Main File
In the src/main.jsx file, import the ChakraProvider component from the Chakra UI library. This component is used to provide the Chakra UI theme and styling to all components in the application.
Wrap the App component with the ChakraProvider component. This will ensure that all components in the application have access to the Chakra UI features.
Building the App Component
Inside the src folder, create a new file named App.jsx. This file will contain the main component of our application, called App.
In the App.jsx file, start by importing the necessary components and hooks from the Chakra UI library. Import Box, Heading, and Container components from @chakra-ui/react. Import the useState hook from the react library.
Inside the App component, return a Box component as the root element. This will act as the container for our application. Set the minHeight to 100vh to ensure that the content takes up the entire height of the viewport.
Inside the Box component, add a Heading component with the text “AI Keyword Extractor”. This will serve as the main heading of our application.
Below the Heading component, add a Container component. This will provide a centered content container for the rest of the application.
With the application structure in place, we can now move on to designing the interface using Chakra UI components.
Designing Interface with Chakra UI
In this section, we will utilize the Chakra UI library to design the interface of our keyword extractor application. We will create and add a header component, install and use Framer Motion for animations, build a footer component, and create a text input component.
Creating and Adding Header Component
In the src folder, create a new file named Header.jsx. This file will contain the header component for our application.
Inside the Header.jsx file, start by importing the necessary components and hooks from the Chakra UI library. Import the Box, Flex, Image, and Text components from @chakra-ui/react.
Define the Header component as a functional component. Inside the component, return a Box component as the root element. This will act as the container for our header.
Inside the Box component, create a Flex component to arrange its children in a flex container. Set the justify prop to space-between to align the children at the start and end of the container.
Inside the Flex component, add an Image component with the src prop set to the path of the light bulb image we imported earlier. This will display the light bulb image in the header.
Below the Image component, add a Text component with the text “AI Keyword Extractor”. This will serve as the title of our application.
Finally, export the Header component at the end of the file.
In the src/App.jsx file, import the Header component by adding the following line at the top of the file:
import Header from './Header'; Inside the Container component, add the Header component. This will display the header at the top of our application.
Installing and Using Framer Motion for Animations
To add animations to our application, we will be using the Framer Motion library. Framer Motion is a popular animation library for React that allows developers to create smooth and interactive animations.
In your terminal, navigate to the project directory and run the following command to install Framer Motion:
npm install framer-motion Once the installation is complete, go to the Header.jsx file and import the necessary components from framer-motion.
Using Framer Motion, we can animate the header by wrapping the Flex component with the motion higher-order component. This allows us to add animation props to it, such as initial and animate, which define the initial and desired state of the animation.
Experiment with different animation props to achieve the desired effect. For example, you can use initial={{ opacity: 0 }} and animate={{ opacity: 1 }} to make the header fade in when the application loads.
Building Footer Component
Similar to how we created the header component, we will now create a footer component for our application.
In the src folder, create a new file named Footer.jsx. Inside this file, start by importing the necessary components and hooks from the Chakra UI library. Import the Box, Flex, Image, and Text components from @chakra-ui/react.
Define the Footer component as a functional component. Inside the component, return a Box component as the root element. This will act as the container for our footer.
Inside the Box component, create a Flex component to arrange its children in a flex container. Set the justify prop to space-between to align the children at the start and end of the container.
Inside the Flex component, add an Image component with the src prop set to the path of the OpenAI logo image we imported earlier. This will display the OpenAI logo in the footer.
Below the Image component, add a Text component with the text “Powered by Open AI”. This will give credit to OpenAI for their API used in the application.
Finally, export the Footer component at the end of the file.
In the src/App.jsx file, import the Footer component by adding the following line at the top of the file:
import Footer from './Footer'; Inside the Container component, add the Footer component. This will display the footer at the bottom of our application.
With the header and footer components in place, we can now create the text input component.
Creating the Text Input Component
In the src folder, create a new file named TextInput.jsx. This file will contain the text input component for our application.
Inside the TextInput.jsx file, start by importing the necessary components and hooks from the Chakra UI library. Import the Box, Textarea, and Button components from @chakra-ui/react. Also, import the useState hook from the react library.
Define the TextInput component as a functional component. Inside the component, use the useState hook to create a state variable to store the user’s input.
Return a Box component as the root element. This will act as the container for our text input component.
Inside the Box component, add a Textarea component. This component provides a multiline text input field for the user to enter their text.
Set the bg prop to "blue.500" and the color prop to "white" to style the text area with a blue background and white text.
Add an onChange event handler to the Textarea component. In this event handler, use the state variable created earlier to update the user’s input as they type.
Below the Textarea component, add a Button component. This button will trigger the keyword extraction process when clicked.
Set the bg prop to "blue.500" and the color prop to "white" to style the button with a blue background and white text.
Add an onClick event handler to the Button component. In this event handler, you can call a function that handles the button click logic.
Finally, export the TextInput component at the end of the file.
In the src/App.jsx file, import the TextInput component by adding the following line at the top of the file:
import TextInput from './TextInput'; Inside the Container component, add the TextInput component. This will display the text input field and the button for the user to interact with.
With the interface in place, we can now move on to establishing the functionality of the app using the OpenAI API.
Establishing Functionality with OpenAI API
In this section, we will utilize the OpenAI API to extract keywords from the user-provided text. We will generate an API key, create functions for button clicks and text updates, and build the extractKeywords function.
Generating API Key and Saving in .env file
To use the OpenAI API, you need an API key. Visit the OpenAI website and sign in or create an account if you haven’t already. Once you’re signed in, navigate to the “API Keys” section and generate an API key.
Once you have your API key, create a new file in the project root directory called .env. In this file, add a variable with the key OPENAI_API_KEY and set its value to your actual API key. This file will be used to store your API key securely.
Creating Functions for Button Clicks and Text Update
In the App.jsx file, import the useState and useEffect hooks from the react library. These hooks will allow us to manage state and perform side effects in our component.
Inside the App component, use the useState hook to create state variables for keywords, isOpen, and loading. These variables will store the extracted keywords, the state of the modal, and the loading state, respectively.
Create a function called handleButtonClick that will be called when the user clicks on the button. Inside this function, you can perform any necessary logic, such as calling the extractKeywords function and updating the state variables.
Create a function called handleTextUpdate that will be called when the user types in the text area. Inside this function, use the state variables to update the user’s input as they type.
Building extractKeywords function
In the App.jsx file, create a function called extractKeywords that will handle the extraction of keywords from the user’s text. This function will make a request to the OpenAI Completions API and retrieve a list of relevant keywords.
Inside the extractKeywords function, use the fetch API to make a POST request to the OpenAI API endpoint. Set the necessary headers, including the Authorization header with your API key.
Pass the user’s text as the payload of the request. You can format the prompt to specify that you want to extract keywords and specify any desired formatting or limitations for the response.
Once the response is received, you can log it to the console for debugging purposes. Additionally, you can update the keywords state variable with the extracted keywords.
With the functionality established, we can now handle the data and responses from the API.
Handling the Data and Responses
In this section, we will add state variables for keywords, isOpen, and loading. We will use the fetch API to make a request to the API and handle the response. We will also display the response in the console and as a modal in the application.
Adding State Variables for keywords, isOpen, Loading
Inside the App component, use the useState hook to create state variables for keywords, isOpen, and loading. These variables will be used to store the extracted keywords, the state of the modal, and the loading state, respectively.
Using Fetch API for Data Request and Response Handling
In the extractKeywords function, use the fetch API to make a POST request to the API endpoint. Set the necessary headers, including the Authorization header with your API key.
Handle the response in a then block. Inside this block, you can convert the response to JSON format and store it in a variable. You can also log the response to the console for debugging purposes.
Console and Display of Response
In the App.jsx file, log the response to the console using console.log(). This will display the response in the terminal or console tab of your browser’s developer tools. You can use this information to verify that the API is working correctly and to check the structure of the response.
With the data and responses handled, we can now build a modal to display the extracted keywords.
Building a Modal for Keyword Display
In this section, we will create a modal component that will display the extracted keywords. We will implement a spinner for the loading state and display the keywords using the Text component from Chakra UI. We will also add a close button to the modal.
Creating a Modal Component for Keywords
In the src folder, create a new file named KeywordsModal.jsx. This file will contain the modal component for displaying keywords.
Inside the KeywordsModal.jsx file, start by importing the necessary components and hooks from the Chakra UI library. Import the Modal, ModalOverlay, ModalContent, ModalHeader, ModalFooter, ModalBody, and ModalCloseButton components from @chakra-ui/react.
Define the KeywordsModal component as a functional component. Inside the component, use the keywords, loading, isOpen, and closeModal props passed from the App component.
Return a Modal component as the root element. This will act as the container for displaying the extracted keywords.
Inside the Modal component, use the isOpen prop to determine if the modal should be displayed. Set the onClose prop to the closeModal function to allow the user to close the modal.
Add a ModalOverlay, ModalContent, and ModalHeader component inside the Modal component. This will contain the header of the modal.
Inside the ModalHeader component, display a heading or text that indicates the purpose of the modal, such as “Extracted Keywords”.
Below the ModalHeader component, add a ModalCloseButton component. This button allows the user to close the modal when clicked.
Inside the ModalContent component, add a ModalBody component. This will contain the body of the modal, where the extracted keywords will be displayed.
Inside the ModalBody component, check the loading state variable. If the value is true, display a spinner or loading indicator. This indicates to the user that the keywords are being extracted.
If the loading state variable is false, use the Text component to display the extracted keywords. You can map over the keywords array and generate a list of Text components for each keyword.
Finally, export the KeywordsModal component at the end of the file.
Implementing Spinner for Loading State
To display a spinner or loading indicator when the keywords are being extracted, we can utilize the Chakra UI Spinner component.
In the KeywordsModal.jsx file, import the Spinner component from @chakra-ui/react. Inside the ModalBody component, check the loading state variable. If the value is true, display the Spinner component.
Displaying Keywords using Text Component
In the KeywordsModal.jsx file, import the Text component from @chakra-ui/react. If the loading state variable is false, map over the keywords array and display each keyword using the Text component. This will render the extracted keywords as text in the modal.
Adding a Close Button to the Modal
In the KeywordsModal.jsx file, add a ModalFooter component inside the ModalContent component. This component acts as the footer of the modal.
Inside the ModalFooter component, add a Button component that acts as the close button for the modal. Set the onClick prop to the closeModal function to allow the user to close the modal when clicked.
With the modal component built, we can now add it to the layout of our application.
Adding Modal to The Application Layout
In this section, we will include the KeywordsModal component in the App.jsx file and pass the necessary props to the modal component.
Including Keywords Modal component in App.jsx
In the src/App.jsx file, import the KeywordsModal component by adding the following line at the top of the file:
import KeywordsModal from './KeywordsModal'; Inside the App component, add the KeywordsModal component. By including this component, we can display the modal when the isOpen state variable is true.
Passing Necessary Props to Modal Component
Inside the KeywordsModal component, add the necessary props to the component. These props include keywords, loading, isOpen, and closeModal. These props allow the modal component to access the necessary data and functions from the App component.
With the modal component integrated into our application, we can now deploy the project.
Deploying the Project
In this section, we will explore the process of deploying the keyword extractor project. We will use the hosting platform Hostinger to deploy our project and upload the production files to the server.
Deploying with Hostinger
Hostinger is an all-in-one hosting provider that offers reliable hosting services at an affordable price. To deploy our project with Hostinger, first sign up or log in to your Hostinger account.
Once you are logged in, navigate to the hosting section and choose the domain or website where you want to deploy your project.
Uploading Production Files on Server
To upload the production files on the server, access the file manager for your hosting account. Locate the public HTML folder or the folder where your website files are stored.
Upload the contents of the dist folder, which is generated by Vite when building the project for production. This folder contains the optimized and bundled version of your project that is ready for deployment.
With the files uploaded, your project should be live and accessible through the assigned domain or website URL.
Congratulations! You have successfully built and deployed a keyword extractor powered by OpenAI using React, Vite, and Chakra UI. The application allows users to input any type of text and extract the best keywords from it using the OpenAI Completions API.
Conclusion
In this tutorial, we have explored the process of building a keyword extractor app using React, Vite, and Chakra UI. We have covered topics such as setting up the project, designing the interface, establishing functionality with the OpenAI API, handling data and responses, building a modal for keyword display, and deploying the project.
By following the steps outlined in this tutorial, you have learned how to utilize various technologies and libraries to create a comprehensive and functional application. The keyword extractor app can be customized for different purposes and can serve as a foundation for future projects.
We hope you enjoyed this tutorial and found it helpful in your journey as a developer. If you have any further questions or comments, please feel free to reach out. Happy coding!
Final Thoughts
Building a keyword extractor app powered by OpenAI can be a valuable tool for various applications and projects. The power of the OpenAI Completions API allows users to extract relevant keywords from any type of text, making it useful for content generation, SEO optimization, and much more.
By combining the technologies and libraries covered in this tutorial, including React, Vite, and Chakra UI, you can create a visually appealing and functional application that provides an intuitive interface for users to extract keywords quickly and efficiently.
Remember to always explore the official documentation and resources for each technology and library used in your project. This will help you gain a deeper understanding of their features and capabilities, and enable you to build even more complex applications in the future.
Once again, congratulations on completing this tutorial and building your own keyword extractor app. We hope you continue to explore and experiment with different technologies and libraries to expand your knowledge and skills as a developer.
Benefits of the Application
The keyword extractor app built in this tutorial provides several benefits. It allows users to:
- Easily extract keywords from any type of text.
- Improve content optimization for SEO purposes.
- Generate relevant keywords for blog posts, articles, and other written content.
- Enhance content creation and idea generation.
- Customize and extend the functionality of the app based on specific requirements.
By leveraging the power of OpenAI’s Completions API, the app provides accurate and comprehensive keyword extraction capabilities. The use of React, Vite, and Chakra UI ensures a smooth and intuitive user experience with a visually appealing interface.
Acknowledgment of Tutorial Resources
This tutorial was inspired by the video tutorial created by Traversy Media. We would like to acknowledge their contribution and thank them for providing the step-by-step instructions and code snippets that were referenced throughout this comprehensive article.
The video tutorial by Traversy Media covers additional details and aspects of building the keyword extractor app. It also mentions a sponsorship mention of Hostinger, an all-in-one hosting provider. The tutorial recommends using Vite for the project setup, but alternative options such as Create React App are also mentioned.
We encourage you to check out the original video tutorial, blog post, and GitHub repository by Traversy Media for additional insights and resources related to building the keyword extractor app powered by OpenAI using React, Vite, and Chakra UI.
