VibeAnalytics Pro - Crypto/DeFi Analytics

A modern analytics platform for crypto and DeFi projects with wallet tracking, transaction volume analytics, token price correlations, and on-chain metrics.

Features

Crypto/DeFi Analytics

• Wallet Growth Tracking - Monitor total, new, and active wallets over time
• Transaction Volume Analytics - Track daily volume and transaction counts
• Token Price Correlation - Visualize price correlations with scatter plots
• On-Chain Metrics - TVL, gas prices, active wallets, and more
• Protocol TVL Breakdown - Compare top DeFi protocols
• Recent Transactions Table - View latest on-chain activity

Core Analytics

• Real-time dashboard with Neo-Brutalist design
• Privacy-first tracking
• UTM parameter tracking
• Funnel visualization
• Custom events

Authentication & Billing

• Clerk authentication (sign-in/sign-up)
• Stripe subscription integration
• Free, Growth ($12/mo), and Pro ($39/mo) plans
• Webhook handling for auth and payments

Database

• Supabase PostgreSQL with Row Level Security
• User profiles synced from Clerk
• Project management
• Analytics events storage
• Wallet and token tracking tables
• On-chain metrics snapshots

Project Structure

projects/vibeanalytics/
├── dashboard/                 # Next.js 14 Dashboard App
│   ├── app/
│   │   ├── api/
│   │   │   ├── analytics/
│   │   │   ├── crypto/
│   │   │   ├── projects/
│   │   │   ├── track/
│   │   │   └── webhooks/
│   │   ├── dashboard/
│   │   ├── sign-in/
│   │   ├── sign-up/
│   │   ├── globals.css
│   │   └── layout.tsx
│   ├── components/
│   ├── lib/
│   ├── package.json
│   └── middleware.ts
├── landing/                   # Next.js 14 Landing Page
│   ├── app/
│   │   ├── api/
│   │   ├── sections/
│   │   ├── sign-in/
│   │   ├── sign-up/
│   │   └── layout.tsx
│   ├── components/
│   ├── package.json
│   └── middleware.ts
├── database/
│   └── schema.sql            # Supabase schema
├── .env.example
└── README.md

Quick Start

1. Install Dependencies

# Dashboard
cd dashboard
npm install

# Landing
cd ../landing
npm install

2. Environment Setup

Copy .env.example to .env.local in both apps and fill in your API keys.

3. Database Setup

1. Create a Supabase project
2. Run the SQL in database/schema.sql
3. Copy your Supabase credentials

4. Clerk Setup

1. Create a Clerk application
2. Copy API keys to both apps
3. Configure webhook URL: /api/webhooks/clerk

5. Stripe Setup (Landing App)

1. Create Stripe account
2. Copy API keys
3. Create products for Growth ($12) and Pro ($39) plans
4. Update price IDs in landing/app/sections/pricing.tsx
5. Configure webhook URL: /api/webhooks/stripe

6. Run Development

# Dashboard (port 3000)
cd dashboard
npm run dev

# Landing (port 3001)
cd landing
npm run dev

API Routes

Dashboard API

• GET/POST /api/projects - List/Create projects
• GET/PATCH/DELETE /api/projects/[id] - Manage project
• GET /api/analytics/[projectId] - Get analytics data
• POST /api/track - Track events (public)
• GET/POST /api/crypto/wallets - Wallet tracking
• GET/POST /api/crypto/metrics - On-chain metrics

Landing API

• POST /api/create-payment-intent - Stripe payment
• POST /api/webhooks/stripe - Stripe webhooks
• POST /api/webhooks/clerk - Clerk webhooks

Database Schema

Tables

• users - Extended user profiles
• projects - Analytics projects
• analytics_events - Raw tracking events
• wallet_tracking - Tracked wallet addresses
• token_tracking - Tracked tokens
• onchain_metrics - Metrics snapshots
• webhook_events - Webhook logs

Row Level Security

All tables have RLS enabled with policies ensuring users can only access their own data.

Deployment

Option 1: Automated Deployment Script

Run the deployment script:

./deploy.sh

This will guide you through:

• GitHub repository setup
• Vercel project configuration
• Environment variable checklist

Option 2: Manual Deployment

Step 1: Push to GitHub

# Create GitHub repo at https://github.com/new
# Repository name: vibeanalytics
# Set to Public, don't initialize with README

git remote add origin https://github.com/eli5-claw/vibeanalytics.git
git push -u origin main

Step 2: Deploy to Vercel

1. Go to https://vercel.com/new
2. Import your GitHub repository: eli5-claw/vibeanalytics
3. Configure two separate projects:
   • Dashboard: Root Directory = /dashboard
   • Landing: Root Directory = /landing
4. Add environment variables for each (see below)
5. Deploy

Step 3: Configure Environment Variables

Dashboard App:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...
SUPABASE_SERVICE_ROLE_KEY=eyJ...

Landing App:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...
SUPABASE_SERVICE_ROLE_KEY=eyJ...

Supabase

• Enable connection pooling for serverless
• Set up automated backups
• Configure read replicas if needed

What's Left for Deployment

Required

1. Set up Clerk account and configure webhooks
2. Set up Stripe account and create products
3. Set up Supabase project and run migrations
4. Add all environment variables to hosting platform
5. Configure CORS for Supabase
6. Set up custom domains

Optional

1. Set up monitoring (Sentry, LogRocket)
2. Configure CDN for static assets
3. Set up email notifications
4. Add analytics tracking (PostHog, Amplitude)
5. Create tracking script for users to embed

Tech Stack

• Framework: Next.js 14 (App Router)
• Styling: Tailwind CSS
• UI Components: Custom Neo-Brutalist design
• Charts: Recharts
• Animations: Framer Motion
• Auth: Clerk
• Payments: Stripe
• Database: Supabase (PostgreSQL)
• Icons: Lucide React

License

MIT