A full-featured Google Search Console analytics dashboard built with Next.js and a Flask backend. Provides traffic analysis, keyword insights, URL inspection, sitemap management, and AI-powered analysis.
- Daily clicks, impressions, CTR, and average position charts
- Query, page, and country breakdowns with sortable/filterable tables
- Device filtering (desktop, mobile, tablet)
- Date range presets (7 days to 16 months)
- CSV export for daily data and query data
- Google Algorithm Update annotations on charts (toggle on/off)
- AI-powered daily and query insights via OpenAI
- Multi-site comparison dashboard
- Up to 6 sites displayed simultaneously
- Configurable time period and device filters
- Scatter plot correlation matrix for clicks, impressions, CTR, and position
- Visual analysis of metric relationships across queries
- Compare keyword and URL performance between two dates
- Top 20 winners (growth in clicks) and top 20 losers (decline in clicks)
- Horizontal bar chart showing keyword contribution to click change
- Date range presets: 30 days, 3 months, 6 months, 9 months, 12 months, custom
- Accounts for 3-day GSC API data lag
- Inspect any URL's index status in Google Search Console
- View coverage state, crawl details, mobile usability, and rich results
- List all sitemaps for a site
- Submit new sitemaps
- Delete existing sitemaps
- View sitemap details and URL counts
- Configure Google Search Console credentials path
- Authorize GSC API access
- Set OpenAI API key for AI insights
- Select up to 6 sites for the overview dashboard
See a multi-site summary at a glance with key metrics and trend charts for each selected property.
Analyze daily clicks, impressions, CTR, and average position with filters, tables, and algorithm update annotations.
Visualize how GSC metrics relate to each other through pairwise charts and quick correlation insights.
Identify top keyword winners and losers between two dates, including contribution-to-change visualization.
Inspect a specific URL to view indexing status, crawl details, mobile usability, and rich result data.
Manage sitemaps by listing, submitting, refreshing, reviewing details, and deleting entries for a selected site.
Configure API credentials, authorize Search Console access, and control overview site selections.
- Next.js 15 with App Router and TypeScript
- Tailwind CSS for styling
- Chart.js with annotation plugin for charting
- Radix UI for accessible UI primitives
- TanStack Table for data tables
- React Markdown for rendering AI insights
- FontAwesome for icons
- Flask with CORS support
- Google API Python Client for GSC API access
- OpenAI for AI-powered insights
- Pandas for data processing
- Node.js 18+
- Python 3.10+
- Google Search Console API credentials (
client_secret.json)
cd gsc-dashboard
npm installpython3 -m venv venv
source venv/bin/activate
pip install -r backend_requirements.txt- Go to the Settings page in the dashboard
- Set the path to your Google Search Console
client_secret.jsonfile - Click Authorize Credentials
- (Optional) Set your OpenAI API key for AI insights
source venv/bin/activate
python3 backend_api.pyThe backend runs on http://localhost:5001.
npm run devThe frontend runs on http://localhost:3000.
gsc-dashboard/
├── src/
│ ├── app/ # Next.js pages
│ │ ├── page.tsx # Traffic Performance (main dashboard)
│ │ ├── layout.tsx # Root layout with sidebar
│ │ ├── overview/ # Sites Overview
│ │ ├── performance/ # Correlation Matrix
│ │ ├── traffic-insights/ # Winners & Losers
│ │ ├── url-inspection/ # URL Inspection
│ │ ├── sitemap/ # Sitemap Management
│ │ └── settings/ # Settings
│ ├── components/
│ │ ├── dashboard/ # Dashboard-specific components
│ │ ├── layout/ # Sidebar, Header, AuthBanner
│ │ └── ui/ # Reusable UI components
│ └── contexts/
│ └── DataContext.tsx # Global state management
├── backend_api.py # Flask backend API
├── backend_requirements.txt # Python dependencies
├── dashboard_config.json # App configuration (auto-generated)
├── package.json # Node.js dependencies
└── README.md
| Method | Endpoint | Description |
|---|---|---|
| GET | /api/status |
Backend status and GSC connection info |
| GET | /api/sites |
List verified GSC sites |
| GET | /api/data |
Fetch GSC analytics data |
| GET | /api/top-queries |
Get top performing queries |
| GET | /api/settings |
Get current settings |
| POST | /api/settings |
Save settings |
| POST | /api/authorize |
Authorize GSC credentials |
| POST | /api/settings/clear |
Clear all credentials |
| POST | /api/insights/daily |
Generate AI insights for daily data |
| POST | /api/insights/queries |
Generate AI insights for query data |
| POST | /api/url-inspect |
Inspect a URL via GSC API |
| GET | /api/sitemaps |
List sitemaps for a site |
| GET | /api/sitemaps/get |
Get sitemap details |
| POST | /api/sitemaps/submit |
Submit a new sitemap |
| POST | /api/sitemaps/delete |
Delete a sitemap |
The app stores configuration in dashboard_config.json:
{
"openaiApiKey": "",
"credentialsPath": "/path/to/client_secret.json",
"isAuthorized": false,
"overviewSites": []
}The dashboard includes Google algorithm update dates (2024-2025) that can be displayed as annotations on the traffic chart:
- December 2025 core update
- August 2025 spam update
- June 2025 core update
- March 2025 core update
- December 2024 spam update
- December 2024 core update
- November 2024 core update
Toggle annotations on/off using the "Show Algorithm Updates" button on the chart.
This project is for personal/internal use.