QR Generator App

A modern, modular, and user-friendly web application for generating various types of QR codes, including vCard, URL, Email, WiFi, Calendar events, and Geo locations.

🛠 Tech Stack

• React 19 – UI library
• TypeScript – Type safety
• Tailwind CSS & daisyUI – Styling and components
• React Hook Form – Form management
• Zod – Form management and validation
• qrcode.react – QR code rendering
• React Icons (io5) – Iconography
• Vite – Build tool

✨ Features

• Multiple QR Types: vCard, URL, Email, WiFi, Calendar, Geo Location
• Live Preview: See your QR code as you fill the form
• Responsive Layout: Optimized for both mobile and desktop
• Download Options: Export QR as SVG or PNG, download vCard
• Form Validation: Real-time feedback using Zod and React Hook Form
• Accessible & Modern UI: Built with Tailwind CSS and daisyUI

🧑‍💻 Good Practices

• Separation of Concerns: Components, types, utils, and schemas are organized in dedicated directories.
• Type Safety: All logic and props are strictly typed.
• Reusable Components: QR type selector, forms, and layout are modular.
• Single Responsibility: Each component and utility does one thing well.
• No Over-Engineering: Only necessary features and abstractions are implemented.
• Consistent Design: Uses a unified design system for all UI elements.

📸 Captures

Desktop

Mobile

📂 Project Structure

src/
  components/
    layout/ # Header, Footer, Main layout
    qr/ # QR forms and selectors
  lib/
    types.ts # Shared types and interfaces
    utils.ts # Utility functions
    zod.ts # Zod schemas
App.tsx