News Near Me - Coastal Karnataka

A full-stack, cross-platform news application for Coastal Karnataka, featuring lightning-fast performance, beautiful design, and comprehensive monetization strategies.

🌟 Features

• 📰 Local News: Real-time news from Daijiworld RSS feed
• ⚡ Breaking News: Priority display for urgent updates
• 🎨 Modern UI: Clean, card-based design inspired by Inshorts
• 🌙 Dark Mode: Automatic theme switching
• 📱 PWA Support: Install as native app on mobile/desktop
• 📲 Mobile Apps: iOS and Android via Expo
• 💰 Ad Integration: AdSense (web) and AdMob (mobile)
• 🚀 Performance: ISR, caching, and optimization
• 🔔 Notifications: Push notifications for breaking news
• 📊 Analytics: Comprehensive tracking and insights

🛠️ Technology Stack

Web & PWA

• Framework: Next.js 14 with TypeScript
• Styling: Tailwind CSS with custom design system
• PWA: next-pwa with service worker
• Data Fetching: SWR for real-time updates
• Caching: Redis-backed with fallback to in-memory

Mobile

• Framework: Expo + React Native
• Navigation: Expo Router
• Fallback: Capacitor for native packaging
• Ads: react-native-google-mobile-ads

Infrastructure

• CI/CD: GitHub Actions
• Deployment: Vercel (web), EAS Build (mobile)
• Analytics: Firebase Analytics
• Monitoring: Sentry for error tracking

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm or yarn
• Expo CLI (for mobile development)

Installation

1. Clone the repository

   git clone https://github.com/yourusername/news-near-me.git
   cd news-near-me
   

2. Install dependencies

   npm install
   

3. Set up environment variables

   cp .env.example .env.local
   

   Edit .env.local with your configuration:

   # App Configuration
   NEXT_PUBLIC_BASE_URL=http://localhost:3000
   
   # AdSense Configuration
   NEXT_PUBLIC_ADSENSE_CLIENT_ID=ca-pub-1234567890123456
   NEXT_PUBLIC_ADSENSE_AD_UNIT_ID=1234567890
   
   # Analytics
   NEXT_PUBLIC_GA_TRACKING_ID=G-XXXXXXXXXX
   
   # Firebase (for mobile)
   FIREBASE_API_KEY=your-api-key
   FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
   FIREBASE_PROJECT_ID=your-project-id
   
   # Sentry
   SENTRY_DSN=https://your-sentry-dsn
   

4. Run development server

   npm run dev
   

5. Open your browser Navigate to http://localhost:3000

📱 Mobile Development

Expo Development

# Install Expo CLI globally
npm install -g @expo/cli

# Start Expo development server
npm run web          # Web version
npm run ios          # iOS simulator
npm run android      # Android emulator

Capacitor Development (Alternative)

# Build for production
npm run build
npm run export

# Add platforms
npx cap add ios
npx cap add android

# Sync and open
npx cap sync
npx cap open ios     # Opens Xcode
npx cap open android # Opens Android Studio

🏗️ Building for Production

Web & PWA

# Build for production
npm run build

# Export static site
npm run export

# Start production server
npm start

Mobile Apps

# Build with Expo EAS
eas build --platform ios
eas build --platform android

# Submit to stores
eas submit --platform ios
eas submit --platform android

🚀 Deployment

Web Deployment (Vercel)

1. Connect your GitHub repository to Vercel
2. Set environment variables in Vercel dashboard
3. Deploy automatically on push to main branch

Mobile Deployment

1. iOS App Store:

   • Build with EAS: eas build --platform ios
   • Submit: eas submit --platform ios

2. Google Play Store:

   • Build with EAS: eas build --platform android
   • Submit: eas submit --platform android

📊 Analytics & Monitoring

Google Analytics Setup

1. Create a Google Analytics 4 property
2. Add tracking ID to environment variables
3. Events are automatically tracked:
   • Page views
   • News clicks
   • Ad impressions
   • User engagement

Sentry Error Tracking

1. Create a Sentry project
2. Add DSN to environment variables
3. Errors are automatically captured and reported

💰 Monetization

AdSense (Web)

• Banner ads every 5 articles
• Responsive ad units
• Lazy loading for performance

AdMob (Mobile)

• Banner ads in footer
• Interstitial ads on app open
• Frequency capping implemented

Configuration

Update ad configuration in src/types/index.ts:

ads: {
  enabled: true,
  provider: 'adsense', // or 'admob'
  adUnitId: 'your-ad-unit-id',
  frequency: 5 // Show ad every 5 articles
}

🔧 Configuration

RSS Feed Configuration

The app fetches news from Daijiworld RSS feed. To change the source:

1. Update DEFAULT_RSS_URL in src/services/fetchRss.ts
2. Modify filtering logic in src/utils/parseRss.ts
3. Update category mapping in src/utils/categoryMap.ts

Performance Optimization

• ISR: Pages revalidate every 10 minutes
• Caching: Redis with 10-minute TTL
• Image Optimization: Next.js Image component
• Code Splitting: Automatic with Next.js
• PWA: Service worker for offline support

🧪 Testing

# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Run linting
npm run lint

# Type checking
npm run type-check

📁 Project Structure

src/
├── components/          # React components
│   ├── NewsCard.tsx    # News article card
│   ├── SkeletonCard.tsx # Loading skeleton
│   ├── AdBanner.tsx    # Ad display component
│   └── Header.tsx      # Navigation header
├── pages/              # Next.js pages
│   ├── api/           # API routes
│   ├── _app.tsx       # App wrapper
│   └── index.tsx      # Homepage
├── services/          # Data services
│   └── fetchRss.ts    # RSS fetching logic
├── utils/             # Utility functions
│   ├── parseRss.ts    # RSS parsing utilities
│   └── categoryMap.ts # Category configuration
├── types/             # TypeScript types
│   └── index.ts       # Type definitions
└── styles/            # Global styles
    └── globals.css    # Tailwind + custom CSS

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit changes: git commit -m 'Add amazing feature'
4. Push to branch: git push origin feature/amazing-feature
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

• Documentation: Wiki
• Issues: GitHub Issues
• Discussions: GitHub Discussions

🙏 Acknowledgments

• Daijiworld: RSS feed source
• Inshorts: UI/UX inspiration
• Next.js: Web framework
• Expo: Mobile development platform
• Tailwind CSS: Styling framework

---

Made with ❤️ for Coastal Karnataka