dev-resources.site

for different kinds of informations.

Analytics Tool For React Devs (Vercel Analytics Alternative)

Published at

1/9/2025

The Journey from Idea to Reality

Over three months, I poured my expertise and passion into creating a solution that would not only solve my problem but potentially help countless other React developers. The result? ReactLens Analytics - a platform-independent analytics tool designed specifically for React applications.

Quick Setup Guide

1. Install the Package

npm install react-lens-analytics

2. Configure Environment Variables

For Next.js:

NEXT_PUBLIC_PROJECT_SECRET=your_project_secret_here

For React:

REACT_APP_PROJECT_SECRET=your_project_secret_here

3. Implementation

Next.js Setup:

// components/AnalyticsWrapper.tsx
'use client'
import React from 'react'
import { Analytics } from 'react-lens-analytics'

export function AnalyticsWrapper() {
  return (
    <Analytics projectId={process.env.NEXT_PUBLIC_PROJECT_SECRET!} />
  )
}

// app/layout.tsx
import React from 'react'
import { AnalyticsWrapper } from '@/components/AnalyticsWrapper'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <AnalyticsWrapper />
      </body>
    </html>
  )
}

React Setup:

// src/components/AnalyticsWrapper.tsx
import React from 'react'
import { Analytics } from 'react-lens-analytics'

export function AnalyticsWrapper() {
  return (
    <Analytics projectId={process.env.REACT_APP_PROJECT_SECRET!} />
  )
}

// src/App.tsx
import React from 'react'
import { AnalyticsWrapper } from './components/AnalyticsWrapper'

function App() {
  return (
    <div>
      <AnalyticsWrapper />
      {/* Your app content */}
    </div>
  )
}

export default App

Key Features That Set ReactLens Apart

Platform Independence: Whether you're using Vercel, Netlify, AWS, or any other hosting platform, React Lens works seamlessly with your setup.
Detailed Geographical Insights: Get the city and region-level data that other analytics tools often miss.
Privacy-Focused: We've built React Lens with a strong emphasis on user privacy, ensuring you can gather insights without compromising ethical standards.
Easy Integration: Set up React Lens in your project in just a few minutes, with minimal code changes required.
Completely Free: Access powerful analytics without any cost, making it accessible for developers at any stage of their journey.

Resources and Community

Project Dashboard: Create your account and get your project secret
Documentation: Detailed guides and API references
Discord Community: Join discussions, get help, and share feedback

What's Next for React Lens?

We're actively working on exciting new features:

Advanced filtering capabilities
Custom event tracking
Enhanced data visualization options
API improvements for better integration

Join Our Community

ReactLens Analytics is more than just a tool - it's a growing community of developers passionate about understanding their applications better. Your feedback and experiences will be invaluable in shaping its future.

Get Started Today

Visit reactlens.kartikmalik.tech
Create your free account
Follow our simple setup guide
Start discovering insights about your users

Have you faced similar challenges in getting detailed geographical data for your React apps? Share your experiences in our Discord community - we'd love to hear your story!

Remember, great insights lead to better applications. Give React Lens Analytics a try today and discover what you've been missing about your audience!

analytics Article's

30 articles in total