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 🚀.
⚙️ Next.js 14
⚙️ TypeScript
⚙️ MongoDB & Mongoose
⚙️ React Hook Form & Zod (for form validation)
⚙️ Clerk
⚙️ Cloudinary
⚙️ Stripe
⚙️ Shadcn UI & Tailwind CSS
🔋 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
Follow these steps to set up the project locally on your machine.
Prerequisites
Make sure you have the following installed on your machine:
Cloning the Repository
git clone https://github.com/getFrontend/next-app-ai-saas.gitInstallation
Install the project dependencies using npm:
npm run devSet 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 devOpen http://localhost:3000 in your browser to view the project.