A modern, professional web analytics platform built with Next.js 16, providing real-time insights into website traffic, user behavior, and performance metrics. MetricFlow offers a privacy-focused alternative to traditional analytics solutions with a beautiful, intuitive interface.
- Real-time Visitor Tracking - Monitor live users on your website
- Page View Analytics - Detailed insights into page performance
- Traffic Sources - Track referrers, UTM parameters, and campaign data
- Geographic Analytics - Visitor location data with country/city breakdown
- Device & Browser Analytics - Comprehensive device, OS, and browser statistics
- Time-based Analytics - Hourly and daily visitor patterns
- Secure Authentication - Powered by Clerk with multi-factor authentication
- Privacy-First Design - GDPR compliant data collection
- Secure API Endpoints - Protected routes with proper error handling
- Database Security - Server-side only database connections
- User Data Protection - Encrypted data storage and transmission
- Professional Dashboard - Clean, intuitive interface inspired by Google Analytics
- Responsive Design - Optimized for desktop, tablet, and mobile devices
- Dark/Light Theme Support - Adaptive theming with system preference detection
- Smooth Animations - Professional micro-interactions and loading states
- Loading States - Comprehensive loading system for better UX
- Interactive Charts - Beautiful data visualizations with Recharts
- Server-Side Rendering - Fast initial page loads with Next.js 16
- Optimized Database Queries - Efficient data fetching with Drizzle ORM
- Lazy Loading - Dynamic imports for better performance
- Caching Strategy - Smart caching for improved response times
- Error Handling - Comprehensive error boundaries and fallbacks
- TypeScript - Full type safety throughout the application
- Modern Stack - Latest Next.js 16 with App Router
- Component Library - Radix UI components with custom styling
- Code Quality - ESLint and TypeScript strict mode
- Hot Reload - Fast development with Turbopack
- Framework: Next.js 16.0.7 with App Router
- Language: TypeScript 5.0
- Styling: Tailwind CSS 4.1.17
- UI Components: Radix UI + Custom Components
- Icons: Lucide React
- Charts: Recharts
- Animations: Tailwind CSS Animate
- Forms: React Hook Form + Zod validation
- Runtime: Node.js with Next.js API Routes
- Database: PostgreSQL (Neon)
- ORM: Drizzle ORM 0.45.0
- Authentication: Clerk
- HTTP Client: Axios
- Date Handling: date-fns with timezone support
- Package Manager: npm
- Build Tool: Next.js with Turbopack
- Code Quality: ESLint + TypeScript
- Database Migrations: Drizzle Kit
- Node.js 18+
- npm or yarn
- PostgreSQL database (Neon recommended)
- Clerk account for authentication
-
Clone the repository
git clone https://github.com/AnshuHemal/MetricFlow.git cd MetricFlow -
Install dependencies
npm install
-
Environment Setup
cp .env.example .env
-
Configure Environment Variables
# Database Configuration NEON_DB_CONNECTION_STRING=your_neon_database_url # Application URL NEXT_PUBLIC_HOST_URL=https://metricflow-web.vercel.app/ # Clerk Authentication NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key CLERK_SECRET_KEY=your_clerk_secret_key # Clerk Routes NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/ NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/
-
Database Setup
# Generate and run migrations npm run db:generate npm run db:migrate -
Start Development Server
npm run dev
-
Open Application Navigate to http://localhost:3000
- Sign up/Login to your MetricFlow account
- Navigate to Dashboard and click "Add New Website"
- Enter Website Details:
- Domain name (e.g., example.com)
- Timezone selection
- Localhost tracking preference
- Copy Tracking Script and add to your website's
<head>section:<script defer data-website-id='your-website-id' data-domain='your-domain.com' src="https://metricflow-web.vercel.app/analytics.js"> </script>
- Dashboard Overview: See all your websites and key metrics
- Detailed Analytics: Click on any website for comprehensive insights
- Real-time Data: Monitor live visitors and their activity
- Historical Data: View trends with date range selection
- Export Data: Download reports for further analysis
- Settings Page: Configure domain, tracking preferences
- Delete Website: Permanently remove website and all associated data
- Update Configuration: Modify tracking settings as needed
POST /api/track- Track page views and user interactionsPOST /api/live- Update live user sessions
GET /api/website- Fetch website analytics dataPOST /api/website- Create new websiteDELETE /api/website- Delete website and all dataPOST /api/user- User managementGET /api/status- Health check
- users - User account information
- websites - Website configurations and settings
- pageViews - Detailed page view analytics data
- liveUser - Real-time user session tracking
- Auto-incrementing IDs for all tables
- Foreign key relationships for data integrity
- Timezone support for accurate time-based analytics
- Comprehensive tracking of user interactions
- Authentication Required for all dashboard access
- API Route Protection with Clerk middleware
- CORS Configuration for tracking endpoints
- Input Validation with Zod schemas
- SQL Injection Prevention with Drizzle ORM
- Environment Variable Security (no client-side database exposure)
- Error Handling without sensitive data leakage
- Loading System - Multiple loading variants (page, card, button, overlay)
- Navigation Loading - Smooth transitions between routes
- Analytics Charts - Interactive data visualizations
- Form Components - Validated forms with error handling
- Modal Dialogs - Confirmation dialogs for destructive actions
- Consistent Spacing - Tailwind CSS utility classes
- Color Palette - Professional blue/gray theme
- Typography - Poppins font family
- Animations - Subtle micro-interactions
- Responsive Design - Mobile-first approach
- Dynamic Imports - Lazy loading for better performance
- Database Query Optimization - Efficient data fetching
- Image Optimization - Next.js Image component
- Bundle Splitting - Automatic code splitting
- Caching Headers - Proper cache control
- Error Boundaries - Graceful error handling
- Connect your GitHub repository to Vercel
- Configure environment variables in Vercel dashboard
- Deploy automatically on push to main branch
# Build the application
npm run build
# Start production server
npm startEnsure all environment variables are properly configured in your deployment platform.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js Team - For the amazing React framework
- Clerk - For seamless authentication
- Radix UI - For accessible UI components
- Tailwind CSS - For utility-first styling
- Drizzle Team - For the excellent ORM
- Neon - For serverless PostgreSQL
For support, email connect.hemal@gmail.com or call on +91 79902 46779.
MetricFlow - Professional Web Analytics Made Simple 🚀