Build a Keyword Extractor: React + OpenAI API + Chakra UI
Build and deploy a keyword extractor powered by OpenAI, using React, Vite and Chakra UI.
Hostinger:
https://hostinger.com/traversy
Use the code TRAVERSY for 10% off!
Github Repo:
https://github.com/bradtraversy/ai-keyword-extractor
Blog Post:
https://www.traversymedia.com/blog/ai-keyword-extractor-with-react-openai
My Web Development Courses:
https://www.traversymedia.com
Timestamps:
0:00 – Intro
1:58 – Hostinger Sponsor
3:13 – Vite & React Setup
4:30 – File Clean Up
7:00 – Chakra UI Setup
8:58 – Base Styles
10:58 – Header & Footer Components
15:42 – TextInput Component
21:46 – Start Extract Keywords Function
22:58 – Create API Key & Environment Variables
26:36 – Global State
27:56 – Completions API Request
36:50 – Modal Component & Spinner
43:54 – Project Deployment
source