This project implements a QR code landing page for myMotivationAI that allows users to bypass app stores and directly install the Progressive Web App (PWA). The implementation follows the specifications outlined in the redesign plan.
- Mobile-optimized landing page for QR code scanning
- Dynamic QR code parameter tracking (UTM sources)
- Device detection and platform-specific installation instructions
- Value proposition and app preview sections
- Trust signals and social proof elements
- Automatic install prompts for supported browsers (Chrome, Edge, Firefox)
- iOS-specific manual installation guide with step-by-step instructions
- Installation success/failure tracking
- Service worker for offline functionality
- Web App Manifest for PWA metadata
- Comprehensive event tracking for QR scans, installs, and conversions
- Conversion funnel tracking from scan to install to value
- Device and browser detection
- Offline event queuing with background sync
- Real-time analytics dashboard (API endpoint)
- Next.js 14 with TypeScript and Tailwind CSS
- PWA capabilities via
next-pwa - Service worker for offline support
- Responsive mobile-first design
- Performance optimized for fast loading (< 3 seconds)
mymotivationAi/
├── app/
│ ├── qr-landing/
│ │ └── page.tsx # Main QR code landing page
│ ├── api/
│ │ └── analytics/
│ │ └── route.ts # Analytics API endpoint
│ ├── layout.tsx # Root layout with PWA metadata
│ └── globals.css # Global styles
├── components/
│ ├── QRCodeInstallButton.tsx # PWA install button component
│ ├── IOSInstallGuide.tsx # iOS installation guide
│ └── AnalyticsTracker.tsx # Analytics tracking component
├── lib/
│ └── analytics.ts # Analytics library
├── public/
│ ├── manifest.json # PWA manifest
│ ├── sw.js # Service worker
│ └── icons/ # App icons (placeholder)
├── plans/ # Project documentation
└── package.json # Dependencies and scripts
- Node.js 18+ and npm/yarn/pnpm
cd mymotivationAi
npm installnpm run devOpen http://localhost:3000/qr-landing to view the QR code landing page.
npm run build
npm startQR codes should point to:
https://yourdomain.com/qr-landing?utm_source=SOURCE&utm_medium=qr-code&utm_campaign=CAMPAIGN
utm_source: Source of QR code (e.g., "printed-flyer", "social-media")utm_medium: Always "qr-code"utm_campaign: Campaign identifierutm_content: Specific QR code variantutm_term: Optional keyword
The Stripe payment integration enables subscription-based monetization for myMotivationAI with three pricing tiers: Free, Basic, and Pro. The implementation includes:
- Secure checkout flow with Stripe Checkout
- Customer portal for subscription management
- Webhook handling for payment events
- User subscription status tracking
- Pricing page with tier comparison
- Three pricing tiers: Free, Basic, and Pro
- Free tier includes: Daily motivation quotes & basic goal tracking
- Secure payment processing via Stripe Checkout for paid plans
- Automatic subscription renewal for paid plans
- Free trial support (14 days) for paid plans
- Prorated upgrades/downgrades
- Clean, responsive pricing page (
/pricing) - Transparent feature comparison
- Secure customer portal for subscription management
- Email notifications for payment events
- Mobile-optimized checkout flow
- Webhook handling for real-time subscription updates
- User subscription status tracking
- Payment failure handling
- Revenue analytics integration
- Churn prevention features
# Copy environment template
cp .env.example .env.local
# Edit .env.local with your Stripe keys
# Get keys from: https://dashboard.stripe.com/test/apikeys
STRIPE_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXX
STRIPE_PUBLISHABLE_KEY=pk_test_XXXXXXXXXXXXXXXX
STRIPE_WEBHOOK_SECRET=whsec_XXXXXXXXXXXXXXXX# Run the setup script (requires Stripe CLI or manual setup)
node scripts/setup-stripe.js
# Or manually create in Stripe Dashboard:
# 1. Create products: Basic, Pro, Enterprise
# 2. Create monthly/yearly prices for each
# 3. Update .env.local with price IDs# Install Stripe CLI: https://stripe.com/docs/stripe-cli
stripe login
stripe listen --forward-to localhost:3000/api/webhooks/stripe
# Copy the webhook secret to .env.local
STRIPE_WEBHOOK_SECRET=whsec_XXXXXXXXXXXXXXXX- Start development server:
npm run dev - Visit: http://localhost:3000/pricing
- Select a plan and click "Get Started"
- Use Stripe test card:
4242 4242 4242 4242 - Complete checkout to test the full flow
Use these test cards in Stripe Checkout:
- Success:
4242 4242 4242 4242 - Requires authentication:
4000 0025 0000 3155 - Decline:
4000 0000 0000 0002 - 3D Secure:
4000 0027 6000 3184
POST /api/checkout- Create checkout sessionPOST /api/customer-portal- Create customer portal sessionPOST /api/webhooks/stripe- Handle Stripe webhooks
mymotivationAi/
├── app/
│ ├── pricing/ # Pricing page
│ │ └── page.tsx
│ ├── api/
│ │ ├── checkout/ # Checkout API
│ │ │ └── route.ts
│ │ ├── customer-portal/ # Customer portal API
│ │ │ └── route.ts
│ │ └── webhooks/stripe/ # Webhook handler
│ │ └── route.ts
├── components/
│ └── PricingCard.tsx # Pricing card component
├── lib/
│ ├── stripe.ts # Stripe configuration & utilities
│ └── user-context.tsx # User subscription context
└── scripts/
└── setup-stripe.js # Stripe setup script
- Update environment variables with live Stripe keys
- Configure webhooks in Stripe Dashboard for production
- Set up database for user subscription persistence
- Implement email notifications for payment events
- Add analytics tracking for conversion funnel
- Test with real payment methods before launch
- Never expose Stripe secret keys in client-side code
- Validate webhook signatures to prevent fraud
- Implement rate limiting on API endpoints
- Use HTTPS in production
- Regularly audit subscription statuses
- Monitor failed payment attempts
https://mymotivationai.com/qr-landing?utm_source=conference-badge&utm_medium=qr-code&utm_campaign=tech-conference-2024&utm_content=day1-variant-a
Access analytics data at:
GET /api/analytics
Example response:
{
"total_events": 1250,
"event_types": {
"qr_scan_detected": 500,
"landing_page_view": 450,
"install_initiated": 200,
"install_successful": 150,
"install_failed": 50
},
"qr_sources": {
"printed-flyer": 300,
"social-media": 150,
"conference-badge": 50
},
"device_types": {
"mobile": 400,
"desktop": 50
}
}- Android/Chrome: Automatic install prompt after user engagement
- iOS/Safari: Manual "Add to Home Screen" via share menu
- Other browsers: Platform-specific installation methods
- Core landing page works offline
- Service worker caches essential assets
- Analytics events queued for sync when online
- Standalone app experience (no browser UI)
- Home screen icon with branding
- Push notification support (configured but not implemented)
- Background sync for analytics
- First Contentful Paint: < 1.5 seconds
- Time to Interactive: < 3 seconds
- Largest Contentful Paint: < 2.5 seconds
- Cumulative Layout Shift: < 0.1
- Image optimization and lazy loading
- Code splitting and tree shaking
- Service worker caching
- CDN distribution for static assets
- QR Code Scanning: Test with different QR code scanners
- Device Compatibility: Test on iOS, Android, desktop
- Installation Flow: Verify install prompts work correctly
- Analytics Tracking: Confirm events are being captured
- Offline Functionality: Test with network disabled
- Performance: Verify loading times meet targets
- Unit tests for components
- Integration tests for API endpoints
- E2E tests for user flows
- Performance regression tests
- Frontend: Vercel (optimized for Next.js)
- Backend: Railway/Render (for analytics API)
- Database: PostgreSQL (for analytics storage)
- CDN: Vercel Edge Network
NEXT_PUBLIC_ANALYTICS_ENDPOINT=/api/analytics
NEXT_PUBLIC_SITE_URL=https://mymotivationai.com
DATABASE_URL=postgresql://...- Scan to Install Rate: > 40% of QR scanners install the app
- Install to Launch Rate: > 80% of installs launch the app
- Time to Value: < 60 seconds from scan to first value experience
- Conversion to Paid: > 5% of QR installs convert to paid within 30 days
- Platform distribution (iOS vs Android)
- Campaign performance by QR source
- User retention (Day 1, Day 7, Day 30)
- Error rates and troubleshooting frequency
- Generate initial QR codes for marketing materials
- Set up production analytics dashboard
- Conduct user testing with target audience
- Optimize based on initial feedback
- Implement A/B testing framework
- Add multi-language support
- Integrate with marketing automation
- Expand QR code placement strategies
- Implement push notifications for re-engagement
- Add social sharing capabilities
- Create QR code management dashboard
- Integrate with CRM for lead tracking
For additional documentation, see the plans/ directory:
qr_code_landing_page_specifications.md- Detailed technical specificationspwa_installation_flow_specification.md- PWA implementation detailsqr_code_strategy_summary.md- Overall strategy and implementation summary
Proprietary - All rights reserved by myMotivationAI