DEV Community

Varshith V Hegde
Varshith V Hegde Subscriber

Posted on

News Aggregator - AI-Powered Cross-Platform Development

AI Challenge for Cross-Platform Apps - AI Acceleration Submission

This is a submission for the AI Challenge for Cross-Platform Apps - AI Acceleration

What I Built

I built a professional news aggregation application that demonstrates the power of AI-assisted development with Uno Platform. The app fetches and displays articles from multiple RSS feeds (New York Times, BBC News) with a beautiful Material Design 3 interface.

Key Features:

  • Dynamic news feed with 9 category filters (Technology, Business, Sports, etc.)
  • Real-time search with 300ms debouncing
  • Bookmark system with local persistence
  • Full article detail view with browser integration
  • Light/Dark theme support
  • Responsive grid layout adapting from mobile to desktop

API Used: RSS feeds from New York Times and BBC News (RSS 2.0 and Atom formats)

Problem Solved: Users need a unified, elegant interface to browse news from multiple trusted sources across all their devices - from phones to desktops - without switching between different apps or websites.

Demo

Repository:

πŸ“° News Aggregator - Uno Platform

A professional, cross-platform news aggregation application built with Uno Platform and .NET 10. This app demonstrates a complete, production-ready implementation featuring RSS feed parsing, responsive Material Design UI, dark mode, bookmarks, real-time search, and seamless cross-platform support.

Built for: Windows, macOS, Linux, iOS, Android, and WebAssembly from a single .NET codebase.


🎯 Core Features

πŸ“° 1. Dynamic News Feed

  • Beautiful responsive grid layout: 1 column (mobile) β†’ 2 columns (tablet) β†’ 3+ columns (desktop)
  • Large article cards with:
    • Hero images with fallback placeholders
    • Multi-line title and description
    • Source badge and relative timestamp ("2 hours ago")
    • Bookmark heart button with instant visual feedback
  • Smooth entrance animations on load
  • Hover scale effects on desktop
  • Loading spinner with "Loading articles..." message
  • Error state with retry button

🏷️ 2. Smart Category Filtering

  • 9 news categories: General, Technology, Business, Sports, Entertainment, Science, Health, World…

App Demo:

UNO MCP and Build Demo:

Screenshots

  • Windows Desktop view with article grid

Desktop View

  • WebAssembly browser version

Browser View

  • Mobile/Android view

Mobile View

  • Bookmarks page

Book Mark

Testing Instructions:

  1. Clone the repository
  2. Run dotnet restore
  3. For Windows: dotnet run -f net10.0-desktop --project newsapp/newsapp.csproj
  4. For WebAssembly: dotnet run -f net10.0-browserwasm --project newsapp/newsapp.csproj

AI Tooling in Action

I leveraged ** via Uno Platform MCP** throughout the development process, which dramatically accelerated my workflow:

Development Acceleration Examples:

1. Service Layer Architecture

  • Prompt Used: "Create a NewsService that fetches RSS feeds from multiple sources, caches results for 15 minutes, handles both RSS 2.0 and Atom formats, includes retry logic with exponential backoff, and extracts images from feed items"
  • Result: Complete NewsService.cs implementation with robust error handling and caching in minutes

2. MVVM Pattern Implementation

  • Prompt Used: "Build a MainModel ViewModel using CommunityToolkit.Mvvm with commands for loading articles, category filtering, search with debouncing, and bookmark toggling. Include observable properties for loading states and error handling"
  • Result: Full MVVM structure with proper async/await patterns and UI state management

3. Complex XAML Layouts

  • Prompt Used: "Create a responsive article grid using ItemsRepeater with UniformGridLayout that shows 1 column on mobile, 2 on tablet, 3+ on desktop. Include article cards with hero images, title, description, source badge, timestamp, and bookmark button. Add entrance animations and hover effects"
  • Result: Production-ready XAML with Material Design styling and smooth animations

4. Value Converters

  • Prompt Used: "Generate 11 XAML value converters: TimeAgoConverter (DateTime to relative time), CategoryColorConverter (enum to Material colors), BookmarkIconConverter (bool to heart icon), and converters for visibility, opacity, and font weight"
  • Result: Complete Converters.cs file with all converters implemented correctly

  • Github Copilot Code generating the NewsService implementation
  • AI suggesting optimal MVVM structure
  • Uno Platform MCP providing platform-specific guidance
  • Code completion for Uno Platform APIs

Time Saved:

  • Traditional Development: Estimated 40-50 hours
  • With AI Assistance: Completed in 30 mins
  • Productivity Gain: ~90% faster development

Using App MCP and Uno Platform MCP

Uno Platform MCP Integration

The Uno Platform MCP was instrumental in providing context-aware guidance:

  1. Platform-Specific Code: When implementing clipboard functionality, the MCP provided platform-specific implementations for Windows, Android and WebAssembly
  2. Best Practices: Suggested using ObservableProperty from CommunityToolkit.Mvvm instead of manual INotifyPropertyChanged implementation
  3. Dependency Injection: Guided proper service registration in App.xaml.cs with singleton vs transient lifetimes
  4. Multi-targeting: Helped configure the .csproj file for all six target platforms

App MCP for Context-Aware Interactions

Using App MCP, I was able to:

  • Query the running app state to debug UI binding issues
  • Verify that articles were loading correctly across different platforms
  • Test bookmark persistence by inspecting local storage
  • Validate theme switching behavior in real-time

Example Interaction:

Me: "The bookmark icon isn't updating when I tap it" App MCP: [Inspects running app] "The IsBookmarked property isn't marked with [ObservableProperty]. Add it to Article.cs" Result: Instant fix, no debugging session needed 
Enter fullscreen mode Exit fullscreen mode

Cross-Platform Reach

βœ… 3 Platforms Achieved:

  1. Windows Desktop (WinUI 3) - Full native experience
  2. WebAssembly - Runs directly in browsers (Chrome, Firefox, Safari, Edge)
  3. Android (API 21+) - Native Android app

Single Codebase: 100% of UI and business logic shared across all platforms

Platform-Specific Adaptations:

  • Browser: JavaScript clipboard API
  • Mobile: Native sharing and browser launching
  • Desktop: System theme detection and file system access

Development Experience

How AI Changed My Workflow

Before AI:

  • Manually reading Uno Platform documentation
  • Trial-and-error with XAML layouts
  • Writing boilerplate MVVM code by hand
  • Debugging RSS parsing issues for hours

With AI Acceleration:

  • Instant API implementation examples
  • Generated complex XAML layouts in seconds
  • Auto-completed MVVM patterns correctly
  • Suggested RSS parsing libraries and patterns upfront

What Surprised Me Most

  1. Context Understanding: The AI understood Uno Platform's multi-targeting model and suggested platform-specific code blocks automatically

  2. Production-Ready Code: Generated code wasn't just "quick and dirty" - it included proper error handling, logging, and async patterns

  3. Design Patterns: AI suggested architectural improvements I hadn't considered, like separating concerns with INewsService and IBookmarkService

  4. Incremental Development: Could build features piece-by-piece conversationally: "Now add dark mode support" β†’ "Add entrance animations" β†’ "Implement search debouncing"

  5. Cross-Platform Nuances: AI knew to warn about platform limitations (like WebAssembly file system access) before I encountered them

Key Takeaway

AI coding assistants with contextual intelligence from Uno Platform MCP transformed development from a documentation-heavy process into a collaborative conversation. Instead of "How do I do X in Uno Platform?", it became "Build X with these requirements" - and it just worked.


Prompts I Used

Here are the key prompts that accelerated development:

Architecture & Setup

"Create an Uno Platform .NET 10 project structure with MVVM pattern, dependency injection, and services for news fetching, bookmarks, and themes. Target Windows, WebAssembly, Android." 
Enter fullscreen mode Exit fullscreen mode

Core Services

"Build a NewsService that: - Fetches RSS feeds from NYT and BBC with category filtering - Parses RSS 2.0 and Atom formats - Caches articles for 15 minutes - Includes retry logic (3 attempts, exponential backoff) - Extracts images from feeds with fallback placeholders - Searches articles by title/description - Handles errors gracefully with logging" 
Enter fullscreen mode Exit fullscreen mode

MVVM ViewModels

"Create MainModel ViewModel with: - ObservableCollection of articles - Commands: LoadArticles, SelectCategory, Search (with 300ms debounce), ToggleBookmark - Properties: IsLoading, SearchQuery, SelectedCategory, ErrorMessage - Use CommunityToolkit.Mvvm attributes - Inject INewsService and IBookmarkService" 
Enter fullscreen mode Exit fullscreen mode

UI/XAML

"Design a responsive article grid with: - ItemsRepeater + UniformGridLayout (1/2/3+ columns responsive) - Cards showing: hero image, title, description, source badge, relative time - Bookmark heart button with toggle - Entrance animations and hover scale effects - Material Design 3 styling with rounded corners and shadows" 
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
hadil profile image
Hadil Ben Abdallah

This is amazing 😍 Great job! πŸ‘πŸ»