A modern, privacy-focused link management application built with Next.js 15. Save, organize, and rediscover your digital content with ease.
- 🎯 Smart Link Management - Automatically fetch titles, descriptions, and thumbnails from URLs
- 📁 Folder Organization - Create custom folders with colors and icons
- 🏷️ Tag System - Categorize links with custom tags
- 🔍 Powerful Search - Search across titles, descriptions, URLs, and tags
- ⭐ Favorites - Mark important links for quick access
- 🌓 Dark Mode - Beautiful dark and light themes
- 📱 Responsive Design - Works perfectly on all devices
- 💾 Local Storage - All data stored in your browser (no account needed)
- 🔒 Privacy First - No external data transmission
- 🚀 Fast Performance - Optimized for speed with large datasets
- ☑️ Bulk Selection - Select multiple links for batch operations (move, favorite, delete)
- Node.js 18+ and npm
# Install dependencies
npm install
# Run development server
npm run dev
# Build for production
npm run build
# Start production server
npm startOpen http://localhost:3000 in your browser.
- Framework: Next.js 15 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui (Radix UI)
- State Management: Zustand
- Form Handling: React Hook Form + Zod
- Icons: Lucide React
- Theme: next-themes
- Click the "Add Link" button in the header
- Paste a URL - title and thumbnail will auto-populate
- Optionally add description, folder, and tags
- Click "Add Link" to save
- Click "New Folder" in the sidebar
- Enter folder name and select a color
- Click "Create Folder"
- Use the search bar in the header to search across all links
- Results update in real-time as you type
- Click any link card to open the URL
- Click the menu icon (⋮) for additional options:
- Select link (for bulk operations)
- Add/Remove from favorites
- Edit link details
- Delete link
- Select multiple links using the "Select" option in dropdown menus
- Use the floating bulk action bar to:
- Select/deselect all visible links
- Move selected links to different folders
- Add/remove selected links from favorites
- Delete selected links (with confirmation)
- Clear selection using the X button in the bulk bar
linkvault/
├── app/ # Next.js app directory
│ ├── api/ # API routes
│ │ └── fetch-metadata/
│ ├── layout.tsx # Root layout
│ └── page.tsx # Main page
├── components/ # React components
│ ├── common/ # Shared components
│ ├── layout/ # Layout components
│ ├── links/ # Link-related components
│ ├── modals/ # Modal dialogs
│ ├── providers/ # Context providers
│ └── ui/ # shadcn/ui components
├── store/ # Zustand state management
├── services/ # Business logic
├── utils/ # Utility functions
├── types/ # TypeScript types
└── constants/ # App constants
You can customize the app by modifying:
- Design tokens:
app/globals.css - Colors:
constants/index.ts(FOLDER_COLORS, TAG_COLORS) - Platform detection:
utils/platform.ts - Storage keys:
constants/index.ts(STORAGE_KEYS)
# Install Vercel CLI
npm i -g vercel
# Deploy
vercelBuild the project and deploy the .next folder:
npm run build
npm startYour data can be exported from the Settings panel as JSON.
Import previously exported JSON data through the Settings panel.
All data is stored in browser localStorage:
- Links
- Folders
- Tags
- Settings
LinkVault supports three theme modes:
- Light - Clean, bright interface
- Dark - Easy on the eyes
- System - Follows your OS preference
Toggle theme using the button in the header.
- Large images may take time to load
- Some websites block metadata fetching (CORS)
- localStorage has a ~10MB limit
Contributions are welcome! Please feel free to submit a Pull Request.
This project is open source and available under the MIT License.
Made with ❤️ by the LinkVault team