PicImpact 是一个支持自部署的摄影作品展示网站，基于 Next.js + Hono.js 开发。
- 瀑布流相册展示图片，支持实况照片(Live Photos)，基于 LivePhotosKit JS 开发。
- 基于 WebGL 的高性能图片查看器，支持流畅的缩放和平移，采用图片分块（Tiling）和 LOD 技术优化大图加载性能。
- 支持地图模组标记图片，根据图片经纬度标记在地图上。
- 点击图片查看原图，浏览图片信息和 EXIF 信息，支持直链访问。
- 响应式设计，在 PC 和移动端都有不错的体验，支持暗黑模式。
- 图片存储兼容 S3 API、Cloudflare R2、Open List API。
- 图片支持绑定标签，并且可通过标签进行交互，筛选标签下所有图片。
- 支持输出 RSS，可以使用 Follow 订阅，并支持订阅源所有权验证。
- 支持批量自动化上传，上传图片时会生成 0.3 倍率的压缩图片，以提供加载优化。
- 后台有图片数据统计、图片上传、图片维护、相册管理、系统设置和存储配置功能。
- 双因素认证功能，基于 TOTP 算法 RFC 6238，支持 Google Authenticator、Microsoft Authenticator 和 1Password 等。
- Passkey 无密码登录功能，基于 WebAuthn 标准，支持生物识别（指纹、面容等）和硬件安全密钥登录。
- 基于 SSR 的混合渲染，采用状态机制，提供良好的使用体验。
- 基于 Prisma 的自动初始化数据库和数据迁移，简化部署流程。
- 支持 Vercel 部署、Node.js 部署、Docker 等容器化部署，当然 k8s 也支持。
你可以点击下面的按钮来一键部署到 Vercel，然后将 Build Command 设置为 pnpm run build:vercel，也可以 Fork 项目后手动部署到任何支持的平台。
我们推荐当新版本发布时您再进行版本更新！
| Key | 备注 |
|---|---|
| DATABASE_URL | PostgreSQL 连接字符串，如使用 Supabase：postgres://postgres.[project]:[password]@aws-0-[region].pooler.supabase.com:6543/postgres?pgbouncer=true |
| DIRECT_URL | 用于 prisma migrate 的直连地址，非 serverless 数据库与 DATABASE_URL 保持一致即可 |
| BETTER_AUTH_SECRET | 权限机密，执行 npx auth secret 生成随机字符串 |
| BETTER_AUTH_URL | 访问地址，如：https://example.com |
| BETTER_AUTH_PASSKEY_RP_ID | Passkey 依赖方标识符，填写您的域名，如：example.com |
| BETTER_AUTH_PASSKEY_RP_NAME | Passkey 依赖方名称，如：PicImpact |
Vercel 部署将
Build Command设置为pnpm run build:vercel，Node.js 自行部署使用pnpm run build:node。Passkey 功能依赖 HTTPS 环境（本地开发可使用 localhost）。
更多详细配置请查阅文档。
git clone https://github.com/besscroft/PicImpact.git
pnpm i
pnpm run dev| 类别 | 技术 |
|---|---|
| Web 框架 | Next.js + Hono.js |
| UI | Radix + shadcn/ui |
| 数据库 | PostgreSQL + Prisma |
| 认证 | better-auth (Email/Password, TOTP, WebAuthn) |
| 图片渲染 | WebGL 查看器（基于 Afilmory） |
PicImpact is a self-deployable photography portfolio website built with Next.js + Hono.js.
- Masonry gallery layout with Live Photos support via LivePhotosKit JS.
- High-performance WebGL image viewer with smooth zoom/pan, tiling, and LOD optimization.
- Map module for geotagging photos based on EXIF coordinates.
- Full-resolution image preview with EXIF metadata and direct link access.
- Responsive design with dark mode support for both desktop and mobile.
- Storage compatible with S3 API, Cloudflare R2, and Open List API.
- Tag-based image organization with interactive tag filtering.
- RSS feed output with Follow subscription and ownership verification.
- Batch upload with automatic 0.3x compressed preview generation.
- Admin dashboard: statistics, upload, image management, album management, settings, and storage config.
- Two-factor authentication via TOTP (RFC 6238), supporting Google Authenticator, Microsoft Authenticator, 1Password, etc.
- Passkey passwordless login via WebAuthn standard (biometrics, hardware keys).
- SSR-based hybrid rendering with state management for optimal UX.
- Automatic database initialization and migration via Prisma.
- Deployable on Vercel, Node.js, Docker, and Kubernetes.
Click the button below to deploy to Vercel. Set Build Command to pnpm run build:vercel.
| Key | Description |
|---|---|
| DATABASE_URL | PostgreSQL connection string |
| DIRECT_URL | Direct connection for prisma migrate (same as DATABASE_URL for non-serverless) |
| BETTER_AUTH_SECRET | Auth secret, generate with npx auth secret |
| BETTER_AUTH_URL | App URL, e.g., https://example.com |
| BETTER_AUTH_PASSKEY_RP_ID | Passkey relying party ID (your domain, e.g., example.com) |
| BETTER_AUTH_PASSKEY_RP_NAME | Passkey relying party name (e.g., PicImpact) |
For more details, see the documentation.
git clone https://github.com/besscroft/PicImpact.git
pnpm i
pnpm run dev| Category | Technology |
|---|---|
| Web Framework | Next.js + Hono.js |
| UI | Radix + shadcn/ui |
| Database | PostgreSQL + Prisma |
| Auth | better-auth (Email/Password, TOTP, WebAuthn) |
| Image Rendering | WebGL Viewer (based on Afilmory) |
PicImpact は、Next.js + Hono.js で構築されたセルフデプロイ可能な写真ポートフォリオサイトです。
- マソンリーレイアウトのギャラリー。ライブフォト(Live Photos) に対応（LivePhotosKit JS ベース）。
- WebGL ベースの高性能画像ビューア。スムーズなズーム・パン操作、タイリングと LOD による大画像の最適化。
- 地図モジュールで EXIF の座標情報に基づいて写真をマッピング。
- 画像クリックで原寸表示、EXIF メタデータの閲覧、ダイレクトリンクに対応。
- レスポンシブデザイン、ダークモード対応（PC・モバイル両対応）。
- S3 API、Cloudflare R2、Open List API に対応したストレージ。
- タグベースの画像整理とインタラクティブなタグフィルタリング。
- RSS フィード出力、Follow による購読と所有権検証に対応。
- バッチアップロード、0.3 倍率の圧縮プレビュー自動生成。
- 管理画面：統計、アップロード、画像管理、アルバム管理、設定、ストレージ設定。
- TOTP 二要素認証（RFC 6238）、Google Authenticator / Microsoft Authenticator / 1Password 等に対応。
- WebAuthn 標準による Passkey パスワードレスログイン（生体認証、ハードウェアキー）。
- SSR ベースのハイブリッドレンダリング。
- Prisma によるデータベースの自動初期化とマイグレーション。
- Vercel、Node.js、Docker、Kubernetes でのデプロイに対応。
以下のボタンで Vercel にデプロイできます。Build Command を pnpm run build:vercel に設定してください。
| Key | 説明 |
|---|---|
| DATABASE_URL | PostgreSQL 接続文字列 |
| DIRECT_URL | prisma migrate 用の直接接続（サーバーレスでなければ DATABASE_URL と同じ） |
| BETTER_AUTH_SECRET | 認証シークレット、npx auth secret で生成 |
| BETTER_AUTH_URL | アプリの URL、例：https://example.com |
| BETTER_AUTH_PASSKEY_RP_ID | Passkey の RP ID（ドメイン名、例：example.com） |
| BETTER_AUTH_PASSKEY_RP_NAME | Passkey の RP 名（例：PicImpact） |
詳細はドキュメントをご覧ください。
git clone https://github.com/besscroft/PicImpact.git
pnpm i
pnpm run dev| カテゴリ | 技術 |
|---|---|
| Web フレームワーク | Next.js + Hono.js |
| UI | Radix + shadcn/ui |
| データベース | PostgreSQL + Prisma |
| 認証 | better-auth (Email/Password, TOTP, WebAuthn) |
| 画像レンダリング | WebGL ビューア（Afilmory ベース） |
New Ideas & Bug Reports | Fork & Pull Request
PicImpact welcomes all contributions including improvements, new features, documentation, and bug reports.
- Last 2 versions of Chrome, Firefox, Safari and Edge
- Firefox ESR
Based on WAI-ARIA standards.
This project uses JetBrains open source license, developed with IntelliJ IDEA.
WebGL image viewer based on Afilmory webgl-viewer module (MIT License).
PicImpact is open source software licensed as MIT.