backpocket

A calm, focused read-it-later app for saving and optionally sharing your finds. No social features, no tracking, no algorithms—just your collection, beautifully organized.

Built as a spiritual successor to Mozilla's Pocket after its shutdown in 2025.

Features

• Save anything — Articles, videos, PDFs, links. We preserve metadata and thumbnails automatically.
• Stay organized — Collections, tags, favorites, and archive. Powerful filtering to find what you need.
• Privacy by default — Everything starts private. You choose what to share.
• Share via URL — Publish your collection at username.backpocket.my or your own custom domain.
• RSS included — Public saves automatically generate an RSS feed for subscribers.
• One honest metric — A simple visitor counter. No cookies, no analytics, no tracking.

Tech Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS 4
• UI Components: Radix UI + custom components
• Authentication: Clerk
• Database: Supabase (PostgreSQL)
• Cache: Upstash Redis
• API: tRPC + TanStack Query
• Linting/Formatting: Biome
• Package Manager: Bun

Getting Started

Prerequisites

• Bun (recommended) or Node.js 20+
• Supabase project
• Clerk application
• Upstash Redis database (optional, for caching)

Setup

1. Clone the repository

   git clone https://github.com/yourusername/backpocket-web.git
   cd backpocket-web

2. Install dependencies

   bun install

3. Set up environment variables

   Create a .env.local file:

   # Clerk
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_...
   CLERK_SECRET_KEY=sk_...
   
   # Supabase
   NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
   SUPABASE_SERVICE_ROLE_KEY=eyJ...
   
   # Upstash Redis (optional)
   UPSTASH_REDIS_REST_URL=https://...
   UPSTASH_REDIS_REST_TOKEN=...

4. Set up the database

   Run the schema in your Supabase SQL Editor:

   # The schema is located at:
   supabase/schema.sql

5. Run the development server

   bun dev

   Open http://localhost:3000 to see the app.

Development Auth / Mock Mode

For local development without Clerk configured, you can enable mock auth mode:

# Add to .env.local
BACKPOCKET_AUTH_MODE=mock

What it does

• Sets userId to "mock-user-dev" for all tRPC requests
• Bypasses Clerk middleware protection for /app/* routes
• Allows full app functionality without a Clerk account

Security

• Only works when NODE_ENV=development — has no effect in production
• In production, if Clerk is not configured, all protected routes will return UNAUTHORIZED (fail closed)
• Never commit BACKPOCKET_AUTH_MODE=mock to production environment variables

Data warning

Mock mode uses the real Supabase database via the service role key. Any saves, collections, or tags you create will be stored as real data under the mock-user-dev user ID.

Scripts

Command	Description
bun dev	Start development server
bun build	Build for production
bun start	Start production server
bun lint	Check for linting issues
bun lint:fix	Fix linting issues
bun format	Format code with Biome

Project Structure

├── app/
│   ├── app/          # Authenticated app routes (/app/*)
│   ├── public/       # Public space routes (username.backpocket.my)
│   ├── sign-in/      # Authentication pages
│   ├── sign-up/
│   └── page.tsx      # Landing page
├── components/
│   └── ui/           # Reusable UI components
├── lib/
│   ├── trpc/         # tRPC client and server
│   ├── supabase.ts   # Supabase client
│   └── redis.ts      # Redis client
└── supabase/
    └── schema.sql    # Database schema

License

MIT