| ← Back to README | Documentation Index | Quick Start Auth | API Docs |
This is a self-hosted web analytics dashboard designed with privacy in mind. Developers can use this to collect and view analytics data from their websites without relying on third-party services like Google Analytics.
# Clone the repository
git clone https://github.com/Maneesh-Relanto/Privacy-Focused-Web-Analytics-Dashboard.git
cd Privacy-Focused-Web-Analytics-Dashboard
# Install dependencies
pnpm install
# Setup database
npx prisma migrate dev
# Start dev server
pnpm run dev
The app will be available at http://localhost:8080
Navigate to: http://localhost:8080/dashboard
Register a new account:
curl -X POST http://localhost:3000/api/v1/auth/register \
-H "Content-Type: application/json" \
-d '{
"email": "yourname@example.com",
"password": "securePassword123"
}'
Response:
{
"userId": "user123",
"email": "yourname@example.com",
"apiKey": "pk_live_abc123def456...",
"createdAt": "2024-01-28T20:00:00Z"
}
curl -X POST http://localhost:3000/api/v1/auth/login \
-H "Content-Type: application/json" \
-d '{
"email": "yourname@example.com",
"password": "securePassword123"
}'
Response:
{
"accessToken": "eyJhbGciOiJIUzI1NiIs...",
"userId": "user123"
}
Save this accessToken - you’ll use it for authenticated requests.
Register the website you want to track analytics for:
curl -X POST http://localhost:3000/api/v1/websites \
-H "Content-Type: application/json" \
-H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
-d '{
"name": "My Awesome Website",
"domain": "example.com",
"description": "My personal blog and portfolio"
}'
Response:
{
"id": "web_123",
"userId": "user123",
"name": "My Awesome Website",
"domain": "example.com",
"description": "My personal blog and portfolio",
"trackingCode": "pm-abc123-1704067200000",
"createdAt": "2024-01-28T20:00:00Z"
}
Save the trackingCode - this identifies your website in the system.
curl http://localhost:3000/api/v1/websites \
-H "Authorization: Bearer YOUR_ACCESS_TOKEN"
Response:
{
"websites": [
{
"id": "web_123",
"name": "My Awesome Website",
"domain": "example.com",
"trackingCode": "pm-abc123-1704067200000",
"createdAt": "2024-01-28T20:00:00Z"
}
]
}
Navigate to http://localhost:8080/dashboard and log in with your credentials.
The dashboard shows:
POST/api/v1/auth/register{
"email": "user@example.com",
"password": "password123"
}
apiKey and accessTokenPOST/api/v1/auth/login{
"email": "user@example.com",
"password": "password123"
}
{ accessToken, userId }GET/api/v1/auth/meAuthorization: Bearer ACCESS_TOKENPOST/api/v1/websitesAuthorization: Bearer ACCESS_TOKEN{
"name": "Website Name",
"domain": "example.com",
"description": "Website description (optional)"
}
trackingCodeGET/api/v1/websitesAuthorization: Bearer ACCESS_TOKENGET/api/v1/websites/{websiteId}Authorization: Bearer ACCESS_TOKENPUT/api/v1/websites/{websiteId}Authorization: Bearer ACCESS_TOKEN{
"name": "Updated Name",
"description": "Updated description"
}
DELETE/api/v1/websites/{websiteId}Authorization: Bearer ACCESS_TOKEN{ message: "Website deleted successfully" }GET/api/v1/dashboard/all?dateRange=7dAuthorization: Bearer ACCESS_TOKENdateRange (7d, 30d, 90d, 1y)GET/api/v1/dashboard/metricsAuthorization: Bearer ACCESS_TOKENGET/api/v1/dashboard/chart-dataAuthorization: Bearer ACCESS_TOKENGET/api/v1/dashboard/top-pagesAuthorization: Bearer ACCESS_TOKENGET/api/v1/dashboard/referrersAuthorization: Bearer ACCESS_TOKENGET/api/v1/dashboard/devicesAuthorization: Bearer ACCESS_TOKENGET/api/v1/dashboard/locationsAuthorization: Bearer ACCESS_TOKENhttp://localhost:8080/dashboardimport { useDashboardData } from "@/hooks/useDashboardData";
export function MyComponent() {
const { data, loading, error } = useDashboardData("7d");
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error}</div>;
return (
<div>
<p>Page Views: {data?.metrics?.pageViews}</p>
<p>Visitors: {data?.metrics?.visitors}</p>
</div>
);
}
.
├── client/ # Frontend React app
│ ├── pages/ # Page components
│ │ ├── Index.tsx # Landing page
│ │ └── Dashboard.tsx # Analytics dashboard
│ ├── components/ # Reusable components
│ ├── hooks/ # Custom React hooks
│ └── App.tsx # Main app component
├── server/ # Backend Express server
│ ├── routes/ # API route handlers
│ │ ├── auth.ts # Authentication endpoints
│ │ ├── dashboard.ts # Dashboard data endpoints
│ │ └── websites.ts # Website management endpoints
│ └── schemas/ # Zod validation schemas
├── shared/ # Shared types and utilities
├── prisma/ # Database schema
└── index.html # HTML entry point
Create a .env file in the root directory:
# Database (SQLite by default)
DATABASE_URL="file:./dev.db"
# Server
PORT=3000
# JWT Secret (change this to a strong random value in production)
JWT_SECRET="your-super-secret-key-change-in-production"
# Build both client and server
pnpm run build
# Or build client only (for GitHub Pages)
pnpm run build:pages
Build the client:
pnpm run build:pages
main branch and /docs foldergit add dist/spa -f
git commit -m "Deploy landing page"
git push origin main
Your landing page will be available at: https://maneesh-relanto.github.io/Privacy-Focused-Web-Analytics-Dashboard/
To make this fully functional, developers need to implement:
POST /api/v1/events endpoint to receive tracking data# Change the port in .env
PORT=3001
# Reset the database
npx prisma migrate reset
# Or seed with initial data (if available)
npx prisma db seed
Authorization: Bearer TOKEN headerFor issues, questions, or feature requests, refer to the project repository or documentation files in the docs/ directory.