Frontpage — Thomas ROBERT
A customizable content aggregator that pulls RSS and Atom feeds into one well-designed reading dashboard.
Live URL: https://frontpage-toco.vercel.app/
Overview
Frontpage is a full-stack RSS/Atom feed reader built as a Frontend Mentor Product Challenge. It fetches, parses and stores articles from any public feed URL, organises them into user-defined categories, and presents them in three switchable layouts (list, compact, cards). A guest demo lets visitors explore 19 curated tech feeds without signing up. Authenticated users get a persistent reading history, bookmarks, and an AI-powered weekly digest.
Tech Stack
| Layer | Technology |
|---|
| Framework | TanStack Start v1 (React 19, SSR) |
| Routing | TanStack Router v1 (file-based) |
| Database | Drizzle ORM + Neon (PostgreSQL) |
| Authentication | Better Auth v1.5 |
| Hosting | Nitro (nightly) / Vercel |
| Styling | Tailwind CSS v4 + shadcn/ui (new-york) |
| Feed parsing | fast-xml-parser |
| Type checking | TypeScript 5.7 (strict) |
| AI | Google Gemini 2.5 Flash (free tier) |
Phase 7 — AI Features
Powered by Google Gemini 2.5 Flash via @google/generative-ai. All AI features degrade gracefully when GEMINI_API_KEY is not set — the UI simply hides the AI affordances.
Article Summarization
Open any article in the Reader View drawer and click "Summarize with AI" to generate a structured summary. The summary format is:
- First line: one direct sentence stating the main finding, argument, or news event (no "this article discusses" preamble).
- Bullet points: 2–3 specific facts, data points, or key takeaways.
Article HTML is stripped to plain text before being sent to the API (up to 8 000 characters). Summaries are stored in the feedItem.aiSummary column, so subsequent opens return the cached result instantly (no second API call). Old plain-text summaries (from before the format update) render gracefully as a single paragraph.
Category Auto-Suggestion
When adding a new feed, Frontpage calls Gemini in the background immediately after the feed preview loads. While waiting, a pulsing skeleton strip shows that a suggestion is on its way. Once the response arrives:
- Existing category match: a dismissible banner shows "AI suggests: Category Name" with an Apply button that sets the selector in one click.
- No matching category (or no categories yet): Gemini proposes a new name — the banner shows "AI suggests new: Category Name" with a Create & Apply button.
Accepting a new-category suggestion does not immediately write to the database. The name is held in local state and the category is only created when the user clicks Add Feed — so abandoning the dialog never leaves orphan categories. A confirmation chip below the selector lets the user cancel the proposed name before confirming.
This fires without blocking the UI — if the API call fails, the skeleton simply disappears and nothing is shown.
Weekly Digest View
Navigate to Weekly Digest in the sidebar (or ?view=digest) to see an AI-curated editorial briefing of your unread articles from the last 7 days. The view:
- Queries the 10 most recent unread items with content (last 7 days).
- Sends them to Gemini for a 3–4 sentence editorial summary.
- Lists the individual articles below, showing AI summaries where already cached.
Caching Strategy
feedItem.aiSummary stores generated summaries in Postgres. generateSummaryFn checks for an existing value before calling Gemini, so summaries are only generated once per article regardless of how many times the reader is opened.
Graceful Fallback
- If
GEMINI_API_KEY is missing or the API call fails, generateSummaryFn returns { summary: null, error: 'AI unavailable' } — the UI shows a gentle error message.
suggestCategoryFn returns null on any error — the suggestion banner simply never appears.getWeeklyDigestFn re-throws on error — the Digest view shows an error state with a retry button.
Design Decisions
These are the product and design choices I made where the spec left room for interpretation.
Content Discovery & Onboarding
The problem I was solving: A feed reader is useless when empty. New users need to get to "valuable content in the app" within seconds, not minutes.
My approach: Two parallel onboarding paths. First, a guest demo with 19 curated tech/design/dev feeds pre-loaded (seeded via a one-time script), so anyone visiting the landing page can click "Try as guest" and land in a fully populated dashboard instantly. Second, for authenticated users who start fresh, a "Starter Pack" onboarding flow in the empty state offers to add all 19 curated feeds in one click, with manual category assignment in a follow-up dialog.
Why I chose this approach: The guest path eliminates the "blank page" problem for discovery. The starter pack removes the friction of searching for good feed URLs — the hardest part of adopting an RSS reader.
What I'd do differently: Add OPML import for power users migrating from another reader. The data model already supports it.
Digest / Summary View
The problem I was solving: Readers who don't check in daily need a "what did I miss?" view that surfaces signal without overwhelming them with 100+ unread items.
My approach: A Weekly Digest view (sidebar link or ?view=digest) queries the 10 most recent unread articles from the past 7 days that have full content, sends them to Gemini for a 3–4 sentence editorial briefing, and displays that briefing above the list of articles. Article-level AI summaries are shown inline where already cached.
여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗
