QR-koodigeneraattori

Luo QR-koodeja teksteistä, URL:eista ja kontakteista. Opi kuvien generointia ja eri dataformaattien käsittelyä rakentamalla kätevä jakamistyökalu.

Aloittelija · 2-3 tuntia · Next.js, TypeScript, Tailwind CSS, qrcode

Aloitusprompt

Kopioi tämä Cursoriin tai Claude Codeen ja aloita rakentaminen.

Luo QR-koodigeneraattori.

Sisältötyypit:
1. Teksti/URL (vapaa teksti)
2. WiFi (SSID, password, encryption)
3. vCard (nimi, email, puhelin, osoite)
4. Email (to, subject, body)
5. SMS (numero, viesti)

Visuaaliset asetukset:
- Taustaväri
- QR-koodin väri
- Koko (128-512px)
- Error correction level (L, M, Q, H)
- Logo keskellä (optional)

Export:
- PNG download
- SVG download
- Kopioi linkki

Tech:
- Next.js
- TypeScript
- qrcode tai qr-code-styling
- Tailwind CSS

UI:
- Split: asetukset vasemmalla, preview oikealla
- Välilehdet sisältötyypeille

Vaiheet

1. Perus-generaattori

Luo QR-koodi tekstistä.

Luo QR-koodigeneraattori: input sisällölle, reaaliaikainen QR-koodin esikatselu. Käytä qrcode-kirjastoa. Lisää download-nappi.

2. Sisältötyypit

Tuki eri datatyypeille.

Lisää sisältötyypit: URL, teksti, WiFi (SSID, salasana), vCard (nimi, puhelin, email), sähköposti, SMS. Generoi oikea QR-formaatti kullekin.

3. Muokkaus

Lisää visuaalinen customointi.

Lisää visuaaliset vaihtoehdot: taustaväri, QR-väri, koko, virheen korjaustaso. Mahdollisuus lisätä logo keskelle.

Ominaisuudet

Eri sisältötyypit

Värien muokkaus

Logon lisäys

Lataus PNG/SVG

Koon säätö

Laajennusideat

Kun perusprojekti on valmis:

Batch-generointi

QR-koodin lukeminen kameralla

Analytics (skannausmäärät)

Dynaamiset QR-koodit

Print-friendly versio