Content Genie Hub

Welcome to Content Genie Hub, a dynamic platform designed to transform your content creation process through the power of artificial intelligence. This application leverages Gemini AI to offer users a versatile and innovative tool for generating content across various domains. Whether you need inspiration, specific information, or creative content, Content Genie Hub simplifies the process, delivering tailored outputs directly to you.

Tech Stack

Client: React, Redux, TailwindCSS, Tanstack Query, StripeAPI

Server: Node, Express, Mongoose for MongoDB interactions

AI Integration: Gemini AI for state-of-the-art content generation capabilities

Features

• AI Content Generation: Utilizes Gemini AI to provide high-quality, context-aware content generation.
• Modern User Interface: Built with ReactJS and styled with TailwindCSS, offering a responsive and intuitive user experience.
• Advanced Data Fetching: Implements Tanstack Query (formerly React Query) for efficient, asynchronous data fetching and state management.
• Secure Payments: Integrated with Stripe Elements to ensure safe and reliable payment processing for premium features.

Project Setup

Client-Side

Project Setup Locally in VSCode Terminal

  git clone https://github.com/jameel-webdev/AI-Content-Generator-frontend
  cd .\AI-Content-Generator-frontend\
  npm install

Server-Side

Project Setup Locally in VSCode Terminal

  git clone https://github.com/jameel-webdev/AI-Content-Generator-backend
  cd .\AI-Content-Generator-backend\
  npm install

or

Download the zip file, Unzip it, open with VSCode and Run below code in terminal

  npm install

Run Locally

Go to the project directory - Install dependencies

Frontend

  npm start

Backend

  npm run server

Environment Variables

Frontend:

REACT_APP_SERVER_URL REACT_APP_STRIPE_PUB_KEY

Backend:

NODE_ENV PORT MONGODB_URI JWT_SECRET FRONTEND_URL GEMINI_API_KEY STRIPE_SECRET_KEY

Demo Video

Screenshots