How to Develop a Content Curation Tool with Tagging in FlutterFlow

Create curated_items with fields: userId (Reference), url (String), ogTitle (String, from Open Graph), ogDescription (String), ogImage (String, image URL), ogSiteName (String), tags (Array of Strings), collectionId (Reference, nullable), createdAt (Timestamp), isPublic (Boolean). Create collections with: userId (Reference), name (String), description (String), coverImageUrl (String, from first item's ogImage), itemCount (Int), isPublic (Boolean), shareCode (String, unique 8-char code for public sharing). Create a tags collection with: name (String, lowercase), usageCount (Int, incremented when tag is applied to an item). The tags collection enables autocomplete and trending tag suggestions.

Deploy a Cloud Function fetchOGMetadata(url) that makes a server-side HTTP GET request to the provided URL, parses the HTML response, and extracts Open Graph meta tags: og:title, og:description, og:image, og:site_name. Use a Node.js HTML parser like cheerio. If OG tags are missing, fall back to the page's title tag and meta description. Return the extracted metadata as a JSON object. This must run server-side because browser CORS policies block client-side requests to most external websites. Add error handling for timeouts (5-second limit), invalid URLs, and unreachable sites.

Create a SaveContentPage or BottomSheet triggered by a FAB. Add a TextField for the URL. On paste or blur, call the fetchOGMetadata Cloud Function. Display the returned metadata in a preview Container: ogImage at top, ogTitle in bold, ogDescription below, ogSiteName in grey. Below the preview, add a tag section: a Wrap widget showing existing tags as tappable Chips (query the tags collection, ordered by usageCount desc, limit 20). Tapping a chip toggles it (selected chips are blue, deselected are grey). Add a TextField for creating a new tag — on submit, add the tag string to the selected list. Below tags, add an optional collection DropDown querying the user's collections. On Save, create the curated_items doc with all metadata, selected tags, and optional collectionId. Increment usageCount on each applied tag doc.

Create a MyCurationPage with a TabBar: Feed and Collections. Feed tab: display a ListView of curated_items where userId equals current user, ordered by createdAt desc. Each item shows ogImage, ogTitle, tags as small Chips, and ogSiteName. Add a tag filter Row at the top: Wrap of the user's most-used tags as filter chips. Selecting a tag filters the list to items containing that tag (Firestore arrayContains query). Tapping an item opens the URL in an in-app WebView. Collections tab: GridView of user's collections showing coverImageUrl, name, and itemCount. Tapping a collection shows its items. Add a Create Collection button that opens a Dialog with name and description fields.

Create a DiscoverPage showing recently curated items across all users where isPublic is true, ordered by createdAt desc. Display in a GridView with a masonry-style layout (alternating card heights based on whether ogImage exists). Add trending tags at the top: query tags ordered by usageCount desc, limit 10, displayed as a horizontal ScrollView of Chips. Tapping a trending tag filters the discover feed. For public collections, generate a unique shareCode on creation. Build a SharedCollectionPage that accepts the shareCode as a URL parameter, queries the collection by shareCode, and displays its items. Add a Share button on collections that copies the shareable link or opens the share sheet.