Build a QR Code Generator in React and TailwindCSS

  Рет қаралды 7,465

Cand Dev

Cand Dev

Күн бұрын

let's build another fun project, we will build QR Code generator. this project creating with javascript library react, tailwindCSS, and also we use couple package like react-color to create the color picker, and also file-saver package for create the download image functionality. hope you enjoy this project 👋🏻
👨‍💻Code:
github.com/candraKriswinarto/...
🔗Link:
ReactJs: reactjs.org/docs/create-a-new...
QrCode Tiger: www.qrcode-tiger.com/
QrCode Tiger Doc: www.qrcode-tiger.com/api-docu...
QrCode Tiger Stoplight: qrtiger.stoplight.io/docs/qrt...
TailwindCSS: tailwindcss.com/
React Color: casesandberg.github.io/react-...
File Saver: www.npmjs.com/package/file-saver
🌎Live:
qr-code-generator-bay.vercel....
Timestamps:
0:00 - Intro
0:07 - Demo
1:27 - QR Code Tiger
4:54 - Setup CRA
5:38 - Instal and Setup Tailwind CSS
6:20 - Styling App.js
8:56 - InputForm Component
10:18 - InputField Component
12:06 - InoutColor Component
16:17 - Install and Use react-color
18:19 - Button Generate QrCode
20:03 - QrCode Component
22:29 - Create Context Api
28:34 - Working With QrTiger API
39:30 - Install and Use file-saver
👋🏻Contact Me:
canddev.vercel.app/
🌎 Find Me Here:
Instagram : / candra_kriswinarto
GitHub: github.com/candraKriswinarto/
Linkedin: / candra-kriswinarto
#qrCode #programming #enjoyCoding

Пікірлер: 8
@lic.sebastianrodrigonajle964
@lic.sebastianrodrigonajle964 Ай бұрын
Excellent bro!! i learned a lot!! thnks!! :D:D
@ranaimranahmed2532
@ranaimranahmed2532 2 жыл бұрын
Great work
@murtadanazar
@murtadanazar 2 жыл бұрын
well done bro.❤
@marciaceciliadossantospisa50
@marciaceciliadossantospisa50 Жыл бұрын
Magnífico ❤
@DurgeshChaudhari-hp4mw
@DurgeshChaudhari-hp4mw Жыл бұрын
How to get any file as a input at the place of URL.
@ranaimranahmed2532
@ranaimranahmed2532 2 жыл бұрын
❤️ from 🇵🇰
@RoshanYadav-kf5jj
@RoshanYadav-kf5jj 9 ай бұрын
Live not working
@CandDev
@CandDev 9 ай бұрын
That is because the QRTiger API has a request limit for the free version
Why Signals Are Better Than React Hooks
16:30
Web Dev Simplified
Рет қаралды 457 М.
Build a QR Code Generator in React + TypeScript
37:11
edutechional
Рет қаралды 7 М.
Khóa ly biệt
01:00
Đào Nguyễn Ánh - Hữu Hưng
Рет қаралды 20 МЛН
WHO DO I LOVE MOST?
00:22
dednahype
Рет қаралды 76 МЛН
How to Create QR Codes in NextJS and React!
10:34
Josh tried coding
Рет қаралды 13 М.
Using Cloud Firestore For Your REACT Backend 2023 | CRUD App
51:15
Travis Media
Рет қаралды 18 М.
How React ACTUALLY works (DEEP DIVE 2023)
12:59
FrontStart
Рет қаралды 51 М.
Learn GSAP In 23 Minutes
23:22
Web Dev Simplified
Рет қаралды 197 М.
Learn React In 30 Minutes
27:16
Web Dev Simplified
Рет қаралды 1,3 МЛН
QR Code generator with React
5:24
Eddie Jaoude
Рет қаралды 4,4 М.
8 React Js performance optimization techniques YOU HAVE TO KNOW!
11:23
1$ vs 500$ ВИРТУАЛЬНАЯ РЕАЛЬНОСТЬ !
23:20
GoldenBurst
Рет қаралды 1,3 МЛН
iPhone 12 socket cleaning #fixit
0:30
Tamar DB (mt)
Рет қаралды 53 МЛН