Your safe place for all links - A modern, powerful bookmark manager that helps you organize and access your important links from Instagram, Twitter, and the web.
🚀 Live Demo • 📖 Documentation • 🐛 Report Bug • ✨ Request Feature
- 🔍 Lightning Fast Search - Find any link instantly with powerful search functionality
- 🏷️ Smart Tagging System - Organize bookmarks with intelligent tags and categories
- 📱 Dedicated Sections - Separate organized spaces for Instagram, Twitter, and web links
- ♾️ Unlimited Storage - Save as many links as you want without restrictions
- ⚡ Real-time Sync - Access your bookmarks across all devices
- 🔒 Secure & Private - Your data is safe with secure authentication
- 🌐 Cross-platform - Works everywhere with responsive design
- 🤖 Auto-detection - Automatically detects link types (Twitter, Instagram, Web)
- 📊 Smart Organization - AI-powered suggestions and categorization
- 🎭 Modern UI - Beautiful, intuitive interface built with Radix UI
- 📱 Mobile Responsive - Perfect experience on all devices
- ⚡ Fast Performance - Optimized with Next.js 15 and React 19
- 🎨 Customizable - Personalize your bookmarking experience
- Framework: Next.js 15.5.0 with App Router
- Language: TypeScript 5.0
- Styling: Tailwind CSS 4.0
- UI Components: Radix UI + Custom Components
- State Management: Redux Toolkit + React Query
- Forms: React Hook Form + Zod validation
- Icons: Lucide React + React Icons
- Database: PostgreSQL with Prisma ORM
- Authentication: NextAuth.js v5 (Google, GitHub)
- API: Next.js API Routes
- Validation: Zod schemas
- Linting: ESLint with Next.js config
- Type Checking: TypeScript strict mode
- Package Manager: npm
- Version Control: Git
- Node.js 18+
- PostgreSQL database
- npm or yarn package manager
-
Clone the repository
git clone https://github.com/yourusername/bookmarkme.git cd bookmarkme -
Install dependencies
npm install
-
Set up environment variables
cp .env.example .env.local
Fill in your environment variables:
# Database DATABASE_URL="postgresql://username:password@localhost:5432/bookmarkme" # NextAuth NEXTAUTH_URL="http://localhost:3000" NEXTAUTH_SECRET="your-secret-key" # OAuth Providers GOOGLE_CLIENT_ID="your-google-client-id" GOOGLE_CLIENT_SECRET="your-google-client-secret" GITHUB_CLIENT_ID="your-github-client-id" GITHUB_CLIENT_SECRET="your-github-client-secret"
-
Set up the database
npx prisma generate npx prisma db push
-
Run the development server
npm run dev
-
Open your browser Navigate to http://localhost:3000
bookmarkme/
├── app/ # Next.js App Router
│ ├── (protected)/ # Protected routes
│ │ └── dashboard/ # Main dashboard
│ ├── api/ # API routes
│ │ ├── auth/ # Authentication endpoints
│ │ └── v1/ # API v1 endpoints
│ ├── pages/ # Page components
│ ├── services/ # API services & mutations
│ └── types/ # TypeScript type definitions
├── components/ # Reusable UI components
│ ├── ui/ # Base UI components
│ └── magicui/ # Custom UI components
├── prisma/ # Database schema & migrations
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
├── redux/ # Redux store & slices
└── schema/ # Zod validation schemas
# Development
npm run dev # Start development server on port 3000
# Production
npm run build # Build the application
npm run start # Start production server
# Database
npx prisma generate # Generate Prisma client
npx prisma db push # Push schema changes to database
npx prisma studio # Open Prisma Studio
# Code Quality
npm run lint # Run ESLint- Click the "Add Bookmark" button
- Enter the URL (auto-detects type)
- Add a title and description
- Select or create tags
- Save your bookmark
- Search: Use the search bar to find specific links
- Filter: Filter by type (Twitter, Instagram, Web)
- Tags: Use tags to categorize your bookmarks
- Sections: Navigate between different link types
- Create new tags on-the-fly
- Assign multiple tags to bookmarks
- Reuse existing tags for consistency
We love contributions! Here's how you can help make BookmarkMe even better:
Before creating an issue, please:
- Check if the issue already exists
- Use the issue templates
- Provide detailed reproduction steps
- Include screenshots if applicable
-
Fork the repository
git clone https://github.com/yourusername/bookmarkme.git cd bookmarkme -
Create a feature branch
git checkout -b feature/amazing-feature
-
Make your changes
- Follow the existing code style
- Add tests for new features
- Update documentation as needed
-
Commit your changes
git commit -m "Add amazing feature" -
Push to your branch
git push origin feature/amazing-feature
-
Open a Pull Request
- Use the PR template
- Link related issues
- Request reviews from maintainers
- Code Style: Follow ESLint configuration
- TypeScript: Use strict typing
- Components: Use functional components with hooks
- Testing: Add tests for new features
- Documentation: Update README for new features
bug- Something isn't workingenhancement- New feature or requestdocumentation- Improvements to documentationgood first issue- Good for newcomershelp wanted- Extra attention is neededquestion- Further information is requested
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js for the amazing React framework
- Prisma for the excellent database toolkit
- Radix UI for accessible component primitives
- Tailwind CSS for the utility-first CSS framework
- Vercel for hosting and deployment