From 1df36f1cd8814fc08d73cc6aa42b13a1092b4773 Mon Sep 17 00:00:00 2001 From: aabdraev Date: Wed, 11 Jun 2025 00:35:25 +0600 Subject: [PATCH 1/2] added prompts for integrations --- .../google-analytics.md | 24 +++++++++++++++ .../analitycs-and-tracking/hotjar.md | 24 +++++++++++++++ .../analitycs-and-tracking/mixpanel.md | 24 +++++++++++++++ .../analitycs-and-tracking/posthog.md | 24 +++++++++++++++ .../frontend/integrations/base-prompt.md | 21 ++++++++++++++ .../email-apis/firebase-cloud-messaging.md | 25 ++++++++++++++++ .../integrations/email-apis/intercom.md | 25 ++++++++++++++++ .../integrations/email-apis/mailgun.md | 25 ++++++++++++++++ .../integrations/email-apis/sendgrid.md | 25 ++++++++++++++++ .../maps-and-location-services/google-maps.md | 29 +++++++++++++++++++ .../maps-and-location-services/here-maps.md | 29 +++++++++++++++++++ .../maps-and-location-services/leaflet.md | 29 +++++++++++++++++++ .../maps-and-location-services/mapbox.md | 29 +++++++++++++++++++ .../open-street-map-and-leaflet.md | 29 +++++++++++++++++++ .../oauth-providers/apple-signin.md | 26 +++++++++++++++++ .../integrations/oauth-providers/auth0.md | 22 ++++++++++++++ .../oauth-providers/github-oauth.md | 25 ++++++++++++++++ .../oauth-providers/google-oauth.md | 17 +++++++++++ .../oauth-providers/twitter-oauth.md | 25 ++++++++++++++++ .../payments-and-subscriptions/paddle.md | 24 +++++++++++++++ .../payments-and-subscriptions/pay-pal.md | 23 +++++++++++++++ .../payments-and-subscriptions/stripe.md | 24 +++++++++++++++ .../search-and_recommendations/algolia.md | 23 +++++++++++++++ .../amazon-personalize.md | 24 +++++++++++++++ .../elasticsearch.md | 24 +++++++++++++++ .../search-and_recommendations/meilisearch.md | 24 +++++++++++++++ .../search-and_recommendations/typesense.md | 24 +++++++++++++++ .../storage-file_handling/aws-s3.md | 28 ++++++++++++++++++ .../storage-file_handling/cloudinary.md | 26 +++++++++++++++++ .../storage-file_handling/filestack.md | 27 +++++++++++++++++ .../storage-file_handling/firebase-storage.md | 27 +++++++++++++++++ .../storage-file_handling/imgix.md | 26 +++++++++++++++++ .../storage-file_handling/upload-care.md | 27 +++++++++++++++++ 33 files changed, 828 insertions(+) create mode 100644 prompt-templates/frontend/integrations/analitycs-and-tracking/google-analytics.md create mode 100644 prompt-templates/frontend/integrations/analitycs-and-tracking/hotjar.md create mode 100644 prompt-templates/frontend/integrations/analitycs-and-tracking/mixpanel.md create mode 100644 prompt-templates/frontend/integrations/analitycs-and-tracking/posthog.md create mode 100644 prompt-templates/frontend/integrations/base-prompt.md create mode 100644 prompt-templates/frontend/integrations/email-apis/firebase-cloud-messaging.md create mode 100644 prompt-templates/frontend/integrations/email-apis/intercom.md create mode 100644 prompt-templates/frontend/integrations/email-apis/mailgun.md create mode 100644 prompt-templates/frontend/integrations/email-apis/sendgrid.md create mode 100644 prompt-templates/frontend/integrations/maps-and-location-services/google-maps.md create mode 100644 prompt-templates/frontend/integrations/maps-and-location-services/here-maps.md create mode 100644 prompt-templates/frontend/integrations/maps-and-location-services/leaflet.md create mode 100644 prompt-templates/frontend/integrations/maps-and-location-services/mapbox.md create mode 100644 prompt-templates/frontend/integrations/maps-and-location-services/open-street-map-and-leaflet.md create mode 100644 prompt-templates/frontend/integrations/oauth-providers/apple-signin.md create mode 100644 prompt-templates/frontend/integrations/oauth-providers/auth0.md create mode 100644 prompt-templates/frontend/integrations/oauth-providers/github-oauth.md create mode 100644 prompt-templates/frontend/integrations/oauth-providers/google-oauth.md create mode 100644 prompt-templates/frontend/integrations/oauth-providers/twitter-oauth.md create mode 100644 prompt-templates/frontend/integrations/payments-and-subscriptions/paddle.md create mode 100644 prompt-templates/frontend/integrations/payments-and-subscriptions/pay-pal.md create mode 100644 prompt-templates/frontend/integrations/payments-and-subscriptions/stripe.md create mode 100644 prompt-templates/frontend/integrations/search-and_recommendations/algolia.md create mode 100644 prompt-templates/frontend/integrations/search-and_recommendations/amazon-personalize.md create mode 100644 prompt-templates/frontend/integrations/search-and_recommendations/elasticsearch.md create mode 100644 prompt-templates/frontend/integrations/search-and_recommendations/meilisearch.md create mode 100644 prompt-templates/frontend/integrations/search-and_recommendations/typesense.md create mode 100644 prompt-templates/frontend/integrations/storage-file_handling/aws-s3.md create mode 100644 prompt-templates/frontend/integrations/storage-file_handling/cloudinary.md create mode 100644 prompt-templates/frontend/integrations/storage-file_handling/filestack.md create mode 100644 prompt-templates/frontend/integrations/storage-file_handling/firebase-storage.md create mode 100644 prompt-templates/frontend/integrations/storage-file_handling/imgix.md create mode 100644 prompt-templates/frontend/integrations/storage-file_handling/upload-care.md diff --git a/prompt-templates/frontend/integrations/analitycs-and-tracking/google-analytics.md b/prompt-templates/frontend/integrations/analitycs-and-tracking/google-analytics.md new file mode 100644 index 0000000..6676c54 --- /dev/null +++ b/prompt-templates/frontend/integrations/analitycs-and-tracking/google-analytics.md @@ -0,0 +1,24 @@ +Help me integrate Google Analytics 4 (GA4) into my [TECH_STACK] application. + +Project context: + +- Tech stack: [XXX] +- Development environment: [YYY] +- Integration purpose: Track user behavior, page views, and custom events + +What I need: + +1. GA4 property setup and configuration +2. Google Tag Manager integration +3. Page view tracking implementation +4. Custom event tracking (button clicks, form submissions) +5. E-commerce tracking for purchases +6. GDPR compliance and cookie consent + +Additional requirements: + +- Server-side tracking for better data accuracy +- Custom dimensions and metrics +- Integration with Google Tag Manager + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/analitycs-and-tracking/hotjar.md b/prompt-templates/frontend/integrations/analitycs-and-tracking/hotjar.md new file mode 100644 index 0000000..9cbbbfd --- /dev/null +++ b/prompt-templates/frontend/integrations/analitycs-and-tracking/hotjar.md @@ -0,0 +1,24 @@ +Help me integrate Hotjar into my e-commerce website for user experience analysis. + +Project context: + +- Tech stack: [XXX] +- Development environment: [YYY] +- Integration purpose: Session recording, heatmaps, and user feedback + +What I need: + +1. Hotjar account setup and site configuration +2. Tracking code implementation +3. Custom event triggers for key user actions +4. Heatmap configuration for important pages +5. Feedback widget integration +6. Privacy compliance and user consent + +Additional requirements: + +- Conditional loading based on user consent +- Integration with existing analytics +- Performance optimization + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/analitycs-and-tracking/mixpanel.md b/prompt-templates/frontend/integrations/analitycs-and-tracking/mixpanel.md new file mode 100644 index 0000000..37a4461 --- /dev/null +++ b/prompt-templates/frontend/integrations/analitycs-and-tracking/mixpanel.md @@ -0,0 +1,24 @@ +Help me integrate Mixpanel into my [TECH_STACK] app. + +Project context: + +- Tech stack: [XXX] +- Development environment: [YYY] +- Integration purpose: Event-based analytics for mobile app user behavior + +What I need: + +1. Mixpanel project setup and API configuration +2. [XXX] SDK integration +3. User identification and profile properties +4. Custom event tracking implementation +5. Revenue tracking for in-app purchases +6. Push notification analytics + +Additional requirements: + +- Offline event queuing +- Cross-platform user tracking +- Funnel analysis setup + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/analitycs-and-tracking/posthog.md b/prompt-templates/frontend/integrations/analitycs-and-tracking/posthog.md new file mode 100644 index 0000000..26b7655 --- /dev/null +++ b/prompt-templates/frontend/integrations/analitycs-and-tracking/posthog.md @@ -0,0 +1,24 @@ +Help me integrate PostHog into my [TECH_STACK] application for product analytics. + +Project context: + +- Tech stack: [XXX] +- Development environment: [YYY] +- Integration purpose: Self-hosted product analytics with feature flags + +What I need: + +1. PostHog instance setup (self-hosted or cloud) +2. [XXX] SDK integration +3. Event tracking implementation +4. User identification and properties +5. Feature flags integration +6. Funnel and cohort analysis setup + +Additional requirements: + +- Session recording configuration +- A/B testing capabilities +- Privacy-compliant tracking + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/base-prompt.md b/prompt-templates/frontend/integrations/base-prompt.md new file mode 100644 index 0000000..9503b92 --- /dev/null +++ b/prompt-templates/frontend/integrations/base-prompt.md @@ -0,0 +1,21 @@ +Help me integrate [SERVICE_NAME] into my [PROJECT_TYPE] project. + +Project context: + +- Tech stack: [e.g., React + Node.js, Next.js, Vue.js + Express, Django + React] +- Development environment: [e.g., JavaScript/TypeScript, Python, PHP, Java] +- Integration purpose: [e.g., user authentication, bot protection, SSO, payment processing] + +What I need: + +- Step-by-step setup and configuration guide +- Required configuration files and environment variables +- Code examples for [frontend/backend/full-stack integration] +- Error handling and edge cases +- Security recommendations and best practices + +Additional requirements: + +- [e.g., mobile device support, UI customization, existing user database integration] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/email-apis/firebase-cloud-messaging.md b/prompt-templates/frontend/integrations/email-apis/firebase-cloud-messaging.md new file mode 100644 index 0000000..1621ce9 --- /dev/null +++ b/prompt-templates/frontend/integrations/email-apis/firebase-cloud-messaging.md @@ -0,0 +1,25 @@ +Help me integrate Firebase Cloud Messaging into my [TECH_STACK] web app for push notifications. + +Project context: + +- Tech stack: [XXX] + Firebase +- Development environment: [YYY] +- Integration purpose: Send push notifications to web browsers + +What I need: + +1. Firebase project setup and FCM configuration +2. Service worker setup for background notifications +3. Token registration and management +4. Send notifications from frontend and backend +5. Notification click handling and deep linking +6. Topic-based and targeted messaging + +Additional requirements: + +- Notification permission handling +- Custom notification styling +- Analytics for notification engagement +- Cross-browser compatibility + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/email-apis/intercom.md b/prompt-templates/frontend/integrations/email-apis/intercom.md new file mode 100644 index 0000000..eb45247 --- /dev/null +++ b/prompt-templates/frontend/integrations/email-apis/intercom.md @@ -0,0 +1,25 @@ +Help me integrate Intercom into my SaaS application for customer support. + +Project context: + +- Tech stack: [XXX] + [ZZZ] +- Development environment: [YYY] +- Integration purpose: Live chat, customer support, and user onboarding + +What I need: + +1. Intercom workspace setup and configuration +2. Messenger widget integration +3. User identification and custom attributes +4. Event tracking for user actions +5. Custom bot setup for automated responses +6. Support ticket management integration + +Additional requirements: + +- Multi-language support +- Custom launcher styling +- Integration with existing user system +- Mobile app support + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/email-apis/mailgun.md b/prompt-templates/frontend/integrations/email-apis/mailgun.md new file mode 100644 index 0000000..5ece44b --- /dev/null +++ b/prompt-templates/frontend/integrations/email-apis/mailgun.md @@ -0,0 +1,25 @@ +Help me integrate Mailgun into my [TECH_STACK] application for email delivery. + +Project context: + +- Tech stack: [XXX] +- Development environment: [YYY] +- Integration purpose: Reliable email delivery with analytics + +What I need: + +1. Mailgun domain setup and DNS configuration +2. [XXX] email backend configuration +3. Template-based email sending +4. Webhook handling for email events +5. Email validation and verification +6. Bulk email sending with rate limiting + +Additional requirements: + +- Email tracking and analytics +- Bounce and complaint handling +- A/B testing for email templates +- GDPR compliance features + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/email-apis/sendgrid.md b/prompt-templates/frontend/integrations/email-apis/sendgrid.md new file mode 100644 index 0000000..194ded2 --- /dev/null +++ b/prompt-templates/frontend/integrations/email-apis/sendgrid.md @@ -0,0 +1,25 @@ +Help me integrate SendGrid into my [TECH_STACK] application for transactional emails. + +Project context: + +- Tech stack: [XXX] +- Development environment: [YYY] +- Integration purpose: Send transactional emails (welcome, password reset, notifications) + +What I need: + +1. SendGrid account setup and API key configuration +2. Dynamic email template creation +3. Email sending implementation with error handling +4. Webhook setup for delivery tracking +5. Email list management and segmentation +6. Bounce and spam handling + +Additional requirements: + +- HTML and plain text email support +- Attachment handling +- Scheduled email sending +- Email analytics integration + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/maps-and-location-services/google-maps.md b/prompt-templates/frontend/integrations/maps-and-location-services/google-maps.md new file mode 100644 index 0000000..d5cd346 --- /dev/null +++ b/prompt-templates/frontend/integrations/maps-and-location-services/google-maps.md @@ -0,0 +1,29 @@ +I need to integrate Google Maps Platform into my project. Here are the details: + +Project Details: + +- Tech stack: [e.g., React + Node.js, Next.js, Vue.js, etc.] +- Map features needed: [basic map, markers, info windows, custom overlays] +- APIs required: [Places API, Directions, Geocoding, Distance Matrix, etc.] +- Use case: [store locator, delivery tracking, route planning, location picker] +- User interactions: [search places, get directions, location autocomplete] +- Data volume: [API calls per month, concurrent users] +- Mobile requirements: [responsive design, touch interactions, geolocation] +- Customization: [custom markers, map styling, branded experience] + +What I need: + +1. Google Cloud Console setup and API key configuration +2. Maps JavaScript API integration +3. Places API implementation (search, autocomplete) +4. Directions and routing functionality +5. Geocoding and reverse geocoding +6. Custom markers and info windows +7. Map styling and customization +8. Performance optimization and API quota management +9. Error handling and fallback strategies +10. Security best practices (API key restrictions) + +Additional context: [specific features, existing Google services, budget considerations] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/maps-and-location-services/here-maps.md b/prompt-templates/frontend/integrations/maps-and-location-services/here-maps.md new file mode 100644 index 0000000..1409b52 --- /dev/null +++ b/prompt-templates/frontend/integrations/maps-and-location-services/here-maps.md @@ -0,0 +1,29 @@ +I need to integrate HERE Maps platform. Here are the details: + +Project Details: + +- Tech stack: [e.g., React + Node.js, Angular, Vue.js, etc.] +- Map features: [interactive maps, satellite imagery, traffic data] +- APIs needed: [Geocoding, Routing, Matrix, Weather, Places] +- Use case: [logistics, fleet management, location intelligence, navigation] +- Industry focus: [automotive, logistics, IoT, enterprise solutions] +- Data requirements: [real-time traffic, weather, POI data] +- Scale: [number of users, API calls, global vs regional] +- Integration complexity: [basic maps, advanced routing, custom solutions] + +What I need: + +1. HERE Developer Portal setup and API key management +2. HERE Maps API for JavaScript integration +3. Geocoding and reverse geocoding implementation +4. Advanced routing and matrix calculations +5. Traffic and incident data integration +6. Weather data integration +7. Places and POI search functionality +8. Fleet tracking and logistics features +9. Performance optimization and caching strategies +10. Enterprise features and compliance requirements + +Additional context: [industry-specific needs, existing HERE services, enterprise requirements] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/maps-and-location-services/leaflet.md b/prompt-templates/frontend/integrations/maps-and-location-services/leaflet.md new file mode 100644 index 0000000..9adf03d --- /dev/null +++ b/prompt-templates/frontend/integrations/maps-and-location-services/leaflet.md @@ -0,0 +1,29 @@ +I need to implement Leaflet for interactive mapping. Here are the details: + +Project Details: + +- Tech stack: [e.g., React + Node.js, Vue.js, vanilla JavaScript] +- Map providers: [OpenStreetMap, custom tiles, multiple sources] +- Interactivity: [markers, popups, drawing, editing, clustering] +- Data visualization: [GeoJSON layers, heatmaps, choropleth maps] +- Plugins needed: [routing, drawing, clustering, fullscreen, etc.] +- Custom features: [custom controls, animations, data binding] +- Performance: [large datasets, mobile optimization, smooth interactions] +- Styling: [custom markers, map themes, responsive design] + +What I need: + +1. Leaflet library setup and configuration +2. Multiple tile layer integration and switching +3. Advanced marker management and clustering +4. GeoJSON data loading and styling +5. Interactive drawing and editing tools +6. Custom controls and UI components +7. Plugin integration and configuration +8. Performance optimization techniques +9. Mobile-first responsive implementation +10. Data binding and state management + +Additional context: [specific plugins, data sources, design requirements] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/maps-and-location-services/mapbox.md b/prompt-templates/frontend/integrations/maps-and-location-services/mapbox.md new file mode 100644 index 0000000..c4f54dc --- /dev/null +++ b/prompt-templates/frontend/integrations/maps-and-location-services/mapbox.md @@ -0,0 +1,29 @@ +I need to integrate Mapbox for mapping functionality. Here are the details: + +Project Details: + +- Tech stack: [e.g., React + Node.js, Vue.js, vanilla JS, etc.] +- Map style: [default, custom design, satellite, terrain, navigation] +- Features needed: [interactive maps, markers, popups, drawing tools] +- APIs required: [Geocoding, Directions, Matrix, Isochrone, Static Images] +- Use case: [data visualization, route optimization, location analysis, real-time tracking] +- Customization level: [basic styling, fully custom map design, branded experience] +- Data sources: [GeoJSON, external APIs, real-time data feeds] +- Performance needs: [large datasets, smooth animations, mobile optimization] + +What I need: + +1. Mapbox account setup and access token configuration +2. Mapbox GL JS integration and basic map setup +3. Custom map styling (Mapbox Studio integration) +4. Data layer management (GeoJSON, vector tiles) +5. Interactive features (markers, popups, controls) +6. Geocoding and search functionality +7. Routing and navigation features +8. Performance optimization for large datasets +9. Mobile responsiveness and touch interactions +10. Analytics and usage monitoring + +Additional context: [design requirements, data complexity, specific Mapbox features] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/maps-and-location-services/open-street-map-and-leaflet.md b/prompt-templates/frontend/integrations/maps-and-location-services/open-street-map-and-leaflet.md new file mode 100644 index 0000000..d6eb12b --- /dev/null +++ b/prompt-templates/frontend/integrations/maps-and-location-services/open-street-map-and-leaflet.md @@ -0,0 +1,29 @@ +I need to integrate OpenStreetMap with Leaflet for mapping. Here are the details: + +Project Details: + +- Tech stack: [e.g., React + Node.js, Vue.js, static site, etc.] +- Map requirements: [basic display, interactive features, custom markers] +- Data sources: [OSM data, custom GeoJSON, external APIs] +- Features needed: [search, routing, drawing, layer management] +- Tile servers: [OpenStreetMap, custom tiles, multiple providers] +- Use case: [community mapping, data visualization, location services] +- Offline capabilities: [tile caching, offline maps, PWA features] +- Customization: [custom markers, styling, plugins] + +What I need: + +1. Leaflet library setup and basic map configuration +2. OpenStreetMap tile layer integration +3. Custom marker and popup implementation +4. GeoJSON data loading and visualization +5. Search functionality (Nominatim integration) +6. Routing implementation (OSRM or similar) +7. Drawing and editing tools +8. Layer management and controls +9. Mobile optimization and responsive design +10. Plugin integration and customization + +Additional context: [open-source requirements, specific OSM data needs, budget constraints] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/oauth-providers/apple-signin.md b/prompt-templates/frontend/integrations/oauth-providers/apple-signin.md new file mode 100644 index 0000000..1898e93 --- /dev/null +++ b/prompt-templates/frontend/integrations/oauth-providers/apple-signin.md @@ -0,0 +1,26 @@ +Help me integrate Apple Sign In into my [TECH_STACK] application. + +Project context: + +- Tech stack: [XXX] + [YYY] +- Development environment: [ZZZ] +- Integration purpose: Apple Sign In for iOS authentication compliance + +What I need: + +1. Apple Developer account setup and app configuration +2. Apple Sign In button implementation +3. Authentication flow with secure token handling +4. User identity verification and privacy features +5. Backend token validation +6. Cross-platform compatibility (iOS/Android) + +Additional requirements: + +- Handle "Hide My Email" feature +- Seamless user experience on iOS devices +- Fallback authentication for Android +- Compliance with App Store guidelines +- Integration with existing user management + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/oauth-providers/auth0.md b/prompt-templates/frontend/integrations/oauth-providers/auth0.md new file mode 100644 index 0000000..b8f2782 --- /dev/null +++ b/prompt-templates/frontend/integrations/oauth-providers/auth0.md @@ -0,0 +1,22 @@ +Help me integrate Auth0 into my [TECH_STACK] project. + +Project context: + +- Tech stack: [XXX] (frontend) + [YYY] (backend) +- Development environment: [ZZZ] +- Integration purpose: Complete authentication system with user management + +What I need: + +1. Auth0 dashboard configuration +2. Frontend authentication flow +3. Backend API protection +4. User profile management +5. Role-based access control + +Additional requirements: + +- Social login options +- Custom login page design + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/oauth-providers/github-oauth.md b/prompt-templates/frontend/integrations/oauth-providers/github-oauth.md new file mode 100644 index 0000000..27994a9 --- /dev/null +++ b/prompt-templates/frontend/integrations/oauth-providers/github-oauth.md @@ -0,0 +1,25 @@ +Help me integrate GitHub OAuth into my [TECH_STACK] application for developer authentication. + +Project context: + +- Tech stack: [XXX] +- Development environment: [YYY] +- Integration purpose: Allow developers to sign in with their GitHub accounts + +What I need: + +1. GitHub OAuth App setup and configuration +2. OAuth flow implementation (authorization code flow) +3. User profile and repository access +4. Token management and refresh handling +5. Scope management for different permission levels +6. Integration with existing user system + +Additional requirements: + +- Access to user's repositories and organizations +- GitHub API integration for fetching user data +- Secure token storage and management +- Error handling for OAuth failures + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/oauth-providers/google-oauth.md b/prompt-templates/frontend/integrations/oauth-providers/google-oauth.md new file mode 100644 index 0000000..a4600e7 --- /dev/null +++ b/prompt-templates/frontend/integrations/oauth-providers/google-oauth.md @@ -0,0 +1,17 @@ +Help me integrate Google OAuth into [TECH_STACK] project. + +Project context: + +- Tech stack: [XXX] (frontend) + [YYY] (backend) +- Development environment:[ZZZ] +- Integration purpose: User authentication via Google accounts + +What I need: + +1. Step-by-step Google Cloud Console setup guide +2. Environment variables configuration +3. Code examples for both frontend and backend +4. JWT token handling +5. Security recommendations and best practices + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/oauth-providers/twitter-oauth.md b/prompt-templates/frontend/integrations/oauth-providers/twitter-oauth.md new file mode 100644 index 0000000..c4bcf8a --- /dev/null +++ b/prompt-templates/frontend/integrations/oauth-providers/twitter-oauth.md @@ -0,0 +1,25 @@ +Help me integrate Twitter OAuth into my [TECH_STACK] for social login. + +Project context: + +- Tech stack: [XXX] +- Development environment: [ZZZ] +- Integration purpose: Twitter social authentication and basic profile access + +What I need: + +1. Twitter Developer account and app setup +2. OAuth 2.0 implementation with PKCE +3. User authentication and profile retrieval +4. Tweet posting capabilities (optional) +5. Rate limiting and error handling +6. Integration with existing authentication system + +Additional requirements: + +- Access to user's basic profile information +- Secure handling of access tokens +- Mobile-responsive authentication flow +- Compliance with Twitter's developer policies + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/payments-and-subscriptions/paddle.md b/prompt-templates/frontend/integrations/payments-and-subscriptions/paddle.md new file mode 100644 index 0000000..b81f16a --- /dev/null +++ b/prompt-templates/frontend/integrations/payments-and-subscriptions/paddle.md @@ -0,0 +1,24 @@ +Help me integrate Paddle into my SaaS application. + +Project context: + +- Tech stack: [XXX] + [YYY] +- Development environment: [ZZZ] +- Integration purpose: SaaS subscription billing with tax compliance + +What I need: + +1. Paddle account setup and configuration +2. Subscription plan creation +3. Checkout integration +4. Webhook handling for subscription events +5. Customer portal implementation +6. Tax compliance and reporting + +Additional requirements: + +- Multi-tier pricing plans +- Trial period management +- Dunning management for failed payments + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/payments-and-subscriptions/pay-pal.md b/prompt-templates/frontend/integrations/payments-and-subscriptions/pay-pal.md new file mode 100644 index 0000000..b7838bc --- /dev/null +++ b/prompt-templates/frontend/integrations/payments-and-subscriptions/pay-pal.md @@ -0,0 +1,23 @@ +Help me integrate PayPal into my [TECH_STACK] project. + +Project context: + +- Tech stack: [XXX] (full-stack) +- Development environment: [ZZZ] +- Integration purpose: One-time payments and invoicing system + +What I need: + +1. PayPal Developer account setup +2. PayPal SDK integration +3. Payment button implementation +4. Order creation and capture +5. Webhook configuration for payment notifications +6. Invoice generation and management + +Additional requirements: + +- Mobile-responsive payment flow +- Multiple currency support + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/payments-and-subscriptions/stripe.md b/prompt-templates/frontend/integrations/payments-and-subscriptions/stripe.md new file mode 100644 index 0000000..55761f9 --- /dev/null +++ b/prompt-templates/frontend/integrations/payments-and-subscriptions/stripe.md @@ -0,0 +1,24 @@ +Help me integrate Stripe payments into my [TECH_STACK] e-commerce project. + +Project context: + +- Tech stack: [XXX] (frontend) + [YYY] (backend) +- Development environment: [ZZZ] +- Integration purpose: Accept card payments, Apple Pay, and handle subscriptions + +What I need: + +1. Stripe account setup and API key configuration +2. Frontend payment form with Stripe Elements +3. Backend payment intent creation and confirmation +4. Webhook handling for payment events +5. Subscription billing implementation +6. Security best practices and PCI compliance + +Additional requirements: + +- Apple Pay integration +- Recurring subscription management +- Invoice generation + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/search-and_recommendations/algolia.md b/prompt-templates/frontend/integrations/search-and_recommendations/algolia.md new file mode 100644 index 0000000..1319ac7 --- /dev/null +++ b/prompt-templates/frontend/integrations/search-and_recommendations/algolia.md @@ -0,0 +1,23 @@ +I need to integrate Algolia search into my project. Here are the details: + +Project Details: + +- Tech stack: [e.g., React + Node.js, Next.js, Vue.js, etc.] +- Search type: [full-text search, autocomplete, faceted search, instant search] +- Data volume: [approximate number of records] +- Data type: [products, articles, users, etc.] +- Special requirements: [multi-language, real-time updates, complex filters, etc.] + +What I need: + +1. Step-by-step integration guide +2. Code examples for indexing data +3. Frontend search implementation with UI +4. Search configuration and ranking setup +5. Error handling examples +6. Performance optimization tips +7. Best practices for my use case + +Additional context: [any specific details about your implementation] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/search-and_recommendations/amazon-personalize.md b/prompt-templates/frontend/integrations/search-and_recommendations/amazon-personalize.md new file mode 100644 index 0000000..aa61fa8 --- /dev/null +++ b/prompt-templates/frontend/integrations/search-and_recommendations/amazon-personalize.md @@ -0,0 +1,24 @@ +I need to integrate Amazon Personalize for recommendations. Here are the details: + +Project Details: + +- Tech stack: [e.g., React + Node.js, Python backend, etc.] +- AWS setup: [existing AWS account, IAM permissions status] +- Recommendation type: [product recommendations, content recommendations, etc.] +- Data available: [user interactions, item metadata, user profiles] +- Use cases: [similar items, user personalization, trending items] +- Integration points: [website, mobile app, email campaigns] + +What I need: + +1. AWS setup and IAM configuration +2. Dataset preparation and import process +3. Solution and campaign creation +4. Real-time recommendation API integration +5. Batch recommendation processing +6. Performance monitoring and optimization +7. Cost optimization strategies + +Additional context: [data volume, expected traffic, specific business requirements] + +Please provide a complete working example with detailed comments. \ No newline at end of file diff --git a/prompt-templates/frontend/integrations/search-and_recommendations/elasticsearch.md b/prompt-templates/frontend/integrations/search-and_recommendations/elasticsearch.md new file mode 100644 index 0000000..01c1061 --- /dev/null +++ b/prompt-templates/frontend/integrations/search-and_recommendations/elasticsearch.md @@ -0,0 +1,24 @@ +I need to integrate Elasticsearch into my project. Here are the details: + +Project Details: + +- Tech stack: [e.g., React + Node.js, Python + Django, etc.] +- Deployment: [Elastic Cloud, self-hosted, Docker] +- Use case: [search, analytics, logging, etc.] +- Data volume: [approximate number of documents] +- Data complexity: [simple text, nested objects, relationships] +- Special requirements: [aggregations, complex queries, real-time indexing] + +What I need: + +1. Cluster setup and configuration +2. Index mapping and data ingestion +3. Search query examples (simple and complex) +4. Aggregation and analytics queries +5. Performance optimization strategies +6. Monitoring and error handling +7. Security best practices + +Additional context: [any specific details about your implementation] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/search-and_recommendations/meilisearch.md b/prompt-templates/frontend/integrations/search-and_recommendations/meilisearch.md new file mode 100644 index 0000000..2e62cb8 --- /dev/null +++ b/prompt-templates/frontend/integrations/search-and_recommendations/meilisearch.md @@ -0,0 +1,24 @@ +I need to integrate Meilisearch into my project. Here are the details: + +Project Details: + +- Tech stack: [e.g., React + Node.js, Next.js, Vue.js, etc.] +- Deployment preference: [self-hosted, cloud, Docker] +- Search type: [full-text search, typo-tolerant search, faceted search] +- Data volume: [approximate number of records] +- Data type: [products, documents, etc.] +- Special requirements: [multi-language, custom ranking, filtering, etc.] + +What I need: + +1. Installation and setup guide +2. Index creation and data ingestion examples +3. Search implementation with frontend code +4. Configuration for ranking and relevance +5. Filtering and faceting examples +6. Error handling and monitoring +7. Scaling and performance tips + +Additional context: [any specific details about your implementation] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/search-and_recommendations/typesense.md b/prompt-templates/frontend/integrations/search-and_recommendations/typesense.md new file mode 100644 index 0000000..1805509 --- /dev/null +++ b/prompt-templates/frontend/integrations/search-and_recommendations/typesense.md @@ -0,0 +1,24 @@ +I need to integrate Typesense into my project. Here are the details: + +Project Details: + +- Tech stack: [e.g., React + Node.js, Vue.js, etc.] +- Deployment: [self-hosted, Typesense Cloud, Docker] +- Search requirements: [typo tolerance, faceting, geo search, etc.] +- Data volume: [approximate number of documents] +- Data structure: [simple objects, nested data, etc.] +- Performance needs: [search speed, indexing speed] + +What I need: + +1. Installation and initial setup +2. Collection schema design +3. Document indexing examples +4. Search implementation with UI +5. Advanced features (faceting, filtering, sorting) +6. Performance tuning guidelines +7. Error handling and best practices + +Additional context: [any specific details about your implementation] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/storage-file_handling/aws-s3.md b/prompt-templates/frontend/integrations/storage-file_handling/aws-s3.md new file mode 100644 index 0000000..645953e --- /dev/null +++ b/prompt-templates/frontend/integrations/storage-file_handling/aws-s3.md @@ -0,0 +1,28 @@ +I need to integrate AWS S3 for file storage and delivery. Here are the details: + +Project Details: + +- Tech stack: [e.g., React + Node.js, serverless, etc.] +- Upload method: [direct upload, presigned URLs, server-proxy] +- File types: [images, videos, documents, backups, etc.] +- Access patterns: [public, private, time-limited access] +- Volume: [storage size, transfer volume, concurrent uploads] +- CDN needs: [CloudFront integration, global delivery] +- Security: [IAM policies, bucket policies, encryption] +- Cost optimization: [storage classes, lifecycle policies] + +What I need: + +1. AWS account and S3 bucket setup +2. IAM roles and security configuration +3. Upload implementation (direct/presigned URLs) +4. File organization and naming strategies +5. CloudFront CDN integration +6. Security best practices +7. Cost optimization setup +8. Monitoring and logging +9. Error handling and retry mechanisms + +Additional context: [existing AWS setup, compliance requirements, specific use cases] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/storage-file_handling/cloudinary.md b/prompt-templates/frontend/integrations/storage-file_handling/cloudinary.md new file mode 100644 index 0000000..fc9f832 --- /dev/null +++ b/prompt-templates/frontend/integrations/storage-file_handling/cloudinary.md @@ -0,0 +1,26 @@ +I need to integrate Cloudinary for image/video handling in my project. Here are the details: + +Project Details: + +- Tech stack: [e.g., React + Node.js, Next.js, Vue.js, etc.] +- Media types: [images, videos, documents] +- Upload method: [direct upload, server-side, signed uploads] +- Transformation needs: [resize, crop, format conversion, filters, optimization] +- Volume: [expected uploads per month, storage needs] +- Use cases: [user avatars, product images, video streaming, etc.] +- Special requirements: [auto-optimization, responsive images, lazy loading] + +What I need: + +1. Account setup and API key configuration +2. Upload implementation (frontend and/or backend) +3. Image transformation examples +4. Responsive image delivery setup +5. Video handling and streaming +6. Performance optimization strategies +7. Error handling and validation +8. Cost optimization tips + +Additional context: [specific requirements, existing setup, integration points] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/storage-file_handling/filestack.md b/prompt-templates/frontend/integrations/storage-file_handling/filestack.md new file mode 100644 index 0000000..ed7a8bf --- /dev/null +++ b/prompt-templates/frontend/integrations/storage-file_handling/filestack.md @@ -0,0 +1,27 @@ +I need to integrate Filestack for file uploads and processing. Here are the details: + +Project Details: + +- Tech stack: [e.g., React + Node.js, Angular, etc.] +- File sources: [local files, cloud storage, social media, camera] +- Processing needs: [image editing, video transcoding, document conversion] +- Upload volume: [concurrent uploads, file size limits] +- UI requirements: [custom picker, inline editing, mobile support] +- Security: [file validation, virus scanning, access control] +- Integration: [forms, CMS, user-generated content] + +What I need: + +1. API key setup and configuration +2. File picker implementation +3. Custom upload interface +4. File processing and transformation +5. Security and validation setup +6. Progress tracking and error handling +7. Mobile and responsive considerations +8. Performance optimization +9. Integration with backend systems + +Additional context: [specific file types, processing requirements, existing infrastructure] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/storage-file_handling/firebase-storage.md b/prompt-templates/frontend/integrations/storage-file_handling/firebase-storage.md new file mode 100644 index 0000000..1cb60c6 --- /dev/null +++ b/prompt-templates/frontend/integrations/storage-file_handling/firebase-storage.md @@ -0,0 +1,27 @@ +I need to integrate Firebase Storage for file uploads. Here are the details: + +Project Details: + +- Tech stack: [e.g., React + Firebase, Next.js, React Native, etc.] +- File types: [images, videos, documents, audio, etc.] +- Upload scenarios: [user profiles, content creation, file sharing] +- Security requirements: [authentication, access control, public/private files] +- Volume: [concurrent uploads, storage size expectations] +- Features needed: [progress tracking, resumable uploads, metadata] +- Integration: [existing Firebase project, new setup] + +What I need: + +1. Firebase project setup and configuration +2. Authentication integration +3. File upload implementation with progress +4. Security rules configuration +5. File download and access control +6. Metadata handling and organization +7. Error handling and retry logic +8. Performance optimization +9. Offline capabilities (if needed) + +Additional context: [existing Firebase setup, specific file handling requirements] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/storage-file_handling/imgix.md b/prompt-templates/frontend/integrations/storage-file_handling/imgix.md new file mode 100644 index 0000000..0c64850 --- /dev/null +++ b/prompt-templates/frontend/integrations/storage-file_handling/imgix.md @@ -0,0 +1,26 @@ +I need to integrate Imgix for image optimization and delivery. Here are the details: + +Project Details: + +- Tech stack: [e.g., React + Node.js, Next.js, static site, etc.] +- Image sources: [existing CDN, AWS S3, web folders, etc.] +- Transformation needs: [responsive sizing, format optimization, quality adjustment] +- Volume: [traffic expectations, bandwidth considerations] +- Use cases: [e-commerce, blog images, user content, etc.] +- Performance goals: [page load speed, mobile optimization] +- Special features: [face detection, smart cropping, watermarks] + +What I need: + +1. Source setup and configuration +2. URL API implementation +3. Responsive image techniques +4. React/frontend integration +5. Performance monitoring setup +6. Advanced transformation examples +7. Caching and optimization strategies +8. Analytics and reporting + +Additional context: [current image setup, specific challenges, performance requirements] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/storage-file_handling/upload-care.md b/prompt-templates/frontend/integrations/storage-file_handling/upload-care.md new file mode 100644 index 0000000..15c3c71 --- /dev/null +++ b/prompt-templates/frontend/integrations/storage-file_handling/upload-care.md @@ -0,0 +1,27 @@ +I need to integrate Uploadcare for file handling and CDN delivery. Here are the details: + +Project Details: + +- Tech stack: [e.g., React + Node.js, Vue.js, etc.] +- File types: [images, videos, documents, etc.] +- Upload interface: [drag-drop, file picker, URL import, camera] +- Transformation needs: [image processing, video transcoding, document preview] +- Volume: [monthly uploads, storage requirements] +- Features: [multi-upload, progress tracking, file validation] +- Integration points: [forms, user profiles, content management] + +What I need: + +1. Account setup and API key configuration +2. File Uploader widget integration +3. Custom upload UI implementation +4. File transformation and processing +5. CDN delivery optimization +6. Progress tracking and error handling +7. File management and organization +8. Security and validation setup +9. Performance optimization + +Additional context: [specific UI requirements, existing file handling, integration complexity] + +Please provide a complete working example with detailed comments. From 3e419973e5936d16d6da36d969d227526f0117c7 Mon Sep 17 00:00:00 2001 From: aabdraev Date: Wed, 11 Jun 2025 23:01:03 +0600 Subject: [PATCH 2/2] added integrations prompts, p2 --- .../contentfull.md | 29 +++++++++++++++++++ .../headless-cms-and-backend-apis/firebase.md | 29 +++++++++++++++++++ .../headless-cms-and-backend-apis/hasura.md | 29 +++++++++++++++++++ .../headless-cms-and-backend-apis/hygraph.md | 29 +++++++++++++++++++ .../headless-cms-and-backend-apis/prismic.md | 29 +++++++++++++++++++ .../headless-cms-and-backend-apis/sanity.MD | 29 +++++++++++++++++++ .../headless-cms-and-backend-apis/strapi.md | 29 +++++++++++++++++++ .../headless-cms-and-backend-apis/supabase.md | 29 +++++++++++++++++++ .../internationalization/crowdin.md | 29 +++++++++++++++++++ .../integrations/internationalization/i18n.md | 29 +++++++++++++++++++ .../internationalization/localise.md | 29 +++++++++++++++++++ .../internationalization/phrase.md | 29 +++++++++++++++++++ .../media-and-communication/agora.md | 29 +++++++++++++++++++ .../media-and-communication/spotify.md | 29 +++++++++++++++++++ .../media-and-communication/twilio.md | 29 +++++++++++++++++++ .../media-and-communication/vimeo.md | 29 +++++++++++++++++++ .../media-and-communication/vonage.md | 29 +++++++++++++++++++ .../media-and-communication/youtube.md | 29 +++++++++++++++++++ .../security_and_monitoring/bugsnag.md | 28 ++++++++++++++++++ .../security_and_monitoring/cloudflare.md | 28 ++++++++++++++++++ .../security_and_monitoring/datadog-rum.md | 28 ++++++++++++++++++ .../security_and_monitoring/logrocket.md | 28 ++++++++++++++++++ .../security_and_monitoring/new-relic.md | 28 ++++++++++++++++++ .../security_and_monitoring/sentry.md | 29 +++++++++++++++++++ 24 files changed, 691 insertions(+) create mode 100644 prompt-templates/frontend/integrations/headless-cms-and-backend-apis/contentfull.md create mode 100644 prompt-templates/frontend/integrations/headless-cms-and-backend-apis/firebase.md create mode 100644 prompt-templates/frontend/integrations/headless-cms-and-backend-apis/hasura.md create mode 100644 prompt-templates/frontend/integrations/headless-cms-and-backend-apis/hygraph.md create mode 100644 prompt-templates/frontend/integrations/headless-cms-and-backend-apis/prismic.md create mode 100644 prompt-templates/frontend/integrations/headless-cms-and-backend-apis/sanity.MD create mode 100644 prompt-templates/frontend/integrations/headless-cms-and-backend-apis/strapi.md create mode 100644 prompt-templates/frontend/integrations/headless-cms-and-backend-apis/supabase.md create mode 100644 prompt-templates/frontend/integrations/internationalization/crowdin.md create mode 100644 prompt-templates/frontend/integrations/internationalization/i18n.md create mode 100644 prompt-templates/frontend/integrations/internationalization/localise.md create mode 100644 prompt-templates/frontend/integrations/internationalization/phrase.md create mode 100644 prompt-templates/frontend/integrations/media-and-communication/agora.md create mode 100644 prompt-templates/frontend/integrations/media-and-communication/spotify.md create mode 100644 prompt-templates/frontend/integrations/media-and-communication/twilio.md create mode 100644 prompt-templates/frontend/integrations/media-and-communication/vimeo.md create mode 100644 prompt-templates/frontend/integrations/media-and-communication/vonage.md create mode 100644 prompt-templates/frontend/integrations/media-and-communication/youtube.md create mode 100644 prompt-templates/frontend/integrations/security_and_monitoring/bugsnag.md create mode 100644 prompt-templates/frontend/integrations/security_and_monitoring/cloudflare.md create mode 100644 prompt-templates/frontend/integrations/security_and_monitoring/datadog-rum.md create mode 100644 prompt-templates/frontend/integrations/security_and_monitoring/logrocket.md create mode 100644 prompt-templates/frontend/integrations/security_and_monitoring/new-relic.md create mode 100644 prompt-templates/frontend/integrations/security_and_monitoring/sentry.md diff --git a/prompt-templates/frontend/integrations/headless-cms-and-backend-apis/contentfull.md b/prompt-templates/frontend/integrations/headless-cms-and-backend-apis/contentfull.md new file mode 100644 index 0000000..5b0286e --- /dev/null +++ b/prompt-templates/frontend/integrations/headless-cms-and-backend-apis/contentfull.md @@ -0,0 +1,29 @@ +I need to integrate Contentful for headless content management. Here are the details: + +Project Details: + +- Frontend framework: [React, Vue.js, Angular, Next.js, Gatsby, static site] +- Content structure: [blog, e-commerce, marketing site, documentation] +- API approach: [REST API, GraphQL, JavaScript SDK] +- Rich text: [structured text, embedded assets, custom components] +- Localization: [multiple languages, fallback content, translation workflow] +- Preview: [draft content, preview API, editorial workflow] +- Media management: [responsive images, video, file downloads] +- SEO requirements: [meta tags, structured data, sitemap generation] + +What I need: + +1. Contentful space setup and content modeling +2. JavaScript SDK integration and API configuration +3. Content fetching strategies and caching +4. Rich text rendering with custom components +5. Image optimization and responsive delivery +6. Preview mode implementation for editors +7. Localization setup and content fallbacks +8. SEO optimization and meta tag management +9. Webhook integration for content updates +10. Performance optimization and CDN usage + +Additional context: [content volume, editorial workflow, performance goals, SEO requirements] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/headless-cms-and-backend-apis/firebase.md b/prompt-templates/frontend/integrations/headless-cms-and-backend-apis/firebase.md new file mode 100644 index 0000000..050997e --- /dev/null +++ b/prompt-templates/frontend/integrations/headless-cms-and-backend-apis/firebase.md @@ -0,0 +1,29 @@ +I need to integrate Firebase for backend services and real-time functionality. Here are the details: + +Project Details: + +- Application type: [web app, mobile app, PWA, real-time app] +- Services needed: [Firestore, Auth, Storage, Functions, Hosting, Analytics] +- Authentication: [email/password, social login, phone auth, custom auth] +- Database structure: [collections, subcollections, security rules] +- Real-time features: [live updates, chat, collaboration, notifications] +- File handling: [image uploads, document storage, media processing] +- Serverless functions: [API endpoints, triggers, scheduled tasks] +- Offline support: [local caching, sync, conflict resolution] + +What I need: + +1. Firebase project setup and configuration +2. Authentication implementation with multiple providers +3. Firestore database design and security rules +4. Real-time data synchronization setup +5. Cloud Storage integration for file uploads +6. Cloud Functions for server-side logic +7. Firebase Hosting deployment configuration +8. Offline functionality and data persistence +9. Push notifications and messaging +10. Analytics and performance monitoring + +Additional context: [scalability needs, security requirements, offline usage, real-time features] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/headless-cms-and-backend-apis/hasura.md b/prompt-templates/frontend/integrations/headless-cms-and-backend-apis/hasura.md new file mode 100644 index 0000000..623bd25 --- /dev/null +++ b/prompt-templates/frontend/integrations/headless-cms-and-backend-apis/hasura.md @@ -0,0 +1,29 @@ +I need to integrate Hasura for instant GraphQL APIs and real-time features. Here are the details: + +Project Details: + +- Database: [PostgreSQL, existing database, microservices integration] +- Frontend: [React + Apollo, Vue.js + GraphQL, Next.js, mobile app] +- Authentication: [JWT, webhook auth, custom auth service] +- Authorization: [role-based permissions, row-level security, dynamic rules] +- Real-time: [subscriptions, live queries, collaborative features] +- Custom logic: [Actions, Event Triggers, Remote Schemas] +- Deployment: [Hasura Cloud, self-hosted, Docker, Kubernetes] +- Integration: [existing APIs, third-party services, microservices] + +What I need: + +1. Hasura setup and database connection +2. GraphQL schema generation and customization +3. Authentication and JWT configuration +4. Authorization rules and permission system +5. Real-time subscriptions implementation +6. Actions for custom business logic +7. Event Triggers for automated workflows +8. Remote Schema integration +9. GraphQL client setup and optimizations +10. Production deployment and monitoring + +Additional context: [database complexity, authorization requirements, real-time needs, existing infrastructure] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/headless-cms-and-backend-apis/hygraph.md b/prompt-templates/frontend/integrations/headless-cms-and-backend-apis/hygraph.md new file mode 100644 index 0000000..1ff2d3c --- /dev/null +++ b/prompt-templates/frontend/integrations/headless-cms-and-backend-apis/hygraph.md @@ -0,0 +1,29 @@ +I need to integrate Hygraph for GraphQL-based content management. Here are the details: + +Project Details: + +- Frontend stack: [React + Apollo, Vue.js + GraphQL, Next.js, Gatsby] +- Content modeling: [hierarchical content, relations, content federation] +- GraphQL setup: [queries, mutations, subscriptions, fragments] +- Rich text: [structured content, custom renderers, embedded assets] +- Localization: [multi-region content, translation management] +- Media management: [asset transformations, responsive images, video] +- Real-time: [live updates, collaborative editing, webhooks] +- Permissions: [content roles, API access, editorial workflow] + +What I need: + +1. Hygraph project setup and schema design +2. GraphQL client configuration (Apollo/Relay) +3. Content queries and data fetching strategies +4. Rich text rendering with custom components +5. Asset management and image transformations +6. Real-time updates and subscription setup +7. Localization and multi-region content +8. Authentication and permission management +9. Webhook integration for content changes +10. Performance optimization and caching + +Additional context: [GraphQL experience, content complexity, real-time requirements, team workflow] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/headless-cms-and-backend-apis/prismic.md b/prompt-templates/frontend/integrations/headless-cms-and-backend-apis/prismic.md new file mode 100644 index 0000000..387c040 --- /dev/null +++ b/prompt-templates/frontend/integrations/headless-cms-and-backend-apis/prismic.md @@ -0,0 +1,29 @@ +I need to integrate Prismic for slice-based content management. Here are the details: + +Project Details: + +- Framework: [React, Vue.js, Next.js, Nuxt.js, Gatsby, vanilla JavaScript] +- Content approach: [page builder, blog, marketing site, component library] +- Slice Machine: [custom slices, reusable components, design system] +- Rich text: [structured content, custom serializers, embedded content] +- Preview: [draft content, A/B testing, scheduled publishing] +- Localization: [multi-language, content variants, translation workflow] +- SEO: [meta tags, structured data, URL structure] +- Performance: [static generation, incremental builds, image optimization] + +What I need: + +1. Prismic repository setup and slice configuration +2. Slice Machine integration and custom slice development +3. JavaScript client setup and API queries +4. Rich text rendering with custom components +5. Preview mode and draft content handling +6. Page routing and dynamic URL generation +7. SEO optimization and meta tag management +8. Image optimization and responsive delivery +9. Localization setup and content variants +10. Static site generation and build optimization + +Additional context: [design system requirements, content structure, performance goals, editorial workflow] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/headless-cms-and-backend-apis/sanity.MD b/prompt-templates/frontend/integrations/headless-cms-and-backend-apis/sanity.MD new file mode 100644 index 0000000..60ce2aa --- /dev/null +++ b/prompt-templates/frontend/integrations/headless-cms-and-backend-apis/sanity.MD @@ -0,0 +1,29 @@ +I need to integrate Sanity CMS for content management in my application. Here are the details: + +Project Details: + +- Tech stack: [e.g., React + Next.js, Vue.js + Nuxt, Gatsby, vanilla JavaScript] +- Content types: [blog posts, pages, products, media, custom content types] +- Studio setup: [custom studio, hosted studio, embedded studio] +- Data fetching: [GROQ queries, GraphQL, REST API, real-time updates] +- Media handling: [images, videos, documents, CDN optimization] +- Preview mode: [draft content, live preview, visual editing] +- Localization: [multi-language content, translation workflow] +- Authentication: [content editing permissions, public/private content] + +What I need: + +1. Sanity project setup and dataset configuration +2. Schema definition and content modeling +3. Sanity Studio customization and deployment +4. JavaScript client integration and GROQ queries +5. Image optimization and responsive images +6. Preview mode and draft content handling +7. Real-time content updates implementation +8. Custom input components and field validation +9. Webhook integration for content changes +10. Performance optimization and caching strategies + +Additional context: [content volume, team size, update frequency, performance requirements] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/headless-cms-and-backend-apis/strapi.md b/prompt-templates/frontend/integrations/headless-cms-and-backend-apis/strapi.md new file mode 100644 index 0000000..8b88bfa --- /dev/null +++ b/prompt-templates/frontend/integrations/headless-cms-and-backend-apis/strapi.md @@ -0,0 +1,29 @@ +I need to integrate Strapi as a headless CMS and custom API backend. Here are the details: + +Project Details: + +- Deployment: [self-hosted, cloud provider, Docker, serverless] +- Database: [PostgreSQL, MySQL, SQLite, MongoDB] +- Frontend: [React, Vue.js, Next.js, mobile app, multiple frontends] +- API type: [REST API, GraphQL, custom endpoints] +- Authentication: [JWT, OAuth, custom auth, role-based permissions] +- Content types: [collections, single types, components, dynamic zones] +- File uploads: [local storage, S3, Cloudinary, custom provider] +- Customization: [custom controllers, services, middlewares, plugins] + +What I need: + +1. Strapi installation and project setup +2. Content type modeling and relationships +3. API endpoint configuration and customization +4. Authentication and authorization setup +5. File upload and media management +6. Custom API endpoints and business logic +7. Plugin development and third-party integrations +8. Database configuration and migrations +9. Deployment setup and environment configuration +10. Frontend integration and data fetching + +Additional context: [hosting requirements, team size, customization needs, scalability requirements] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/headless-cms-and-backend-apis/supabase.md b/prompt-templates/frontend/integrations/headless-cms-and-backend-apis/supabase.md new file mode 100644 index 0000000..6ff85bb --- /dev/null +++ b/prompt-templates/frontend/integrations/headless-cms-and-backend-apis/supabase.md @@ -0,0 +1,29 @@ +I need to integrate Supabase for PostgreSQL-based backend services. Here are the details: + +Project Details: + +- Application type: [web app, mobile app, SaaS, real-time dashboard] +- Database needs: [relational data, complex queries, full-text search] +- Authentication: [email/password, OAuth, magic links, row-level security] +- Real-time features: [live updates, subscriptions, collaborative features] +- Storage requirements: [file uploads, image processing, CDN delivery] +- API approach: [auto-generated REST, real-time subscriptions, custom functions] +- Security: [RLS policies, JWT handling, API key management] +- Deployment: [hosted Supabase, self-hosted, edge functions] + +What I need: + +1. Supabase project setup and database schema design +2. JavaScript client configuration and TypeScript types +3. Authentication implementation with RLS policies +4. Database queries and relationship management +5. Real-time subscriptions and live data updates +6. File storage and upload functionality +7. Edge Functions for custom server logic +8. Row-level security policy implementation +9. Database migrations and version control +10. Performance optimization and query analysis + +Additional context: [data complexity, security requirements, scalability needs, real-time features] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/internationalization/crowdin.md b/prompt-templates/frontend/integrations/internationalization/crowdin.md new file mode 100644 index 0000000..e20f97e --- /dev/null +++ b/prompt-templates/frontend/integrations/internationalization/crowdin.md @@ -0,0 +1,29 @@ +I need to integrate Crowdin for collaborative translation management. Here are the details: + +Project Details: + +- Project type: [open source, commercial, community-driven] +- Tech stack: [React + i18next, Vue.js, Angular, mobile frameworks] +- Repository: [GitHub, GitLab, Bitbucket, other Git hosting] +- File formats: [JSON, YAML, XML, properties, gettext] +- Translation approach: [professional translators, community, hybrid] +- Workflow: [branch management, pull request integration, review process] +- Automation: [sync frequency, webhook triggers, deployment automation] +- Context: [screenshots, string descriptions, developer notes] + +What I need: + +1. Crowdin project setup and API credentials +2. CLI tool configuration and file management +3. GitHub/GitLab integration and branch sync +4. In-Context Localization setup for web apps +5. Translation workflow and contributor management +6. Quality assurance and proofreading setup +7. Automated file sync and pull request creation +8. Custom integration with existing i18n framework +9. Webhook configuration for real-time updates +10. Analytics and progress tracking dashboard + +Additional context: [project scale, contributor management, release process, budget considerations] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/internationalization/i18n.md b/prompt-templates/frontend/integrations/internationalization/i18n.md new file mode 100644 index 0000000..95cde15 --- /dev/null +++ b/prompt-templates/frontend/integrations/internationalization/i18n.md @@ -0,0 +1,29 @@ +I need to integrate i18next for internationalization in my application. Here are the details: + +Project Details: + +- Tech stack: [e.g., React + Node.js, Vue.js, Angular, vanilla JavaScript] +- Languages: [target languages, RTL support, fallback languages] +- Content types: [UI text, error messages, dynamic content, pluralization] +- Loading strategy: [lazy loading, namespace splitting, async loading] +- Storage: [localStorage, cookies, server-side, memory only] +- Detection: [URL path, subdomain, query parameter, browser language] +- Framework integration: [React, Vue, Angular, server-side rendering] +- Backend integration: [translation API, file loading, dynamic updates] + +What I need: + +1. i18next installation and basic configuration +2. Language detection and switching implementation +3. Translation file structure and organization +4. Namespace management and lazy loading +5. Pluralization and interpolation setup +6. Context-based translations +7. Number and date formatting +8. Missing translation handling +9. Development tools and debugging +10. Production optimization and caching + +Additional context: [application size, number of languages, translation workflow, performance requirements] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/internationalization/localise.md b/prompt-templates/frontend/integrations/internationalization/localise.md new file mode 100644 index 0000000..4d200d3 --- /dev/null +++ b/prompt-templates/frontend/integrations/internationalization/localise.md @@ -0,0 +1,29 @@ +I need to integrate Lokalise for translation management and team collaboration. Here are the details: + +Project Details: + +- Application type: [web app, mobile app, desktop app, multi-platform] +- Tech stack: [React + i18next, React Native, Flutter, native iOS/Android] +- File structure: [JSON files, platform-specific formats, nested keys] +- Team workflow: [translation process, review workflow, approval system] +- Automation: [API integration, webhooks, CI/CD pipeline] +- Content management: [screenshots, context, translation memory] +- Quality control: [translation validation, consistency checks] +- Delivery: [OTA updates, app store releases, web deployment] + +What I need: + +1. Lokalise project setup and API token configuration +2. CLI tool installation and file sync setup +3. SDK integration for over-the-air updates +4. Screenshot and context management +5. Webhook integration for automated workflows +6. Translation team management and permissions +7. Quality assurance tools and validation rules +8. CI/CD pipeline integration +9. Custom API integration for dynamic content +10. Analytics and translation progress tracking + +Additional context: [platform specifics, update frequency, team structure, compliance requirements] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/internationalization/phrase.md b/prompt-templates/frontend/integrations/internationalization/phrase.md new file mode 100644 index 0000000..a98b609 --- /dev/null +++ b/prompt-templates/frontend/integrations/internationalization/phrase.md @@ -0,0 +1,29 @@ +I need to integrate Phrase for translation management and localization workflow. Here are the details: + +Project Details: + +- Tech stack: [e.g., React + i18next, Vue.js + vue-i18n, Angular + ngx-translate] +- Workflow: [developer workflow, translator workflow, review process] +- File formats: [JSON, YAML, PO, XLIFF, custom formats] +- Integration: [GitHub/GitLab, CI/CD, automated sync] +- Team setup: [developers, translators, reviewers, project managers] +- Content types: [UI strings, marketing copy, help documentation] +- Automation: [auto-sync, translation memory, quality checks] +- In-context editing: [visual editor, screenshot context, live preview] + +What I need: + +1. Phrase project setup and API key configuration +2. CLI tool installation and configuration +3. Translation file sync automation +4. In-Context Editor integration +5. GitHub/GitLab integration setup +6. Translation workflow and team management +7. Quality assurance and review process +8. Automated translation updates +9. Custom integration with existing i18n setup +10. Deployment pipeline integration + +Additional context: [team size, translation volume, release frequency, quality requirements] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/media-and-communication/agora.md b/prompt-templates/frontend/integrations/media-and-communication/agora.md new file mode 100644 index 0000000..8270d82 --- /dev/null +++ b/prompt-templates/frontend/integrations/media-and-communication/agora.md @@ -0,0 +1,29 @@ +I need to integrate Agora for real-time communication. Here are the details: + +Project Details: + +- Tech stack: [e.g., React + Node.js, Vue.js, React Native, etc.] +- Communication type: [1-on-1 video, group calls, live streaming, voice-only] +- Use case: [video conferencing, live streaming, online education, telehealth, gaming] +- Audience size: [small meetings, large broadcasts, interactive streaming] +- Features needed: [screen sharing, recording, real-time messaging, AI features] +- Platform support: [web, mobile, desktop, cross-platform] +- Quality requirements: [HD video, low latency, adaptive bitrate] +- Custom UI: [prebuilt components, fully custom interface] + +What I need: + +1. Agora Console setup and project configuration +2. Video calling implementation (Web SDK) +3. Audio-only calling setup +4. Live streaming integration (host/audience modes) +5. Real-time messaging alongside video/audio +6. Screen sharing and recording features +7. Room management and user permissions +8. Quality optimization and network adaptation +9. Custom UI components and styling +10. Analytics and monitoring setup + +Additional context: [target audience size, specific features, existing video infrastructure] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/media-and-communication/spotify.md b/prompt-templates/frontend/integrations/media-and-communication/spotify.md new file mode 100644 index 0000000..badb463 --- /dev/null +++ b/prompt-templates/frontend/integrations/media-and-communication/spotify.md @@ -0,0 +1,29 @@ +I need to integrate Spotify Web API for music functionality. Here are the details: + +Project Details: + +- Tech stack: [e.g., React + Node.js, Next.js, mobile app, etc.] +- Features needed: [music search, playlists, user library, playback control, recommendations] +- User interaction: [login with Spotify, create playlists, control playback, social features] +- Playback method: [Web Playback SDK, embedded player, external app redirect] +- Data usage: [track info, artist data, playlist management, user preferences] +- Authorization scope: [read user data, modify playlists, control playback] +- Integration depth: [basic embedding, full music app, recommendation engine] +- Commercial usage: [personal project, commercial app, revenue model] + +What I need: + +1. Spotify App registration and OAuth setup +2. Authentication flow implementation (Authorization Code) +3. Web Playback SDK integration for in-app playback +4. Search API implementation (tracks, artists, playlists) +5. User library and playlist management +6. Recommendation and discovery features +7. Real-time playback controls and state management +8. Error handling and token refresh +9. Rate limiting and API best practices +10. Compliance with Spotify Developer Terms + +Additional context: [app type, commercial usage, specific Spotify features needed] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/media-and-communication/twilio.md b/prompt-templates/frontend/integrations/media-and-communication/twilio.md new file mode 100644 index 0000000..1e24007 --- /dev/null +++ b/prompt-templates/frontend/integrations/media-and-communication/twilio.md @@ -0,0 +1,29 @@ +I need to integrate Twilio communication services into my project. Here are the details: + +Project Details: + +- Tech stack: [e.g., React + Node.js, Next.js, serverless, etc.] +- Services needed: [SMS, Voice calls, Video calls, WhatsApp, Chat] +- Use case: [customer support, notifications, video meetings, authentication, marketing] +- User flows: [two-factor auth, call center, video conferencing, messaging] +- Scale: [expected volume of messages/calls per month] +- Features: [recording, conferencing, programmable voice, chatbots] +- Integration points: [user registration, support system, mobile app] +- Geographic scope: [local, international, specific regions] + +What I need: + +1. Twilio Console setup and account configuration +2. SMS API integration with delivery tracking +3. Voice API implementation (inbound/outbound calls) +4. Video calling setup with room management +5. WhatsApp Business API integration +6. Webhook handling for real-time events +7. Error handling and retry mechanisms +8. Cost optimization strategies +9. Security best practices (API keys, signatures) +10. Testing and development environment setup + +Additional context: [compliance requirements, existing phone systems, specific Twilio features] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/media-and-communication/vimeo.md b/prompt-templates/frontend/integrations/media-and-communication/vimeo.md new file mode 100644 index 0000000..8a366bc --- /dev/null +++ b/prompt-templates/frontend/integrations/media-and-communication/vimeo.md @@ -0,0 +1,29 @@ +I need to integrate Vimeo API for video hosting and playback. Here are the details: + +Project Details: + +- Tech stack: [e.g., React + Node.js, Vue.js, static site, etc.] +- Vimeo features: [video hosting, custom player, video management, analytics] +- Upload method: [direct upload, tus resumable, server-side processing] +- Player customization: [branded player, custom controls, responsive design] +- Content organization: [folders, showcases, collections, privacy settings] +- User interaction: [comments, likes, social features, embedding] +- Video quality: [adaptive streaming, multiple resolutions, compression] +- Commercial needs: [white-label solution, no Vimeo branding, advanced features] + +What I need: + +1. Vimeo Developer App setup and authentication +2. Video upload implementation (tus protocol) +3. Vimeo Player SDK integration +4. Video management API (metadata, privacy, organization) +5. Custom player styling and branding +6. Analytics and engagement tracking +7. Advanced features (password protection, domain restrictions) +8. Responsive embedding and mobile optimization +9. Webhook integration for video processing events +10. Performance optimization and CDN delivery + +Additional context: [video volume, quality requirements, branding needs, existing video infrastructure] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/media-and-communication/vonage.md b/prompt-templates/frontend/integrations/media-and-communication/vonage.md new file mode 100644 index 0000000..8509a4a --- /dev/null +++ b/prompt-templates/frontend/integrations/media-and-communication/vonage.md @@ -0,0 +1,29 @@ +I need to integrate Vonage (Nexmo) communication platform. Here are the details: + +Project Details: + +- Tech stack: [e.g., React + Node.js, Vue.js, Python backend, etc.] +- Communication channels: [SMS, Voice, Video, Email, Social messaging] +- Primary use case: [customer engagement, verification, support, marketing] +- Features needed: [two-way messaging, call routing, video conferencing, chatbots] +- Volume expectations: [messages per month, concurrent calls/videos] +- Integration complexity: [simple notifications, complex workflows, omnichannel] +- Geographic requirements: [global reach, specific countries, local numbers] +- Compliance needs: [GDPR, HIPAA, industry-specific regulations] + +What I need: + +1. Vonage Dashboard setup and API credentials +2. SMS API implementation with Unicode support +3. Voice API integration (calls, IVR, conferencing) +4. Video API setup for real-time communication +5. Messages API for omnichannel messaging +6. Verify API for two-factor authentication +7. Webhook configuration and event handling +8. Number management and provisioning +9. Analytics and reporting integration +10. Security implementation and best practices + +Additional context: [existing communication infrastructure, specific country requirements, budget considerations] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/media-and-communication/youtube.md b/prompt-templates/frontend/integrations/media-and-communication/youtube.md new file mode 100644 index 0000000..142c710 --- /dev/null +++ b/prompt-templates/frontend/integrations/media-and-communication/youtube.md @@ -0,0 +1,29 @@ +I need to integrate YouTube APIs for video functionality. Here are the details: + +Project Details: + +- Tech stack: [e.g., React + Node.js, Vue.js, mobile app, etc.] +- YouTube features: [video search, channel data, playlists, comments, analytics] +- Player integration: [embedded player, custom controls, playlist playback] +- Content management: [upload videos, manage channels, live streaming] +- User interaction: [OAuth login, user channels, subscriptions, comments] +- Data requirements: [video metadata, statistics, thumbnails, captions] +- Commercial usage: [monetization, ads, revenue sharing] +- Compliance: [content policies, copyright, age restrictions] + +What I need: + +1. Google Cloud Console setup and YouTube API activation +2. OAuth 2.0 authentication implementation +3. YouTube Data API integration (search, videos, channels) +4. YouTube Player API for embedded playback +5. Video upload and management functionality +6. Live streaming API integration +7. Analytics API for channel/video insights +8. Comment system integration +9. Content moderation and policy compliance +10. Rate limiting and quota management + +Additional context: [content type, channel management needs, monetization requirements] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/security_and_monitoring/bugsnag.md b/prompt-templates/frontend/integrations/security_and_monitoring/bugsnag.md new file mode 100644 index 0000000..89d167d --- /dev/null +++ b/prompt-templates/frontend/integrations/security_and_monitoring/bugsnag.md @@ -0,0 +1,28 @@ +I need to integrate Bugsnag for application stability monitoring. Here are the details: + +Project Details: + +- Tech stack: [e.g., React + Node.js, Angular + Express, mobile app, etc.] +- Error tracking: [unhandled exceptions, custom errors, network failures, crash reports] +- Performance monitoring: [app launch times, network requests, custom metrics] +- Release stages: [development, staging, production, feature flags] +- User tracking: [user context, custom metadata, breadcrumbs] +- Team workflow: [notification channels, escalation rules, issue assignment] +- Platform coverage: [web, mobile, server-side, multiple environments] + +What I need: + +1. Bugsnag project setup and API key configuration +2. JavaScript notifier installation and setup +3. Error handling middleware for backend services +4. User context and custom metadata implementation +5. Breadcrumb tracking for user journey analysis +6. Performance monitoring setup and custom metrics +7. Release tracking and version management +8. Team notifications and Slack/email integration +9. Custom error filtering and ignore rules +10. Dashboard setup for stability monitoring + +Additional context: [application complexity, user base size, critical error scenarios, existing tools integration] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/security_and_monitoring/cloudflare.md b/prompt-templates/frontend/integrations/security_and_monitoring/cloudflare.md new file mode 100644 index 0000000..53de83a --- /dev/null +++ b/prompt-templates/frontend/integrations/security_and_monitoring/cloudflare.md @@ -0,0 +1,28 @@ +I need to integrate Cloudflare Turnstile for bot protection and CAPTCHA alternative. Here are the details: + +Project Details: + +- Tech stack: [e.g., React + Node.js, Vue.js + Express, static site, etc.] +- Protection scope: [forms, API endpoints, user registration, login, comments] +- User experience: [invisible challenge, explicit challenge, managed challenge] +- Implementation: [client-side rendering, server-side rendering, SPA, static sites] +- Backend validation: [Node.js, PHP, Python, Go, serverless functions] +- Form types: [contact forms, registration, login, checkout, comments] +- Styling: [custom themes, responsive design, accessibility compliance] + +What I need: + +1. Cloudflare Turnstile site setup and site key configuration +2. Client-side widget implementation and styling +3. Server-side token validation setup +4. React/Vue component integration +5. Form submission handling with Turnstile validation +6. Error handling and fallback mechanisms +7. Custom styling and theme configuration +8. Accessibility compliance implementation +9. Analytics and challenge success tracking +10. Multiple form types integration + +Additional context: [expected traffic volume, form complexity, accessibility requirements, existing security measures] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/security_and_monitoring/datadog-rum.md b/prompt-templates/frontend/integrations/security_and_monitoring/datadog-rum.md new file mode 100644 index 0000000..154e8ac --- /dev/null +++ b/prompt-templates/frontend/integrations/security_and_monitoring/datadog-rum.md @@ -0,0 +1,28 @@ +I need to integrate Datadog RUM for real user monitoring and performance tracking. Here are the details: + +Project Details: + +- Tech stack: [e.g., React + Node.js, Next.js, Vue.js, Angular, etc.] +- Monitoring scope: [page performance, user interactions, API calls, errors] +- Performance metrics: [Core Web Vitals, custom metrics, business KPIs] +- User tracking: [user sessions, conversion funnels, feature adoption] +- Error tracking: [JavaScript errors, network failures, custom events] +- Session replay: [user interactions, console logs, network requests] +- Infrastructure: [CDN usage, multiple environments, geographic distribution] + +What I need: + +1. Datadog RUM application setup and client token configuration +2. Browser SDK installation and initialization +3. Custom action and error tracking implementation +4. Performance monitoring for Core Web Vitals +5. User session tracking and identification +6. Custom attributes and global context setup +7. Session replay configuration and privacy settings +8. Error tracking and custom error handling +9. Custom dashboards and alerting rules +10. Integration with Datadog APM and infrastructure monitoring + +Additional context: [application scale, performance requirements, compliance needs, existing Datadog setup] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/security_and_monitoring/logrocket.md b/prompt-templates/frontend/integrations/security_and_monitoring/logrocket.md new file mode 100644 index 0000000..3d5f056 --- /dev/null +++ b/prompt-templates/frontend/integrations/security_and_monitoring/logrocket.md @@ -0,0 +1,28 @@ +I need to integrate LogRocket for session replay and user experience monitoring. Here are the details: + +Project Details: + +- Tech stack: [e.g., React + Redux, Vue.js + Vuex, Angular + NgRx, etc.] +- Session replay: [user interactions, DOM changes, console logs, network requests] +- Performance monitoring: [page load times, Core Web Vitals, custom metrics] +- State management: [Redux, Vuex, MobX, Zustand integration] +- Privacy requirements: [PII sanitization, GDPR compliance, data retention] +- User identification: [authenticated users, anonymous tracking, custom properties] +- Integration needs: [error tracking tools, analytics platforms, support systems] + +What I need: + +1. LogRocket project setup and app ID configuration +2. JavaScript SDK installation and initialization +3. Redux/Vuex middleware integration for state tracking +4. User identification and custom properties setup +5. Privacy settings and PII sanitization rules +6. Performance monitoring and Core Web Vitals tracking +7. Custom event tracking and conversion funnels +8. Error tracking integration (Sentry, Bugsnag) +9. Support workflow integration (Intercom, Zendesk) +10. Team access and session sharing setup + +Additional context: [user privacy requirements, session volume expectations, compliance needs, existing analytics setup] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/security_and_monitoring/new-relic.md b/prompt-templates/frontend/integrations/security_and_monitoring/new-relic.md new file mode 100644 index 0000000..32aa75a --- /dev/null +++ b/prompt-templates/frontend/integrations/security_and_monitoring/new-relic.md @@ -0,0 +1,28 @@ +I need to integrate New Relic for application performance monitoring and real user monitoring. Here are the details: + +Project Details: + +- Tech stack: [e.g., React + Node.js, Next.js, Vue.js + Express, etc.] +- Monitoring scope: [frontend performance, backend APIs, database queries, external services] +- Performance tracking: [page load times, AJAX calls, user interactions, custom metrics] +- Error monitoring: [JavaScript errors, API failures, custom exceptions] +- User experience: [session tracking, conversion funnels, feature usage] +- Infrastructure: [server monitoring, containerized apps, serverless functions] +- Business metrics: [custom events, conversion tracking, A/B test results] + +What I need: + +1. New Relic account setup and license key configuration +2. Browser agent installation and configuration +3. SPA monitoring setup for single-page applications +4. Custom attribute and event tracking +5. Performance monitoring and alerting rules +6. Error tracking and custom error boundaries +7. User session tracking and identification +8. Custom dashboards and business metrics +9. Integration with backend APM monitoring +10. Mobile app monitoring setup (if applicable) + +Additional context: [application architecture, performance goals, business KPIs, existing monitoring tools] + +Please provide a complete working example with detailed comments. diff --git a/prompt-templates/frontend/integrations/security_and_monitoring/sentry.md b/prompt-templates/frontend/integrations/security_and_monitoring/sentry.md new file mode 100644 index 0000000..55b66c9 --- /dev/null +++ b/prompt-templates/frontend/integrations/security_and_monitoring/sentry.md @@ -0,0 +1,29 @@ +I need to integrate Sentry for error tracking and performance monitoring. Here are the details: + +Project Details: + +- Tech stack: [e.g., React + Node.js, Next.js, Vue.js + Express, etc.] +- Error tracking: [JavaScript errors, API errors, custom events, breadcrumbs] +- Performance monitoring: [page load times, API calls, database queries, custom transactions] +- Session replay: [user interactions, console logs, network requests, DOM changes] +- Release tracking: [deployment tracking, source maps, commit integration] +- Team setup: [team members, notification preferences, alert rules] +- Environment: [development, staging, production separation] +- Framework specific: [React error boundaries, Vue error handlers, custom integrations] + +What I need: + +1. Sentry project setup and DSN configuration +2. JavaScript SDK installation and initialization +3. Error boundary implementation for React/Vue +4. Performance monitoring setup (Core Web Vitals, custom metrics) +5. Session replay configuration and privacy settings +6. Source maps upload for production debugging +7. Custom error handling and context enrichment +8. Release and deployment tracking +9. Alert rules and notification setup +10. Team management and permission configuration + +Additional context: [error volume expectations, privacy requirements, compliance needs, existing monitoring tools] + +Please provide a complete working example with detailed comments.