Kontaktify

Digital business card SaaS platform for the German market. Create professional digital business cards and share them via QR code or link.

Features

• User Authentication - Email/password registration and login with NextAuth.js
• Card Builder - Intuitive dashboard to create and edit your digital business card
• Profile Photo - Upload and display your professional photo
• Contact Information - Name, job title, company, email, phone, website
• Social Links - LinkedIn, Xing, Twitter, Instagram, GitHub
• Custom Links - Add up to 5 custom links
• Theme Customization - Choose your accent color
• QR Code - Auto-generated QR code for easy sharing
• vCard Download - Visitors can save your contact directly to their phone
• Analytics - Track card views over time
• Viral Marketing - "Powered by Kontaktify" branding on free tier cards
• Mobile Responsive - Looks great on all devices
• German UI - Localized for the German market

Tech Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Database: PostgreSQL
• ORM: Prisma
• Authentication: NextAuth.js
• Icons: Lucide React
• Charts: Recharts
• QR Code: qrcode.react

Getting Started

Prerequisites

• Node.js 18+
• PostgreSQL database

Installation

1. Clone the repository:

git clone https://github.com/tilman-d/kontaktify.git
cd kontaktify

2. Install dependencies:

npm install

3. Create a .env file:

DATABASE_URL="postgresql://user:password@localhost:5432/kontaktify"
NEXTAUTH_SECRET="your-secret-key"
NEXTAUTH_URL="http://localhost:3000"
NEXT_PUBLIC_APP_URL="http://localhost:3000"

4. Run database migrations:

npx prisma migrate dev

5. Start the development server:

npm run dev

6. Open http://localhost:3000

Project Structure

├── app/
│   ├── (auth)/           # Login & register pages
│   ├── (dashboard)/      # Dashboard, analytics, QR pages
│   ├── [username]/       # Public card page
│   ├── api/              # API routes
│   └── page.tsx          # Landing page
├── components/           # React components
├── lib/                  # Utilities & configs
├── prisma/               # Database schema & migrations
└── types/                # TypeScript types

Database Schema

• users - User accounts
• cards - Business card data (1:1 with users)
• social_links - Social media links
• custom_links - User-defined links
• card_views - Analytics data

Screenshots

Landing Page

Clean, modern landing page with German copy and feature highlights.

Dashboard

Full-featured card editor with live preview and social link management.

Public Card

Mobile-optimized card display with vCard download and QR code.

Future Enhancements

• Premium tier (remove branding, custom domain)
• Stripe payment integration
• NFC card ordering
• Apple/Google Wallet pass
• Email signature generator
• Team/business accounts
• CRM integrations

License

MIT