Creative AI Studio - ContentGenerator 🎨✨

Full-Stack AI-Powered Creative Content Generator

Transform your keywords into engaging content with the power of Google Gemini AI. Creative AI Studio is a modern React application with a Node.js backend that creates personalized jokes, Shayari, stories, and much more on demand.

---

✨ Features

🎨 Content Generation

• 14+ Content Types - Jokes, Shayari, Stories, Riddles, Pickup Lines, Roasts, Compliments, Dad Jokes, Haiku, Rap Lyrics, Tweet Threads, Acrostic Poems, Motivational Speeches, and Quotes
• Tone Customization - Choose from Funny, Serious, Romantic, or Motivational tones
• Length Control - Short, Medium, or Long output options
• Trending Topics - Quick-start with curated keyword suggestions

🎯 User Experience

• Modern UI - Beautiful gradient designs with smooth animations
• Dark Mode - Toggle between light and dark themes
• History Tracking - Save and revisit your last 50 generations
• Quick Actions - Copy, Download, and Share generated content
• Responsive Design - Works perfectly on desktop, tablet, and mobile
• Confetti Celebrations - Fun animations on successful generation

⚡ Performance & Security

• Rate Limiting - Protection against API abuse (100 requests per 15 minutes)
• Error Handling - Comprehensive error messages and user feedback
• Local Storage - Client-side history and preferences
• Fast API - Optimized backend responses with Gemini 2.5 Flash

---

🛠️ Tech Stack

Frontend

• React 18.2.0 - UI framework
• Chakra UI 2.8.1 - Component library
• Framer Motion 12.x - Smooth animations
• React Icons 5.x - Icon library
• React Confetti 6.x - Celebration effects
• Axios 1.5.1 - API requests

Backend

• Node.js + Express.js - Server framework
• Google Gemini API (2.5 Flash) - AI content generation
• Helmet - Security headers
• CORS - Cross-origin resource sharing
• Express Rate Limit - API rate limiting
• dotenv - Environment configuration

---

📋 Prerequisites

• Node.js (v14.0.0 or higher)
• npm (v6.0.0 or higher)
• Google Gemini API Key (Get one free here)

---

🚀 Quick Start

1. Clone the Repository

git clone https://github.com/yourusername/ContentGenerator.git
cd ContentGenerator

2. Setup Backend

cd backend
npm install

Create a .env file in the backend directory:

GEMINI_API_KEY=your_gemini_api_key_here
PORT=5000

Start the backend server:

npm start

The backend will run on http://localhost:5000

3. Setup Frontend

Open a new terminal in the project root:

npm install

Create a .env file in the root directory:

REACT_APP_API_URL=http://localhost:5000

Start the React app:

npm start

The app will open at http://localhost:3000

---

📖 Usage

1. Select Content Type - Choose from 14+ content types (jokes, stories, quotes, etc.)
2. Enter Keyword - Type your keyword or click a trending topic
3. Customize - Select tone (funny, serious, romantic, motivational) and length (short, medium, long)
4. Generate - Click the ✨ Generate button
5. Enjoy - Copy, download, or share your AI-generated content!

---

🎯 Content Types

Type	Description	Icon
Shayari	Urdu/Hindi poetry with elegant verses	📜
Joke	Clever and witty humor	😂
Quote	Inspirational and meaningful quotes	💭
Story	Engaging short narratives	📖
Riddle	Brain teasers with answers	🤔
Pickup Line	Charming and respectful lines	💘
Roast	Playful, light-hearted roasts	🔥
Compliment	Genuine and heartwarming compliments	🌟
Dad Joke	Classic pun-based humor	👨
Haiku	Traditional 5-7-5 syllable poems	🎋
Rap Lyrics	Rhyming verses with wordplay	🎤
Tweet Thread	Engaging social media threads	🐦
Acrostic	Poems where first letters spell words	✍️
Motivational Speech	Powerful and inspiring speeches	💪

---

📁 Project Structure

ContentGenerator/
├── backend/                    # Node.js Express backend
│   ├── server.js              # Main server file
│   ├── package.json           # Backend dependencies
│   ├── .env                   # Environment variables (Gemini API key)
│   └── README.md              # Backend documentation
├── src/                       # React frontend source
│   ├── Components/            # React components
│   │   ├── Content.jsx       # Main content generator
│   │   ├── ContentCard.jsx   # Generated content display
│   │   ├── Header.jsx        # App header with branding
│   │   ├── HistorySidebar.jsx # Generation history panel
│   │   └── Footer.jsx        # App footer
│   ├── hooks/                # Custom React hooks
│   │   └── useLocalStorage.js # localStorage hook
│   ├── utils/                # Utility functions
│   │   ├── animations.js     # Framer Motion configs
│   │   └── constants.js      # App constants
│   ├── App.js                # Main app component
│   ├── App.css               # App styles
│   ├── index.js              # React entry point
│   └── index.css             # Global styles
├── public/                    # Public assets
│   ├── index.html
│   ├── favicon.ico
│   └── manifest.json
├── .env                       # Frontend env (API URL)
├── package.json               # Frontend dependencies
└── README.md                  # This file

---

🌐 API Endpoints

Backend API

Base URL: http://localhost:5000

POST /api/generate

Generate content based on parameters.

Request Body:

{
  "type": "joke",
  "keyword": "programming",
  "tone": "funny",
  "length": "short"
}

Response:

{
  "success": true,
  "result": "Generated content here...",
  "metadata": {
    "type": "joke",
    "keyword": "programming",
    "tone": "funny",
    "length": "short",
    "model": "gemini-2.5-flash",
    "timestamp": "2025-12-15T13:00:00.000Z"
  }
}

GET /api/content-types

Get all available content types.

GET /api/health

Health check endpoint.

GET /

API information and available endpoints.

---

🎨 Customization

Adding New Content Types

Edit backend/server.js and add to the contentConfigs object:

'your-type': {
  systemPrompt: 'System instruction for AI...',
  userPromptTemplate: (keyword, tone, length) =>
    `Generate ${tone} content about "${keyword}". Length: ${length}.`
}

Changing Themes

Modify colors in src/index.css or update Chakra UI theme in src/index.js.

---

🔧 Environment Variables

Backend (.env in backend/)

GEMINI_API_KEY=your_google_gemini_api_key
PORT=5000
NODE_ENV=development

Frontend (.env in root)

REACT_APP_API_URL=http://localhost:5000

---

🚀 Deployment

Frontend (Netlify/Vercel)

1. Build the frontend: npm run build
2. Deploy the build folder
3. Set environment variable: REACT_APP_API_URL=your_backend_url

Backend (Render/Heroku)

1. Deploy backend folder
2. Set environment variables:
   • GEMINI_API_KEY
   • PORT (usually auto-set)
3. Note the deployed URL and update frontend env

---

🐛 Troubleshooting

API Key Issues

• Ensure your Gemini API key is valid at Google AI Studio
• Check that the .env file is in the correct location
• Restart the backend server after updating .env

CORS Errors

• Verify backend is running on port 5000
• Check REACT_APP_API_URL in frontend .env
• Ensure both servers are running

Rate Limit Errors

• Wait a few moments between requests (free tier has limits)
• The app enforces 100 requests per 15 minutes per IP

---

📝 License

This project is open source and available under the MIT License.

---

🙏 Acknowledgments

• Built with React
• UI components from Chakra UI
• Animations by Framer Motion
• Powered by Google Gemini API

---

📧 Support

For issues and questions:

• Open an issue on GitHub
• Check the troubleshooting section

---

Made with ❤️ and AI ✨
Powered by Google Gemini 2.5 Flash