NextJS Project: How to create QR code from any URL

In this video, I’m excited to share my latest project – a QR code generator app with built-in analytics. After finding existing solutions costly, I decided to create my own. This app will help you generate QR codes easily, and track their usage effectively. Let's build this app together! I'll be developing it right here on YouTube and then using it myself for some time to ensure it's working perfectly. After that, I'll deploy the app and make it available for public use. GitHub: https://github.com/gkhan205/nextjs-qr-code-generator 📋 Agenda for this video: - Taking a URL as input – Learn how the app accepts any URL you want to convert into a QR code. - Creating the QR code – See the process behind generating a functional QR code. - Downloading the QR code as an image – Discover how to save your QR code for easy sharing. - Copying the QR code to the clipboard – Quickly copy your QR code for instant use. In this video, I covered topics: 1. Using hooks (useState, useRef) 2. Client Component in NextJS 3. ShadCN UI Integration and Usage 4. Form handling with React Hook Form 5. Form schema validation with Zod 6. Event handling 7. Copy to Clipboard functionality 📹 Stay tuned for more videos where I’ll share the development journey, new features, and future enhancements, such as a URL shortener, link in bio, and advanced analytics. 👍 Like, share, and subscribe if you find this video helpful! Timestamps: ——— 00:00:00 Intro about Why this project? 00:02:22 What you will learn in this video 00:02:49 Example QR - Use case of this project 00:03:47 Agenda of this video 00:04:50 Initialize project with NextJS 00:06:35 Install ShadCN UI and add components 00:07:56 Cleanup default HTML 00:08:48 Create form schema with Zod and Define form with useForm hook 00:10:46 Add Form element and use ShadCN Form Input Components 00:12:49 Debug/Troubleshoot form error 00:14:18 Styling components 00:15:54 Add Form Handler events and add QR Generation Logic 00:24:14 Display QR Code 00:26:12 Test QR Code 00:28:04 Add Download Image Functionality 00:31:00 Add Copy image to clipboard functionality ----------------------------------------------------- Blog: https://www.ghazikhan.in//blog Twitter: https://x.com/codewithghazi LinkedIn: https://www.linkedin.com/in/ghazi-khan/ Instagram: https://www.instagram.com/codewithghazi/ ----------------------------------------------------- My Work From Home Setup you might be interested in: Desk: https://amzn.to/46DoBkv Chair: https://amzn.to/3S7eKPd Wireless Keyboard: https://amzn.to/3tJvguO Wireless Mouse: https://amzn.to/3Seomb1 Type C to HDMI Cable: https://amzn.to/40accSI Monitor: https://amzn.to/3tNH13u ----------------------------------------------------- #nextjstutorial #nextjs14 #codewithghazi #javascript