churn.ai — AI-Powered Customer Churn Prediction

Predict and prevent customer churn before it's too late — powered by 4 machine learning models running simultaneously.

🔗 Live Demo on Render

---

✨ Features

• AI Dashboard Interface — Dark-mode UI with glassmorphism panels, cyber-grid background, and ambient glow effects
• 4-Step Stepper Form — Guided input flow with per-step validation (Personal → Phone → Internet → Billing)
• Multi-Model Inference — 4 ML models run in parallel on every prediction:
  • ◈ Logistic Regression
  • ⬡ Decision Tree
  • ❋ Random Forest
  • ◉ Support Vector Machine (SVM)
• Animated Risk Gauge — SVG ring indicator with color-coded states (cyan = low, orange = moderate, red = high)
• Confidence Scores — Per-model churn probability with animated progress bars
• Real-time Feedback — Toast notifications, loading states, and smooth transitions

---

🔀 Architecture & Data Flow

graph TD
    A["🖥️ React + Vite Frontend\n(localhost:5173)"] -->|"User fills 4-step form"| B["StepperForm\n(Personal → Phone → Internet → Billing)"]
    B -->|"POST /predict (JSON payload)"| C["Vite Dev Proxy\n/ Gunicorn Production"]
    C -->|"Forwards request"| D["🐍 Flask Backend\napp.py (localhost:5000)"]
    D --> E["preprocess_input()\nLabel Encoding + StandardScaler"]
    E --> F{{"ML Model Pipeline"}}
    F -->|"Logistic Regression"| G["log_reg.pkl"]
    F -->|"Decision Tree"| H["decision_tree.pkl"]
    F -->|"Random Forest"| I["random_forest.pkl"]
    F -->|"Support Vector Machine"| J["svm.pkl"]
    G & H & I & J -->|"prediction + confidence + churn_probability"| K["JSON Response Array"]
    K -->|"Results"| L["ResultsPanel\n(Risk Gauge + Model Cards)"]
    L --> M["🔴 High Risk / 🟠 Moderate / 🟢 Low Risk"]

Loading

Flow Summary

Step	What Happens
1. User Input	4-step form collects 19 customer features
2. Validation	Per-step validation before proceeding
3. API Call	POST /predict sent with JSON payload
4. Preprocessing	Flask applies label encoding + StandardScaler
5. Inference	All 4 ML models run in parallel
6. Response	JSON array with prediction, confidence, churn probability per model
7. Visualization	Animated risk gauge + per-model progress bars

---

🛠️ Tech Stack

Frontend

Layer	Technology
Framework	React 18 + Vite 8
Styling	TailwindCSS v3
Fonts	Inter + Space Grotesk (Google Fonts)
State	React hooks (useState, useEffect)
API	Custom usePrediction hook → /predict

Backend

Layer	Technology
Server	Python + Flask
ML	scikit-learn (LR, DT, RF, SVM)
Data	pandas + numpy + joblib
CORS	flask-cors
Deploy	Gunicorn (Render)

---

🗂️ Project Structure

├── frontend/                     # React + Vite + TailwindCSS source
│   ├── src/
│   │   ├── App.jsx               # Root layout (dark theme, ambient orbs)
│   │   ├── index.css             # Global styles + TailwindCSS
│   │   ├── components/
│   │   │   ├── Navbar.jsx        # Sticky glassmorphism navbar
│   │   │   ├── HeroSection.jsx   # Typing animation hero + stats row
│   │   │   ├── RadioGroup.jsx    # Reusable AI-styled radio cards
│   │   │   ├── RiskGauge.jsx     # Animated SVG risk ring
│   │   │   ├── ModelCard.jsx     # Individual ML model result card
│   │   │   ├── ResultsPanel.jsx  # Results panel (3 states)
│   │   │   ├── Toast.jsx         # Animated toast notifications
│   │   │   └── StepperForm/
│   │   │       ├── StepperForm.jsx   # 4-step form orchestrator
│   │   │       ├── StepPersonal.jsx  # Personal details step
│   │   │       ├── StepPhone.jsx     # Phone services step
│   │   │       ├── StepInternet.jsx  # Internet services step
│   │   │       └── StepBilling.jsx   # Billing & payment step
│   │   └── hooks/
│   │       └── usePrediction.js  # API hook → POST /predict
│   ├── vite.config.js            # Vite config + Flask proxy
│   ├── tailwind.config.js        # TailwindCSS dark AI palette
│   └── package.json
│
├── models/                       # Trained ML model files (.pkl)
│   ├── log_reg.pkl
│   ├── decision_tree.pkl
│   ├── random_forest.pkl
│   ├── svm.pkl
│   ├── scaler.pkl
│   └── encoders.pkl
│
├── static/                       # Built frontend (Vite → static/)
│   ├── index.html
│   └── assets/
│
├── app.py                        # Flask backend + /predict route
├── requirements.txt
└── README.md

---

💻 Local Development

Prerequisites

• Python 3.10+
• Node.js 18+

1. Clone the repo

git clone https://github.com/dinesh9997/Customer-Churn-Prediction.git
cd Customer-Churn-Prediction

2. Set up Python backend

python -m venv venv

# Windows
venv\Scripts\activate

# macOS/Linux
source venv/bin/activate

pip install -r requirements.txt
python app.py        # Runs on http://localhost:5000

3. Set up React frontend (dev mode)

cd frontend
npm install
npm run dev          # Runs on http://localhost:5173

Note: The Vite dev server proxies /predict → http://localhost:5000 automatically. Both servers must be running for predictions to work.

4. Build for production

cd frontend
npm run build        # Outputs to ../static/

Flask then serves the built files directly from static/.

---

🚀 Deployment on Render

Setting	Value
Runtime	Python 3
Build Command	pip install -r requirements.txt
Start Command	gunicorn app:app
Instance Type	Free

---

📜 License

MIT License — see LICENSE for details.

👥 Authors

• Dinesh — ML Engineering & Full-Stack Development (@dinesh9997)