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 KZread 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.
📋 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: www.ghazikhan.in//blog
Twitter: x.com/codewithghazi
LinkedIn: / ghazi-khan
Instagram: / codewithghazi
-----------------------------------------------------
My Work From Home Setup you might be interested in:
Desk: amzn.to/46DoBkv
Chair: amzn.to/3S7eKPd
Wireless Keyboard: amzn.to/3tJvguO
Wireless Mouse: amzn.to/3Seomb1
Type C to HDMI Cable: amzn.to/40accSI
Monitor: amzn.to/3tNH13u
-----------------------------------------------------
#nextjstutorial #nextjs14 #codewithghazi #javascript