AI Keyword Extractor 💬

This application is developed using Vite, React with TypeScript, and Chakra UI. It is integrated with OpenAI API to extract the best keywords based on the provided text. This application is deployed on AWS Amplify.

Acknoledgements ✅

Credits to TraversyMedia tutorial.

Text snippet used in the image is a summary from one of my favorite books on software engineering:

📚 "Modern Software Engineering", by Dave Farley

---

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 keywords to clipboard button.
• Additional feature - Keyword Output section includes the keywords 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

Learnings 📚

This application was created with the fundamental principles in software engineering in mind:

• Modularity - Smaller, manageable, and interchangeable parts called modules should encapsulate a specific piece of functionality.

  • In this project:
    Parts of the application are broken down into Footer, Header, TextInput and KeywordsOutput as individual components.

• Cohesion - The degree to which the elements within a module belong together.

  • In this project:
    Elements in the KeywordsOutput component work together to perform a single task - to submit a text input.

• Separation of Concerns - Clearly dividing the responsibilities of different parts of the application.

  • In this project:
    AppContext contains the context provider where the context is set up and managed, and the reducer function in this file is solely responsible for handling state transition logic.

• Information Hiding and Abstraction - Conceal the internal details of a module or component, exposing only what is necessary for the use of that module or component.

  • In this project:
    Text strings are isolated from the business logic. It is abstracted and placed in const/applicationText.tsx file.

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)

Future Improvements 💡

• Set up Amplify backend with user authentication.
• Configure REST API using AWS Lambda.
• Update frontend to use backend services.