QRCHITECT

Minimalist QR code generator web application that allows users to create beautifully styled QR codes with a nice design aesthetic.

✨ Features

• Multiple Content Types:

  • URLs with automatic protocol
  • Email addresses with mailto
  • Phone numbers with tel
  • Plain text content with multiline support

• Advanced Customization:

  • Precise color selection for foreground and background
  • Color gradient picker
  • Multiple dot style options
  • Eye frame customization
  • Eye ball customization

• Neat Experience:

  • Logo upload to embed in your QR code
  • Live preview of changes
  • Export in PNG or SVG format
  • Dark and light mode support
  • Responsive design for all screen sizes including ultrawide displays

🚀 Tech Stack

• Framework: React 19 + TypeScript + Vite
• Styling: TailwindCSS v4 with JIT
• UI Components: Shadcn UI for clean, customizable components
• Form Management: React Hook Form with Zod validation
• QR Code Generation: qr-code-styling library for flexible QR styling

🛠️ Development

Prerequisites

• Node.js (v18+)
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/yourusername/qrchitect.git
cd qrchitect

# Install dependencies
npm install

# Start the development server
npm run dev