Good Approach for a Bizcard Portal Editor
Unanswered
Welsh Terrier posted this in #help-forum
Welsh TerrierOP
Hey everyone!
I’m currently working on a digital business card project, and I'd like to build it with Next.js(or React), Supabase, and Stripe. The project has two main components:
1. Landing Page - A public-facing marketing landing page for showcasing the product.
and a
2. Portal Editor/Dashboard - A portal where users can log in, select from a set of pre-defined templates, customize their card (basic details, colors, social links, vCard button), and get a pre-generated QR code pointing to their completed card(This is for people wanting to connect with the user).
### Challenges:
I'm thinking of making the portal editor/dashboard to be relatively straightforward (form-based, not a full drag-and-drop editor "yet") due to a tight timeline schedule(Nov-Dec). I’m hoping to allow users to preview template options in real-time as they fill out forms to personalize their card.
### Though I do have a few questions in mind,
1. What's the best way to handle template selection and dynamic rendering in Next.js?
2. For real-time customization in the editor, are there specific libraries or techniques in Next.js that would support instant preview updates as users input details.
Any recommendations on generating unique QR codes or short URLs for each completed card? (Would prefer if these are handled on the backend.)
I’m also really curious about how you guys would approach building the editor itself, as I’ve seen similar websites with their own sets of templates like carrd.co and bizcard editors available on a blank canvas.
Any insights into how that works would be awesome.
I’m currently working on a digital business card project, and I'd like to build it with Next.js(or React), Supabase, and Stripe. The project has two main components:
1. Landing Page - A public-facing marketing landing page for showcasing the product.
and a
2. Portal Editor/Dashboard - A portal where users can log in, select from a set of pre-defined templates, customize their card (basic details, colors, social links, vCard button), and get a pre-generated QR code pointing to their completed card(This is for people wanting to connect with the user).
### Challenges:
I'm thinking of making the portal editor/dashboard to be relatively straightforward (form-based, not a full drag-and-drop editor "yet") due to a tight timeline schedule(Nov-Dec). I’m hoping to allow users to preview template options in real-time as they fill out forms to personalize their card.
### Though I do have a few questions in mind,
1. What's the best way to handle template selection and dynamic rendering in Next.js?
2. For real-time customization in the editor, are there specific libraries or techniques in Next.js that would support instant preview updates as users input details.
Any recommendations on generating unique QR codes or short URLs for each completed card? (Would prefer if these are handled on the backend.)
I’m also really curious about how you guys would approach building the editor itself, as I’ve seen similar websites with their own sets of templates like carrd.co and bizcard editors available on a blank canvas.
Any insights into how that works would be awesome.
1 Reply
Nextqr code and storing the url on a database then calling it from /[url]/page.tsx
Likely you'll use a random generator for the url link unless it's some paid feature. But must of the url would be stored on a database. There are several methods for qr. Google qrserver if you want something really simple.
Likely you'll use a random generator for the url link unless it's some paid feature. But must of the url would be stored on a database. There are several methods for qr. Google qrserver if you want something really simple.