🔗 Multi-Link QR Generator

A production-grade web application that combines multiple links into a single QR code with enterprise-level analytics, monitoring, and deployment capabilities.

✨ Features

Core Features

• Multiple Links in One QR: Add as many links as you want
• Clean UI: Beautiful, modern interface with smooth animations
• Easy to Use: Simple add/remove functionality for links
• Downloadable QR Codes: Save your QR code as a PNG image
• Mobile Friendly: Responsive design works on all devices
• URL Validation: Ensures all links are valid before generating QR code
• Click to Visit: Each link on the landing page is clickable

Production Features 🚀

• 📊 Analytics: Google Analytics 4 + PostHog integration
• 🔍 Error Tracking: Sentry for real-time error monitoring
• 📈 Performance Monitoring: Track metrics and user behavior
• 🛡️ Security: CSP headers, HSTS, rate limiting
• 📱 PWA Support: Installable as a mobile/desktop app
• 🐳 Docker Ready: Full containerization support
• 🔄 CI/CD: Automated testing and deployment pipeline
• ☁️ Multi-Platform Deploy: Vercel, Netlify, Docker, or any static host

🚀 Quick Start

For Users (Simple Setup):

1. Open index.html in your web browser
2. Enter your first link in the input field
3. Click "+ Add Another Link" to add more links
4. Click "Generate QR Code" when you're done
5. Download the QR code using the "Download QR Code" button

For Developers (Production Setup):

# 1. Clone the repository
git clone https://github.com/yourusername/multi-link-qr.git
cd multi-link-qr

# 2. Run setup script
./setup.sh

# 3. Configure your API keys in config.js
# Edit the production section with your:
# - Google Analytics ID
# - PostHog API Key
# - Sentry DSN

# 4. Start development server
npm start

# 5. Visit http://localhost:8000

Deploy to Production:

# Vercel
npm run deploy:vercel

# Netlify
npm run deploy:netlify

# Docker
npm run docker:compose

For detailed deployment instructions, see DEPLOYMENT.md

Viewing Links:

1. Scan the QR code with any QR code scanner
2. You'll be taken to a landing page showing all your links
3. Click any link to visit it
4. Right-click (or long-press on mobile) to copy a link

📁 Project Structure

qwerty/
├── index.html      # Main page for creating QR codes
├── links.html      # Landing page that displays the links
├── styles.css      # Styling for the main page
├── app.js          # JavaScript for QR generation
└── README.md       # This file

🛠️ Tech Stack

• Frontend: Vanilla JavaScript, HTML5, CSS3
• QR Library: QRCode.js
• Analytics: Google Analytics 4, PostHog
• Monitoring: Sentry
• Deployment: Vercel, Netlify, Docker
• CI/CD: GitHub Actions
• Server: Nginx (for Docker deployment)

📊 What's Tracked

The production version includes comprehensive telemetry:

User Actions

• QR code generation (with link count and domains)
• QR code downloads
• Link clicks on landing page
• Copy actions
• Page views

Performance

• QR generation time
• Page load metrics
• Core Web Vitals

Errors

• JavaScript errors
• Network failures
• Validation errors

All analytics can be disabled by setting enabled: false in config.js

🌐 Running the App

Option 1: Simple File Open

Just open index.html in any modern web browser.

Option 2: Local Server (Recommended)

If you want to test the QR code scanning:

# Using Python 3
python3 -m http.server 8000

# Using Python 2
python -m SimpleHTTPServer 8000

# Using Node.js
npx http-server

Then visit http://localhost:8000 in your browser.

📱 How It Works

1. You enter multiple links on the main page
2. The app creates a URL that contains all your links (encoded in the query parameter)
3. A QR code is generated pointing to links.html?data=...
4. When someone scans the QR code, they see a landing page with all your links
5. Each link is clickable and opens in a new tab

💡 Use Cases

• Social Media: Share all your social profiles at once
• Events: Provide attendees with multiple resources
• Business: Share website, contact info, and portfolio links
• Networking: Quick way to share multiple contact methods
• Menus: Digital menus with multiple ordering platforms
• Marketing: Share campaigns across multiple channels

🎨 Customization

You can easily customize the app by editing:

• Colors in styles.css (look for the gradient values)
• QR code size in app.js (width and height properties)
• Styling of the landing page in links.html

⚠️ Important Notes

• Links must start with http:// or https://
• QR codes with many long links may become complex and harder to scan
• For the QR codes to work properly, the app should be hosted online
• The generated QR codes are high quality (correction level H)

📝 License

Free to use and modify as you wish!

🤝 Contributing

Feel free to enhance this project! Some ideas:

• Add custom QR code colors
• Add link preview/favicon
• Add analytics tracking
• Add password protection
• Add expiration dates for links

Enjoy sharing your links! 🎉