Funnel Dashboard

A React-based analytics dashboard for tracking funnel conversion rates with AI-powered insights using OpenAI GPT-4 and Supabase backend.

🚀 Features

• 📊 Interactive Funnel Analytics - Visualize conversion rates across different stages
• 🤖 AI-Powered Insights - Get intelligent suggestions and analysis using OpenAI GPT-4
• 💬 Interactive Chat Interface - Chat with GPT-4 about your funnel data
• 📅 Date Range Filtering - Analyze data across custom time periods
• 📱 Responsive Design - Works on desktop and mobile devices
• 🔐 User Authentication - Secure login with Supabase Auth
• 📈 Real-time Data - Live updates from Supabase database
• 🎨 Modern UI - Built with Material-UI components

🛠️ Tech Stack

• Frontend: React 18, Material-UI
• Backend: Supabase (PostgreSQL, Auth, Real-time)
• AI: OpenAI GPT-4 API
• Deployment: AWS S3 + CloudFront
• Version Control: Git/GitHub

📦 Installation

1. Clone the repository

   git clone https://github.com/mohitkhatwani721/my-funnel-dashboard.git
   cd my-funnel-dashboard

2. Install dependencies

   npm install

3. Set up environment variables Create a .env file in the root directory:

   REACT_APP_SUPABASE_URL=https://mtykrhxfmgijtehnwfsh.supabase.co
   REACT_APP_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im10eWtyaHhmbWdpanRlaG53ZnNoIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDgzNzA2MzksImV4cCI6MjA2Mzk0NjYzOX0.9AfW40dpU2wxldFHCWCdEO1AQ5wgv5N4SyvIHuVtg1Y
   REACT_APP_OPENAI_API_KEY=your_openai_api_key_here

4. Start the development server

   npm start

5. Open your browser Navigate to http://localhost:4000

🗄️ Database Setup

The app uses Supabase with the following table structure:

funnel_events Table

CREATE TABLE funnel_events (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  user_id TEXT,
  session_id TEXT,
  stage TEXT,
  event_date DATE
);

🚀 Deployment

AWS Deployment

1. Build the production version:

   npm run build

2. Deploy to AWS S3 + CloudFront using the provided script:

   ./deploy-aws.sh

📊 Usage

1. Sign Up/Login - Create an account or sign in with existing credentials
2. View Dashboard - See your funnel analytics with interactive charts
3. Filter Data - Use date picker to analyze specific time periods
4. Get AI Insights - Click "Get AI Suggestion" for intelligent analysis
5. Chat with AI - Use the chat interface to ask questions about your data
6. View Profile - Click "Profile" to see your user information

🔧 Configuration

Supabase Setup

1. Create a new Supabase project
2. Enable Row Level Security (RLS)
3. Create the funnel_events table
4. Set up authentication providers

OpenAI Setup

1. Get an API key from OpenAI
2. Add it to your .env file
3. Ensure you have sufficient credits for API calls

🤝 Contributing

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

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Mohit Khatwani

• GitHub: @mohitkhatwani721

🙏 Acknowledgments

• Supabase for the backend infrastructure
• OpenAI for AI capabilities
• Material-UI for the component library
• React team for the amazing framework