QR Code Generator by Konseptt

A modern, feature-rich QR Code Generator built with React, TypeScript, and Tailwind CSS. Create beautiful, customizable QR codes for URLs, text, WiFi credentials, contact information, and more.

Features

• Multiple QR Code Types

  • URL QR Codes
  • Plain Text QR Codes
  • WiFi Credentials (WPA/WPA2/WEP/Open)
  • Contact Cards (vCard format)
  • Bulk URL Generation

• Customization Options

  • Custom foreground and background colors
  • Gradient fills support
  • Logo/image embedding
  • Adjustable logo size, padding, and shape (square/circle)

• Export Options

  • Download as PNG, SVG, or JPEG
  • Bulk download as ZIP file
  • High-quality output

• Modern UI/UX

  • Beautiful dark/light theme support
  • Smooth animations with Framer Motion
  • Confetti celebrations
  • Fully responsive design

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/Konseptt/Qr-code-studio-.git
cd Qr-code-studio-

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:5173

Tech Stack

• Frontend Framework: React 19
• Language: TypeScript
• Styling: Tailwind CSS 4
• Build Tool: Vite 7
• UI Components: Radix UI
• Animations: Framer Motion
• QR Code Generation: qrcode library
• Icons: Phosphor Icons, Heroicons, Lucide React
• Form Handling: React Hook Form + Zod
• Notifications: Sonner

Project Structure

qr-code-studio/
├── src/
│   ├── components/        # React components
│   │   ├── ui/           # Reusable UI components (shadcn/ui)
│   │   ├── UrlInput.tsx
│   │   ├── TextInput.tsx
│   │   ├── WifiInput.tsx
│   │   ├── ContactInput.tsx
│   │   ├── BulkUrlInput.tsx
│   │   ├── QRPreview.tsx
│   │   ├── FillPicker.tsx
│   │   ├── LogoUpload.tsx
│   │   └── ...
│   ├── hooks/            # Custom React hooks
│   ├── lib/              # Utility functions
│   ├── styles/           # Global styles
│   ├── App.tsx           # Main application component
│   └── main.tsx          # Application entry point
├── index.html
├── package.json
├── tailwind.config.js
├── tsconfig.json
└── vite.config.ts

Usage

Creating a QR Code

1. Select the type of QR code you want to create (URL, Text, WiFi, Contact, or Bulk)
2. Enter the required information
3. Customize colors and add a logo if desired
4. Preview your QR code in real-time
5. Download in your preferred format

Bulk Generation

1. Switch to the "Bulk" tab
2. Enter multiple URLs (one per line)
3. Click "Download All" to get a ZIP file with all QR codes

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is open source and available under the MIT License.

Author

Konseptt

• GitHub: @Konseptt

Acknowledgments

• Radix UI for accessible UI primitives
• shadcn/ui for beautiful component designs
• qrcode for QR code generation
• Framer Motion for smooth animations

---

Made by Konseptt