History Visualizer

🎨 Vibecoded - Built with passion and good vibes

A beautiful, privacy-focused dashboard to visualize your Chrome browsing history. Transform your Google Takeout data into insightful charts and analytics.

Features

• 📊 Comprehensive Analytics: View total visits, unique sites, pages, and date ranges
• 📈 Interactive Charts:
  • Most visited sites
  • Category breakdown
  • Hourly, monthly, and daily activity patterns
  • Productivity vs Entertainment ratio
  • Site loyalty tracking
  • Top pages and search queries
  • Category trends over time
• 🔍 Advanced Filtering:
  • Search across sites and pages
  • Filter by category
  • Hide/show localhost URLs
  • Sort by visits, name, or recency
• 🎨 Beautiful UI: Modern dark theme with smooth animations
• 🔒 Privacy First: All data stays local, never uploaded to any server
• ⚡ Fast Performance: Optimized SQLite backend with efficient queries

Screenshots

Dashboard Overview

Main dashboard with statistics and key metrics

Analytics & Charts

Most visited sites and category breakdown visualizations

Productivity ratio, site loyalty, top pages, and category trends

Detailed Views

Browse all unique sites with search and filtering

View all visited pages with category filtering

Prerequisites

• Node.js (v18 or higher) - Download
• Python (v3.12 or higher) - Download
• Google Takeout - Export your Chrome history as JSON

Installation

1. Clone the Repository

git clone <repository-url>
cd history-visualizer

2. Install Frontend Dependencies

npm install

3. Set Up Backend

cd backend

# Create virtual environment
python3 -m venv venv

# Activate virtual environment
# On macOS/Linux:
source venv/bin/activate
# On Windows:
# venv\Scripts\activate

# Install Python dependencies
pip install -r requirements.txt

Running the Application

Start the Backend Server

cd backend
source venv/bin/activate  # On Windows: venv\Scripts\activate
python main.py

The backend will start on http://localhost:8000

Start the Frontend Development Server

In a new terminal window:

npm run dev

The frontend will start on http://localhost:5173

Open your browser and navigate to http://localhost:5173

Getting Your Chrome History

Using Google Takeout

1. Go to takeout.google.com
2. Select only "Chrome" → "BrowserHistory.json"
3. Click "Next step" and choose your export format
4. Click "Create export"
5. Once ready, download and extract the ZIP file
6. Upload the BrowserHistory.json file in the app

Usage

1. Upload Your Data: Click "Upload New" or drag & drop your BrowserHistory.json file
2. Explore Dashboard: View your browsing statistics and charts
3. Filter Data:
   • Use the "Hide Localhost" toggle to exclude local development URLs
   • Search for specific sites or pages
   • Filter pages by category
4. Navigate Pages:
   • Click "View All" on stat cards to see detailed lists
   • Click on any site to see its detailed analytics
   • Use the category filter on the "All Pages" page

Project Structure

history-visualizer/
├── backend/
│   ├── main.py              # FastAPI server
│   ├── database.py          # SQLite database operations
│   └── requirements.txt     # Python dependencies
├── src/
│   ├── components/          # React components
│   ├── utils/               # Utility functions
│   ├── App.jsx              # Main app component
│   └── main.jsx             # Entry point
├── data/
│   └── history.db           # SQLite database (created automatically)
└── package.json             # Node.js dependencies

API Endpoints

The backend provides the following REST API endpoints:

• GET /api/health - Health check
• GET /api/stats - Overall statistics
• GET /api/top-sites - Top visited sites
• GET /api/categories - Category breakdown
• GET /api/sites - List all sites (paginated)
• GET /api/pages - List all pages (paginated)
• GET /api/sites/{domain} - Site details
• GET /api/charts/hourly - Hourly activity
• GET /api/charts/monthly - Monthly activity
• GET /api/charts/daily - Day of week activity
• GET /api/search-queries - Top search queries
• POST /api/upload - Upload history file
• DELETE /api/data - Clear all data

Building for Production

Frontend

npm run build

The built files will be in the dist/ directory.

Backend

The backend can be run in production using:

cd backend
source venv/bin/activate
uvicorn main:app --host 0.0.0.0 --port 8000

Technologies Used

Frontend

• React - UI framework
• Vite - Build tool
• Tailwind CSS - Styling
• Recharts - Chart library
• React Router - Routing
• Lucide React - Icons

Backend

• FastAPI - Web framework
• SQLite - Database
• Uvicorn - ASGI server

Privacy

🔒 Your data never leaves your machine!

• All processing happens locally
• Database is stored on your computer
• No external API calls (except favicon fetching)
• No analytics or tracking

Troubleshooting

Backend won't start

• Make sure Python 3.8+ is installed
• Verify virtual environment is activated
• Check if port 8000 is already in use

Frontend won't start

• Make sure Node.js 18+ is installed
• Run npm install to ensure all dependencies are installed
• Check if port 5173 is already in use

Data not loading

• Verify the backend is running on port 8000
• Check browser console for errors
• Ensure the uploaded JSON file is valid

Database errors

• Delete data/history.db and re-upload your file
• Check file permissions on the data/ directory

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

For issues or questions, please open an issue on the repository.

---

Built with ❤️ using React, FastAPI & SQLite