Bookmark Dashboard

A modern web-based dashboard for organizing bookmarks with tabs and groups.

Features

• User Authentication: Secure registration and login system with JWT tokens
• Tabs: Organize bookmarks by categories (e.g., Work, Personal)
• Groups: Further organize bookmarks within tabs (e.g., Gaming, Development)
• Bookmarks: Store and manage your favorite links
• Widgets: Configure and use the pre-made widgets (Radarr, Sonarr, etc.)
• Customizable Background: Choose from multiple gradient backgrounds
• Full CRUD Operations: Add, edit, and delete tabs, groups, and bookmarks
• User Isolation: Each user has their own private dashboard

Tech Stack

• Frontend: Next.js 14 (App Router), React, TypeScript, Tailwind CSS
• Backend: Next.js API Routes
• Database: MariaDB with Prisma ORM
• Authentication: JWT tokens with bcrypt password hashing

Getting Started

Prerequisites

• Node.js 18+ and npm

Installation

1. Install dependencies:

npm install

2. Set up the database:

First, make sure MariaDB is installed and running on your system.

For Local Development (without Docker):

You can set up your local development environment in two ways:

Option A: Use the setup script (recommended)

npm run setup:local

This interactive script will prompt you for your database credentials and create a .env.local file automatically.

Option B: Create .env.local manually

Create a .env.local file in the root directory with your database connection string:

DATABASE_URL="mysql://user:password@localhost:3306/database_name"
JWT_SECRET=your-secret-key-here

Or use individual environment variables (matches Docker format):

DATABASE_HOST=localhost
DATABASE_PORT=3306
DATABASE_NAME=your_database_name
DATABASE_USER=your_username
DATABASE_PASSWORD=your_password
JWT_SECRET=your-secret-key-here

Replace the connection details with your MariaDB credentials:

• user / DATABASE_USER: Your MariaDB username
• password / DATABASE_PASSWORD: Your MariaDB password
• localhost:3306 / DATABASE_HOST:DATABASE_PORT: Your MariaDB host and port (default is localhost:3306)
• database_name / DATABASE_NAME: The name of your database (create it first if it doesn't exist)

Note: .env.local is git-ignored and takes precedence over .env, making it perfect for local development. This allows you to use npm run dev without Docker while keeping your Docker configuration separate.

Then, initialize the database:

npm run db:init

Note: The database will be automatically initialized when you run npm run dev for the first time. The setup script will:

• Check if Prisma Client is generated
• Ensure database schema is synchronized
• Automatically create tables if needed

You can also run setup manually:

npm run db:setup

Or run these commands separately:

npm run db:generate
npm run db:push

4. Run the development server:

npm run dev

5. Open http://localhost:3000 in your browser.

Usage

1. Register: Create a new account at /register
2. Login: Sign in at /login
3. Create Tabs: Click "+ Add Tab" to create a new tab
4. Create Groups: Click "+ Add Group" to create a group within a tab
5. Add Bookmarks: Click the "+" button on a group to add bookmarks
6. Edit/Delete: Hover over items to see edit and delete options
7. Customize Background: Choose from the preset gradient backgrounds

Database

This project uses MariaDB (compatible with MySQL). The database connection is configured via the DATABASE_URL environment variable in your .env file.

You can view and manage your database using Prisma Studio:

npm run db:studio

Or use any MySQL/MariaDB client to connect to your database directly.

Project Structure

├── app/
│   ├── api/          # API routes
│   ├── dashboard/    # Dashboard page
│   ├── login/         # Login page
│   └── register/      # Registration page
├── components/        # React components
├── lib/              # Utility functions
└── prisma/           # Database schema

Security Notes

• Passwords are hashed using bcrypt
• JWT tokens are stored in httpOnly cookies
• All API routes verify user authentication
• User data is isolated per account