About

Imagenko it's an AI-powered image generator. The project was implemented as a real Software-as-a-Service app with AI features and payments & credits system.

The project also aimed to improve real-world application development skills. Thanks to JavaScript Mastery tutorials and masterclasses from Adrian Hajdin 🚀.

Tech Stack

⚙️ Next.js 14

⚙️ TypeScript

⚙️ MongoDB & Mongoose

⚙️ React Hook Form & Zod (for form validation)

⚙️ Clerk

⚙️ Cloudinary

⚙️ Stripe

⚙️ Shadcn UI & Tailwind CSS

Features

🔋 Authentication and Authorization: Secure user access with registration, login, and route protection.

🔋 Community Image Showcase: Explore user transformations with easy navigation using pagination

🔋 Advanced Image Search: Find images by content or objects present inside the image quickly and accurately

🔋 Image Restoration: Revive old or damaged images effortlessly

🔋 Image Recoloring: Customize images by replacing objects with desired colors easily

🔋 Image Generative Fill: Fill in missing areas of images seamlessly

🔋 Object Removal: Clean up images by removing unwanted objects with precision

🔋 Background Removal: Extract objects from backgrounds with ease

🔋 Download Transformed Images: Save and share AI-transformed images conveniently

🔋 Transformed Image Details: View details of transformations for each image

🔋 Transformation Management: Control over deletion and updates of transformations

🔋 Credits System: Earn or purchase credits for image transformations

🔋 Profile Page: Access transformed images and credit information personally

🔋 Credits Purchase: Securely buy credits via Stripe for uninterrupted use

🔋 Responsive UI/UX: A seamless experience across devices with a user-friendly interface

Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm

Cloning the Repository

git clone https://github.com/getFrontend/next-app-ai-saas.git

Installation

Install the project dependencies using npm:

npm run dev

Set Up Environment Variables

Rename the .env_example file to .env.local.

Replace the placeholder values with your actual respective account credentials from Clerk, MongoDB, Cloudinary and Stripe

Running the Project

npm run dev

Open http://localhost:3000 in your browser to view the project.