Build an Image Beautifier App with Next.js and Shadcn UI

Check out MiniTool MovieMaker: https://bit.ly/4hKFA9A
In this tutorial, we’ll guide you through creating a powerful Image Beautifier app using Next.js and Shadcn UI. You'll learn how to let users upload images, adjust them with various features like gradient backgrounds, borders, and shadows. By the end of the video, you'll see how to implement a seamless downloading process for enhanced user experience.

💻 Get the Source Code:
- GitHub: https://github.com/candraKriswinarto/frameit

🛠️ Tools & Packages Used:
- [Next js]: https://nextjs.org/docs/getting-started/installation
- [React Dropzone]: https://www.npmjs.com/package/react-dropzone
- [Html2Canvas]: https://www.npmjs.com/package/html2canvas/v/1.4.1
- [File Saver]: https://www.npmjs.com/package/file-saver

⏱️ Timestamps:
00:00 - Introduction
01:22 - Install nextjs and shadcn ui
03:20 - Create Image Upload Component
08:20 - Create Color Picker Component
14:46 - Cereate Image Adjustments slider
19:20 - Create settings sliders components
22:57 - Install and setup react dropzone
29:27 - styling image preview base on input
31:50 - how to download the image? install html2canvas
35:00 - Install and use file-saver package

🌐 Recommended Digital Tools (Affiliate Links):
- Hostinger: Get 20% Off on Web Hosting - https://dub.sh/zrpWarU

👍 If you found this video helpful, please like, and subscribe!

❓ Any questions? Drop them in the comments below!

#Coding #WebDevelopment #nextjs

Видео Build an Image Beautifier App with Next.js and Shadcn UI канала Cand Dev