Professional View Counter

Advanced serverless analytics with enterprise-grade admin management

⚡ High Performance 🔒 Secure Admin 📊 Advanced Analytics 💰 Cost Optimized

API status: checking...

Current endpoint:

Checking domain routing...

📊 Global Statistics

Total Views

Active Projects

Unique Visitors

✨ Key Features

⚡

Ultra Fast

Optimized for minimal latency with intelligent caching and efficient database queries.

🔒

Secure Admin

Password-protected admin panel with environment-based configuration and role management.

📊

Rich Analytics

Detailed view tracking, visitor analytics, and comprehensive reporting dashboard.

💰

Cost Effective

Designed to stay within Cloudflare's free tier with optional premium features.

🌙

Dark Mode

Beautiful light and dark themes with smooth transitions and persistent user preferences.

🎯

Easy Integration

Simple one-line webhook integration with RESTful API and auto-generated badges for any project.

🚀 Live Demo

Try out the view counter with real-time updates

🎯 Quick Test

Project Name:

🎨 Badge Generator

Project:

Color:

📚 Complete Documentation

Everything you need to integrate ViewFlare into your projects

🚀 Quick Start 📖 API Reference 💡 Examples ⚙️ Configuration

🚀 Quick Start

Get your view counter running in under 2 minutes:

1. Basic Setup

// Step 1: Track a view (POST request)
fetch('https://your-domain.com/api/views/my-project', {
    method: 'POST'
})
.then(response => response.json())
.then(data => console.log('✅ View tracked!', data.totalViews));

// Step 2: Display view count (GET request)
fetch('https://your-domain.com/api/views/my-project')
.then(response => response.json())
.then(data => {
    document.getElementById('view-count').textContent = data.totalViews;
});

2. Add to Your HTML

<!-- View counter display -->
<div>
    <span>Views: </span>
    <span id="view-count">Loading...</span>
</div>

<!-- Or use a badge -->
<img src="https://your-domain.com/api/views/my-project/badge" alt="View Count" />

3. GitHub README Integration

# Add to your README.md
![Views](https://your-domain.com/api/views/my-repo/badge?color=blue&label=views)

# With custom styling
[![Project Views](https://your-domain.com/api/views/my-repo/badge?color=brightgreen&style=flat&label=project%20views)](https://your-domain.com)

🔗 Complete API Reference

📈 POST /api/views/{project-name}

Purpose: Increment view count for a project

Parameter	Type	Description	Required
`project-name`	string	Unique project identifier (alphanumeric, hyphens, underscores, max 100 chars)	✅ Yes

// Request
POST /api/views/my-awesome-project

// Response (200 OK)
{
    "success": true,
    "projectName": "my-awesome-project",
    "totalViews": 1337,
    "uniqueViews": 892,
    "timestamp": "2025-08-28T13:45:30Z"
}

📊 GET /api/views/{project-name}

Purpose: Get current statistics for a project

// Request
GET /api/views/my-awesome-project

// Response (200 OK)
{
    "success": true,
    "projectName": "my-awesome-project",
    "totalViews": 1337,
    "uniqueViews": 892,
    "description": null,
    "createdAt": "2025-08-01T10:30:00Z"
}

// Response for non-existent project (initializes automatically with 0 views)
{
    "success": true,
    "projectName": "new-project",
    "totalViews": 0,
    "uniqueViews": 0,
    "description": null,
    "createdAt": null
}

🎨 GET /api/views/{project-name}/badge

Purpose: Generate SVG badge with view count

Parameter	Type	Default	Options / Description
`color`	string	`blue`	`blue`, `green`, `red`, `orange`, `purple`, `brightgreen`, `yellow`
`label`	string	`views`	Any custom text (URL encoded)
`style`	string	`flat`	`flat`, `flat-square`, `for-the-badge`
`inc`	boolean	`false`	Set to `true` to auto-track/increment views when the badge loads

// Basic badge
GET /api/views/my-project/badge

// Custom color, label, and auto-increment view tracker enabled
GET /api/views/my-project/badge?color=brightgreen&label=downloads&inc=true

// Response: SVG image (image/svg+xml)
// Caching: Cached for 1 hour on Cloudflare Edge

💊 GET /health

Purpose: Health check endpoint

// Response (200 OK)
{
    "success": true,
    "status": "ok",
    "timestamp": "2025-08-28T13:45:30Z",
    "worker": "viewflare-api",
    "version": "2.4.0"
}

🧩 Multi-Instance Setup (No Interference)

You can replicate this project for your own domain and data, completely isolated from this instance.

# 1) Fork and Clone the repository
git clone https://github.com/Life-Experimentalist/ViewFlare.git
cd ViewFlare

# 2) Create your own Cloudflare Pages project + D1 DB
# Configure your database bindings and ID in wrangler.toml

# 3) Use your own custom domain (recommended)
# Example: counter.yourdomain.com

# 4) Keep your secrets unique
# Set ADMIN_PASSWORD, DB binding, and project endpoints

# 5) API calls auto-bind to current origin
# The client dashboard uses window.location.origin automatically

Important: Do not hardcode counter.vkrishna04.me in your fork. Use your own domain and Cloudflare project settings to keep your data isolated.

⚡ Integration Examples

🌐 JavaScript (Browser)

// Modern async/await approach
async function trackView(projectName) {
    try {
        const response = await fetch(`/api/views/${projectName}`, {
            method: 'POST'
        });
        const data = await response.json();
        if (data.success) {
            console.log(`📈 Views: ${data.totalViews}`);
            updateViewCounter(data.totalViews);
        }
    } catch (error) {
        console.error('❌ Failed to track view:', error);
    }
}

// Get and display current stats
async function displayViewCount(projectName) {
    try {
        const response = await fetch(`/api/views/${projectName}`);
        const data = await response.json();
        document.getElementById('view-count').textContent = data.totalViews.toLocaleString();
        document.getElementById('unique-count').textContent = data.uniqueViews.toLocaleString();
    } catch (error) {
        console.error('❌ Failed to load stats:', error);
    }
}

// Auto-track when page loads
document.addEventListener('DOMContentLoaded', () => {
    trackView('my-website');
    displayViewCount('my-website');
});

🚀 Node.js (Server-side)

// Using fetch (Node.js 18+)
async function trackServerView(projectName) {
    try {
        const response = await fetch(`https://your-domain.com/api/views/${projectName}`, {
            method: 'POST',
            headers: { 'User-Agent': 'YourApp/1.0.0' }
        });
        const data = await response.json();
        console.log(`✅ Tracked view for ${projectName}: ${data.totalViews} total`);
        return data;
    } catch (error) {
        console.error('❌ Tracking failed:', error);
        throw error;
    }
}

// Using Axios
const axios = require('axios');
async function getProjectStats(projectName) {
    try {
        const { data } = await axios.get(`https://your-domain.com/api/views/${projectName}`);
        return { views: data.totalViews, unique: data.uniqueViews, created: data.createdAt };
    } catch (error) {
        if (error.response?.status === 404) {
            return { views: 0, unique: 0, created: null };
        }
        throw error;
    }
}

🐍 Python

# Using requests library
import requests
from typing import Dict, Optional

class ViewCounter:
    def __init__(self, base_url: str):
        self.base_url = base_url.rstrip('/')

    def track_view(self, project_name: str) -> Dict:
        """Track a view for the given project."""
        url = f"{self.base_url}/api/views/{project_name}"
        try:
            response = requests.post(url, timeout=5)
            response.raise_for_status()
            return response.json()
        except requests.RequestException as e:
            print(f"❌ Failed to track view: {e}")
            return {"success": False, "error": str(e)}

    def get_stats(self, project_name: str) -> Dict:
        """Get current statistics for a project."""
        url = f"{self.base_url}/api/views/{project_name}"
        try:
            response = requests.get(url, timeout=5)
            response.raise_for_status()
            return response.json()
        except requests.RequestException as e:
            print(f"❌ Failed to get stats: {e}")
            return {"success": False, "error": str(e)}

# Usage
counter = ViewCounter("https://your-domain.com")
result = counter.track_view("my-python-project")
if result.get("success"):
    print(f"📈 Total views: {result['totalViews']}")

🦀 Rust

// Add to Cargo.toml: reqwest = { version = "0.11", features = ["json"] }
use reqwest;
use serde::{Deserialize, Serialize};

#[derive(Debug, Deserialize)]
struct ViewResponse {
    success: bool,
    #[serde(rename = "totalViews")]
    total_views: u32,
    #[serde(rename = "uniqueViews")]
    unique_views: u32,
    #[serde(rename = "projectName")]
    project_name: String,
}

async fn track_view(project_name: &str) -> Result<ViewResponse, reqwest::Error> {
    let url = format!("https://your-domain.com/api/views/{}", project_name);
    let client = reqwest::Client::new();
    let response = client.post(&url).send().await?.json::<ViewResponse>().await?;
    Ok(response)
}

🎯 Advanced Usage

⚙️ Environment Configuration

Configure your ViewFlare instance with these environment variables:

Variable	Default	Description
`ADMIN_PASSWORD`	`admin123`	Password for admin panel access
`ENABLE_ADMIN`	`true`	Enable/disable admin functionality
`ENABLE_ANALYTICS`	`false`	Enable detailed visitor tracking (uses more DB queries)
`MAX_PROJECTS`	`100`	Maximum number of projects to prevent abuse

🏗️ Self-Hosting

# Clone the repository
git clone https://github.com/Life-Experimentalist/ViewFlare.git
cd ViewFlare

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env

# Create Cloudflare D1 database
npm run db:create
npm run db:init

# Deploy to Cloudflare Pages
npm run deploy

📊 Rate Limiting & Performance

// Implement client-side rate limiting
class ViewTracker {
    constructor(cooldown = 60000) {
        this.cooldown = cooldown;
        this.lastTrack = new Map();
    }
    async track(projectName) {
        const now = Date.now();
        const last = this.lastTrack.get(projectName) || 0;
        if (now - last < this.cooldown) {
            console.log('⏱️ Cooldown active, skipping track');
            return this.getStats(projectName);
        }
        this.lastTrack.set(projectName, now);
        return this.trackView(projectName);
    }
    async trackView(projectName) {
        // HTTP POST implementation
    }
}

🔄 Batch Operations

// Track multiple projects efficiently
async function trackMultiple(projects) {
    const promises = projects.map(project => 
        fetch(`/api/views/${project}`, { method: 'POST' })
        .then(r => r.json())
        .catch(err => ({ success: false, project, error: err.message }))
    );
    return await Promise.all(promises);
}

🔧 Troubleshooting

❌ Common Issues

Issue	Cause	Solution
CORS Error	Cross-origin request blocked	Use server-side tracking or proxy requests
404 Not Found	Project name contains invalid characters	Use alphanumeric characters, hyphens, underscores only
Admin Access Denied	Wrong password or admin disabled	Check ADMIN_PASSWORD environment variable
High Response Times	Database not optimized	Ensure D1 database is properly initialized

🐛 Debugging

// Enable detailed logging
const DEBUG = true;
async function debugTrack(projectName) {
    if (DEBUG) console.log(`🔍 Tracking view for: ${projectName}`);
    try {
        const start = performance.now();
        const response = await fetch(`/api/views/${projectName}`, { method: 'POST' });
        const duration = performance.now() - start;
        if (DEBUG) console.log(`⏱️ Request took: ${duration.toFixed(2)}ms`);
        const data = await response.json();
        return data;
    } catch (error) {
        if (DEBUG) console.error('❌ Error:', error);
        throw error;
    }
}

⚡ Performance & Limits

📊 System Specifications

< 100ms

Average Response Time

1000+

RPS Capacity

99.9%

Uptime

1 Hour

Badge Cache

💰 Cost Optimization

ViewFlare is designed to stay within Cloudflare's free tier limits:

Database: Optimized queries (1-3 per request)
Functions: Minimal compute time
Caching: 1-hour badge cache reduces load
Analytics: Optional to save resources

🔒 Security Features

# Security headers automatically included
Access-Control-Allow-Origin: *
Content-Security-Policy: default-src 'self'
X-Content-Type-Options: nosniff

# Rate limiting built-in
Max requests per IP: 60/minute (webhook)
Project name validation: Alphanumeric + hyphens/underscores (max 100 chars)

# Privacy-friendly visitor tracking
IP address hashing: SHA-256 with salt
GDPR compliant (no personal data stored)

Self-Hosting Setup

Deploy your own ViewFlare in minutes. Each fork gets its own isolated D1 database — completely separate from any other instance.

Fork & Clone

Fork the repo on GitHub, then:

							git clone
							https://github.com/YOUR_USERNAME/cflair-counter.git
							cd cflair-counter
						

Install Dependencies

npm install

Create D1 Database

wrangler d1 create cflaircounter-db

Copy the output database_id and paste it into wrangler.toml.

Configure wrangler.toml

							[[d1_databases]] binding = "DB" database_name =
							"cflaircounter-db" database_id =
							"YOUR_DATABASE_ID_HERE" [vars] ADMIN_PASSWORD =
							"your-secure-password-here" # Your deployment will
							be at: YOUR_ORIGIN
						

Initialize Schema

npm run db:init

Deploy

npm run deploy

After deploy, Cloudflare will show your Pages URL.

Custom Domain (Optional)

In your Cloudflare dashboard: Pages → your project → Custom domains → Add domain.

For external DNS, add a CNAME record pointing to your Pages subdomain (e.g. yourproject.pages.dev).

🧪 Test Your Deployment

After deploying, verify your instance is working: