QuickR
A full-stack dynamic QR platform built with Next.js 16, React 19, Prisma, Better Auth, and PostgreSQL. Generate QR codes, update destinations after printing, and manage everything from an authenticated workspace.
Timeline
3 weeks
Role
Full Stack Developer
Team
Solo
Status
CompletedTechnology Stack
Key Challenges
- Designing a dynamic QR architecture where printed codes remain valid while destinations change
- Implementing secure auth flows with both email/password and Google OAuth using Better Auth
- Modeling QR creation, update history, and ownership in Prisma without losing query performance
- Building reliable export flows for high-resolution, print-ready PNG QR assets
- Keeping dashboard interactions responsive with optimistic UX patterns, skeleton states, and toast feedback
- Managing environment-dependent services across development and production (PostgreSQL, OAuth, Resend)
Key Learnings
- Practical patterns for App Router full-stack feature development in Next.js 16
- How to structure dynamic redirect systems for editable QR code destinations
- Better Auth integration strategies for multi-provider authentication
- Prisma schema and query design for dashboard-heavy CRUD workflows
- Using TanStack React Query for cache consistency and smoother dashboard interactions
- Production readiness practices for env-based integrations and deployment
QuickR: Dynamic QR Codes With an Editable Workspace
Overview
QuickR is a full-stack QR product that combines a conversion-focused landing experience with an authenticated workspace for ongoing code management.
The core idea is simple: generate a QR once, print it anywhere, and still be able to update where it sends users later. That removes one of the biggest operational problems with traditional static QR codes.
This case study combines the complete QuickR product surface, including both the public product experience and the authenticated workspace flows.
What Users Can Do
QR Creation and Redirect Management
- Generate QR codes instantly from URLs or plain text
- Keep a stable QR image while updating redirect destinations later
- Preserve usability for printed material without reprinting every update
- Handle both quick generation and long-term managed usage
Authenticated Workspace
- Sign in with email/password or Google OAuth
- Save generated QR codes into a personal dashboard
- Revisit code details and historical updates
- Update, inspect, or delete saved entries with clear feedback
Export and Distribution
- Export high-resolution PNG outputs for physical print usage
- Reuse saved codes across campaigns and assets
- Move from creation to deployment with minimal friction
UX and Product Feel
- Fast dashboard interactions with TanStack React Query caching
- Clear action confirmations via toast feedback
- Skeleton loading states for smooth perceived performance
- Validation-first forms for safer data input
Why I Built This
I built QuickR to solve a practical product pain point: static QR codes are easy to generate, but painful to maintain once printed.
Most existing tools either focus on basic generation or lock useful dynamic features behind heavier workflows. I wanted to build an experience that keeps the flow fast while still supporting real lifecycle management.
The goal was to create a product that feels simple at first use, but still scales for repeated operational updates.
Tech Stack
Frontend
- Next.js 16 with App Router
- React 19 and TypeScript
- Tailwind CSS 4 for UI styling
- TanStack React Query for server-state handling
- Axios for request orchestration
- React Hot Toast for user feedback
Backend and Data
- Prisma 7 ORM
- PostgreSQL as primary database
- Better Auth for authentication and sessions
- Resend for email-driven flows
- Zod for runtime validation
QR Infrastructure
- qrcode package for generation and export workflows
Product Architecture
QuickR is structured as one Next.js application with two connected product surfaces:
- Public Surface: marketing pages and entry points for new users
- Private Surface: authenticated workspace where QR lifecycle management happens
The dynamic redirect model links these surfaces: users create and manage QR records in the workspace, while printed/scanned QR endpoints resolve through redirect-aware routes.
Highlighted Features
Dynamic Redirect Flow
Traditional QR systems lock destination at generation time. QuickR introduces editable redirect targets so existing printed assets continue working while campaigns evolve.
QR Workspace History
Each saved code is part of a lifecycle: created, updated, reviewed, and optionally removed. This gives users operational control instead of one-off generation.
Print-Ready Output Strategy
Exports are designed for real-world deployment quality, not just preview usage. High-resolution PNG output supports posters, packaging, and in-store material.
Run and Environment Notes
Install
pnpm installDevelopment
pnpm devBuild and Preview
pnpm build
pnpm startEnvironment
QuickR uses environment-based integrations including PostgreSQL, Better Auth, Google OAuth, Resend, and NEXT_PUBLIC_APP_URL.
Build pipelines run Prisma generation before Next.js build completion.
Outcome
QuickR demonstrates end-to-end product development from user acquisition pages to authenticated operational tooling. It balances marketing clarity, secure account flows, backend data modeling, and a practical QR management workflow designed for real usage after deployment.