Overview
In this project, I implemented a full-stack AI image manipulation tool, with the help of this tutorial from JavaScript Mastery.
Key Features
- Image restoration: Restore the image back to original quality.
- Generative fill: To change the aspect ratio, AI generates the remaining part of the image.
- Object removal: Remove the unwanted parts from an image.
- Object recolouring: Recolour certain parts of an image.
- Background removal: Remove the background of an image.
- Dynamic search: To search for an image, by its name, as well as by what is in that image.
Technologies Used
- React and Next.js: For building the front-end codebase with clean, reusable components.
- Tailwind CSS: For styling the front-end components.
- Clerk Auth: For authenticating users via different methods.
- MongoDB: For the database.
- Cloudinary API: For manipulating the images effectively.
- Stripe: As the paywall, features a credit-based payment system.
Challenges and Learnings
One of the biggest challenges with this project was the dynamic search bar. This involved setting up the app to search for what is in the image as well, with the help of Cloudinary's API.
Outcome
A comprehensive full-stack image manipulation platform featuring advanced restoration capabilities, generative fill functionality, dimension scaling, object removal and recolouring, and background extraction, with Cloudinary’s API for robust image processing.