1. Getting Started
Accessing the Application
Open your browser and navigate to http://localhost:3006. You'll land on the marketing homepage.
Logging In
- Click "Log in" in the top-right corner or "Get Started Free"
- Use the pre-filled demo credentials:
Demo Credentials
Email: demo@cardcraft.in
Password: demo123
- Click "Log in" to access the dashboard
Logging Out
Click "Logout" at the bottom of the left sidebar to return to the login page.
2. Dashboard Overview
The dashboard at /dashboard is your command center.
Stats Bar
| Stat | Description |
|---|---|
| Total Cards | Number of digital cards created |
| Total Scans | Cumulative QR scans across all cards |
| Follow-ups Due | Pending + overdue follow-up reminders |
| Contacts | Total contacts in your CRM |
Recent Activity Feed
A timeline of latest actions — card scans, new contacts, follow-up reminders, pipeline changes, and card updates.
Quick Actions
- Create Card — Jump to the card editor
- Share Card — Go to cards list to share
- Add Contact — Navigate to CRM contacts
Pipeline Summary
Compact view showing contact counts: Leads, In Progress, and Won.
3. Managing Digital Cards
Cards List
Navigate to /dashboard/cards to see all your cards in a grid. Each tile shows a compact preview, scan/save counts, and status badge.
Card Actions
| Action | Description |
|---|---|
| View | Opens the public card page |
| Edit | Opens the card editor with pre-filled data |
| Share | Shows QR code + shareable link |
| Stats | Opens the Analytics page |
| Delete | Removes the card |
Creating a New Card
Go to /dashboard/cards/new and fill in:
- Basic Info — Name, title, company, bio
- Contact Details — Phone, email, website, address
- Social & Payment — LinkedIn, WhatsApp, UPI ID
- Theme — Choose from Classic, Modern, Dark, Gradient, or Minimal
- Photo & Logo — Upload placeholders
Card Themes
Classic
Modern
Dark
Gradient
Minimal
The Live Preview on the right updates in real-time. Click "Save & Generate QR" when done.
4. Public Card View & Sharing
Each card has a public URL at /card/[slug] — this is what contacts see when scanning your QR code.
Quick Action Bar
| Button | Action |
|---|---|
| Call | Opens phone dialer |
| Opens email client | |
| Opens WhatsApp chat | |
| Map | Opens Google Maps with address |
Key Features
- Save Contact — Downloads a
.vcfvCard file directly to the phone's contacts - Share — Uses the device's native share sheet
- Pay via UPI — Opens UPI payment flow on mobile (if UPI ID is set)
- QR Code — Displayed at the bottom for easy rescanning
5. Contacts & CRM
Navigate to /dashboard/contacts to manage all your professional contacts.
Two View Modes
List View (Default)
Sortable table with name, company, source, pipeline stage, and last contact date. Click any row to open details.
Pipeline View (Kanban)
Horizontal board with columns: Lead → Contacted → Meeting → Proposal → Won / Lost
Filtering
- Search bar — Filter by name or company (real-time)
- Stage pills — Click any stage to filter: All, Lead, Contacted, Meeting, Proposal, Won, Lost
Contact Sources
6. Contact Details & Pipeline
Click any contact to open /dashboard/contacts/[id].
Left Panel
- Contact Card — Name, title, company, email, phone, tags
- Pipeline Stage — Dropdown to change stage + visual progress bar
- Quick Actions — Call, WhatsApp, Email, Schedule buttons
Right Panel — Tabs
| Tab | Content |
|---|---|
| Activity | Chronological timeline of calls, emails, meetings, pipeline changes |
| Chat-style conversation log with the contact | |
| Follow-ups | Reminders linked to this contact with "Mark Done" action |
| Notes | Add and view notes with timestamps |
7. Follow-up Reminders
Navigate to /dashboard/followups to manage all reminders.
Category Cards
Overdue
Past-due items
Today
Due today
Upcoming
Future items
Completed
Done items
Click any category card to filter. Click again to show all.
Follow-up Item Details
- Type icon — Call, Email, WhatsApp, Meeting, or Task
- Title & description — What needs to be done
- Contact — Name and company
- Due date/time — When it's scheduled
- Priority — High (red border), Medium (amber), Low (gray)
- Mark Done — Click to complete the follow-up
8. Analytics & Reporting
Navigate to /dashboard/analytics to track card performance.
Overview Stats
| Metric | Description |
|---|---|
| Total Scans | All QR code scans across cards |
| Unique Visitors | Deduplicated scan count |
| Contact Saves | How many people saved your contact (with save rate %) |
| Active Cards | Number of currently active cards |
Charts & Reports
- Scans Over Time — Line chart with total scans (solid) and unique visitors (dashed)
- Top Cards by Scans — Ranked list of your best-performing cards
- Geographic Breakdown — Bar chart showing scans by Indian city
- QR vs Link Share — 68% QR scans vs 32% direct link visits with WhatsApp shares
9. Pricing Plans
| Feature | Free (₹0) | Pro (₹299/mo) | Business (₹499/mo) |
|---|---|---|---|
| Digital Cards | 1 | 5 | Unlimited |
| QR Code Sharing | ✓ | ✓ | ✓ |
| Basic Contact Info | ✓ | ✓ | ✓ |
| Scans/month | 50 | Unlimited | Unlimited |
| CRM Pipeline | — | ✓ | ✓ |
| Follow-up Reminders | — | ✓ | ✓ |
| WhatsApp Integration | — | ✓ | ✓ |
| Scan Analytics | — | ✓ | ✓ |
| UPI Payment Links | — | ✓ | ✓ |
| Custom Themes | — | ✓ | ✓ |
| Team Management | — | — | ✓ |
| Priority Support | — | — | ✓ |
| Custom Branding | — | — | ✓ |
| API Access | — | — | ✓ |
Navigation Reference
| Page | Route | Description |
|---|---|---|
| Landing Page | / | Marketing homepage |
| Login | /login | Authentication page |
| Dashboard | /dashboard | Overview & stats |
| My Cards | /dashboard/cards | Manage digital cards |
| Create Card | /dashboard/cards/new | Card editor |
| Public Card | /card/[slug] | Shareable card page |
| Contacts | /dashboard/contacts | CRM contact list |
| Contact Detail | /dashboard/contacts/[id] | Individual contact view |
| Follow-ups | /dashboard/followups | Reminder management |
| Analytics | /dashboard/analytics | Performance stats |
| User Guide | /guide | This page |
Technical Notes
- Port: Application runs on
localhost:3006 - Auth: localStorage-based session (demo only)
- Data: All data is mock/simulated — no database required
- vCard: Contact save generates a real
.vcffile download - UPI: Payment links use the standard
upi://deep link protocol - Responsive: Full mobile support with collapsible sidebar