A modern, responsive Next.js application that helps YouTube creators analyze their channels and discover monetization opportunities through AI-powered insights.

• 🎯 Channel Health Dashboard - Complete analytics on subscriber growth, engagement, and content performance
• 🤖 AI-Powered Coach - Contextual AI assistant that provides personalized monetization advice
• 📈 Revenue Simulator - Interactive tools to project and optimize your revenue streams
• 📊 Video Intelligence - Deep analysis of your top performing content with actionable insights
• 💰 Monetization Playbooks - Personalized 30-day strategies for maximum revenue growth
• 🔗 Affiliate Discovery - Find and manage affiliate marketing opportunities
• 📱 Responsive Design - Optimized for all devices with beautiful animations and interactions

• Framework: Next.js 15 with App Router
• Authentication: NextAuth.js with YouTube OAuth
• Styling: Tailwind CSS 4 with custom gradients and animations
• UI Components: Radix UI primitives with custom implementations
• Charts: Recharts for data visualization
• Animations: Framer Motion for smooth interactions
• Video Processing: YouTube Data API integration
• AI Integration: Anthropic Claude API and GROQ for intelligent insights

1. Clone the repository

git clone https://github.com/AlankritVerma01/Hackai-frontend
cd Hackai-frontend/frontend

2. Install dependencies

pnpm install
# or
npm install
# or
yarn install

3. Set up environment variables

cp .env.example .env.local
# Add your API keys and configuration

Required environment variables:

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_nextauth_secret
YOUTUBE_CLIENT_ID=your_youtube_oauth_client_id
YOUTUBE_CLIENT_SECRET=your_youtube_oauth_client_secret
GROQ_API_KEY=your_groq_api_key
BACKEND_URL=http://localhost:8000

4. Run the development server

pnpm dev
# or
npm run dev
# or
yarn dev

5. Open your browser Visit http://localhost:3000 to see the application

src/
├── app/
│   ├── api/                    # API routes and backend integration
│   │   ├── auth/              # Authentication endpoints
│   │   ├── channel-health/    # Channel analytics
│   │   ├── groq/              # AI chat endpoints
│   │   └── revenue/           # Monetization analysis
│   ├── auth/                  # Authentication pages
│   ├── dashboard/             # Main application dashboard
│   │   ├── guide-view.tsx     # Revenue playbook interface
│   │   ├── analysis-view.tsx  # Video analysis interface
│   │   └── affiliate-comment.tsx # Affiliate management
│   ├── onboarding/            # User onboarding flow
│   └── components/            # Shared UI components
├── lib/                       # Utility functions and API clients
└── types/                     # TypeScript type definitions

• Real-time channel metrics with beautiful visualizations
• Responsive design that works on all devices
• Smooth animations and micro-interactions

• Context-aware AI assistant that knows your channel
• Real-time chat interface with markdown support
• Personalized monetization recommendations
• Mobile-responsive chat interface

• Interactive sliders for CTR, RPM, and view projections
• Real-time revenue calculations and visualizations
• 30-day revenue projections with daily breakdowns

• Upload and analyze video content for monetization opportunities
• AI-powered insights on affiliate marketing potential
• Automated comment generation for engagement

• Personalized 30-day action plans
• Progress tracking with local storage persistence
• Kanban-style task management
• Confetti celebrations for completed milestones

The frontend integrates with multiple APIs:

• YouTube Data API - Channel and video data
• Anthropic Claude - AI-powered content analysis
• GROQ - Fast AI inference for real-time chat
• Custom Backend - Revenue analysis and playbook generation

Uses NextAuth.js with YouTube OAuth for secure authentication:

• OAuth flow with YouTube
• Session management
• Protected routes and API endpoints

Built mobile-first with Tailwind CSS:

• Responsive breakpoints: sm:, md:, lg:, xl:
• Mobile-optimized components and interactions
• Touch-friendly interfaces

• Next.js App Router for optimal performance
• Turbopack for fast development builds
• Image optimization with Next.js Image component
• Code splitting for minimal bundle sizes
• SWR for efficient data fetching and caching

# Start development server with Turbopack
pnpm dev

# Build for production
pnpm build

# Start production server
pnpm start

# Run ESLint
pnpm lint

1. Connect your GitHub repository to Vercel
2. Configure environment variables in Vercel dashboard
3. Deploy automatically on every push to main

pnpm build
pnpm start

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add amazing feature'
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request

• TypeScript for type safety
• ESLint for code linting
• Prettier for code formatting
• Conventional Commits for commit messages

• Chrome 91+
• Firefox 90+
• Safari 15+
• Edge 91+

MIT License - see LICENSE file for details.

Built with ❤️ for creators who want to monetize their passion and build sustainable businesses.