https://github.com/glowiep/ai-hashtag-generator

Generates a list of hashtags based on the provided text content using OpenAI API.
https://github.com/glowiep/ai-hashtag-generator

hashtag-generator hashtags openai-api

Last synced: about 1 month ago
JSON representation

Generates a list of hashtags based on the provided text content using OpenAI API.

• Host: GitHub
• URL: https://github.com/glowiep/ai-hashtag-generator
• Owner: glowiep
• Created: 2024-05-25T03:16:42.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-06-03T03:16:41.000Z (12 months ago)
• Last Synced: 2025-02-11T12:30:31.665Z (3 months ago)
• Topics: hashtag-generator, hashtags, openai-api
• Language: TypeScript
• Homepage:
• Size: 222 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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. 

![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)

![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)

![Chakra UI](https://img.shields.io/badge/Chakra--UI-319795?style=for-the-badge&logo=chakra-ui&logoColor=white)

![OpenAI](https://a11ybadges.com/badge?logo=openai)

![AWS Amplify](https://a11ybadges.com/badge?logo=awsamplify)

---

### 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:

```bash

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](https://platform.openai.com/account/api-keys).

```bash

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:

```bash

npm run dev

```

The application will run on [http://localhost:3000](http://localhost:3000) in your browser.

To build for production:

```bash

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.