FeedFlow is a developer-centric, telemetry-driven mobile dashboard application built in React Native with Expo SDK 56. It simulates, evaluates, and optimizes social media feeds (e.g., Instagram) by training a personalized content recommendation engine in real-time. It features zero-shot Gemini LLM classifications, natural language tuning compiler, interactive SVG analytics, and modular custom preferences.
The interface uses a custom monospace Dark HUD theme designed to look like a hacker console:
- Monospace status indicators (
[ONLINE],[STANDBY]) - System delta telemetry tags (
[SYS DELTA: +48.1%]) - Visual dot-matrix evaluation maps (Interactive status matrices)
- JSON-formatted LLM classifier sandboxes
- Personalizer Agent Control: Toggle the background evaluation engine (
[START AGENT]/[PAUSE AGENT]). - Live Personalizer View: A dashboard displaying the active post evaluation card, category headers, and scanning animations.
- Telemetry Logs Terminal: Real-time monospace terminal log detailing evaluation actions (e.g.
[Boosted Topic: Startups] Evaluated post by @ycombinator...). - Precision Index: A dynamic calculation mapping the percentage relevance of your feed relative to boosted topics, with a baseline
[SYS DELTA]tracker.
- Preset Tuning Matrix: Select preset categories (AI, Tech, Startups, Finance, etc.) to Boost, Skip (Neutral), or Mute.
- AI Natural Language Rules Compiler: Instruct the feed in plain English (e.g., "Mute all crypto and clickbait gossip, but show me deep learning research papers and tech founders"). The app compiles it via Gemini API and automatically toggles category weights.
- Custom Preference Builder: Type and add customized preference topics dynamically (e.g. "Cooking", "Space Exploration"). Custom topics are immediately persisted, mapped to the simulation engine, and given inline
[REMOVE]badges for full lifecycle control.
- Instagram Simulation Connect: Input mock credentials/session cookies to authenticate the linked user node. Includes a safe Local Sandbox Mode fallback if cookies are absent.
- Post Diagnostic Dot Grid: An interactive matrix representing the last 15 scanned posts. Nodes glow green (high match), blue (neutral), or red (filtered out). Tapping any dot prints a console log readout of that specific post's telemetry.
- Curved SVG Trend Line Chart: Renders a custom-drawn glowing trendline chart (using
react-native-svg) displaying the chronological progression of the feed relevance index. - AI Diagnostic Audit: Computes your ingestion rates and weight vectors, sending them to Gemini to print a 3-4 sentence analytical audit report on your algorithmic feed training.
- Gemini Developer Configurator: Input your Google Gemini API Key securely (stored locally in AsyncStorage) to enable zero-shot classification and compiler prompts. Falls back gracefully to simulator offline heuristics if not provided.
- Sync Interval cycle: Configure automated synchronization intervals (
1h,4h,6h,8h). - AI Classifier Sandbox: Sandbox playground console. Input any caption string, click
[ANALYZE CAPTION], and see a formatted JSON representation of the zero-shot category match, confidence, and weight updates.
The project has a modular React Native structure separating views, utilities, styles, and assets:
FeedFlow/
├── App.js # Root component, global state, persistence hooks, and tabs
├── app.json # Expo submission-ready metadata (SDK 56, iOS, Android, plugins)
├── eas.json # Production & preview profiles for Android and iOS EAS builds
├── assets/ # Application icons, adaptive icons, and splash screens
└── src/
├── components/
│ ├── AutomationPanel.js # Console tab (terminal logs & personalizer card)
│ ├── Preferences.js # Tuner tab (presets, AI rules, custom topic builder)
│ ├── AnalyticsView.js # Stats tab (dot matrix grid, SVG line chart, AI audit report)
│ ├── ProfileSettings.js # Settings tab (sync settings, Gemini API key, classifier sandbox)
│ ├── InstagramConnect.js # Connect tab (Instagram account connect credentials widget)
│ └── Icons.js # SVG Icon assets (Lucide-inspired HUD paths)
│
├── styles/
│ └── theme.js # HSL-based design system (colors, gradients, typography, borders)
│
└── utils/
├── storage.js # AsyncStorage wrappers and serialization keys
└── simulation.js # Log generation algorithms and offline matching heuristics
graph TD
User((User)) -->|Adds custom topic or AI Prompt| Preferences[Preferences component]
Preferences -->|Updates State| App[App.js Global State]
App -->|Saves state| Storage[Storage Utility / AsyncStorage]
App -->|Invokes simulation agent| Simulation[simulation.js / generateTelemetryLog]
Simulation -->|Parses static or dynamic topic| LogOutput[Telemetry log details]
LogOutput -->|Appends logs & increments| App
App -->|Updates charts & logs| AnalyticsView[AnalyticsView component]
App -->|Updates terminal logs| AutomationPanel[AutomationPanel component]
GeminiAPI[(Gemini API)] <-->|API Key Auth| Preferences
GeminiAPI <-->|Sandbox caption check| ProfileSettings[ProfileSettings component]
GeminiAPI <-->|Generates feed audit report| AnalyticsView
- Node.js (v18+)
- npm
-
Clone the repository:
git clone https://github.com/darkNIGHT669/FeedFlow.git cd FeedFlow -
Install dependencies:
npm install
-
Run the development server (web platform):
npm run web
Open
http://localhost:8081in your browser. -
Run diagnostics check:
npx expo-doctor
The project configurations in app.json and eas.json are fully prepped for Android and iOS app stores:
- Android package:
com.harshbn2004.FeedFlow(versionCode: 1) - iOS bundleIdentifier:
com.harshbn2004.FeedFlow(buildNumber: 1.0.0) - Adaptive Theme splash screen: Configured via the schema-compliant
expo-splash-screenplugin.
To build the APK:
eas build --platform android --profile preview