Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/getfrontend/next-app-ai-saas
An AI-powered image generator. A real SaaS app using Next.js 14, Clerk, MongoDB, Cloudinary AI, Stripe and Shadcn UI.
https://github.com/getfrontend/next-app-ai-saas
ai clerk cloudinary image-generation image-generation-ai image-generator image-generators imaginify nextjs nextjs14 saas shadcn-ui
Last synced: about 2 months ago
JSON representation
An AI-powered image generator. A real SaaS app using Next.js 14, Clerk, MongoDB, Cloudinary AI, Stripe and Shadcn UI.
- Host: GitHub
- URL: https://github.com/getfrontend/next-app-ai-saas
- Owner: getFrontend
- Created: 2024-02-16T21:23:14.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-02-19T10:11:53.000Z (11 months ago)
- Last Synced: 2024-02-19T11:46:49.735Z (11 months ago)
- Topics: ai, clerk, cloudinary, image-generation, image-generation-ai, image-generator, image-generators, imaginify, nextjs, nextjs14, saas, shadcn-ui
- Language: TypeScript
- Homepage: https://imagenko.vercel.app
- Size: 1.18 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/)
**Cloning the Repository**
```bash
git clone https://github.com/getFrontend/next-app-ai-saas.git
```
**Installation**
Install the project dependencies using npm:
```bash
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](https://clerk.com/), [MongoDB](https://www.mongodb.com/), [Cloudinary](https://cloudinary.com/) and [Stripe](https://stripe.com)
**Running the Project**
```bash
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) in your browser to view the project.