Next GenArt - Prompt to AI Powered Image Generator

Transform your ideas into stunning visuals with AI-powered image generation!

A full-stack application built with Next.js 15, React 19, Node.js, Express, and TypeScript that allows users to generate AI images from text prompts 🎨 with flexible credit-based plans. 🚀

Next GenArt offers various features like:

• 🔐 Authentication:
  ✨ SignUp,
  🔑 Login,
  👤 User Profile Management.

• 💳 Payment Integration:
  💰 Credit-based system,
  💸 Razor Pay integration,
  🎁 Free credits for new users.

• 🖼️ Image Generation:
  🤖 AI-powered image creation from text prompts,
  ⬇️ Image downloading,
  🔄 Multiple style options.

• 🎨 User Experience:
  🌐 Fully responsive design,
  ⚡ Optimized performance (99/100 Lighthouse score),
  🚀 Fast image generation and delivery.

Built with the tools and technologies:

---

🔗 Table of Contents

• 📍Overview
• 📸 Screenshots
• 👾 Features
• 📊 Performance
• 📁 Project Structure
• 🚀 Getting Started
  • ☑️ Prerequisites
  • ⚙️ Installation
  • 🏃 Running the Application
• 📌 Project Roadmap
• 🔰 Contributing
• 🎗 License
• 📝 About the Author
• 🙌 Acknowledgments

---

Overview

Next GenArt is a cutting-edge AI-powered image generation platform that transforms text prompts into stunning visuals. Built with modern technologies like Next.js 15, React 19, and TypeScript, it offers a seamless user experience with a credit-based system for generating images. The application integrates Razor Pay for secure transactions and features a highly optimized frontend with a perfect Lighthouse performance score.

Screenshots

Home Page	Image Generation
Results Page	Credit Purchase

---

Features

	Feature	Summary
⚙️	Architecture	Modern full-stack application with Next.js 15 frontend and Node.js/Express backend TypeScript for type safety across the entire codebase MongoDB for data persistence and user management RESTful API design with proper validation and error handling
💳	Credit System	Credit-based model for generating images Free credits (5) for new users Multiple credit packages available for purchase Secure payment processing with Razor Pay integration
🖼️	Image Generation	Integration with ClipDrop API for high-quality AI image generation Text-to-image conversion with customizable options Fast processing and delivery of generated images Download functionality for generated images
🔒	Authentication	Secure user registration and login JWT-based authentication Protected routes and API endpoints User profile management
🎨	User Experience	Responsive design that works on all devices Optimized performance with 99/100 Lighthouse score Custom font implementation with next/font Intuitive UI with clear navigation and feedback
⚡️	Performance	Optimized image loading with next/image Font optimization with next/font/local Lazy loading of non-critical components Minimized CLS (Cumulative Layout Shift) for better user experience Reduced animations on largest contentful paint

---

Performance

Next GenArt has achieved an exceptional Lighthouse performance score of 99/100 through several optimization techniques:

Optimization Journey:

1. Initial Score: 51/100
2. Image Optimization: 71/100
   • Implemented next/image with proper height, width
   • Added lazy loading and priority image properties
3. Font Optimization: 77/100
   • Used next/font/local for downloaded fonts
   • Preloaded critical fonts
4. Script Optimization: 85/100
   • Lazy loading with Script tag for non-critical components
   • Deferred loading of third-party scripts
5. CLS Improvements: 99/100
   • Avoided conditional rendering based on state
   • Used Tailwind CSS classes (hidden/flex/block) for toggling visibility
   • Reduced animations through framer motion on largest content paint
   • Simplified animations with CSS

---

Project Structure

📦 next-genart
├─ client
│  ├─ app
│  │  ├─ assets.ts
│  │  ├─ buy
│  │  │  └─ page.tsx
│  │  ├─ globals.css
│  │  ├─ layout.tsx
│  │  ├─ page.tsx
│  │  ├─ result
│  │  │  └─ page.tsx
│  │  ├─ types.d.ts
│  │  └─ ui
│  │     └─ fonts.ts
│  ├─ components
│  │  ├─ Description.tsx
│  │  ├─ Footer.tsx
│  │  ├─ GenerateButton.tsx
│  │  ├─ Header.tsx
│  │  ├─ Loader.tsx
│  │  ├─ Login.tsx
│  │  ├─ Navbar.tsx
│  │  ├─ Steps.tsx
│  │  └─ Testimonials.tsx
│  ├─ config
│  │  └─ index.ts
│  ├─ context
│  │  └─ AppContext.tsx
│  ├─ lib
│  │  ├─ client-api.ts
│  │  └─ types.ts
│  └─ public
│     ├─ assets
│     │  ├─ [various SVG and PNG files]
│     └─ fonts
│        └─ outfit
│           ├─ [font files]
└─ server
   ├─ config
   │  ├─ index.ts
   │  ├─ mongoose.ts
   │  └─ razorpay.ts
   ├─ controllers
   │  ├─ imageController.ts
   │  └─ userController.ts
   ├─ index.ts
   ├─ middlewares
   │  ├─ authHandler.ts
   │  ├─ errorHandler.ts
   │  ├─ responseMiddleware.ts
   │  └─ validateRequest.ts
   ├─ models
   │  ├─ TransactionModel.ts
   │  └─ UserModel.ts
   ├─ routes
   │  ├─ imageRoutes.ts
   │  └─ userRoutes.ts
   └─ validations
      ├─ imageValidation.ts
      └─ userValidation.ts

---

Getting Started

Prerequisites

Before getting started with Next GenArt, ensure your runtime environment meets the following requirements:

• Version Controller: Git
• Programming Language: Node.js (v16+)
• Package Manager: npm or yarn

Installation

Install Next GenArt using the following steps:

1. Clone the repository:

   git clone https://github.com/harshal255/next-genart

2. Set up the server (backend):

   cd server
   npm install

   Create a .env file in the server directory with the following variables:

   PORT=4000
   MONGODB_URL_ATLAS=your_mongodb_connection_string
   JWT_SECRET=your_jwt_secret
   # https://clipdrop.co/apis
   CLIPDROP_API=your_clipdrop_api_key
   # Razor Pay
   RAZORPAY_KEY_ID=your_razorpay_key_id
   RAZORPAY_KEY_SECRET=your_razorpay_key_secret
   CURRENCY=INR
   

3. Set up the client (frontend): open another terminal and then

   cd client
   npm install

   Create a .env file in the client directory with the following variables:

   NEXT_PUBLIC_SERVER_URL=http://localhost:4000
   NEXT_PUBLIC_RAZORPAY_KEY_ID=your_razorpay_key_id
   

Running the Application

1. Start the server:

   cd server
   npm run dev

2. Start the client:

   cd client
   npm run dev

3. Open your browser and navigate to http://localhost:3000

---

Project Roadmap

• Core Features: Basic image generation with credit system
• Performance: Optimize to achieve 99/100 Lighthouse score
• User Gallery: Add personal gallery for saved generations
• Advanced Options: Add more customization options for image generation
• Social Sharing: Implement direct sharing to social media platforms
• Subscription Model: Add monthly subscription option alongside credit purchases

---

Contributing

• 💬 Join the Discussions: Share your insights, provide feedback, or ask questions.
• 🐛 Report Issues: Submit bugs found or log feature requests for the next-genart project.
• 💡 Submit Pull Requests: Review open PRs, and submit your own PRs.

Contributing Guidelines

1. Fork the Repository: Start by forking the project repository to your GitHub account.
2. Clone Locally: Clone the forked repository to your local machine using a git client.

   git clone https://github.com/yourusername/next-genart

3. Create a New Branch: Always work on a new branch, giving it a descriptive name.

   git checkout -b feature/new-feature-name

4. Make Your Changes: Develop and test your changes locally.
5. Commit Your Changes: Commit with a clear message describing your updates.

   git commit -m 'Add: implemented new feature'

6. Push to GitHub: Push the changes to your forked repository.

   git push origin feature/new-feature-name

7. Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.
8. Review: Once your PR is reviewed and approved, it will be merged into the main branch. Congratulations on your contribution!

Contributor Graph

License

This project is licensed under the MIT License - see the LICENSE file for details.

About the Author

This project was developed by Harshal Kahar. Feel free to reach out with any questions or suggestions.

• Email: [email protected]
• GitHub: harshal255
• LinkedIn: harshal-kahar

Acknowledgments

• Thanks to ClipDrop API for powering the AI image generation
• Special thanks to all contributors who have helped improve this project
• Inspired by modern AI image generation tools and the potential of AI in creative processes

This read.md file follows the structure of the Conversa example but is tailored specifically for your Next GenArt project. It includes all the key information about your application, its features, performance optimizations, and setup instructions.

Would you like me to make any adjustments to the read.md file?