Serverless QR Code Generator – AWS Lambda with Terraform

_{Next.js frontend → API Gateway → Lambda → S3; infrastructure managed by Terraform}

This project is a production‑ready serverless QR code generator that demonstrates modern full‑stack development with AWS services. Built with Next.js 15, AWS Lambda, and Terraform, it showcases serverless architecture patterns, Infrastructure as Code, and modern React development practices.

Live demo

What This Project Does

• Instant QR Generation: Generate QR codes in milliseconds with customizable size (200-500px) and error correction levels
• Serverless Backend: AWS Lambda function processes requests and generates QR codes using the qrcode library
• Automatic Storage: Generated QR codes are automatically uploaded to S3 with public URLs for immediate access
• Modern Frontend: Next.js 15 with App Router, Tailwind CSS v4, and shadcn/ui components
• Infrastructure as Code: Complete AWS infrastructure defined in Terraform with proper IAM roles and CORS configuration

Why I Built It

• Practice serverless architecture patterns with AWS Lambda and API Gateway
• Demonstrate Infrastructure as Code with Terraform for reproducible deployments
• Showcase modern React development with Next.js 15 and latest features
• Create a practical tool that solves real problems while learning cloud technologies
• Implement proper security practices with IAM roles and least privilege access

High‑Level Architecture

• Frontend: Next.js application deployed on Vercel with responsive design
• API Layer: AWS API Gateway provides RESTful endpoints with CORS support
• Compute: AWS Lambda function (Node.js 20.x) generates QR codes on demand
• Storage: S3 bucket stores generated QR images with public read access
• Infrastructure: Terraform manages all AWS resources with proper dependencies

_{Modern React interface with real-time validation and error handling}

Key Components

AWS Lambda Function

• Runtime: Node.js 20.x with 512MB memory allocation
• Handler: Processes POST requests, validates input, generates QR codes
• Error Handling: Comprehensive validation for text length, size limits, and error correction levels
• CORS Support: Proper headers for cross-origin requests

API Gateway

• RESTful Design: /generate endpoint for QR code creation
• CORS Configuration: Preflight OPTIONS support for web applications
• Regional Deployment: Optimized for low latency in target regions

S3 Storage

• Public Access: Bucket policy allows public read access for generated images
• Unique Naming: Timestamp + UUID ensures no filename collisions
• CORS Configuration: Supports web-based access from any origin

Frontend Application

• Next.js 15: Latest App Router with React 19 and Turbopack
• Modern UI: shadcn/ui components with Tailwind CSS v4 styling
• State Management: React hooks for form state and API communication
• Error Handling: User-friendly error messages and loading states

How It Works (End‑to‑End)

1. User enters text/URL and selects options in the Next.js frontend
2. Frontend sends POST request to API Gateway /generate endpoint
3. API Gateway invokes Lambda function with request payload
4. Lambda validates input, generates QR code buffer using qrcode library
5. QR code uploaded to S3 with unique filename and public access
6. Lambda returns S3 URL to frontend via API Gateway
7. Frontend displays QR code and provides download/share options

Notable Technical Features

• Input Validation: Server-side validation for text length (max 2000 chars), size limits (100-1000px), and error correction levels
• Error Correction: Support for L, M, Q, H levels with proper QR code optimization
• Unique Filenames: Timestamp + UUID prevents collisions and enables tracking
• Environment Configuration: Terraform outputs API Gateway URL for frontend configuration
• Cost Optimization: Designed to stay within AWS Free Tier limits

Security Posture

• IAM Roles: Lambda has minimal S3 permissions (PutObject only)
• CORS Configuration: Properly configured for web application access
• Input Sanitization: Server-side validation prevents malicious input
• Public S3 Access: Controlled via bucket policy, read-only for generated images
• Environment Variables: Sensitive configuration in .env.local (gitignored)

_{Infrastructure as Code with proper resource dependencies and outputs}

How to Deploy

1. Backend Setup: Run terraform init/plan/apply to provision AWS infrastructure
2. Frontend Configuration: Set NEXT_PUBLIC_API_URL environment variable with API Gateway URL
3. Development: npm run dev for local development with hot reload
4. Production: Deploy frontend to Vercel with environment variables configured