# 🔗 Link Stack - One Link to Rule Them All A beautiful, feature-rich link sharing platform built with Next.js 16, TypeScript, and modern web technologies. Share all your important links in one stunning, customizable page.    ## ✨ Features ### 🎨 **Beautiful UI/UX** - Modern, responsive design that works on all devices - 6 stunning pre-made themes (Minimal, Ocean, Sunset, Forest, Lavender, Cream) - Smooth animations with Framer Motion - Dark mode support - Real-time live preview ### 🔗 **Link Management** - Drag-and-drop link reordering - Platform auto-detection (GitHub, Twitter, Instagram, LinkedIn, etc.) - Custom link titles and URLs - Show/hide individual links - Platform-specific icons and styling - Link validation ### 📊 **Analytics** - Track total clicks - Per-link click tracking - Average clicks per link - Visual analytics dashboard ### 🎯 **Core Features** - Customizable profile (name, bio, avatar) - QR code generation for easy sharing - One-click link copying - Native share functionality - SEO optimized - Toast notifications for user feedback ### 🛠️ **Developer Features** - Built with Next.js 16 App Router - TypeScript for type safety - Zustand for state management - Local storage persistence - shadcn/ui components - Tailwind CSS for styling ## 🚀 Getting Started ### Prerequisites - Node.js 18+ or Bun - pnpm, npm, or yarn ### Installation 1. **Clone the repository** ```bash git clone https://github.com/yourusername/link-stack.git cd link-stack ``` 2. **Install dependencies** ```bash pnpm install # or npm install # or yarn install ``` 3. **Run the development server** ```bash pnpm dev # or npm run dev # or yarn dev ``` 4. **Open your browser** Navigate to [http://localhost:3000](http://localhost:3000) ## 📦 Tech Stack - **Framework:** Next.js 16 - **Language:** TypeScript - **Styling:** Tailwind CSS 4 - **UI Components:** shadcn/ui - **State Management:** Zustand - **Animations:** Framer Motion - **Drag & Drop:** @dnd-kit - **Icons:** Lucide React, React Icons - **QR Codes:** qrcode.react - **Notifications:** Sonner ## 🎨 Available Themes 1. **Minimal** - Classic black gradient 2. **Ocean** - Calming blue tones 3. **Sunset** - Warm orange to red 4. **Forest** - Natural green shades 5. **Lavender** - Elegant purple gradient 6. **Cream** - Light and airy ## 📱 Supported Platforms The app auto-detects and provides icons for 20+ platforms: - Social Media: Twitter/X, Instagram, Facebook, TikTok, Snapchat - Professional: LinkedIn, GitHub, Medium, Substack - Creative: Dribbble, Behance, Pinterest - Streaming: YouTube, Twitch, Spotify - Communication: Discord, Telegram, WhatsApp - Support: Patreon, Ko-fi - And more! ## 🗂️ Project Structure ``` link-stack/ ├── app/ # Next.js app directory │ ├── [username]/ # Dynamic user profile routes │ ├── layout.tsx # Root layout with metadata │ ├── page.tsx # Main app page │ └── globals.css # Global styles ├── components/ │ ├── dashboard/ # Dashboard components │ │ ├── dashboard.tsx │ │ ├── links-manager.tsx │ │ ├── sortable-link-item.tsx │ │ ├── link-dialog.tsx │ │ ├── profile-settings.tsx │ │ ├── live-preview.tsx │ │ └── empty-state.tsx │ ├── profile/ # Public profile components │ │ ├── public-profile.tsx │ │ └── public-profile-page.tsx │ ├── onboarding/ # Onboarding flow │ └── ui/ # Reusable UI components ├── lib/ │ ├── store.ts # Zustand store │ ├── platforms.ts # Platform configurations │ ├── validations.ts # Input validation │ └── utils.ts # Utility functions └── public/ # Static assets ``` ## 🎯 Usage ### Creating Your Profile 1. **Landing Page** - Click "Get Started Free" 2. **Select Platforms** - Choose your social media platforms 3. **Pick a Theme** - Select from 6 beautiful themes 4. **Add Links** - Enter your links with titles 5. **Customize** - Set your name, bio, and avatar 6. **Share** - Copy your link or generate a QR code ### Managing Links - **Add Link:** Click the "Add Link" button - **Edit Link:** Click the edit icon on any link - **Reorder:** Drag and drop links to reorder - **Toggle Visibility:** Click the eye icon to show/hide - **Delete:** Click the trash icon to remove ### Customizing Appearance 1. Go to the **Appearance** tab in the dashboard 2. Update your display name and bio 3. Choose a theme from the theme selector 4. Changes are reflected in real-time in the preview ## 🔧 Configuration ### Environment Variables Create a `.env.local` file for environment-specific configuration: ```env NEXT_PUBLIC_APP_URL=http://localhost:3000 ``` ## 📈 Analytics The app includes basic analytics tracking: - **Total Clicks:** Overall link clicks - **Per-Link Clicks:** Individual link performance - **Visible Links:** Number of active links - **Average Clicks:** Average clicks per link ## 🚀 Deployment ### Vercel (Recommended) 1. Push your code to GitHub 2. Import your repository on [Vercel](https://vercel.com) 3. Deploy with one click ### Other Platforms The app can be deployed to any platform that supports Next.js: - Netlify - Railway - Render - AWS Amplify ## 🤝 Contributing Contributions are welcome! Please feel free to submit a Pull Request. 1. Fork the repository 2. Create your feature branch (`git checkout -b feature/AmazingFeature`) 3. Commit your changes (`git commit -m 'Add some AmazingFeature'`) 4. Push to the branch (`git push origin feature/AmazingFeature`) 5. Open a Pull Request ## 📝 License This project is open source and available under the [MIT License](LICENSE). ## 🙏 Acknowledgments - [shadcn/ui](https://ui.shadcn.com/) for the beautiful UI components - [Lucide](https://lucide.dev/) for the icon set - [Vercel](https://vercel.com/) for hosting and deployment ## 📧 Contact For questions or feedback, please open an issue on GitHub. --- Made with ❤️ using Next.js and TypeScript "# bb-ex" # bb-ex # bb-ex # bb-ex # linkstack # linkstack