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
This project is part of the Amana Bootcamp curriculum. Feel free to explore the code and suggest improvements.
This project is for educational purposes as part of the Amana Bootcamp program.