DevFeed — Spotify for Tech News

An AI-powered, personalized news feed for developers. AI news · GitHub trending · Hacker News · engineering blogs · open-source launches — all in one beautiful dashboard.

Built with Next.js 14 (App Router) + TypeScript + Tailwind + shadcn/ui + Supabase + Vercel Cron. Runs end-to-end on free tiers.

---

Features

• AI-summarized articles — every article gets a short summary and a "why this matters" blurb (Hugging Face Inference API with a deterministic rule-based fallback).
• Multi-source ingestion — RSS feeds (OpenAI, Anthropic, Hugging Face, DEV, Hashnode, Netflix Tech Blog, Cloudflare, etc.), GitHub trending repos, and Hacker News top stories.
• Automatic categorization — AI, Programming, Java, React, DevOps, Cybersecurity, Startups, Open Source.
• Search + category filters with URL-driven state (shareable links).
• Trending page combining recent articles + live GitHub & HN sidebars.
• Auth + bookmarks via Supabase (email/password). Protected /bookmarks and /settings routes.
• Premium dark mode with developer-focused glassmorphism aesthetic. Light mode included.
• Responsive — phone, tablet, desktop.
• SEO ready — metadata, OpenGraph, sitemap.xml, robots.txt.
• Vercel cron jobs — hourly RSS sync, 30-minute HN sync, 6-hour GitHub sync.

---

Tech stack

Layer	Choice
Framework	Next.js 14 App Router
Language	TypeScript (strict)
Styling	Tailwind CSS + shadcn/ui
Database	Supabase Postgres (free)
Auth	Supabase Auth (free)
Cron	GitHub Actions (free) — pings cron endpoints on schedule
AI summary	Hugging Face Inference API (free, opt-in) + rule-based fallback
Hosting	Vercel (free)

No paid services. No vector DB. No OpenAI billing.

---

Project structure

.
├── src/
│   ├── app/                     # App Router pages, API, layouts
│   │   ├── api/
│   │   │   ├── articles/        # GET feed (paginated, filterable)
│   │   │   ├── auth/callback/   # Supabase OAuth callback
│   │   │   ├── bookmarks/       # User bookmarks
│   │   │   └── cron/
│   │   │       ├── rss/         # Hourly RSS ingestion
│   │   │       ├── github/      # 6-hourly GitHub trending
│   │   │       └── hackernews/  # 30-min HN top stories
│   │   ├── bookmarks/
│   │   ├── categories/[slug]/
│   │   ├── login/, register/, settings/, trending/
│   │   ├── error.tsx, loading.tsx, not-found.tsx
│   │   ├── sitemap.ts, robots.ts
│   │   ├── layout.tsx, page.tsx
│   │   └── globals.css
│   ├── components/              # Reusable UI (navbar, cards, widgets, ui/)
│   ├── services/                # rss / github / hackernews / articles
│   ├── utils/                   # summarizer, classifier, feed-parser, format
│   ├── lib/                     # supabase clients + constants + utils
│   ├── hooks/                   # use-debounce, use-bookmarks
│   ├── providers/               # theme, supabase
│   ├── actions/                 # server actions (auth)
│   └── types/                   # article, database
├── supabase/
│   └── schema.sql               # complete DB schema + RLS policies
├── .github/workflows/           # GitHub Actions cron triggers (free)
│   ├── cron-rss.yml             # hourly RSS ingestion
│   ├── cron-hackernews.yml      # 30-min HN ingestion
│   ├── cron-github.yml          # 6-hour GitHub trending
│   └── keepalive.yml            # weekly — stops GitHub auto-disabling the crons
├── middleware.ts                # Supabase session refresh + protected routes
├── vercel.json                  # Vercel config — daily backup RSS cron
├── next.config.mjs
├── tailwind.config.ts
├── tsconfig.json
├── components.json              # shadcn config
├── package.json
├── .env.example
└── README.md

---

Deployment — zero local commands

This project is designed to be deployed without running anything on your machine.

1) Push to GitHub

Upload this folder to a fresh GitHub repository (drag & drop in github.com works fine).

2) Create a free Supabase project

1. Sign up at supabase.com → create a project.
2. In the dashboard go to SQL Editor → paste the contents of supabase/schema.sql → run.
3. Go to Project Settings → API and grab:
   • Project URL → NEXT_PUBLIC_SUPABASE_URL
   • anon public key → NEXT_PUBLIC_SUPABASE_ANON_KEY
   • service_role key → SUPABASE_SERVICE_ROLE_KEY (server-only, used by cron jobs)
4. (Optional) Authentication → Providers → Email: enable, decide whether to require email confirmation. For dev, disabling confirmation is fastest.

3) Connect to Vercel

1. vercel.com → Add New → Project → import the GitHub repo.

2. Framework preset: Next.js (auto-detected).

3. Environment Variables — add the values from .env.example:

   Name	Example
   NEXT_PUBLIC_SUPABASE_URL	https://abcdefgh.supabase.co
   NEXT_PUBLIC_SUPABASE_ANON_KEY	eyJ… (the anon key)
   SUPABASE_SERVICE_ROLE_KEY	eyJ… (the service-role key)
   CRON_SECRET	any long random string
   NEXT_PUBLIC_SITE_URL	https://<your>.vercel.app
   HUGGINGFACE_API_KEY	optional — HF token, or leave blank for rule-based summaries

4. Click Deploy.

4) Set up the cron triggers (GitHub Actions — free)

Vercel's Hobby plan only allows daily crons, so we use GitHub Actions instead. The workflows are already in .github/workflows/ and will run automatically once you add two secrets:

1. Go to your repo on GitHub → Settings → Secrets and variables → Actions → New repository secret
2. Add these two secrets:

This is the beginning of the README. Read the rest at the original. Read the full README ↗