How to Design a News Aggregator Platform in FlutterFlow

Create an articles collection with fields: title (String), summary (String), imageUrl (String), sourceUrl (String, the original article link), sourceName (String, e.g., 'TechCrunch'), category (String: Tech, Business, Sports, Science, Entertainment), publishedAt (Timestamp), fetchedAt (Timestamp). Create a users/{uid}/saved_articles subcollection with fields: articleId (String), savedAt (Timestamp). Identify 3-4 RSS feed URLs for your categories. Store them in a feed_sources collection with fields: url (String), sourceName (String), category (String), isActive (bool).

Create a scheduled Cloud Function that runs every hour. The function reads all active feed_sources documents, fetches each RSS feed URL using node-fetch or axios, parses the XML response using the xml2js package to extract title, link, description, pubDate, and any media content URL for the image. For each parsed entry, check if an article with the same sourceUrl already exists in Firestore to deduplicate. If it is new, create an articles document with the normalized fields including the source category. Set fetchedAt to the current server timestamp. Log the count of new articles added per run.

1// Cloud Function: fetchNewsFeeds (scheduled hourly)
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4const axios = require('axios');
5const { parseStringPromise } = require('xml2js');
6admin.initializeApp();
7
8exports.fetchNewsFeeds = functions.pubsub
9  .schedule('every 1 hours')
10  .onRun(async () => {
11    const sourcesSnap = await admin.firestore()
12      .collection('feed_sources').where('isActive', '==', true).get();
13
14    for (const sourceDoc of sourcesSnap.docs) {
15      const { url, sourceName, category } = sourceDoc.data();
16      try {
17        const res = await axios.get(url, { timeout: 10000 });
18        const parsed = await parseStringPromise(res.data);
19        const items = parsed.rss?.channel?.[0]?.item || [];
20
21        for (const item of items.slice(0, 20)) {
22          const sourceUrl = item.link?.[0] || '';
23          const existing = await admin.firestore()
24            .collection('articles')
25            .where('sourceUrl', '==', sourceUrl).limit(1).get();
26
27          if (existing.empty && sourceUrl) {
28            await admin.firestore().collection('articles').add({
29              title: item.title?.[0] || '',
30              summary: (item.description?.[0] || '').replace(/<[^>]*>/g, '').slice(0, 300),
31              imageUrl: item['media:content']?.[0]?.$?.url || '',
32              sourceUrl,
33              sourceName,
34              category,
35              publishedAt: admin.firestore.Timestamp.fromDate(
36                new Date(item.pubDate?.[0] || Date.now())
37              ),
38              fetchedAt: admin.firestore.FieldValue.serverTimestamp(),
39            });
40          }
41        }
42      } catch (e) {
43        console.error(`Failed to fetch ${sourceName}: ${e.message}`);
44      }
45    }
46  });

Create a NewsPage. Add a TabBar with tabs for each category: Tech, Business, Sports, Science, Entertainment, and an All tab. Each tab contains a ListView bound to a Backend Query on the articles collection filtered by category (or no filter for All), ordered by publishedAt descending, with a limit of 20 documents. Each article card Container shows: the imageUrl on the left as a small thumbnail, the title in bold, the summary truncated to 2 lines, a Row with sourceName and a relative time label (e.g., '2 hours ago'). Add a pull-to-refresh RefreshIndicator that re-runs the query.

Tap an article card to navigate to an ArticleReaderPage with Route Parameter articleId. Query the article document. Display the title and source name at the top, then embed a Custom Widget WebView that loads the sourceUrl for the full article content. Add a bookmark IconButton in the AppBar. On tap, check if a saved_articles document exists for the current user and articleId. If not, create one with savedAt timestamp. If it exists, delete it. Fill the icon when bookmarked. Create a SavedArticlesPage that queries the user's saved_articles subcollection, joins each articleId to the articles collection, and displays them as the same card layout.

Add a search TextField at the top of the NewsPage above the TabBar. On text change, filter the current tab's query by title prefix match (where title >= searchTerm and title <= searchTerm + unicode high char). For admin users, create a SourceManagementPage that lists all feed_sources with their name, URL, category, and an isActive Switch toggle. Add a form to create new feed sources. Changes to feed sources take effect on the next hourly Cloud Function run. Display the last fetchedAt timestamp so admins know when articles were last updated.