Never lose an important tab again! Miracle's TabVault helps you save, organize, and find your important browser tabs quickly. Perfect for researchers, developers, and anyone who works with many tabs.
This project was built using "Vibe Coding" - a collaborative approach between human creativity and AI assistance. I used GitHub Copilot (Claude) to help design, implement, and debug this complete tab management system.
Vibe Coding is about describing what you want to build in natural language and collaborating with AI to bring it to life. Instead of writing every line of code manually, you:
- Describe the problem you're trying to solve
- Iterate with AI on the solution design
- Guide the implementation with your domain knowledge
- Refine and test together
- 🚀 Faster Development - Built a complete full-stack app with browser extension in hours, not weeks
- 🎯 Focus on Problem-Solving - Spend time on what matters: solving real problems
- 📚 Learn While Building - AI explains concepts as it implements them
- 🔧 Production-Ready Code - TypeScript, proper error handling, best practices
My Daily Problem: I constantly lose important tabs. I needed a way to save, organize, and sync tabs across Chrome and Edge. Instead of searching for an app, I built one with AI assistance!
- Save any URL with title and category
- Pin important tabs for quick access
- Organize with categories - Research, Work, Reading Later, Reference, Important
- Create custom categories with colors and icons
- Instant search across titles and URLs
- Filter by category to focus on specific topics
- Filter pinned tabs separately
- Sort options - Newest, Oldest, Alphabetical, Most Visited
- Keyboard shortcut (Ctrl+K) for quick search
- Sync between Chrome and Edge - tabs saved from one browser appear in the other
- Local sync server - your data stays on YOUR computer, no cloud required
- Automatic polling - updates every 5 seconds
- Manual refresh - click sync button to refresh immediately
- Offline fallback - works locally if sync server is offline
- One-click save - save current tab instantly from extension popup
- Save all tabs - save every open tab at once
- Import from browser history - browse and import from browser history (1 hour, today, or week)
- Category selection - choose category when saving
- Works on Chrome & Edge - same extension works on both browsers
- Install as desktop app - get a desktop icon for quick access
- Works offline - access your saved tabs anytime
- Dark mode support with automatic detection
- Responsive design - works on desktop, tablet, and mobile
- Grid or List view to suit your preference
- Smooth animations for a polished experience
- Save current state as named sessions
- Restore sessions anytime with one click
- Track visit counts to see your most used resources
- Export all data as JSON for backup
- Import data to restore or migrate
- Bulk import - paste multiple URLs at once
# 1. Clone the repository
git clone https://github.com/LasseyMiracle/tabvault.git
cd tabvault
# 2. Install web app dependencies
npm install
# 3. Install sync server dependencies
cd sync-server
npm install
cd ..
# 4. Start TabVault (Windows - double-click or run):
start-tabvault.bat
# This will:
# - Start the sync server (background)
# - Start the web app (background)
# - Open your browser automatically!Pro Tip: Create a desktop shortcut to start-tabvault.bat for one-click access!
- Open Chrome:
chrome://extensionsor Edge:edge://extensions - Enable "Developer mode" (toggle in top right)
- Click "Load unpacked"
- Select the
extensionfolder from this project - Pin the extension to your toolbar for easy access!
Visit http://localhost:5173 in your browser.
From the Web App:
- Click the "+ Add Tab" button
- Enter the URL and title
- Select a category
- Click "Add Tab"
From the Browser Extension:
- Click the TabVault extension icon
- The current tab URL and title are auto-filled
- Select a category
- Click "Save Current Tab"
Save All Open Tabs:
- Click extension icon
- Switch to "All Tabs" tab
- Select tabs to save (or select all)
- Click "Save Selected Tabs"
Import from Browser History:
- Click extension icon
- Switch to "History" tab
- Filter by time (1 hour, today, week)
- Select items and save
- Click a category in the sidebar to filter
- Click "Pinned" to see only pinned tabs
- Use the search bar to find tabs by title or URL
- Change view between Grid and List modes
Make sure both servers are running:
start-tabvault.batNow any tab saved from Chrome will appear in Edge automatically (and vice versa)!
- ✅ No cloud storage - all data stays on YOUR computer
- ✅ No accounts - no sign-up or login required
- ✅ No tracking - no analytics or telemetry
- ✅ No external servers - sync server runs locally on your machine
- ✅ Open source - review the code yourself
- ✅ Your tabs are never shared - the data file is excluded from git
| Location | Purpose |
|---|---|
| Browser localStorage | Stores tabs, categories, preferences |
sync-server/tabvault-data.json |
Sync data between browsers (local file, auto-created) |
Note: The
tabvault-data.jsonfile is automatically created when you first save a tab. It's excluded from git (.gitignore), so your personal tabs are never uploaded to GitHub.
The app is designed to never lose your data:
- Empty protection - The app won't overwrite server data with empty local storage
- Dual storage - Tabs are saved in both browser localStorage AND the sync server file
- Backup tip - For extra safety, occasionally copy
sync-server/tabvault-data.jsonto a backup location
| Permission | Purpose |
|---|---|
tabs |
Read current tab URL and title |
activeTab |
Access active tab when saving |
storage |
Store extension preferences |
history |
Import tabs from browser history |
| Technology | Purpose |
|---|---|
| React 19 | UI Library |
| TypeScript 5.9 | Type Safety |
| Vite 7 | Build Tool |
| Tailwind CSS 4 | Styling |
| Lucide React | Icons |
| Express.js | Sync Server |
| PWA | Desktop Installation |
tabvault/
├── src/ # React application source
│ ├── components/ # UI components
│ ├── context/ # React context (state management)
│ ├── hooks/ # Custom React hooks
│ ├── services/ # Sync service
│ └── types/ # TypeScript types
├── extension/ # Browser extension
│ ├── manifest.json # Extension config
│ ├── popup.html/js # Extension popup
│ └── icons/ # Extension icons
├── sync-server/ # Local sync server
│ ├── server.js # Express server
│ └── package.json # Server dependencies
├── public/ # Static assets
└── start-tabvault.bat # Windows startup script
- 📚 Researchers - Save and organize research papers and references
- 💻 Developers - Keep track of documentation and tutorials
- 📰 Content Curators - Collect articles to read later
- 🎓 Students - Organize study materials by subject
- 💼 Professionals - Manage work-related resources
Contributions are welcome! This project demonstrates what's possible with AI-assisted development. Feel free to:
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
You are free to:
- ✅ Use commercially
- ✅ Modify
- ✅ Distribute
- ✅ Use privately
- GitHub Copilot - AI pair programming
- Lucide - Beautiful icons
- Tailwind CSS - Utility-first CSS
- Vite - Fast build tool
- GitHub: @LasseyMiracle
- LinkedIn: Miracle Kwabla Lassey
Built with ❤️ and 🤖 AI by Miracle Kwabla Lassey
⭐ Star this repo if you find it helpful!