Skip to main content

Qr code generator simple

Posted on: Β atΒ 
Mini Project
Picture

Project Links

About πŸ“

After trying to create a nice qr code with a logo for my work I quickly became frustrated by how limited most tools online were and how they all wanted me to signup and added bloat to the process. So I decided to create my own tool that would be simple, easy, feature rich and free to use.😎

If you find this project useful please consider giving it a star ⭐

If you use the code please give me credit and link back to this repo πŸ™

Enjoy! 😁

Features πŸŽ‰

- Simple and easy UI 🀩
- Smart themes based on the QR Code URL 🎨
- Add a logo to your QR code πŸ–ΌοΈ
- Colouring and styling options πŸ‘¨β€πŸŽ¨
- Right click the QR code to save it as an image πŸ“Έ

Coming Soonβ„’ 🚧

- Auto recommend icons for all brands πŸ‘€
- Favicon scraping 🀞 (Unsure how CORS will go)
- More themes 🎨
- QR code frames and text options πŸ–ΌοΈ
- Svg download option πŸ“Έ
- Copy to clipboard option πŸ“‹
- Abillity to scan QR codes πŸ“±

Built with 🧰

  • React QR Code Logo πŸ“¦

    • A very nice and easy to use QR code package with logo options.
  • Next.js πŸš€

    • Because it's the best React framework out there.
  • Tailwind CSS πŸƒ

    • Nextjs starter had it already so why not.
  • React Palette 🎨

    • A nice package to get the dominant color of an image.
  • Simple Icons πŸ–ΌοΈ

    • The best package for all brand icons.
  • Hero Icons πŸ¦Έβ€β™‚οΈ

    • A really pretty collection of icons.
  • jsQR πŸ“Έ

    • A QR code scanner library.

Getting Started πŸ› οΈ

Install with

yarn

Then, run the development server:

yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More πŸ“–

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!