A comprehensive marketing analytics dashboard built with Next.js that provides real-time insights into marketing campaign performance, demographics, regional data, and weekly trends.
- Real-time marketing metrics and KPIs
- Company information and performance highlights
- Market insights including peak performance analytics
- Total campaigns, revenue, ROAS, and conversion tracking
- Detailed campaign performance tracking
- Advanced filtering by campaign name and type
- Interactive charts for revenue and ROAS comparison
- Performance breakdown by medium (Instagram, Facebook, Google Ads)
- Comprehensive campaign data table with sorting capabilities
- Audience demographic analysis
- Age group and gender performance metrics
- Device performance tracking
- Target audience insights
- Week-over-week performance tracking
- Time-based analytics and trends
- Historical performance data
- Geographic performance breakdown
- Country and region-specific metrics
- Regional ROAS and conversion tracking
- Framework: Next.js 15 with App Router
- Language: TypeScript
- Styling: Tailwind CSS
- Icons: Lucide React
- Data Source: External API integration with Amana Bootcamp
- Node.js (version 18 or higher)
- npm, yarn, pnpm, or bun
- Clone the repository:
git clone <repository-url>
cd amana-marketing- Install dependencies:
npm install
# or
yarn install
# or
pnpm install- Start the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev- Open http://localhost:3000 in your browser to view the dashboard.
amana-marketing/
├── app/ # Next.js App Router pages
│ ├── api/marketing-data/ # API routes for data fetching
│ ├── campaign-view/ # Campaign analytics page
│ ├── demographic-view/ # Demographic insights page
│ ├── weekly-view/ # Weekly performance page
│ ├── region-view/ # Regional analytics page
│ └── page.tsx # Main dashboard page
├── src/
│ ├── components/ui/ # Reusable UI components
│ │ ├── navbar.tsx # Navigation sidebar
│ │ ├── card-metric.tsx # Metric display cards
│ │ ├── bar-chart.tsx # Chart components
│ │ ├── table.tsx # Data table component
│ │ └── ...
│ ├── lib/ # Utility functions
│ │ └── api.ts # API integration
│ └── types/ # TypeScript type definitions
│ └── marketing.ts # Marketing data types
└── public/ # Static assets
- Responsive sidebar navigation with collapsible design
- Mobile-friendly hamburger menu
- Active page indication
- Interactive bar charts for performance metrics
- Sortable and filterable data tables
- Real-time metric cards with icons
- Responsive design for all screen sizes
- Search functionality for campaigns
- Multi-select dropdown filters
- Real-time filtering with instant results
The dashboard connects to the Amana Bootcamp API to fetch real-time marketing data:
- Endpoint:
https://www.amanabootcamp.org/api/fs-classwork-data/amana-marketing - Automatic data refresh and error handling
- CORS-enabled for development
npm run build
npm run start- Next.js 15: Latest version with Turbopack for faster builds
- React 19: Latest React features
- TypeScript: Full type safety
- Tailwind CSS 4: Modern styling framework
- Lucide React: Beautiful, customizable icons