Homepage.dev - The Future of Browser Homepages

A revolutionary real-time collaborative homepage platform for power users, teams, and organizations.

🎯 Vision Statement

Homepage.dev aims to become the definitive homepage platform by providing an infinitely customizable, real-time synchronized, and collaborative homepage experience that transforms how individuals and teams interact with their browsers across all devices.

"We're building the Future for browser homepages"

🚀 What We're Building

Core Platform Features

🔄 Real-time Collaboration: Multiple users editing the same homepage simultaneously with sub-100ms sync
🧩 Modular Architecture: Extensible platform with unlimited customization through modules
🏢 Enterprise Ready: Team workspaces, SSO, audit logging, and compliance features
👩‍💻 Developer First: Comprehensive SDK, CLI tools, and marketplace for third-party modules
⚡ Performance Obsessed: PWA support, offline functionality, and global CDN delivery

Market Positioning

We're targeting the intersection of personal productivity, team collaboration, and developer ecosystems - positioning between individual tools (Start.me, Momentum) and team platforms (Notion, Obsidian) with a focus on browser-native experiences.

🏗️ Standalone Platform Strategy

Homepage.dev operates as a completely independent platform - not a satellite of do.dev. This strategic decision enables:

Strategic Advantages

🎯 Independent Growth: Target specific homepage user segments without constraints
💰 Flexible Monetization: Optimize pricing for productivity tools market
🚀 Feature Velocity: Ship features focused on homepage use cases
🏢 Enterprise Credibility: Standalone platforms command higher trust from large organizations
📈 Platform Focus: Every decision optimized for extensibility and developer ecosystem growth

Technical Independence

🔐 Standalone Clerk Authentication: Dedicated user management system
🗄️ Independent Database: Purpose-built Convex projects for real-time collaboration
💳 Separate Billing: Independent revenue streams and subscription management
🔧 Custom Infrastructure: Optimized for real-time sync and module loading

📚 Documentation Structure

📋 Strategic Documents

Product Requirements Document - Complete product vision, features, and market analysis
Standalone Strategy - Why independence matters and platform benefits
Development Tenets - Core principles guiding every development decision

🏗️ Technical Documentation

Architecture Overview - Standalone Clerk + Convex technical architecture
Implementation Plan - 20-week comprehensive build strategy
Implementation Checklist - Detailed task breakdown by phase
Module SDK - Complete developer guide for building modules
Bookmarklet Guide - Complete guide for installing and using the bookmarklet

📊 Project Status

Current Phase: Pre-development (Documentation & Architecture)
Timeline: 20 weeks to production launch
Team Size: 6-9 developers + support team
Investment: $1M+ development budget

🛠️ Technology Stack

Frontend Architecture

Frontend: Next.js 15 + TypeScript 5.7.3
Styling: Tailwind CSS v4
UI Components: ShadCN UI (custom workspace package)
State Management: Convex real-time subscriptions
Module System: Dynamic loading with sandboxing

Backend & Real-time

Database: Convex (3-project architecture)
Authentication: Standalone Clerk instance
Real-time Sync: WebSocket + optimistic updates
File Storage: AWS S3 + CloudFlare CDN
Module Registry: Convex-based marketplace

Development Tools

Build System: Turborepo + Turbopack
Package Manager: pnpm workspaces
Code Quality: Biome.js + TypeScript strict
Testing: Playwright + Jest + K6 load testing
Deployment: Vercel + multi-region CDN

🎬 Quick Start Development

Prerequisites

Node.js >= 20
pnpm 9.15.9+
Git access to repository

Development Commands

# Start development server (localhost:3017)
pnpm dev

# Build all packages
pnpm build

# Run quality checks
pnpm lint
pnpm format

# Add UI components
pnpm ui:add <component-name>

# TypeScript compilation check
npx tsc --noEmit --project apps/homepage/tsconfig.json

Bookmarklet Installation

Save any webpage to your homepage.dev dashboard with one click using the bookmarklet:

Development (localhost:3017):

Visit: http://localhost:3017/tools/bookmarklet
Drag the "Add to homepage.dev" button to your bookmarks bar
Click the bookmarklet on any webpage to save it

Production (homepage.dev):

Visit: https://homepage.dev/tools/bookmarklet
Drag the "Add to homepage.dev" button to your bookmarks bar
Click the bookmarklet on any webpage to save it

The bookmarklet automatically detects whether you're running locally or in production and uses the correct URL.

Project Structure

homepage-dev/
├── apps/
│   └── homepage/                    # Main Next.js application (port 3017)
├── packages/
│   ├── landing-page-template/       # Shared landing page components
│   ├── ui/                         # ShadCN UI component library
│   └── typescript-config/          # Shared TypeScript configurations
├── docs/                           # Comprehensive documentation
└── convex-projects/                # Coming soon: Convex deployments
    ├── homepage-auth/              # User & organization management
    ├── homepage-core/              # Real-time collaboration engine
    └── homepage-marketplace/       # Module registry & SDK