Cardix is a premium digital business card platform that lets you create, customize, and share your professional identity through a beautiful QR-enabled card. Built with modern web technologies and a stunning glassmorphic dark UI.
Features • Tech Stack • Getting Started • Project Structure • Environment Variables
| Feature | Description |
|---|---|
| 🎨 Card Builder | Drag-and-drop editor with live preview. Customize layout order, accent colors, and card background |
| 📇 Horizontal Business Card | Wide, modern card layout with avatar, contact pills, and social links |
| 🔐 Privacy Controls | Toggle email, phone, and location visibility from Settings |
| 📱 QR Code Identity | Colorful branded QR codes via quickchart.io that auto-match your card theme |
| 🔗 Smart Sharing | Share your card as Full Profile, Minimal, or Contact Only — each with unique filtered views |
| ⏳ Temporary Links | Create time-limited share links that auto-expire (15, 30, or 60 min) |
| Feature | Description |
|---|---|
| 📁 Personal Vault | Cloud file storage via Cloudinary with 500 MB free tier limit |
| 📊 Usage Tracker | Visual progress bar showing storage consumption against limits |
| 📝 Rich Notes Editor | Google Keep-style notes with bold, italic, headings, checklists, inline images, and color-coding |
| 🔄 Cross-Device Sync | Notes and files sync across all logged-in devices via Firestore |
| Feature | Description |
|---|---|
| 💎 Tiered Plans | Free, Pro ($5/mo), and Business ($15/mo) with progressive feature unlocks |
| 🔒 Analytics Paywall | Detailed analytics behind a Pro paywall with blurred preview for free users |
| ⭐ Pro Badge | Golden badge on profile avatar and sidebar for paid subscribers |
| ⚙️ Tier Management | Current plan display in Settings with one-click upgrade flow |
| Feature | Description |
|---|---|
| 🧭 Guided Onboarding | 5-step wizard: Welcome → Template → Customize → Profile → Preview |
| 📸 QR Scanner | Built-in camera scanner to scan other Cardix QR codes |
| 🌐 Responsive Design | Desktop sidebar + mobile bottom nav with animated active indicators |
| 🎭 8 Card Templates | Modern, Business, Creator, Developer, Minimal, Sunset, Ocean, Neon |
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router, Turbopack) |
| Styling | Tailwind CSS 4 + Glassmorphism |
| Auth | Firebase Authentication (Google + Email/Password) |
| Database | Cloud Firestore |
| File Storage | Cloudinary (unsigned uploads) |
| QR Generation | quickchart.io API |
| Animations | Framer Motion |
| Drag & Drop | @dnd-kit |
| Icons | React Icons (Feather) |
| QR Scanner | html5-qrcode |
| Notifications | React Hot Toast |
- Node.js ≥ 18
- npm ≥ 9
- A Firebase project with Auth + Firestore enabled
- A Cloudinary account with an unsigned upload preset
# Clone the repository
git clone https://github.com/ShadowFull12/Cardix.git
cd Cardix
# Install dependencies
npm install
# Set up environment variables (see below)
cp .env.example .env.local
# Start the dev server
npm run devOpen http://localhost:3000 and you're ready to go!
npm run build
npm startCreate a .env.local file in the root directory:
# Firebase
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
# Cloudinary
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your_cloud_name
NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET=your_unsigned_preset
⚠️ Never commit your.env.localfile. It's already in.gitignore.
Cardix/
├── src/
│ ├── app/ # Next.js App Router pages
│ │ ├── (app)/ # Authenticated layout group
│ │ │ ├── dashboard/ # Main dashboard
│ │ │ ├── vault/ # Personal vault (files + notes)
│ │ │ ├── card/preview/ # Card builder (drag & drop + design)
│ │ │ ├── analytics/ # Analytics (Pro paywall)
│ │ │ ├── pro/ # Pricing & upgrade page
│ │ │ ├── scan/ # QR code scanner
│ │ │ ├── profile/ # Profile editor
│ │ │ ├── network/ # Saved contacts network
│ │ │ └── settings/ # Account & privacy settings
│ │ ├── card/[username]/ # Public card route (dynamic)
│ │ ├── share/[shareId]/ # Temporary share links
│ │ ├── onboarding/ # Guided onboarding wizard
│ │ ├── login/ # Login page
│ │ └── signup/ # Signup page
│ ├── components/
│ │ ├── card/ # PublicCard component
│ │ ├── dashboard/ # AnalyticsCard, QRDisplay
│ │ ├── layout/ # Sidebar, MobileNav
│ │ ├── profile/ # ShareDialog
│ │ ├── qr/ # BrandedQR (quickchart.io)
│ │ ├── ui/ # GlassCard, Skeletons
│ │ └── vault/ # PersonalVault, NotesEditor
│ ├── contexts/ # AuthContext (Firebase)
│ └── lib/ # Firebase, Firestore, Cloudinary, Sharing utils
├── public/ # Static assets & manifest
├── .env.local # Environment variables (not committed)
└── package.json
Cardix cards are fully customizable through the onboarding flow and the Card Editor:
| Option | Choices |
|---|---|
| Templates | Modern, Business, Creator, Developer, Minimal, Sunset, Ocean, Neon |
| Accent Colors | 12 presets + custom color picker |
| Card Background | 6 dark-mode backgrounds |
| Layout Order | Drag and drop: Header, Contact, Socials |
| Feature | Free | Pro ($5/mo) | Business ($15/mo) |
|---|---|---|---|
| Digital Card | ✅ | ✅ | ✅ |
| QR Code | ✅ | ✅ | ✅ |
| Card Themes | ✅ | ✅ | ✅ |
| Vault Storage | 500 MB | 10 GB | 100 GB |
| Rich Notes | ✅ | ✅ | ✅ |
| Smart Sharing | ✅ | ✅ | ✅ |
| Analytics | ❌ | ✅ | ✅ |
| Custom Domain | ❌ | ❌ | ✅ |
| Team Management | ❌ | ❌ | ✅ |
| Priority Support | ❌ | ✅ | ✅ |
- Push to GitHub
- Import in Vercel
- Add environment variables in Vercel dashboard
- Deploy — auto-builds on every push
The app is a standard Next.js application and can be deployed to any platform that supports Node.js:
- Netlify — with
@netlify/plugin-nextjs - Railway / Render — via Docker or
npm run build && npm start
This project is licensed under the MIT License — see the LICENSE file for details.
Built with ❤️ using Next.js, Firebase, and Cloudinary