Ai Content Generator App

Welcome to the AI Content Generator Application! This application harnesses the power of AI to assist users in generating high-quality content across various platforms. Whether you're a blogger, YouTuber, Instagram influencer, or developer, this app will help you create compelling content with ease.

✨ Features
- **📝 Blog Title Generation:** Generate catchy and SEO-friendly blog titles.
- **📄 Blog Content Creation:** Create well-structured and engaging blog posts.
- **💡 Blog Topic Ideas:** Get innovative ideas for your next blog post.
- **🎥 YouTube SEO Tools:** Generate optimized YouTube titles, descriptions, and tags.
- **✍️ Rewrite Articles:** Improve and rewrite existing articles for better readability and SEO.
- **🔧 Text Improvement:** Enhance the quality and clarity of your text.
- **😊 Add Emojis to Text:** Make your text more engaging by adding relevant emojis.
- **📸 Instagram Post Generator:** Create captivating Instagram posts.
- **#️⃣ Instagram Hashtag Generator:** Generate effective hashtags for Instagram posts.
- **💡 Instagram Post/Reel Ideas:** Get creative ideas for Instagram posts and reels.
- **🔤 English Grammar Check:** Ensure your content is grammatically correct.
- **💻 Write Code:** Generate code snippets for various programming tasks.
- **❓ Explain Code:** Get explanations for code snippets to understand how they work.
- **🐛 Code Bug Detector:** Identify and fix bugs in your code.
- **🏷️ Tagline Generator:** Create catchy taglines for your brand or product.
- **📝 Product Descriptions:** Write detailed and persuasive product descriptions.

## 🛠️ Technologies Used
- **Next.js:** A React framework for server-side rendering and generating static websites [https://nextjs.org/].
- **Gemini:** An advanced AI platform for content generation [https://gemini.com/].
- **Tailwind CSS:** A utility-first CSS framework for styling [https://tailwindcss.com/].
- **TypeScript:** A typed superset of JavaScript that compiles to plain JavaScript [https://typescriptlang.org/].
- **Clerk:** A user management and authentication service [https://clerk.dev/].
- **Drizzle ORM:** A lightweight and efficient TypeScript Object-Relational Mapper (ORM) that prioritizes developer experience. It includes a command-line interface (CLI) tool called Drizzle Kit for database migrations [https://orm.drizzle.team/].

## 🚀 Getting Started

1. Clone the repository:

   git clone https://github.com/yourusername/ai-content-generator.git
   

2. Install dependencies:

   npm install
   # or
   yarn install
   

3. Add environment variables: Create a .env.local file in the root directory and add your environment variables. Example:

   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<Your Clerk Publishable Key>
   CLERK_SECRET_KEY=<Your Clerk Secret Key>
   NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
   NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
   NEXT_PUBLIC_GEMINI_API_KEY=<Your Gemini API Key>
   NEXT_PUBLIC_DRIZZLE_DB_URL=<Your Drizzle ORM Database URL>
   NEXT_PUBLIC_PAYPAL_CLIENT_ID=<Your PayPal Client ID>
   NEXT_PUBLIC_PAYPAL_CLIENT_SECRET=<Your PayPal Client Secret>
   

4. Run the development server:

   npm run dev
   # or
   yarn dev
   

   Open http://localhost:3000 with your browser to see the result.

## 🗂️ Project Structure

• app/: Main application pages and layouts.
  
• utils/: Backend API routes for Gemini.
  
• auth/: Authentication-related data and routes for Clerk.
  
• components/: Reusable React components.
  
• constants/: Application-wide constants.
  
• context/: Context providers for updating user credentials.
  
• data/: Template arrays and static data.
  
• globals.css/: Global styles and Tailwind CSS configuration.
  
• lib/: Utility functions.
  
• public/: Static files and assets.
  
• schema/: Database table schemas for Drizzle ORM.
  
• types/: TypeScript interfaces and types.
  

🔒 Protected Routes

The application uses Clerk for authentication. Certain routes are protected and require users to be logged in. If a user is not authenticated, they will be redirected to the login page.

🔄 Fetching Data

Data is fetched from the Gemini API. While data is being fetched, a loading animation is displayed to enhance user experience.

📅 Content Generation

Users can generate various types of content using the AI-powered tools. The system ensures high-quality and relevant outputs tailored to user requirements.

## 📧 Contact

For any inquiries, please reach out to [email protected].
or contact via WhatsApp at +96899495057.

---

Visit the live application at ai-content-generator-app.netlify.app