• 🎨 Beautiful Profile Pages - Create stunning, mobile-responsive profile pages

• 🤖 AI-Powered Avatars - Automatic fallback avatar generation using Google AI

• 🔗 Short URLs - Generate short, shareable links like https://connectree-sigma.vercel.app/p/fr2db2

• 🎯 Link in Bio - Perfect replacement for Linktree, Bio.link, and similar services

• 🌙 Dark/Light Mode - Built-in theme switching

• 📱 Mobile-First - Responsive design that works on all devices

• 💾 Client-Side Storage - No database required, works entirely in the browser

• 🆓 100% Free - No subscriptions, no limits, deploy anywhere

• ⚡ Instant Deployment - Deploy to Vercel with zero configuration

• 🧹 Auto Cleanup - Automatically manages storage and cleans up old profiles

git clone https://github.com/pratham-prog861/connectree.git
cd connectree

npm install
# or
yarn install
# or
pnpm install

Create a .env.local file in the root directory:

# Google AI API Key (for avatar generation)
GOOGLE_GENAI_API_KEY=your_google_ai_api_key_here

Note: You can get a free Google AI API key from Google AI Studio

npm run dev

Open http://localhost:9002 in your browser.

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Add your environment variables in Vercel dashboard
4. Deploy! 🎉

Deploy with Vercel

1. Fill out your name, bio, and links
2. Upload an avatar or provide a URL (AI fallback if none provided)
3. Click "Generate JSON" to create your profile data
4. Hit "Go Live & Share" to get your short URL

• Profiles are stored in browser localStorage
• Each profile gets a unique 6-character hash
• Short URLs like /p/abc123 redirect to full profile pages
• Automatic cleanup removes profiles older than 30 days

yoursite.com/p/abc123 → Short URL (redirects to profile)
yoursite.com/profile?data=... → Full profile page

• Framework: Next.js 15.3.3 with App Router
• Language: TypeScript
• Styling: Tailwind CSS + shadcn/ui components
• Forms: React Hook Form + Zod validation
• AI: Google Genkit for avatar generation
• Icons: Lucide React
• Deployment: Vercel-optimized

src/
├── app/
│ ├── p/[hash]/ # Short URL handlers
│ ├── profile/ # Profile viewer page
│ ├── actions.ts # Server actions
│ ├── layout.tsx # Root layout
│ └── page.tsx # Main profile creator
├── components/
│ ├── ui/ # shadcn/ui components
│ ├── theme-provider.tsx
│ └── theme-toggle.tsx
├── hooks/
│ ├── use-mobile.tsx
│ └── use-toast.ts
├── lib/
│ ├── profile-storage.ts # Client-side storage utilities
│ └── utils.ts # Utility functions
└── ai/
 ├── flows/ # AI avatar generation
 └── genkit.ts # Genkit configuration

The app supports both light and dark modes out of the box. Customize colors in:

• src/app/globals.css - CSS variables
• tailwind.config.ts - Tailwind configuration

All UI components are from shadcn/ui and can be customized:

• src/components/ui/ - Individual component files
• Modify styling, behavior, or add new components

Customize storage behavior in src/lib/profile-storage.ts:

• Change cleanup interval (default: 30 days)
• Modify hash generation algorithm
• Add encryption or compression

# Development
npm run dev # Start development server on port 9002
npm run genkit:dev # Start Genkit development server
npm run genkit:watch # Start Genkit with file watching
# Production
npm run build # Build for production
npm run start # Start production server
# Code Quality
npm run lint # Run ESLint
npm run typecheck # Run TypeScript checks

Connectree uses Google's Genkit AI to generate fallback avatars when:

• No avatar URL is provided
• The provided URL is invalid or inaccessible
• User uploads a file that can't be processed

The AI creates personalized avatars based on the user's name and profile information.

• No Server Storage: All data is stored in the user's browser
• No Tracking: No analytics or user tracking
• No Database: Profiles exist only in localStorage
• Self-Hosted: Deploy anywhere you want

• ✅ Chrome (recommended)
• ✅ Firefox
• ✅ Safari
• ✅ Edge
• ✅ Mobile browsers

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

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

• shadcn/ui for the beautiful component library
• Lucide for the icon set
• Vercel for seamless deployment
• Google AI for avatar generation

• Personal Branding: Create a professional link-in-bio page
• Social Media: Share all your links in one place
• Events: Quick profile pages for speakers or attendees
• Teams: Company directory or team member profiles
• Students: Academic and project portfolios
• Creators: Centralized hub for all content links

If you encounter any issues or have questions:

1. Check the Issues page
2. Create a new issue with detailed information
3. Join our community discussions