Bookmark Manager

A modern, full-stack bookmark management application built with Next.js 15, Supabase, and TypeScript. Organize your bookmarks with folders, tags, and full-text search capabilities.

Features

• 🔖 Bookmark Management: Save, organize, and manage your bookmarks
• 📁 Folder Organization: Organize bookmarks into custom folders
• 🏷️ Tagging System: Tag bookmarks for better categorization
• 🔍 Search: Full-text search across your bookmarks
• 🌙 Dark Mode: Toggle between light and dark themes
• 📱 Responsive Design: Works seamlessly on desktop and mobile
• 🔐 Authentication: Secure user authentication with Supabase Auth
• ⚡ Fast Performance: Built with Next.js 15 and optimized for speed

Tech Stack

• Framework: Next.js 15 (App Router)
• Database: Supabase (PostgreSQL)
• Authentication: Supabase Auth
• Styling: Tailwind CSS
• UI Components: Radix UI (shadcn/ui)
• Language: TypeScript
• Form Handling: React Hook Form + Zod
• State Management: React hooks

Prerequisites

Before running this application, make sure you have:

• Node.js 18+ installed
• A Supabase account and project
• Git

Getting Started

1. Clone the repository

git clone <repository-url>
cd bookmark-management-app

2. Install dependencies

npm install

3. Set up environment variables

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

cp .env.example .env.local

Update the .env.local file with your Supabase credentials:

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

4. Set up Supabase Database

Create the following tables in your Supabase database:

Profiles Table

CREATE TABLE profiles (
  id UUID PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT TIMEZONE('utc'::text, NOW()) NOT NULL,
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT TIMEZONE('utc'::text, NOW()) NOT NULL,
  username TEXT UNIQUE,
  full_name TEXT,
  avatar_url TEXT
);

Folders Table

CREATE TABLE folders (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  created_at TIMESTAMP WITH TIME ZONE DEFAULT TIMEZONE('utc'::text, NOW()) NOT NULL,
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT TIMEZONE('utc'::text, NOW()) NOT NULL,
  name TEXT NOT NULL,
  user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
  parent_id UUID REFERENCES folders(id) ON DELETE CASCADE
);

Tags Table

CREATE TABLE tags (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  created_at TIMESTAMP WITH TIME ZONE DEFAULT TIMEZONE('utc'::text, NOW()) NOT NULL,
  name TEXT NOT NULL,
  user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
  color TEXT
);

Bookmarks Table

CREATE TABLE bookmarks (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  created_at TIMESTAMP WITH TIME ZONE DEFAULT TIMEZONE('utc'::text, NOW()) NOT NULL,
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT TIMEZONE('utc'::text, NOW()) NOT NULL,
  url TEXT NOT NULL,
  title TEXT NOT NULL,
  description TEXT,
  favicon TEXT,
  folder_id UUID REFERENCES folders(id) ON DELETE SET NULL,
  user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
  notes TEXT
);

Bookmark Tags Junction Table

CREATE TABLE bookmark_tags (
  bookmark_id UUID NOT NULL REFERENCES bookmarks(id) ON DELETE CASCADE,
  tag_id UUID NOT NULL REFERENCES tags(id) ON DELETE CASCADE,
  PRIMARY KEY (bookmark_id, tag_id)
);

5. Run the development server

npm run dev

Open http://localhost:3000 in your browser to see the application.

Project Structure

├── app/                    # Next.js app directory
│   ├── (auth)/            # Authentication routes
│   ├── (dashboard)/       # Dashboard routes
│   ├── auth/              # Auth pages
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Home page
├── components/            # React components
│   ├── auth/              # Authentication components
│   ├── dashboard/         # Dashboard components
│   ├── landing/           # Landing page components
│   └── ui/                # UI components (shadcn/ui)
├── hooks/                 # Custom React hooks
├── lib/                   # Utility functions
├── types/                 # TypeScript type definitions
└── supabase/              # Supabase configuration

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

Features in Detail

Authentication

• User registration and login
• Password reset functionality
• Session management
• Protected routes

Bookmark Management

• Add bookmarks with URL, title, description, and notes
• Automatic favicon fetching
• Edit and delete bookmarks
• Organize with folders
• Tag management

Search and Filtering

• Search across bookmark titles and descriptions
• Filter by folders and tags
• Sort by date, title, or relevance

User Interface

• Clean, modern design
• Dark/light mode toggle
• Responsive grid and list views
• Intuitive navigation

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

This project is licensed under the MIT License.

Support

If you encounter any issues or have questions, please open an issue in the GitHub repository.