Qards is a web app for creating and sharing a digital business card with a single QR code. Each Qard is a link to your social profile, project, or website. You manage your list in a dashboard, and people can open your public profile page and scan or click your links.
- OAuth authentication with GitHub and Google (NextAuth)
- User profile setup/edit (username, name, company, role)
- CRUD for Qards (create, update, delete)
- Drag-and-drop reorder for Qards
- Public user page:
/{username}with profile card and QR blocks - Light/Dark/System theme switching
- Cookie consent banner
- Next.js 16 (App Router)
- React 19 + TypeScript
- NextAuth v4 (
next-auth@^4.24.11) + Prisma Adapter - Prisma + MongoDB
- Tailwind CSS v4
- Radix UI / shadcn-style UI components
- react-hook-form for forms
- @hello-pangea/dnd for drag-and-drop sorting
- next-qrcode for QR generation
app/api/auth/[...nextauth]— auth handlersapp/api/user— profile update (authorized)app/api/qard— Qard CRUD + reorder (authorized)app/api/user/[uid]— public user fetch by id
npm installCopy .env.example to .env and set values:
DATABASE_URLJWT_SIGNING_PRIVATE_KEYGITHUB_CLIENT_ID,GITHUB_CLIENT_SECRETGOOGLE_CLIENT_ID,GOOGLE_CLIENT_SECRETNEXT_PUBLIC_SITE_URL
npm run devOpen: http://localhost:3000
npm run dev— start dev servernpm run build— production buildnpm run start— run production servernpm run lint— run ESLintnpm run format/npm run format:checknpm run test:run— unit/integration tests (Vitest)npm run test:coverage— coverage reportnpm run test:e2e— Playwright E2E testsnpm run test:e2e:ui— Playwright UI mode
The project includes:
- Vitest tests for utilities, components, and API routes
- Playwright E2E tests for critical user flows (public landing, redirects, sign-in entry points)
Qards is actively evolving. Core flows are implemented and covered by automated tests, while UX and feature set continue to improve.