Full Stack React Project ( AI Photo Editor ) - Next JS, Fabric.js, Tailwind, ImageKit, Shadcn UI 🔥🔥

🔗 Imagekit - https://tinyurl.com/aaa9u46d
🔗 Clerk - https://go.clerk.com/rRBoFeZ
🔗 Convex - https://convex.link/piyvex
➡️ My Frontend Interview Course - https://roadsidecoder.com/course-details (50% Discount)

Build a Full Stack AI Image Editor in React 19 + Next JS 15 with Tailwind CSS, Convex, Clerk Authentication, Fabric.js, Imagekit, Shadcn UI Tutorial. This is an amazing project for your resume which will impress recruiters a lot and showcase your skillset.

➡️ Next JS Course Form - https://forms.gle/ABmuVhYATuwhkcmVA
➡️ Source Code - https://github.com/piyush-eon/ai-image-editor
➡️ Book a 1:1 call with me - https://topmate.io/roadsidecoder

👤 Join the RoadsideCoder Community Discord -
https://discord.gg/2ecgDwx5EE

🔗 React Hook Form Tutorial -
https://www.youtube.com/watch?v=qyzznUNe1ho

🔗 Job Portal Project Tutorial -
https://www.youtube.com/watch?v=2XF-HgauItk&list=PLKhlp2qtUcSZBJxjXbHBkE_3h5E31dDiu&index=2

🔗 Calendly Portal Project Tutorial -
https://www.youtube.com/watch?v=glAC7d-TYSM&list=PLKhlp2qtUcSZBJxjXbHBkE_3h5E31dDiu&index=3

🔗 MERN Stack Chat App Tutorial -
https://www.youtube.com/playlist?list=PLKhlp2qtUcSZsGkxAdgnPcHioRr-4guZf

🔗 Complete Data Structures and Algorithms with JS Course -
https://www.youtube.com/playlist?list=PLKhlp2qtUcSZtJefDThsXcsAbRBCSTgW4

🔗 JS Interview Series -
https://www.youtube.com/watch?v=oUWRxJ19gfE&list=PLKhlp2qtUcSaCVJEt4ogEFs6I41pNnMU5&index=1

🔗 Cars24 Interview Experience -
https://www.youtube.com/watch?v=vxggZffOqek&list=PLKhlp2qtUcSb_WQZC3sq9Vw3NC4DbreUL&index=2

🔗 Unacademy Interview Experience -
https://www.youtube.com/watch?v=abbdJ4Yfm54

🔗 React Beginner's Project Tutorials -
https://www.youtube.com/playlist?list=PLKhlp2qtUcSa_rX7glmB7HyFsEOEQa0Uk

#reactjstutorial #frontend #ReactJS
-------------------------------------------------------------------------

00:00:00 Intro
00:01:25 Setup Next JS with Shadcn UI
00:09:41 Dark Theme
00:13:04 Parallax Scroll Effect
00:20:49 Header
00:26:24 Backend Setup
00:32:44 User Authentication
00:38:00 Custom Signin and Signup page
00:42:57 Store user details in DB
00:52:01 Get User Query
00:58:20 Imagekit Setup
01:00:28 Database Design
01:05:39 Add Protected Routes
01:09:52 Landing Page
01:34:43 Implementing Pricing
01:51:13 Dashboard Page
01:53:19 Project Creation API
02:01:54 Custom hooks for Query and Mutation
02:06:20 Create Project Modal
02:42:27 Upgrade Plan Modal
02:50:22 Project Card
02:57:15 Editor Page
03:02:56 Fetch Project and Save API
03:10:36 Canvas with Fabric JS
03:30:37 Auto Save Image
03:34:00 Editor Topbar
03:43:30 Editor Sidebar
03:48:26 Adjust Tool
04:04:30 Resize Tool
04:22:30 Crop Tool
04:46:17 AI Background Remove / Change
05:14:29 AI Generated Background
05:15:30 Text Tool
05:35:40 AI Image Extender Tool
05:52:46 AI Retouch and Upscale Tool
06:05:23 Reset to Original
06:09:20 Manual Save button
06:10:16 Export as png, jpg, jpeg, etc
06:18:51 Assignments
06:20:11 Deployment

-------------------------------------------------------------------------

⭐ Support the channel -
https://www.youtube.com/channel/UCIPZVAwDGa-A4ZJxCBvXRuQ/join

Special Thanks to our members -

Видео Full Stack React Project ( AI Photo Editor ) - Next JS, Fabric.js, Tailwind, ImageKit, Shadcn UI 🔥🔥 канала RoadsideCoder