A modern, responsive Next.js application for creating and sharing digital business cards with QR codes, vCard downloads, and analytics.

• Beautiful Digital Cards: Clean, minimalistic interface with customizable themes
• QR Code Generation: Instant scannable QR codes for easy sharing
• vCard Download: Export contacts as .vcf files compatible with all devices
• Social Media Integration: Link to LinkedIn, Twitter, GitHub, and Instagram
• Analytics: Track profile visits and QR code scans
• Dark/Light Themes: Built-in theme support with custom color options
• Responsive Design: Works perfectly on mobile, tablet, and desktop
• Supabase Backend: Secure data persistence and storage
• Vercel Deployment: One-click deployment with custom URLs

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Database: Supabase (PostgreSQL)
• Storage: Supabase Storage
• UI Components: Lucide React Icons
• QR Codes: QRCode.react
• Theming: next-themes

• Node.js 18+ installed
• A Supabase account (free tier works)

git clone <your-repo-url>
cd Clickshare

npm install

1. Create a new project at supabase.com
2. Go to Settings > API and copy:
   • Project URL
   • anon/public key
3. Create a storage bucket named profiles in the Supabase dashboard
4. Run the SQL migration in supabase/migrations/001_initial_schema.sql in your Supabase SQL editor

Create a .env.local file:

cp .env.local.example .env.local

Edit .env.local with your Supabase credentials:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
NEXT_PUBLIC_APP_URL=http://localhost:3000

npm run dev

Open http://localhost:3000 with your browser.

1. Click "Create Your Card" on the homepage
2. Fill in your profile information
3. Upload a profile picture (optional)
4. Add social media links (optional)
5. Customize your theme color
6. Click "Create Card"

Your card will be available at: your-domain.com/slug

You can:

• Share the URL directly
• Let others scan the QR code
• Share via the share button (mobile)
• Provide the vCard download

View your profile's analytics in the Supabase dashboard or extend the app to show them in the UI.

1. Push your code to GitHub
2. Go to vercel.com
3. Import your repository
4. Add environment variables in Vercel settings
5. Deploy!

1. Go to your Vercel project settings
2. Add your custom domain
3. Update DNS settings as instructed by Vercel

src/
├── app/
│   ├── [slug]/page.tsx      # Dynamic card pages
│   ├── create/page.tsx       # Card creation form
│   ├── layout.tsx            # Root layout with theme provider
│   ├── page.tsx              # Homepage
│   └── globals.css           # Global styles
├── components/
│   └── theme-provider.tsx    # Theme provider component
├── lib/
│   └── supabase.ts           # Supabase client
└── types/
    └── index.ts              # TypeScript types

• PDF generation for offline sharing
• Calendar integration (Google/Outlook)
• Embedded map location
• Multiple card designs/templates
• Analytics dashboard
• Business card statistics
• Email notifications
• Custom branding options

Contributions are welcome! Please feel free to submit a Pull Request.

MIT License - feel free to use this project for personal or commercial purposes.