QRIDO - Wedding QR Code Generator

A beautiful, wedding-focused QR code generator that allows couples to create elegant, customizable QR codes for their special day.

Why I Built This

I recently got married and wanted to build something fun and useful for other couples going through the same experience. Wedding planning involves so many details, and QR codes have become a simple way to share registry links, RSVP pages, photo galleries, and more with guests.

This project was also a great opportunity for me to learn and integrate some technologies I'd been wanting to explore - specifically Stripe for payments and Resend for transactional emails. Building something practical while learning new tools made the process much more enjoyable.

If you're planning a wedding (or know someone who is), I hope this helps make one small part of it easier!

Features

• Custom QR Code Generation - Generate QR codes from any URL or text
• 10 Wedding-Themed Colors - Gold, Navy, Burgundy, Sage, Blush, and more
• Icon Overlays - Add hearts, crosses, rings, and other wedding-themed icons
• Multiple QR Styles - Choose from different dot and corner patterns
• Download & Share - Export as PNG or share directly on mobile
• Responsive Design - Works beautifully on desktop and mobile devices

Tech Stack

• Framework: Next.js 14 with TypeScript
• Styling: TailwindCSS
• QR Generation: qr-code-styling library
• Icons: Lucide React + React Icons
• Email: Resend API
• Payments: Stripe

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/RobACurtis/qr-generator.git
cd qr-generator

2. Install dependencies:

npm install

3. Create a .env.local file based on .env.example:

cp .env.example .env.local

4. Add your API keys to .env.local:

RESEND_API_KEY=your_resend_api_key
STRIPE_SECRET_KEY=your_stripe_secret_key
STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key

5. Run the development server:

npm run dev

6. Open http://localhost:3000 in your browser.

Scripts

npm run dev       # Start development server
npm run build     # Build for production
npm run start     # Start production server
npm run lint      # Run ESLint

Project Structure

/app
  /api            # API routes (email, payments)
  /generate       # QR generator page
  /contact        # Contact page
  layout.tsx      # Root layout
  page.tsx        # Home page
/components
  /ui             # Base UI components
  color-picker    # Color selection
  icon-picker     # Icon selection
  qr-code-preview # QR display and download
  use-qr-generator# Core QR generation logic

Environment Variables

Variable	Description
RESEND_API_KEY	Resend API key for email
RESEND_AUDIENCE_ID	Resend audience ID for subscriptions
SENDER_EMAIL	Email address to send from
RECEIVER_EMAIL	Email address for contact form
STRIPE_SECRET_KEY	Stripe secret key
STRIPE_PUBLISHABLE_KEY	Stripe publishable key

License

This project is licensed under the MIT License - see the LICENSE file for details.