verticallines

Rahul Hathwar

TwitterLinkedInGitHub

Loading...

SocialU: Cross-Platform Social Media Analytics Desktop Application

Rahul Hathwar - 2024 - A Tauri-Based Analytics Dashboard with Rust Backend

SocialU: Cross-Platform Social Media Analytics

A native desktop application for tracking social media analytics across multiple platforms, built with Tauri to combine the performance of Rust with the flexibility of modern web technologies.

Project Genesis

Social media creators and marketers often struggle with fragmented analytics across platforms. While each social network provides its own analytics dashboard, comparing performance metrics and tracking growth over time requires juggling multiple browser tabs and manual data aggregation. SocialU addresses this by consolidating multi-platform analytics into a single, performant desktop application with historical tracking capabilities.

Architecture: Why Tauri?

The project leverages Tauri, a framework for building desktop applications using web technologies with a Rust backend. This architectural decision provided several advantages over traditional Electron-based approaches:

  • Reduced Bundle Size: Tauri applications use the system's native webview rather than bundling Chromium, resulting in significantly smaller binaries.
  • Memory Efficiency: Lower memory footprint compared to Electron applications.
  • Performance: Rust's performance characteristics for database operations and API calls.
  • Security: Tauri's security-first approach with minimal API surface by default.

The application architecture follows a clean separation of concerns:

Frontend (Svelte + TypeScript)
        ↓
    Tauri Bridge
        ↓
Backend (Rust)
    ↓
SQLite Database ← → Social Media APIs

Technical Stack

Frontend:

  • Svelte with TypeScript for reactive UI components
  • Tailwind CSS for utility-first styling
  • Chart.js with svelte-chartjs for data visualization
  • Vite as the build tool and development server

Backend:

  • Rust for the core application logic
  • Tauri 1.2 for desktop app framework
  • SQLx for type-safe SQL operations with compile-time verification
  • Tokio for async runtime
  • Reqwest for HTTP requests
  • twitter-v2 crate for Twitter API v2 integration

Database Design

The application uses SQLite with a normalized schema designed for temporal analytics tracking:

// From main.rs - Database initialization
sqlx::query("
  CREATE TABLE IF NOT EXISTS PROFILES (
    ID INTEGER PRIMARY KEY AUTOINCREMENT,
    NAME TEXT NOT NULL
  );
"). execute(&db_pool).await? ;

sqlx::query("
  CREATE TABLE IF NOT EXISTS PLATFORMS (
    ID INTEGER PRIMARY KEY AUTOINCREMENT,
    PROFILE_ID INTEGER NOT NULL,
    PLATFORM TEXT NOT NULL,
    USERNAME TEXT NOT NULL,
    FOREIGN KEY(PROFILE_ID) REFERENCES PROFILES(ID)
  );
").execute(&db_pool).await?;

sqlx::query("
  CREATE TABLE IF NOT EXISTS SNAPSHOTS (
    ID INTEGER PRIMARY KEY AUTOINCREMENT,
    PROFILE_ID INTEGER NOT NULL,
    TMSTMP DATETIME NOT NULL,
    FOREIGN KEY(PROFILE_ID) REFERENCES PROFILES(ID)
  );
").execute(&db_pool).await?;

sqlx::query("
  CREATE TABLE IF NOT EXISTS PLATFORM_STATS (
    ID INTEGER PRIMARY KEY AUTOINCREMENT,
    PLATFORM_ID INTEGER NOT NULL,
    SNAPSHOT_ID INTEGER NOT NULL,
    FOLLOWERS INTEGER,
    FOLLOWINGS INTEGER,
    FOREIGN KEY(PLATFORM_ID) REFERENCES TWITTER(ID),
    FOREIGN KEY(SNAPSHOT_ID) REFERENCES SNAPSHOTS(ID)
  );
").execute(&db_pool). await?;

This schema enables:

  • Multi-profile support: Users can track multiple social media personas
  • Time-series analysis: Snapshots capture metrics at specific timestamps
  • Cross-platform aggregation: Normalized structure supports any social platform
  • Historical tracking: Growth trends over time rather than point-in-time metrics

Data Collection Strategy

The data_collector module implements a snapshot-based data collection system with intelligent timing:

// From data_collector.rs
pub async fn collect_data(db_pool: &Pool<Sqlite>) -> Result<()> {
    let profiles = sqlx::query("SELECT ID FROM PROFILES")
        .fetch_all(db_pool)
        .await?;
    
    let mut profile_ids: Vec<i32> = Vec::new();
    for profile in profiles {
        profile_ids. push(profile.get(0));
    }

    for profile_id in profile_ids {
        // Check if it is time to capture a new data snapshot
        let last_snapshot = sqlx::query(
            "SELECT TMSTMP FROM SNAPSHOTS WHERE PROFILE_ID = ? 
             ORDER BY TMSTMP DESC LIMIT 1"
        )
        .bind(profile_id)
        .fetch_one(db_pool)
        . await;

        // Logic to determine if 12+ hours have passed since last snapshot
        // If so, capture new snapshot and collect platform data
    }
    Ok(())
}

The 12-hour snapshot interval balances API rate limits with data granularity for meaningful trend analysis.

Platform Interface Pattern

The codebase implements a modular interface system for different social platforms, making it extensible for future integrations:

src-tauri/src/platform_interfaces/
├── mod.rs          # Module declarations
├── twitter.rs      # Twitter API integration
├── facebook.rs     # Facebook stub
├── instagram.rs    # Instagram stub
└── youtube.rs      # YouTube stub

The Twitter implementation demonstrates the pattern using the Twitter API v2 with OAuth 2.0:

// From twitter.rs
pub async fn get_followers(username: &str) -> Result<Vec<User>> {
    let auth = BearerToken::new(std::env::var("APP_BEARER_TOKEN").unwrap());

    let my_followers = TwitterApi::new(auth)
        .with_user_ctx()
        .await?
        .get_my_followers()
        .user_fields([UserField::Username])
        .max_results(20)
        .send()
        .await? 
        .into_data()
        .unwrap();

    Ok(my_followers)
}

This modular approach allows each platform to handle its unique authentication requirements and API quirks while maintaining a consistent internal interface.

Frontend Component Architecture

The Svelte frontend follows a component-based architecture with clear separation between layouts, pages, and reusable components:

<!-- From Home.svelte -->
<script lang="ts">
    import ContentSideNav from '../layouts/ContentSideNav.svelte';
    import SideNav from '../components/SideNav.svelte';
    import EngagementTrends from '../components/EngagementTrends.svelte';
    import ContentTypes from '../components/ContentTypes. svelte';
    import FollowerChanges from '../components/FollowerChanges.svelte';
    import Schedule from '../components/Schedule.svelte';
    import TagTrends from '../components/TagTrends.svelte';
</script>

<div>
    <ContentSideNav>
        <SideNav slot="sidenav" />
        <div slot="content" class="p-12">
            <h1 class="bg-gray-900 text-white p-2 pr-12 max-w-min rounded-md">
                Overview
            </h1>
            <div class="flex-col mt-4">
                <div class={"flex space-x-8 h-56"}>
                    <EngagementTrends />
                    <ContentTypes />
                </div>
                <div class={"h-32"}>
                    <FollowerChanges />
                </div>
                <div class={"flex space-x-8 h-44"}>
                    <Schedule />
                    <TagTrends />
                </div>
            </div>
        </div>
    </ContentSideNav>
</div>

The dashboard visualizes six key metric categories:

  1. Engagement Trends: Temporal engagement patterns
  2. Content Types: Performance breakdown by content format
  3. Follower Changes: Growth/churn visualization
  4. Schedule: Posting frequency analysis
  5. Tag Trends: Hashtag performance metrics
  6. Side Navigation: Platform and profile switching

Custom Window Controls

The application implements a frameless window design with custom title bar controls, providing a modern, native-feeling experience:

<!-- From App.svelte -->
<div data-tauri-drag-region class="titlebar">
  <div class="titlebar-button" id="titlebar-minimize">
    <img src="https://api.iconify.design/mdi:window-minimize.svg" 
         alt="minimize" />
  </div>
  <div class="titlebar-button" id="titlebar-maximize">
    <img src="https://api.iconify.design/mdi:window-maximize.svg" 
         alt="maximize" />
  </div>
  <div class="titlebar-button" id="titlebar-close">
    <img src="https://api.iconify.design/mdi:close.svg" 
         alt="close" />
  </div>
</div>

The data-tauri-drag-region attribute enables window dragging from the custom title bar, maintaining expected desktop application behavior.

Type Safety Across the Stack

The project leverages TypeScript on the frontend and Rust's strong type system on the backend, with SQLx providing compile-time SQL query verification:

Frontend: TypeScript ensures type safety in Svelte components Backend: Rust's ownership model prevents common bugs Database: SQLx checks SQL queries at compile time against the actual database schema

This multi-layered type safety reduces runtime errors and improves maintainability.

Technical Challenges and Solutions

Challenge 1: Async Database Operations on Application Startup

The Rust backend needed to initialize the database, run migrations, and populate initial data before launching the UI. Using Tokio's async runtime with #[tokio::main] allowed non-blocking database operations:

#[tokio::main]
async fn main() -> Result<()> {
  // Create database if not exists
  if ! Sqlite::database_exists(constants::DATABASE_URL).await? {
    Sqlite::create_database(constants::DATABASE_URL).await?;
  }

  // Connect with connection pool
  let db_pool = SqlitePoolOptions::new()
        .max_connections(1)
        .connect(constants::DATABASE_URL). await?;
  
  // Initialize schema and collect initial data
  // ... table creation ... 
  data_collector::collect_data(&db_pool).await?;

  // Launch Tauri with managed state
  tauri::Builder::default() 
    .manage(db_pool)
    .run(tauri::generate_context! ())
    .expect("error while running tauri application");

  Ok(())
}

The database pool is managed by Tauri's state management system, making it accessible across all backend commands.

Challenge 2: Cross-Platform Build Configuration

Tauri applications require careful build configuration for cross-platform compatibility. The vite.config.ts and tauri.conf.json files coordinate the build process between Vite (frontend bundler) and Cargo (Rust compiler).

Challenge 3: API Rate Limiting

Social media APIs impose rate limits. The 12-hour snapshot interval was chosen to stay well within Twitter's rate limits while providing sufficient data granularity for daily/weekly trend analysis.

Development Workflow

The project supports hot module replacement during development:

// From package.json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Running tauri dev launches both the Vite development server and the Rust backend, with automatic recompilation on file changes.

Extensibility and Future Development

The architecture was designed for extensibility:

  1. Platform Interfaces: Stub files for Facebook, Instagram, and YouTube indicate planned multi-platform support
  2. UI API Layer: The uiapi.rs module defines the contract between frontend and backend, with functions like get_engagement_trends(), get_demographics(), and get_content_types() ready for implementation
  3. Modular Components: Each chart/metric is a self-contained Svelte component that can be rearranged or extended

Key Takeaways

This project demonstrates:

  • Modern Desktop Development: Using Tauri as a lightweight alternative to Electron
  • Full-Stack Rust: Leveraging Rust's performance and safety for application logic
  • Reactive UI Design: Svelte's component model for maintainable interfaces
  • Database Design: Normalized schema for time-series analytics
  • API Integration: Working with OAuth and rate-limited external APIs
  • Async Programming: Tokio for concurrent operations without blocking
  • Type Safety: End-to-end type checking from database to UI

SocialU represents a practical application of systems programming concepts to solve a real-world analytics problem, with an architecture that balances performance, maintainability, and extensibility.

Technologies: Tauri • Rust • Svelte • TypeScript • SQLite • SQLx • Tokio • Twitter API • Chart.js • Vite • Tailwind CSS

Copyright © Rahul Hathwar. All Rights Reserved.