Developer Docs

Create a new Next.js 14 application with the following specifications:

**Tech Stack:**
- Next.js 14 with App Router
- TypeScript for type safety
- Tailwind CSS for styling
- Prisma with PostgreSQL for database
- NextAuth.js for authentication

**Project Structure:**
- `/app` directory structure with proper layouts
- `/components` for reusable UI components
- `/lib` for utilities and database configuration
- `/types` for TypeScript definitions

**Initial Features:**
- Landing page with hero section and navigation
- User authentication (sign up, login, logout)
- Protected dashboard route
- Responsive design with dark mode support

Set up the basic project structure and create placeholder components for each feature.

Help me migrate this Next.js pages router application to the new App Router:

[Paste your current pages structure]

**Requirements:**
- Convert all pages to the new app directory structure
- Update routing and navigation patterns
- Migrate API routes to the new route handlers
- Ensure all layouts and nested routing work correctly
- Maintain the same functionality and URLs

**Focus Areas:**
- File-based routing in /app directory
- layout.tsx and page.tsx conventions
- Server and client component optimization
- Metadata API implementation

Design a scalable component architecture for a [describe app type] application:

**Component Categories:**
- UI components (buttons, inputs, cards)
- Layout components (header, sidebar, footer)
- Feature components (user profile, product listing)
- Page components (home, dashboard, settings)

**Requirements:**
- TypeScript interfaces for all props
- Compound component patterns where appropriate
- Accessibility features (ARIA labels, keyboard navigation)
- Consistent styling with Tailwind CSS variants
- Storybook-ready component structure

Include examples of 2-3 components with proper TypeScript typing.

Create Next.js 14 API route handlers for a [describe resource] with:

**Endpoints:**
- GET /api/[resource] - List all items with pagination
- GET /api/[resource]/[id] - Get single item
- POST /api/[resource] - Create new item
- PUT /api/[resource]/[id] - Update existing item
- DELETE /api/[resource]/[id] - Delete item

**Requirements:**
- TypeScript with proper request/response typing
- Input validation using Zod schemas
- Error handling with appropriate HTTP status codes
- Database operations with Prisma ORM
- Authentication middleware integration
- Rate limiting for production use

Include proper error responses and success messages.

Create a server component for [describe functionality] that:

**Data Fetching:**
- Fetches data directly in the component
- Implements proper error boundaries
- Shows loading states appropriately
- Handles edge cases (empty states, errors)

**Performance:**
- Optimizes database queries
- Implements proper caching strategies
- Uses React Suspense for progressive loading
- Minimizes client-side JavaScript

**SEO:**
- Generates proper metadata
- Implements structured data where relevant
- Ensures fast page load times

Show the complete component with TypeScript types.

Set up Prisma with PostgreSQL for a [describe app] application:

**Database Schema:**
- Design models for [list main entities]
- Include proper relationships and constraints
- Add indexes for performance optimization
- Implement soft deletes where appropriate

**Prisma Setup:**
- Create the schema.prisma file
- Set up database connection and environment variables
- Generate TypeScript types
- Create seed data for development

**Integration:**
- Database utility functions in /lib/db.ts
- Connection pooling configuration
- Error handling patterns
- Migration strategies

Include the complete Prisma schema and key utility functions.

Implement authentication using NextAuth.js v5 with:

**Providers:**
- Email/password authentication
- Google OAuth integration
- GitHub OAuth integration
- Magic link email authentication

**Database Integration:**
- User model with Prisma
- Session management
- Account linking
- Role-based access control

**Security Features:**
- CSRF protection
- Secure session cookies
- Password hashing with bcrypt
- Email verification flow

**UI Components:**
- Login/signup forms with validation
- Password reset functionality
- Profile management page
- Protected route middleware

Include the complete auth configuration and key components.

Create Next.js middleware for:

**Route Protection:**
- Authenticate users before accessing protected routes
- Redirect unauthenticated users to login
- Role-based route access control
- API route authentication

**Security Headers:**
- CSP (Content Security Policy)
- HSTS (HTTP Strict Transport Security)
- X-Frame-Options
- X-Content-Type-Options

**Performance:**
- Request/response logging
- Rate limiting implementation
- Geolocation-based redirects
- A/B testing support

Show the complete middleware.ts file with TypeScript types.

Implement Next.js image optimization for a [describe app type]:

**Image Component Usage:**
- Responsive images with proper sizing
- Lazy loading with intersection observer
- Placeholder blur effects
- Art direction for different breakpoints

**Performance Optimization:**
- WebP/AVIF format conversion
- Proper width and height specifications
- Priority loading for above-the-fold images
- Image caching strategies

**Implementation:**
- Gallery component with optimized images
- Avatar upload with automatic resizing
- Product image carousel
- Background images with Next.js Image

Include examples of different image use cases with proper configuration.

Implement comprehensive SEO for a [describe app type] using Next.js 14:

**Metadata API:**
- Dynamic page titles and descriptions
- Open Graph tags for social sharing
- Twitter Card implementation
- Canonical URLs and alternate languages

**Structured Data:**
- JSON-LD schema markup
- Rich snippets for [relevant content type]
- Breadcrumb navigation
- FAQ schema where applicable

**Technical SEO:**
- XML sitemap generation
- Robots.txt configuration
- 404 and error page optimization
- Page speed optimization

**Analytics Integration:**
- Google Analytics 4 setup
- Google Search Console verification
- Core Web Vitals tracking

Show the complete metadata configuration and SEO components.

Create a FastAPI application for [describe purpose] with:

**Project Structure:**
- Modular architecture with separate routers
- Database models with SQLAlchemy
- Pydantic models for request/response validation
- Dependency injection for database sessions
- Authentication and authorization system

**Features:**
- CRUD operations for [main entities]
- User authentication with JWT tokens
- File upload and processing
- Background tasks with Celery
- API documentation with automatic OpenAPI

**Database:**
- PostgreSQL with asyncpg driver
- Alembic migrations
- Connection pooling
- Database indexing strategy

Include the main application file, models, and key router examples.

Build a Django REST Framework API for [describe application]:

**Models & Database:**
- Django models with proper relationships
- Custom model managers and querysets
- Database optimization with select_related/prefetch_related
- Custom migrations for data transformation

**API Endpoints:**
- ViewSets with custom actions
- Serializers with validation
- Pagination and filtering
- Permission classes for authorization
- Custom authentication backends

**Additional Features:**
- Celery for background tasks
- Redis for caching
- Email notifications
- File handling with Django Storage
- API versioning strategy

Show the complete models.py, serializers.py, and views.py files.

Create a Flask microservice for [specific functionality]:

**Application Structure:**
- Factory pattern with application configuration
- Blueprint organization for different modules
- Database integration with SQLAlchemy
- Marshmallow for serialization
- Flask-JWT-Extended for authentication

**Key Features:**
- RESTful API endpoints
- Input validation and error handling
- Logging and monitoring setup
- Docker containerization
- Health check endpoints

**Production Setup:**
- Gunicorn WSGI server configuration
- Environment-based configuration
- Database connection pooling
- Rate limiting with Flask-Limiter
- CORS handling

Include the complete application factory and main blueprint.

Create a data processing pipeline using pandas for [describe data type]:

**Data Ingestion:**
- Read from multiple sources (CSV, JSON, API, database)
- Handle different file formats and encodings
- Data validation and quality checks
- Error handling for malformed data

**Data Transformation:**
- Clean and standardize data formats
- Handle missing values appropriately
- Create derived columns and calculations
- Aggregate data for analysis
- Merge and join datasets

**Data Export:**
- Export to different formats (CSV, Excel, Parquet)
- Database bulk operations
- API data posting
- Data quality reports

**Performance:**
- Chunk processing for large datasets
- Memory optimization techniques
- Parallel processing where applicable

Include the complete pipeline script with error handling.

Create comprehensive data visualizations for [describe dataset]:

**Visualization Libraries:**
- Matplotlib for statistical plots
- Seaborn for enhanced statistical visualization
- Plotly for interactive charts
- Altair for declarative visualization

**Chart Types:**
- Time series analysis plots
- Distribution and correlation analysis
- Geographic data visualization
- Multi-dimensional data exploration
- Statistical significance testing

**Interactive Features:**
- Plotly Dash dashboard
- Jupyter notebook with widgets
- Export functionality (PNG, SVG, PDF)
- Responsive design for different screen sizes

**Performance:**
- Efficient data sampling for large datasets
- Lazy loading for interactive elements
- Caching for expensive computations

Show examples of key visualizations with customization options.

Build a complete ML pipeline for [describe ML task]:

**Data Preparation:**
- Feature engineering and selection
- Data preprocessing and scaling
- Train/validation/test split
- Cross-validation strategy
- Handling imbalanced datasets

**Model Development:**
- Multiple algorithm comparison
- Hyperparameter tuning with GridSearch/RandomSearch
- Model evaluation with appropriate metrics
- Feature importance analysis
- Model interpretability (SHAP, LIME)

**Production Pipeline:**
- Model serialization with joblib/pickle
- Prediction API endpoint
- Model monitoring and drift detection
- A/B testing framework
- Automated retraining pipeline

**MLOps:**
- Experiment tracking with MLflow
- Model versioning
- Containerized deployment
- CI/CD for ML models

Include the complete pipeline from data to deployment.

Create a robust web scraping system for [describe target]:

**Scraping Framework:**
- Scrapy spiders with custom pipelines
- BeautifulSoup for HTML parsing
- Selenium for JavaScript-heavy sites
- Requests with session management
- Proxy rotation and rate limiting

**Data Extraction:**
- CSS selectors and XPath expressions
- Dynamic content handling
- Form submission and interaction
- File download and processing
- Multi-page navigation

**Robustness:**
- Error handling and retry logic
- Captcha detection and handling
- User-agent rotation
- Respect for robots.txt
- Monitoring and alerting

**Data Storage:**
- Database integration
- File export in multiple formats
- Data deduplication
- Incremental updates

Show the complete scraper with proper error handling.

Create automation scripts for [describe tasks]:

**File Management:**
- Automated file organization
- Batch file processing
- Directory synchronization
- File format conversion
- Backup and archival systems

**System Integration:**
- API integrations with third-party services
- Database maintenance tasks
- Report generation and distribution
- Email automation
- Scheduled task execution

**Monitoring:**
- System health checks
- Performance monitoring
- Error notification systems
- Log aggregation and analysis
- Resource usage tracking

**Configuration:**
- Environment-based settings
- Command-line argument parsing
- Configuration file management
- Secrets management

Include examples of different automation scenarios.

Implement comprehensive testing for [describe Python application]:

**Testing Framework:**
- pytest with fixtures and parametrization
- Unit tests for individual functions
- Integration tests for API endpoints
- End-to-end tests for complete workflows
- Performance tests with pytest-benchmark

**Test Coverage:**
- Code coverage with pytest-cov
- Test coverage reporting
- Coverage thresholds and enforcement
- Mutation testing with mutmut

**Mocking & Fixtures:**
- Database fixtures for testing
- API mocking with responses/httpx_mock
- File system mocking
- Time-based testing

**Quality Assurance:**
- Code formatting with black
- Import sorting with isort
- Linting with flake8/pylint
- Type checking with mypy
- Security scanning with bandit

Show the complete testing setup with CI/CD integration.

Create a Gradio interface for an image classification model:

**Model Integration:**
- Load pre-trained model (PyTorch/TensorFlow/Hugging Face)
- Image preprocessing pipeline
- Batch prediction support
- Confidence score display
- Class probability visualization

**Interface Features:**
- Image upload with drag-and-drop
- Webcam capture option
- Example images for testing
- Real-time prediction updates
- Results export functionality

**Visualization:**
- Confidence bar charts
- Confusion matrix display
- Feature activation maps
- Prediction history tracking
- Model performance metrics

**Advanced Features:**
- Multiple model comparison
- Custom image augmentation
- Batch processing interface
- Model explanation with LIME/SHAP

Include the complete Gradio app with proper error handling.

Create a Gradio interface for data analysis and visualization:

**Data Input:**
- CSV/Excel file upload
- URL data loading
- Database connections
- API data fetching
- Sample datasets

**Analysis Tools:**
- Descriptive statistics
- Correlation analysis
- Distribution visualization
- Outlier detection
- Missing value analysis

**Visualization:**
- Interactive plots with Plotly
- Statistical charts
- Correlation heatmaps
- Time series analysis
- Geographic visualizations

**Export Features:**
- Download processed data
- Export visualizations
- Generate analysis reports
- Share analysis results

Include data validation and error handling.

Build a Gradio app to compare multiple [type] models:

**Model Management:**
- Load multiple pre-trained models
- Model metadata and descriptions
- Performance benchmarks display
- Model switching interface
- Version comparison

**Comparison Features:**
- Side-by-side predictions
- Performance metrics comparison
- Inference time measurement
- Accuracy/quality scoring
- Visual difference highlighting

**Interactive Elements:**
- Parameter adjustment sliders
- Real-time updates
- A/B testing interface
- User preference voting
- Feedback collection

**Results Analysis:**
- Statistical significance testing
- Performance trend analysis
- User preference analytics
- Model recommendation system

Show the complete multi-model comparison interface.

Create a Gradio interface for model fine-tuning:

**Data Management:**
- Training data upload
- Data validation and preview
- Data augmentation options
- Train/validation split
- Data quality metrics

**Training Configuration:**
- Hyperparameter selection
- Training schedule setup
- Early stopping configuration
- Checkpoint management
- Resource allocation

**Training Monitoring:**
- Real-time loss/metric plots
- Training progress tracking
- Resource usage monitoring
- Early stopping triggers
- Model evaluation

**Model Export:**
- Trained model download
- Model format conversion
- Deployment configuration
- Performance reports

Include proper error handling and resource management.

Build a Gradio demo for [research topic/paper]:

**Research Showcase:**
- Interactive paper abstract
- Method explanation with visuals
- Parameter exploration interface
- Results reproduction
- Comparison with baselines

**Educational Features:**
- Step-by-step algorithm walkthrough
- Parameter sensitivity analysis
- Visual explanation of concepts
- Interactive examples
- Educational tooltips

**Experimentation:**
- Custom dataset upload
- Parameter tuning interface
- Real-time visualization
- Experiment comparison
- Results sharing

**Documentation:**
- Methodology explanations
- Usage instructions
- Citation information
- Related work links

Show the complete research demonstration interface.

Deploy a Gradio app to Hugging Face Spaces:

**Deployment Setup:**
- requirements.txt with exact versions
- app.py with proper Gradio configuration
- README.md with app description
- Dockerfile for custom environments
- Environment variables configuration

**Performance Optimization:**
- Model caching strategies
- Memory management
- GPU utilization (if available)
- Concurrent user handling
- Request queuing

**User Experience:**
- Loading states and progress bars
- Error handling and user feedback
- Mobile-responsive design
- Accessibility features
- Usage analytics

**Monitoring:**
- Error logging and tracking
- Performance metrics
- User interaction analytics
- Resource usage monitoring

Include the complete deployment configuration.

Set up custom hosting for a Gradio application:

**Server Setup:**
- Docker containerization
- Nginx reverse proxy configuration
- SSL certificate setup
- Load balancing for multiple instances
- Auto-scaling configuration

**Security:**
- Authentication integration
- Rate limiting
- Input validation
- CORS configuration
- Security headers

**Monitoring & Logging:**
- Application logging
- Performance monitoring
- Error tracking
- User analytics
- Health checks

**CI/CD Pipeline:**
- Automated testing
- Deployment automation
- Rollback strategies
- Environment management

Show the complete hosting setup with Docker and infrastructure code.

Create a comprehensive analytics dashboard using Streamlit:

**Data Sources:**
- Multiple data source connections (CSV, database, API)
- Real-time data refresh capabilities
- Data caching for performance
- Error handling for data loading
- Data validation and cleaning

**Dashboard Layout:**
- Multi-page application structure
- Sidebar navigation and filters
- Responsive grid layout
- Customizable date ranges
- Export functionality

**Visualizations:**
- KPI metrics with st.metric()
- Interactive charts with Plotly
- Data tables with filtering/sorting
- Geographic visualizations
- Time series analysis

**Interactivity:**
- Dynamic filtering and drill-down
- Cross-chart interactions
- Real-time updates
- User preference saving
- Dashboard customization

Include the complete multi-page dashboard with caching.

Build a financial analysis dashboard with Streamlit:

**Data Integration:**
- Stock price APIs (Yahoo Finance, Alpha Vantage)
- Economic indicators
- Portfolio data import
- Real-time market data
- Historical data analysis

**Financial Calculations:**
- Portfolio performance metrics
- Risk analysis (VaR, Sharpe ratio)
- Technical indicators
- Correlation analysis
- Monte Carlo simulations

**Visualizations:**
- Candlestick charts
- Portfolio allocation pie charts
- Performance comparison charts
- Risk-return scatter plots
- Drawdown analysis

**Features:**
- Stock screener
- Backtesting interface
- Alert system
- Report generation
- Export to Excel/PDF

Show the complete financial dashboard with proper data handling.

Create a business intelligence dashboard for [business domain]:

**Data Pipeline:**
- ETL processes for business data
- Data warehouse connections
- Automated data refresh
- Data quality monitoring
- Historical data management

**Business Metrics:**
- Revenue and growth analysis
- Customer acquisition metrics
- Operational efficiency KPIs
- Forecasting and trends
- Competitive analysis

**Interactive Features:**
- Drill-down capabilities
- Dynamic segmentation
- Comparative analysis
- Goal tracking
- Scenario planning

**Reporting:**
- Automated report generation
- Executive summaries
- Departmental dashboards
- Mobile-responsive design
- Scheduled report delivery

Include the complete BI dashboard with user role management.

Build a Streamlit app for machine learning model training:

**Data Management:**
- Dataset upload and validation
- Data preprocessing options
- Feature engineering interface
- Data visualization and exploration
- Train/test split configuration

**Model Configuration:**
- Algorithm selection interface
- Hyperparameter tuning controls
- Cross-validation setup
- Feature selection options
- Model comparison framework

**Training Process:**
- Real-time training progress
- Live metric updates
- Early stopping controls
- Resource usage monitoring
- Training history tracking

**Results Analysis:**
- Model performance metrics
- Feature importance plots
- Confusion matrices
- ROC curves and precision-recall
- Model interpretability (SHAP)

**Model Deployment:**
- Model serialization
- Prediction interface
- Batch prediction capabilities
- Model versioning
- Performance monitoring

Show the complete ML training application.

Create a Streamlit prediction service for [ML task]:

**Model Loading:**
- Pre-trained model integration
- Model version management
- Multiple model support
- Model metadata display
- Performance benchmarks

**Input Interface:**
- User-friendly input forms
- File upload for batch predictions
- Real-time input validation
- Example data provision
- Input history tracking

**Prediction Results:**
- Clear prediction display
- Confidence scores
- Prediction explanations
- Result visualization
- Export capabilities

**Monitoring:**
- Prediction logging
- Model performance tracking
- Input distribution monitoring
- Error rate analysis
- Usage analytics

Include proper error handling and result caching.

Build an A/B testing platform with Streamlit:

**Experiment Setup:**
- Test configuration interface
- Sample size calculators
- Randomization methods
- Success metrics definition
- Duration planning

**Data Collection:**
- Event tracking integration
- Real-time data ingestion
- Data validation
- Participant assignment
- Experiment monitoring

**Analysis Engine:**
- Statistical significance testing
- Confidence interval calculations
- Effect size measurement
- Sequential analysis
- Bayesian methods

**Reporting:**
- Real-time results dashboard
- Statistical significance alerts
- Experiment reports
- Visualization of results
- Recommendation engine

Show the complete A/B testing platform with statistical analysis.

Create an interactive data exploration tool:

**Data Loading:**
- Multiple file format support
- Database connections
- API data fetching
- Large file handling
- Data preview and sampling

**Exploration Features:**
- Automated data profiling
- Missing value analysis
- Distribution visualizations
- Correlation analysis
- Outlier detection

**Interactive Visualizations:**
- Dynamic chart creation
- Filter and drill-down capabilities
- Custom plot configurations
- Multi-dimensional analysis
- Export visualizations

**Data Transformation:**
- Column operations
- Data cleaning tools
- Feature engineering
- Data export options
- Transformation history

Include comprehensive data validation and error handling.

Build a survey creation and analysis tool:

**Survey Creation:**
- Dynamic form builder
- Question type library
- Logic and branching rules
- Design customization
- Preview functionality

**Data Collection:**
- Response tracking
- Real-time submissions
- Data validation
- Duplicate prevention
- Export options

**Analysis Tools:**
- Response statistics
- Cross-tabulation analysis
- Sentiment analysis
- Text analytics
- Trend analysis

**Reporting:**
- Automated reports
- Custom visualizations
- Executive summaries
- Comparative analysis
- Dashboard creation

Show the complete survey platform with data analysis.