Blog Chef  

Frontend:

• Angular + Ionic (v6):

  • Dynamic Paragraph Editor – WYSIWYG interface for content input, with support for formatting, media embeds, and live preview.

  • Reactive Forms – Captures user input for title, keywords, and writing style selections.

  • Custom Directives – Handles rich text formatting, keyword highlighting, and link embedding.

  • Responsive Design – Ensures smooth rendering across devices using Ionic UI components and CSS Grid/Flexbox.
     

Backend:

• Node.js (Express):

  • REST API – Handles AI processing requests and manages communication between the frontend and AI services.

  • Orchestrates AI Agents – Manages multi-agent pipelines for:

    • Article structuring (headings, subheadings)

    • SEO keyword injection

    • Formatting and table generation

  • Request Queuing and Rate Limiting – Optimized to handle large volumes of content requests without overloading the OpenAI API.
     

AI Engine:

• OpenAI API (GPT-4):

  • Fine-tuned Prompts – Custom workflows for generating long-form content based on user-selected mood, tone, and keywords.

  • Multi-Agent Approach:

    1. Outline Agent – Generates article skeletons with H1/H2 headings.

    2. Content Agent – Fills in each section, ensuring keyword placement and readability.

    3. SEO Agent – Refines text to improve search rankings.

    4. Formatting Agent – Adds lists, tables, bullet points, and dynamic CTAs.
        

Database:

• Google Firebase/Firestore:

  • Article Draft Management – All user-generated drafts are stored in Firestore collections, supporting real-time updates and versioning.

  • User Session Persistence – Maintains draft history, saving content incrementally to prevent data loss.

  • Query Optimization – Indexed collections for rapid retrieval and filtering of drafts.
     

Media and Asset Storage:

• Google Cloud Storage:

  • Static Asset Management – Handles uploads of images, videos, and embedded media referenced within articles.

  • Blob Storage for HTML Previews – Generated HTML articles are stored as blobs and retrieved for rendering in iframes.
     

Security:

• Angular DomSanitizer – Ensures safe rendering of AI-generated content, preventing XSS (Cross-Site Scripting) attacks by sanitizing dynamic HTML.

• CORS Policies – Configured to allow secure communication between frontend and backend services while restricting unauthorized requests.

• Role-Based Access (RBAC):

  • Limits content generation features to authenticated users.
     

AI Workflow – How It Works:

1. User Input: Title, focus keywords, and target audience mood are entered into the editor.

2. API Request: The data is sent to the backend, triggering the AI pipeline.

3. Content Generation:

   • The AI Outline Agent structures the article (H1-H3 headings).

   • The Content Agent generates paragraph blocks for each section.

   • Keyword Optimizer injects relevant terms naturally.

   • Format Enhancer adds bullet points, quotes, and lists.

4. Live Preview: The user previews the article in a rich text editor.

5. Save & Export: Articles are saved to Firestore or exported for direct publishing.
    

Why This Stack?

• Angular + Ionic – Delivers a responsive, performant UI that works across desktop and mobile.

• Node.js – Efficient for handling real-time requests and interfacing with AI services.

• OpenAI – Powers the core content generation with state-of-the-art language models.

• Firestore + Cloud Storage – Ensures scalability and persistence for user-generated content.
   

This project highlights expertise in AI integration, cloud infrastructure, and full-stack development – demonstrating how AI pipelines can automate and enhance digital content workflows.