Production-grade platform for shopper behavior analysis, demand forecasting, and real-time retail insights.
E-commerce | Consumer Analytics | Personalization
Online shoppers exhibit complex behavior influenced by preferences, values, timing, and pricing. Understanding why customers behave the way they do is essential for merchandising and marketing teams.
Design a shopper behavior analysis and segmentation framework that reveals purchasing affinities and explains how different customer groups interact with products.
- Identification of behavioral or preference-based segments
- Analysis of product-category attraction per segment
- Interpretation of textual feedback and sentiment
- Insights usable by merchandising and marketing teams
Teams may include:
- Persona classification or discovery
- NLP-based review analysis
- Cross-category and cross-segment insights
- Recommendation logic grounded in behavior
- Depth of behavioral insight
- Relevance to real merchandising decisions
- Quality of explanations, not just predictions
- Interactive Dashboard: View and analyze your data with rich visualizations
- Revenue Forecasting: Predictive analytics using machine learning models
- Shopper Behavior Analysis: Advanced customer segmentation using RFM analysis and clustering
- Market Basket Analysis: Discover product affinities and purchasing patterns
- Data Upload & Processing: Upload CSV files and automatically process them
- 🆕 Custom Local AI Assistant: Free, privacy-focused AI that answers questions about your data - no API costs!
- Responsive Design: Works seamlessly across desktop and tablet devices
- Framework: Next.js 16.1.6
- Language: TypeScript
- Styling: Tailwind CSS with custom components
- UI Components: Radix UI primitives
- Charts: Recharts
- State Management: Zustand
- Icons: Lucide React
- AI Integration: @ai-sdk/react for AI assistant functionality
The application provides multiple perspectives for data analysis:
- Dashboard: Overview of key metrics and visualizations
- Forecast: Revenue predictions and model performance metrics
- Comparison: Side-by-side data comparison capabilities
- Behavior: Detailed shopper behavior and segmentation analysis
- Upload: Data import and preprocessing workflow
- Settings: Application configuration options
# 1. Install dependencies
npm install
# 2. Set up environment variables
cp .env.example .env.local
# Edit .env.local and add your OPENAI_API_KEY
# 3. Run development server
npm run dev# Push to Git
git add . && git commit -m "Update" && git push
# Render will auto-deploy- The application loads with prebuilt sample data for immediate exploration
- Navigate between different views using the sidebar
- Interact with charts and visualizations to explore data insights
- Go to the Upload view from the sidebar
- Select a CSV file containing your transaction data
- Map your columns to the required fields (category, purchase amount, date, customer ID)
- The application will process your data and update all visualizations
- RFM Analysis: Recency, Frequency, Monetary analysis for customer segmentation
- Clustering: Unsupervised learning to identify customer groups
- Affinity Rules: Market basket analysis to discover product relationships
- Predictive Models: Revenue forecasting with confidence intervals
├── app/ # Next.js app router pages
├── components/ # Reusable UI components
│ ├── ui/ # Base UI components (buttons, cards, etc.)
│ └── views/ # Page-level components
│ ├── error-boundary.tsx # Error handling
│ └── theme-provider.tsx # Theme management
├── lib/ # Shared utilities and business logic
│ ├── store.ts # Zustand store for state management
│ ├── types.ts # Type definitions
│ ├── behavior-analysis.ts # Shopper behavior algorithms
│ └── data-processing.ts # Data processing utilities
├── public/ # Static assets
├── styles/ # Global styles
├── .env.example # Environment variables template
├── render.yaml # Render deployment config
└── DEPLOYMENT.md # Deployment guide
graph TD
A[User Interface] --> B[Next.js App Router]
B --> C[Zustand Store]
C --> D[Data Processing Layer]
D --> E[Business Logic Components]
E --> F[UI Components]
G[CSV Upload] --> H[Data Validation]
H --> I[Data Cleaning]
I --> J[Feature Engineering]
J --> K[Analysis Engine]
K --> L[RFM Analysis]
K --> M[Clustering Engine]
K --> N[Affinity Analysis]
K --> O[Forecasting Model]
L --> P[Visualization Layer]
M --> P
N --> P
O --> P
P --> Q[Dashboard Views]
Q --> R[User Interface]
S[AI Assistant] --> T[Chat API]
T --> U[LLM Integration]
U --> V[Response Generation]
V --> R
W[Settings Management] --> X[Configuration Store]
X --> C
flowchart LR
A[User Input] --> B[Frontend Components]
B --> C[Zustand State Management]
D[CSV File Upload] --> E[File Validation]
E --> F[Data Parsing]
F --> G[Column Mapping]
G --> H[Data Cleaning]
H --> I[Feature Extraction]
I --> J[Data Transformation]
J --> K[Processed Dataset]
K --> L[RFM Calculation]
K --> M[Clustering Analysis]
K --> N[Affinity Rules]
K --> O[Time Series Forecasting]
L --> P[Segmentation Results]
M --> Q[Cluster Assignments]
N --> R[Association Rules]
O --> S[Forecast Predictions]
P --> T[Visualization Engine]
Q --> T
R --> T
S --> T
T --> U[Dashboard Components]
U --> V[User Interface]
W[AI Chat Requests] --> X[API Processing]
X --> Y[LLM Integration]
Y --> Z[Response Generation]
Z --> V
graph TD
A[User Authentication] --> B[Session Management]
B --> C[Route Protection]
D[Input Validation] --> E[Data Sanitization]
E --> F[API Security Layer]
F --> G[Server-Side Validation]
G --> H[Response Sanitization]
I[Environment Security] --> J[Secrets Management]
J --> K[Configuration Validation]
L[Client-Side Security] --> M[CSRF Protection]
M --> N[XSS Prevention]
N --> O[Content Security Policy]
O --> P[Secure Headers]
Q[Data Privacy] --> R[PII Handling]
R --> S[Data Encryption]
T[API Security] --> U[Rate Limiting]
U --> V[Request Validation]
V --> W[Response Filtering]
X[Logging & Monitoring] --> Y[Audit Trails]
Y --> Z[Security Events]
subgraph "Frontend Security"
A
D
L
M
N
Q
end
subgraph "Backend Security"
B
E
F
G
H
I
J
K
O
P
R
S
T
U
V
W
X
Y
Z
end
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Make your changes
- Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Fixed:
- ✅ Added comprehensive error handling with ErrorBoundary component
- ✅ Improved responsive design for mobile devices
- ✅ Fixed sidebar positioning on mobile
- ✅ Added mobile menu toggle button
- ✅ Enhanced upload view for better UX
- ✅ Configured production deployment (Render, Vercel, Netlify)
- ✅ Added environment variable configuration
- ✅ Created comprehensive documentation
Added:
- ✅
.env.exampletemplate - ✅
render.yamldeployment configuration - ✅ Error boundary component
- ✅ Mobile-responsive navigation
- ✅ Security headers
- ✅ Quick start guide
- ✅ Deployment guide
- ✅ Fixes summary document
-
Frontend Layer
- Next.js 16.1.6 with App Router
- React 19.2.4 with TypeScript
- Responsive UI with Tailwind CSS
- Radix UI components for accessibility
-
State Management
- Zustand for client-side state
- Centralized store for application data
- Reactive state updates
-
Data Processing Layer
- CSV parsing and validation
- Data cleaning and transformation
- Feature engineering
- Column mapping utilities
-
Analytics Engine
- RFM (Recency, Frequency, Monetary) analysis
- Customer clustering algorithms
- Market basket analysis
- Time series forecasting
-
AI Integration
- @ai-sdk/react for LLM integration
- Chat API endpoint (
/api/chat) - Natural language processing
- Intelligent insights generation
-
Visualization Layer
- Recharts for data visualization
- Interactive dashboard components
- Real-time data updates
- Responsive chart rendering
- Data Ingestion: Users upload CSV files through the Upload view
- Validation & Processing: System validates data format and maps columns
- Analysis Pipeline: Multiple analytics engines process the data
- Visualization: Results are rendered through interactive components
- User Interaction: Real-time updates based on user selections
- Input validation for all user data
- Secure handling of file uploads
- Client-side data processing (no server storage)
- Environment variable protection
- Secure API endpoint implementation
- XSS and CSRF protection measures
- Content Security Policy implementation
This project is licensed under the MIT License - see the LICENSE file for details.
For support, please open an issue in the GitHub repository.