A modern AI news aggregator that pulls the latest articles from multiple sources into one clean, easy-to-read interface.

• Multi-Source Aggregation: Fetches news from:

  • Reddit (r/artificial, r/MachineLearning, r/OpenAI, r/ChatGPT, r/LocalLLaMA, r/StableDiffusion)
  • TechCrunch AI category
  • Hacker News
  • Startupper.gr

• Clean UI: Modern, responsive design with Tailwind CSS

• Source Filtering: Filter articles by source with one click

• Auto-Refresh: News updates every 5 minutes

• Score & Comments: See popularity metrics from Reddit and Hacker News

• Timestamps: Human-readable relative timestamps for all articles

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Data Fetching:
  • Reddit JSON API (client-side, bypasses Vercel IP blocks)
  • TechCrunch RSS feed
  • Startupper.gr RSS feed
  • Hacker News API
• Hybrid Loading: Server-side pre-rendering for fast initial load, client-side Reddit fetching to avoid blocks

Reddit blocks cloud hosting providers (including Vercel) by IP address. To solve this:

Server-Side (Build Time)

• ✅ Fetches TechCrunch, HackerNews, Startupper
• ❌ Skips Reddit (would be blocked)

Client-Side (Runtime)

• ✅ Fetches Reddit from user's browser
• ✅ Uses localStorage for 10-minute caching
• ✅ Bypasses Vercel IP blocks completely

User Experience:

1. Page loads with TechCrunch/HackerNews/Startupper instantly
2. Reddit posts load 2-3 seconds later and merge seamlessly
3. Subsequent loads are instant (cached)

No configuration or environment variables required!

1. Install dependencies:

npm install

2. Run the development server:

npm run dev

3. Open http://localhost:3000 in your browser

Build for production:

npm run build
npm start

1. Push your code to GitHub
2. Import the project in Vercel
3. Deploy with one click - no environment variables needed!

✅ Note: Reddit posts are fetched client-side (from user browsers) to bypass Vercel IP blocks. This requires no configuration and provides a seamless experience!

This is a standard Next.js app and can be deployed to:

• Netlify
• Railway
• AWS Amplify
• Any Node.js hosting platform

Edit lib/fetchers/reddit.ts and add subreddit names to the SUBREDDITS array:

const SUBREDDITS = [
  'artificial',
  'MachineLearning',
  // Add more here
];

The news is cached for 5 minutes by default. To change this, edit the revalidate value in:

• app/api/news/route.ts
• Individual fetcher files

Each fetcher has a default limit for the number of articles. Adjust these in lib/fetchers/index.ts:

const [reddit, techcrunch, hackernews, startupper] = await Promise.all([
  fetchRedditPosts(30),  // Adjust these numbers
  fetchTechCrunchPosts(20),
  fetchHackerNewsPosts(30),
  fetchStartupperPosts(15)
]);

theaihomepage/
├── app/
│   ├── api/news/route.ts    # API endpoint for aggregated news
│   ├── layout.tsx            # Root layout with metadata
│   └── page.tsx              # Main homepage
├── components/
│   ├── NewsCard.tsx          # Individual news item component
│   └── SourceFilter.tsx      # Source filtering component
├── lib/
│   ├── types.ts              # TypeScript interfaces
│   └── fetchers/
│       ├── reddit.ts         # Reddit API fetcher
│       ├── techcrunch.ts     # TechCrunch RSS fetcher
│       ├── hackernews.ts     # Hacker News API fetcher
│       ├── startupper.ts     # Startupper RSS fetcher
│       └── index.ts          # Aggregation logic
└── package.json

MIT

Feel free to open issues or submit PRs to improve the aggregator!