Home » rc-projects » Fix My Feed
Fix My Feed
key links
key info
Project Title
Fix My Feed
category
AI Web Application
project status
Completed
Role
Full Development & AI Engineering
Tools & Technologies
React 19, TypeScript, Vite, Tailwind CSS, Unicode Math-plane Mapping, Google Gemini 3.5 Flash API, REST Client, Node.js, Express, Esbuild, Google Ai Studio
Timeline
2 hours
Project Overview
Fix My Feed is an advanced, AI-powered social media workspace composer designed to help content creators, marketers, and developers stand out in crowded feeds. It bridges the gap between raw text drafts and highly-engaging, platform-optimized social posts by combining rich Unicode styling engines with real-time AI copywriting intelligence.
The application operates as an interactive local composer. Users can compose posts, select specific words or phrases, and instantly apply high-impact typography styles (such as mathematical bold, italic, sans-serif, and cursive/script variants) that natively display across all major platforms. The custom editor continuously tracks cursor selections, automatically lighting up active style toggles on the toolbar to match the styling under the user's caret.
To elevate copywriting, the project incorporates a client-side AI Copilot powered directly by Google’s Gemini 3.5 Flash model. Creators can select a specialized copywriting tone (such as Scroll-Stop Hook, Narrative Story, Direct & Punchy, or Milestone Launch), toggle modifiers like bullet accents and concise copy, and write custom instructions to dynamically generate high-engagement variations in seconds. All of this is visualized in real-time desktop-accurate preview cards for LinkedIn, X (Twitter), Threads, Instagram, Facebook, and YouTube.
The project was developed with a focus on client-side optimization and zero-config deployment. To bypass shared-hosting Node.js routing and CORS limitations often encountered on platforms like Hostinger, the AI layer was engineered to run directly inside the browser using secure REST endpoints, providing blazing-fast response times and high scalability.
Key Features- Custom Unicode Styling Engine: Seamlessly transforms text into bold, italic, sans-serif, and script variants without relying on external HTML styling, making it natively compatible with social media platforms.
- Selection-Aware Styling Toolbar: Automatically detects and highlights active typography formats (e.g., Bold or Italic) in real-time as the cursor moves through styled text.
- AI Caption Copilot: Integrated directly with Google's Gemini 3.5 Flash model to restructure drafts, generate viral hooks, and refine copywriting.
- Specialized Copywriting Tone Presets: Built-in configurations for Viral Hook, Expert, Vertical Narrative, Direct/Punchy, and High-Energy Launch presets.
- Real-Time Desktop Previews: Accurate, live-updating visual preview cards mimicking exact font sizing, layout, and constraints for LinkedIn, X (Twitter), Threads, Facebook, Instagram, and YouTube.
- Interactive Character & Rule Counters: Real-time tracking of platform-specific character limits, warning highlights, and copy readability metrics.
- Smart Clipboard Utility: Fast copy-to-clipboard buttons tailored for individual platforms, alongside a one-click formatting cleanup tool.
- Glassmorphic Responsive UI: A premium, modern visual design system using curated slate and indigo HSL color schemes with sleek animations and transitions.
Challenges Faced
- Handling Unicode Offsets for Selection-Aware Styling: Translating specific selections of standard alphanumeric text into mathematical Unicode planes while keeping track of which styles are active under the user's active cursor selection.
- API Routing & Deployment Hurdles: Initial backend proxy servers faced routing limitations and returned HTML fallbacks (resulting in
Unexpected token '<' JSON errors) when deployed on shared hosting platforms like Hostinger. - Model Deprecations & API Life Cycle: Adapting to rapid shifts in LLM availability (such as the deprecation of older Gemini 1.5 versions) and transitioning the integration to the latest high-speed Gemini 3.5 Flash models.
Unexpected token '<' JSON errors) when deployed on shared hosting platforms like Hostinger.Solutions Implemented
- Engineered a custom mapping engine (
unicodeStylist.ts): Built a lookup and transition utility that successfully translates standard text into high-order Unicode math ranges (such as 0x1D608 for Sans-Italics and 0x1D63C for Bold-Italics) and scans cursor selections to instantly highlight active toolbar states. - Transitioned to direct browser-based REST integrations: Migrated the AI copilot layer to call the Google Gemini API directly from the client using secure browser fetches, completely bypassing shared hosting Node.js routing bottlenecks.
- Leveraged the high-performance
gemini-3.5-flash model: Configured the copilot API to tap into Google’s state-of-the-art 2026 models for speed, content quality, and robust compatibility. - Optimized the build and bundler pipeline: Structured Vite's relative base path configurations and designed a modular production script that compiles both server assets and compiled client modules into a single, light-weight 100KB ZIP file ready for instant deployment.
unicodeStylist.ts): Built a lookup and transition utility that successfully translates standard text into high-order Unicode math ranges (such as 0x1D608 for Sans-Italics and 0x1D63C for Bold-Italics) and scans cursor selections to instantly highlight active toolbar states.gemini-3.5-flash model: Configured the copilot API to tap into Google’s state-of-the-art 2026 models for speed, content quality, and robust compatibility.