Email A/B Testing Analytics Dashboard

A modern dashboard for managing and analyzing email marketing A/B tests, built with Next.js 14, Tailwind CSS, and shadcn/ui components.

Features

• 📊 Real-time campaign performance metrics
• 🔄 A/B test management and analysis
• 📈 Interactive data visualizations
• 📧 Email campaign tracking
• 📱 Fully responsive design
• 🎨 Dark/Light mode support
• 🔍 Advanced filtering and sorting

Tech Stack

• Next.js 14 - React Framework
• TypeScript - Type Safety
• Tailwind CSS - Styling
• shadcn/ui - UI Components
• Recharts - Data Visualization
• date-fns - Date Manipulation
• Lucide Icons - Icons

Prerequisites

Make sure you have the following installed:

• Node.js 18.17 or later
• npm or yarn or pnpm

Getting Started

1. Clone the repository:

git clone https://github.com/NikitaBuilds/email-ab-testing
cd email-ab-testing-dashboard

2. Install dependencies:

npm install
# or
yarn install
# or
pnpm install

3. Start the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

4. Open http://localhost:3000 in your browser

Project Structure

src/
├── app/                    # Next.js 14 app directory
│   ├── (auth)/            # Authentication routes
│   ├── dashboard/         # Dashboard routes
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Home page
├── components/
│   ├── ui/               # shadcn/ui components
│   ├── dashboard/        # Dashboard-specific components
│   └── shared/          # Shared components
├── lib/
│   └── utils.ts         # Utility functions
├── types/
│   └── index.ts         # TypeScript types
└── styles/
    └── globals.css      # Global styles

Key Components

• StatsGrid: Displays key performance metrics
• CampaignPerformance: Interactive campaign analytics chart
• RecentTests: Latest A/B test results table
• TopSubjectLines: Best performing email subjects

Environment Variables

Create a .env.local file in the root directory:

# Add your environment variables here
NEXT_PUBLIC_API_URL=your_api_url

Available Scripts

npm run dev          # Start development server
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run ESLint
npm run type-check   # Run TypeScript checks

Deployment

The project can be deployed on Vercel with zero configuration:

npm run build
vercel deploy

Acknowledgments

• shadcn/ui for the amazing component library
• Vercel for the excellent deployment platform
• Next.js team for the awesome framework

---

Made with ❤️ by Nikita