https://github.com/kurutodenzeru/barcoda
🤳🏻 Modern barcode generator that combines sleek design with seamless functionality. Built on Next.js, Tailwind, and Shadcn for effortless customization.
https://github.com/kurutodenzeru/barcoda
barcode nextjs shadcn-ui tailwindcss
Last synced: about 1 month ago
JSON representation
🤳🏻 Modern barcode generator that combines sleek design with seamless functionality. Built on Next.js, Tailwind, and Shadcn for effortless customization.
- Host: GitHub
- URL: https://github.com/kurutodenzeru/barcoda
- Owner: KurutoDenzeru
- Created: 2024-12-06T07:19:48.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-06-26T12:07:00.000Z (12 months ago)
- Last Synced: 2025-06-26T12:42:08.222Z (12 months ago)
- Topics: barcode, nextjs, shadcn-ui, tailwindcss
- Language: TypeScript
- Homepage: https://barcoda.vercel.app
- Size: 625 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: Contributing.md
Awesome Lists containing this project
README
# 📊 Barcoda - Barcode + QR Generator & Code Scanner
📊 Modern barcode + QR code generator with built-in code scanner, powered by JsBarcode, html5-qrcode, and qr-code-styling. Built with Next.js, Tailwind, and shadcn/ui — customizable.
## ☁️ Deploy your own
[](https://vercel.com/new/clone?repository-url=https://github.com/KurutoDenzeru/Barcoda) [](https://app.netlify.com/start/deploy?repository=https://github.com/KurutoDenzeru/Barcoda)
## ✨ Features
- **Real-time Preview** — Instant visual feedback while editing.
- **Multi-format Support** — CODE128, EAN13, UPC, CODE39, and more.
- **Flexible Customization** — Size, margin, colors, text, font, and alignment.
- **Export Options** — PNG, JPEG, WebP, SVG (including raw SVG export).
- **QR Styling** — Dots, corners, rounded shapes, logos, and error correction.
- **Scan & Upload** — Scanning and image upload are supported via `html5-qrcode`.
- **Responsive & Accessible UI** — Built with Tailwind CSS and shadcn/ui; supports dark/light mode.
- **Free & Open Source** — MIT licensed; contributions welcome.
## 🧱 Tech Stack
- [Next.js](https://nextjs.org/): React framework for building performant web applications.
- [Tailwind CSS](https://tailwindcss.com/): Utility-first CSS framework for rapid UI development.
- [Shadcn UI](https://ui.shadcn.com/): Re-usable components built using Radix UI and Tailwind CSS.
- [JsBarcode](https://github.com/lindell/JsBarcode): JavaScript barcode generator.
- [html5-qrcode](https://github.com/mebjas/html5-qrcode): Lightweight camera + image scanner for QR codes and barcodes (used for Code Scanner).
- [qr-code-styling](https://github.com/kozakdenys/qr-code-styling): Highly customizable QR generator with styling, logos, and multiple export formats.
## ⚡ Getting Started
Clone the repo, install deps, and boot the dev server:
```bash
git clone https://github.com/KurutoDenzeru/Barcoda.git
cd Barcoda
bun install
bun run dev
```
Open [http://localhost:3000](http://localhost:3000) to view the app.
## 📦 Build for Production
```bash
bun run build
bun start
```
## 🗂️ Configuration
The editor is componentized under `src/components`. Key areas to customize are:
```text
app/ # Next.js App Router pages & layouts
page.tsx # Main page that mounts QRBarcodeGenerator
layout.tsx # Global layout, fonts, metadata (Open Graph, structured data)
qr-barcode-generator/ # QR & Barcode features (generator, scanner, types)
index.tsx # Page integration (tabs/navigation)
barcode-generator.tsx # JsBarcode-based barcode generator
qr-generator.tsx # QR generator using qr-code-styling (styling, logos, export)
code-scanner.tsx # Scanner using html5-qrcode (camera & image scan)
types.ts # Types, defaults, and settings
lib/ # Utilities and helpers
utils.ts # Helper functions
```
## 🤝🏻 Contributing
Contributions are always welcome, whether you’re fixing bugs, improving docs, or shipping new features that make the project better for everyone.
Check out [Contributing.md](Contributing) to learn how to get started and follow the recommended workflow.
## ⚖️ License
This project is released under the MIT License, giving you the freedom to use, modify, and distribute the code with minimal restrictions.
For the full legal text, see the [MIT](LICENSE) file.