AI Hashtag Generator #️⃣

This application is developed using Vite, React with TypeScript, and Chakra UI. It is integrated with OpenAI API to generate a list of hashtag options based on the provided text.

---

How this project differs from the tutorial example:

• Typescript is used in this project.
• useContext and useReducer is implemented to handle state.
• Axios is used instead of fetch() for HTTP requests.
• Additional feature - Copy hashtags to clipboard button.
• Additional feature - Hashtag Output section includes the hashtag count.
• Minor differences in interface design.
• Framer-motion was used with ChakraUI components to animate displays.

Getting Started ✨

Install dependencies:

npm install

Rename .env.example to .env and add your API key. You can get your key at https://platform.openai.com/account/api-keys.

VITE_OPENAI_API_KEY='ADD_YOUR_KEY_HERE'

Important: Your API key is not secure as there is no backend. If you decide to use this tool in production, you should add a backend to it and store the API key there.

Run the dev server:

npm run dev

The application will run on http://localhost:3000 in your browser.

To build for production:

npm run build

Dependencies 🛠️

• @chakra-ui/react: A modular and accessible component library for React applications. (v2.1.1)
• axios: Promise-based HTTP client for making requests (v1.7.0)
• framer-motion: Animation library for React (v11.2.4)
• react: JavaScript library for building user interfaces (v18.2.0)
• typescript: TypeScript language (v5.2.2)
• vite: Next-generation frontend tooling for web development (v5.2.0)

---

Acknoledgements ✅

Credits to TraversyMedia tutorial.