┌─────────────────────────────────────────────────────────────────────────────────────┐
│ USER INTERFACE LAYER │
├─────────────────────────────────────────────────────────────────────────────────────┤
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │
│ │ Next.js 15 │ │ React 19 │ │ TypeScript │ │ Tailwind CSS │ │
│ │ App Router │ │ Components │ │ Type Safety │ │ Styling │ │
│ └─────────────────┘ └─────────────────┘ └─────────────────┘ └─────────────────┘ │
└─────────────────────────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────────────────────────┐
│ API & SERVICES LAYER │
├─────────────────────────────────────────────────────────────────────────────────────┤
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │
│ │ Next.js API │ │ Email Service │ │ Geolocation │ │ Analytics │ │
│ │ Routes │ │ (Nodemailer) │ │ Service │ │ Integration │ │
│ └─────────────────┘ └─────────────────┘ └─────────────────┘ └─────────────────┘ │
└─────────────────────────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────────────────────────┐
│ EXTERNAL INTEGRATIONS │
├─────────────────────────────────────────────────────────────────────────────────────┤
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │
│ │ Contentstack │ │ Personalize │ │ Lytics │ │ Cursor AI │ │
│ │ CMS SDK │ │ Edge │ │ Analytics │ │ Integration │ │
│ └─────────────────┘ └─────────────────┘ └─────────────────┘ └─────────────────┘ │
└─────────────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────────────┐
│ FRONTEND COMPONENTS │
├─────────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │
│ │ Header │ │ Sidebar │ │ Breaking Alert │ │ News Channel │ │
│ │ Component │ │ Component │ │ Component │ │ Component │ │
│ └─────────────────┘ └─────────────────┘ └─────────────────┘ └─────────────────┘ │
│ │
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │
│ │ News Authors │ │ News Categories │ │ Email Sub │ │ Live Updates │ │
│ │ Component │ │ Component │ │ Component │ │ Component │ │
│ └─────────────────┘ └─────────────────┘ └─────────────────┘ └─────────────────┘ │
│ │
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │
│ │ Lytics Tracker │ │ Pathfora │ │ Personalized │ │ Data Debugger │ │
│ │ Component │ │ Triggers │ │ News │ │ Component │ │
│ └─────────────────┘ └─────────────────┘ └─────────────────┘ └─────────────────┘ │
└─────────────────────────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────────────────────────┐
│ LIBRARY LAYER │
├─────────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │
│ │ contentstack.ts │ │ contentstack- │ │ personalize- │ │ email-service.ts│ │
│ │ (SDK Config) │ │ helpers.ts │ │ service.ts │ │ (Email Logic) │ │
│ └─────────────────┘ └─────────────────┘ └─────────────────┘ └─────────────────┘ │
│ │
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │
│ │ geolocation.ts │ │ pathfora- │ │ use-personalize │ │ LyticsPathfora │ │
│ │ (Location) │ │ content.ts │ │ .ts (Hooks) │ │ (Analytics) │ │
│ └─────────────────┘ └─────────────────┘ └─────────────────┘ └─────────────────┘ │
└─────────────────────────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────────────────────────┐
│ API ROUTES LAYER │
├─────────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │
│ │ check-entry │ │ personalize │ │ subscribe- │ │ sidebar-news │ │
│ │ [uid]/route.ts │ │ /route.ts │ │ newsletter │ │ /route.ts │ │
│ └─────────────────┘ └─────────────────┘ └─────────────────┘ └─────────────────┘ │
│ │
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │
│ │ contentstack │ │ personalize- │ │ personalize │ │ variant │ │
│ │ /personalize- │ │ variant │ │ /variant │ │ [uid]/route.ts │ │
│ │ variant │ │ [experienceId] │ │ [variantId] │ │ │ │
│ └─────────────────┘ └─────────────────┘ └─────────────────┘ └─────────────────┘ │
└─────────────────────────────────────────────────────────────────────────────────────┘
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ User Request │───▶│ Next.js App │───▶│ API Routes │
│ │ │ Router │ │ │
└─────────────────┘ └─────────────────┘ └─────────────────┘
│ │
▼ ▼
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Contentstack │◀───│ Contentstack │ │ Personalize │
│ CMS │ │ SDK │ │ Edge │
└─────────────────┘ └─────────────────┘ └─────────────────┘
│ │
▼ ▼
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Lytics │◀───│ Analytics │ │ Email Service │
│ Analytics │ │ Integration │ │ (Nodemailer) │
└─────────────────┘ └─────────────────┘ └─────────────────┘
│
▼
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Cursor AI │◀───│ AI Integration │ │ Pathfora │
│ Development │ │ │ │ Automation │
└─────────────────┘ └─────────────────┘ └─────────────────┘
┌─────────────────────────────────────────────────────────────────────────────────────┐
│ TECHNOLOGY STACK │
├─────────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │
│ │ Frontend │ │ Backend │ │ CMS │ │ Analytics │ │
│ │ │ │ │ │ │ │ │ │
│ │ • Next.js 15 │ │ • Next.js API │ │ • Contentstack │ │ • Lytics │ │
│ │ • React 19 │ │ • TypeScript │ │ • TypeScript │ │ • Pathfora │ │
│ │ • TypeScript │ │ • Nodemailer │ │ SDK │ │ • Real-time │ │
│ │ • Tailwind CSS │ │ • Geolocation │ │ • Live Preview │ │ Tracking │ │
│ └─────────────────┘ └─────────────────┘ └─────────────────┘ └─────────────────┘ │
│ │
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │
│ │ Personalization │ │ Automation │ │ AI Tools │ │ Deployment │ │
│ │ │ │ │ │ │ │ │ │
│ │ • Personalize │ │ • Email Auto │ │ • Cursor AI │ │ • Vercel │ │
│ │ Edge │ │ • Content Auto │ │ • Code Gen │ │ • CDN │ │
│ │ • A/B Testing │ │ • User Journey │ │ • Optimization │ │ • Environment │ │
│ │ • Variants │ │ • Triggers │ │ • Maintenance │ │ Variables │ │
│ └─────────────────┘ └─────────────────┘ └─────────────────┘ └─────────────────┘ │
└─────────────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────────────┐
│ SECURITY & PERFORMANCE │
├─────────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │
│ │ Security │ │ Performance │ │ Scalability │ │ Monitoring │ │
│ │ │ │ │ │ │ │ │ │
│ │ • Environment │ │ • Static Gen │ │ • Headless CMS │ │ • Error Tracking│ │
│ │ Variables │ │ • Image Opt │ │ • CDN Delivery │ │ • Performance │ │
│ │ • TypeScript │ │ • Code Splitting│ │ • API Rate │ │ Monitoring │ │
│ │ • Input Val │ │ • Caching │ │ Limiting │ │ • User Analytics│ │
│ │ • HTTPS │ │ • SSR/SSG │ │ • Load Balancing│ │ • Real-time │ │
│ └─────────────────┘ └─────────────────┘ └─────────────────┘ └─────────────────┘ │
└─────────────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────────────┐
│ MULTI-LANGUAGE SUPPORT │
├─────────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────┐ ┌─────────────────┐ │
│ │ English (en) │ │ Hindi (hi) │ │
│ │ │ │ │ │
│ │ • /en/ │ │ • /hi/ │ │
│ │ • /en/category │ │ • /hi/category │ │
│ │ • /en/politics │ │ • /hi/politics │ │
│ │ • /en/sports │ │ • /hi/sports │ │
│ │ • /en/tech │ │ • /hi/tech │ │
│ └─────────────────┘ └─────────────────┘ │
│ │
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │
│ │ Language Switch │ │ Contentstack │ │ Personalize │ │ Analytics │ │
│ │ Component │ │ Multi-lang │ │ Multi-lang │ │ Multi-lang │ │
│ │ │ │ Content │ │ Variants │ │ Tracking │ │
│ └─────────────────┘ └─────────────────┘ └─────────────────┘ └─────────────────┘ │
└─────────────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────────────┐
│ DEPLOYMENT ARCHITECTURE │
├─────────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │
│ │ Development │───▶│ Staging │───▶│ Production │ │
│ │ Environment │ │ Environment │ │ Environment │ │
│ └─────────────────┘ └─────────────────┘ └─────────────────┘ │
│ │
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │
│ │ Vercel │ │ CDN │ │ Environment │ │ Monitoring │ │
│ │ Platform │ │ Delivery │ │ Variables │ │ & Analytics │ │
│ │ │ │ │ │ │ │ │ │
│ │ • Auto Deploy │ │ • Global Edge │ │ • API Keys │ │ • Performance │ │
│ │ • Git Integration│ │ • Caching │ │ • Config │ │ Tracking │ │
│ │ • Preview URLs │ │ • Optimization │ │ • Secrets │ │ • Error Alerts │ │
│ └─────────────────┘ └─────────────────┘ └─────────────────┘ └─────────────────┘ │
└─────────────────────────────────────────────────────────────────────────────────────┘
This architecture diagram provides a comprehensive view of the system's components, data flow, and technology stack for the PowerPoint presentation.