Gen.AI – Full Stack AI Application

Gen.AI is a modern, full-stack AI application built using the PERN stack (PostgreSQL, Express, React, Node.js and Tailwind CSS). It provides a suite of AI-powered tools for content creation, image generating, image background removal and image object removal and resume analysis. The application supports secure user authentication, subscription billing, and responsive, interactive UI.

---

🌟 Features

🔐 User Authentication

• Secure sign-in, sign-up, and profile management using Clerk.
• Handles authentication and subscription access seamlessly.

💳 Subscription Billing

• Premium subscriptions to unlock advanced AI features.
• Integrates with Clerk and Neon for secure subscription management.

🗄️ Database

• Serverless PostgreSQL database hosted on Neon to store user data and usage logs.
• Scalable and efficient for AI feature data management.

🤖 AI Features

• Article Generator: Generate full-length articles by providing a title and length.
• Blog Title Generator: Generate blog titles using a keyword and category.
• Image Generator: Generate images from text prompts using AI.
• Background Remover: Upload images and get transparent backgrounds using ClipDrop API.
• Image Object Remover: Remove specific objects from images by describing them.
• Resume Analyzer: Upload resumes to get detailed AI-powered analysis.

☁️ Media & AI Integration

• Gemini API for AI content generation (text and images).
• ClipDrop API for image background removal and object removal.
• Cloudinary for media storage and optimized image handling.

📱 Responsive Design

• Fully optimized for desktop, tablet, and mobile devices.
• Ensures smooth and consistent user experience across all screen sizes.

✨ Interactive UI

• Smooth animations using Framer Motion.
• Modern styling and hover effects for an engaging experience.

---

🚀 Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm (v6 or higher)

Installation

Clone the repository:

git clone https://github.com/asifmohd01/gen.ai.git

Navigate to the project directory:

cd gen.ai

Install dependencies:

npm install

Run the development server:

npm run dev

Open your browser and visit the live demo: https://asif-gen-ai.vercel.app/

---

🛠️ Technologies Used

• Frontend: React.js for building responsive UI.
• Backend: Node.js & Express.js for API and server logic.
• Database: PostgreSQL hosted on Neon for serverless, scalable storage.
• Authentication & Billing: Clerk for secure user login and subscription management.
• AI & APIs: Gemini API for content generation, ClipDrop API for image editing, Cloudinary for media storage.
• Styling & Animations: Tailwind CSS, Framer Motion.
• Icons: Lucide React for modern vector icons.

---

⚠️ Limitations and Assumptions

• Requires an internet connection for AI processing, API calls, and image uploads.
• Subscription billing depends on Clerk integration; production setup may require additional configuration.
• AI outputs are limited by API capabilities and rate limits.
• Image features rely on third-party APIs (ClipDrop, Cloudinary).

---

📸 Screenshots

Screenshots

Home Page

• Overview & Intro: Landing page introducing the project. Displays AI tools (with links to each feature), subscription plans, creators, and footer. Users can navigate to all AI features directly via the tools section.

Dashboard

• Prompt Overview: Shows all user prompts and their generated outputs. Users can view the outputs of articles, blog titles, images, and other AI features in one place.

Write Article

• AI Article Generator: Users can provide a title and desired length to generate AI-powered articles.

Blog Titles

• Blog Title Generator: Generate creative blog titles based on a keyword and category for content creation.

Generate Images

• AI Image Generator: Users can provide a text prompt to generate images using AI.

Remove Background

• Background Remover: Upload images and automatically remove backgrounds using the ClipDrop API.

Remove Object

• Object Remover: Remove specific objects from uploaded images by describing the object name.

Review Resume

• Resume Analyzer: Users can upload their resumes and get AI-powered insights, suggestions, and analysis.

Community

• Generated Images Showcase: Displays all AI-generated images from the user and other users’ public images. Includes like and unlike functionality for community interaction and feedback.

---

🙏 Acknowledgements

• Clerk – User authentication & subscription management.
• Neon – Serverless PostgreSQL database.
• Gemini API – AI-powered content generation.
• ClipDrop API – Background removal and image object removal.
• Cloudinary – Media storage and optimization.
• React.js, Tailwind CSS, Framer Motion, Lucide React – For frontend UI, styling, and animations.

---