- Introduction
- Key Features
- Tech Stack
- Getting Started
- Architecture
- Deployment
- Database Setup
- Roadmap
- Contributing
- License
Tomato Tabs is not just another browser start page. It is a modern, highly customizable, and visually stunning personal dashboard designed to make your daily web navigation a delight.
Built with performance and aesthetics in mind, it combines robust bookmark management with a beautiful interface that adapts to your style. Whether you need a productivity hub with Notion integration or a serene space with daily changing wallpapers and poetry, Tomato Tabs adapts to you.
Experience a workspace that breathes.
- Dynamic Wallpapers - Starts your day with a fresh, high-res background from Bing.
- Parallax Effects - Interactive depth that responds to your mouse movement.
- Glassmorphism - Modern frosted glass aesthetics with customizable transparency.
- Theme Engine - Seamless toggling between Light and Dark modes.
- Responsive - Flawless experience on desktop, tablet, and mobile.
Everything you need, right where you need it.
- Smart Bookmarks - Drag & drop organization with auto-fetched icons.
- Cloud Sync - Never lose your setup. Syncs across devices via Supabase.
- Efficiency - Global search bar to find bookmarks or search the web instantly.
- Offline Ready - Full PWA support—install it as a native app.
- Privacy First - Your data is yours. Secure authentication and storage.
More than just links.
- Notion Workspace - Connect your Notion databases for a seamless workflow.
- Daily Poetry - A touch of culture with random Chinese poetry generation.
- Time & Date - Elegant clock widget to keep you on track.
- Todo List - Built-in task management to capture ideas quickly.
Speed as a feature.
- Blazing Fast - Powered by Vite and React for instant load times.
- Smart Caching - Multi-layer caching strategy (Memory + IndexedDB).
- Edge Computing - Supabase Edge Functions for low-latency backend operations.
This project leverages the latest web technologies to ensure scalability, maintainability, and top-tier performance.
| Category | Technologies |
|---|---|
| Frontend |     |
| State |    |
| Backend |    |
| UX & Motion |    |
| Tools |    |
Ready to build your own gateway? Follow these simple steps.
- Node.js >= 18.0.0
- pnpm >= 8.0.0 (Recommended) or npm
-
Clone the repository
git clone https://github.com/jiangjianghong/tomato-tab.git cd tomato-tab -
Install dependencies
pnpm install
-
Configure Environment Copy the example env file and fill in your Supabase credentials.
cp .env.example .env
-
Start Development
pnpm dev
Open http://localhost:3000 to view it in the browser.
This project includes a built-in GitHub Action that automatically builds and deploys to GitHub Pages when you push to the main branch.
1. Fork & Settings
- Fork this repository.
- Go to Settings > Pages.
- Under Build and deployment > Source, select GitHub Actions.
2. Configure Secrets (Critical!) To ensure the build can access your Supabase project, you must set up Repository Secrets.
- Go to Settings > Secrets and variables > Actions.
- Click New repository secret.
- Add the following two secrets (values from your Supabase Project Settings):
VITE_SUPABASE_URLVITE_SUPABASE_ANON_KEY
3. Trigger Deployment
- Push a commit to
main, or manually run the workflow via the Actions tab.
⚠️ Note on Base Path: The default configuration assumes a Custom Domain (e.g.,your-site.com) or Root Domain. If you are deploying to a sub-path (e.g.,username.github.io/repo-name), you must:
- Open
vite.config.ts.- Change
base: '/'tobase: '/repo-name/'.
Vercel provides zero-configuration deployment for Vite apps.
- Import Project: Go to Vercel Dashboard and "Add New > Project".
- Select Repo: Choose your forked repository.
- Environment Variables: Add the Supabase keys:
VITE_SUPABASE_URLVITE_SUPABASE_ANON_KEY
- Deploy: Click Deploy. Vercel handles the rest (rewrites, HTTPS, etc.).
This project relies on Supabase for Auth & Database.
1️⃣ SQL Schema Setup (One-Click)
We provide a unified deployment script that sets up all tables (profiles, settings, websites, stats, announcements, admin), security policies, and storage buckets automatically.
- Copy the content of supabase_deploy.sql.
- Paste it into your Supabase SQL Editor.
- Click Run.
That's it! Your database is fully configured.
2️⃣ Admin Setup (Optional)
To enable the admin dashboard:
1. Set Admin Role in Database
In Supabase SQL Editor, run:
UPDATE user_profiles SET role = 'super_admin' WHERE email = 'your-admin@example.com';Roles: user (default), admin, super_admin. Admin access is determined entirely by this column — no frontend configuration is required.
2. Access Admin Dashboard
After logging in with your admin account, visit /admin.
Admin Dashboard Features:
- 📊 Dashboard - Data visualization (line/bar charts)
- 👥 User Management - User list, details, ban/unban
- 📈 Analytics - Activity distribution, role distribution, popular searches
- ⚡ Realtime - Online users, Realtime subscription
- 📢 Announcements - Create, edit, delete announcements
- 📋 Logs - Admin action audit logs
- ⚙️ System - API health checks, response times
⚠️ Privacy: Admins can only view aggregate statistics, not users' personal data like website lists.
3️⃣ Edge Functions
Deploy the provided Edge Functions for advanced features:
supabase functions deploy favicon-service --no-verify-jwt
supabase functions deploy wallpaper-service --no-verify-jwt
supabase functions deploy notion-proxy --no-verify-jwtThe project follows a clean, modular structure designed for scalability.
graph TD
User([User]) -->|HTTPS| CDN[CDN / Edge]
CDN -->|Load| UI[React SPA]
subgraph Client [Client Side]
UI -->|State Management| Context[React Context]
UI -->|Interactivity| Hooks[Custom Hooks]
UI -->|Persistence| IDB[(IndexedDB / LocalStorage)]
end
subgraph Server [Server Side]
UI -->|API Requests| Supabase[Supabase Client]
Supabase -->|Auth| Auth[Authentication]
Supabase -->|Data| DB[(PostgreSQL)]
Supabase -->|Logic| EdgeFunc[Edge Functions]
end
src/
├── 🧩 components/ # Reusable UI bricks (Atoms, Molecules)
│ ├── 🧱 common/ # Generic components (Buttons, Inputs)
│ └── ⚙️ widget/ # Complex widgets (Calendar, Weather)
├── 📦 contexts/ # Global state management (Auth, Theme)
├── 🪝 hooks/ # Custom React hooks (Logic extraction)
├── 🛠️ lib/ # Utilities & API clients
│ ├── 🔄 api/ # External API integrations
│ └── 💾 storage/ # Local storage adapters
├── 📄 pages/ # Route views (Lazy loaded)
└── 🎨 index.css # Global styles & TailwindFor a deep dive into the backend setup, check out the Database Setup Guide in the expanded documentation.
- v1.0: Initial Release with Dynamic Wallpapers & Bookmarks
- v1.1: User Auth & Cloud Sync Support
- v1.2: Notion Integration & SEO Optimization
- v2.0: Mobile Native App (React Native)
- Future: AI-powered Bookmark Categorization
- Future: Public Shareable Dashboards
See the open issues for a full list of proposed features (and known issues).
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
Please read our Contributing Guidelines for details on our code of conduct, and the process for submitting pull requests to us.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'feat: Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the Apache 2.0 License. See LICENSE for more information.