DEV Community: sahra 💫

☕Coffee Fantasy - Mythical Brews and Magic Potions

sahra 💫 — Mon, 08 Dec 2025 06:58:09 +0000

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

What I Built

Step into a world of magical fantasies🪄, enchanted spellbooks 📙, and mythical coffee brews☕.

Coffee Fantasy is a themed interactive digital coffee shop that transforms a simple coffee-ordering system into a mythical adventure.

The app feels like opening an ancient spellbook hidden deep in a wizard’s library. Instead of selecting regular coffee, users discover mythical potions, each with its own magical effects, lore, and atmospheric UI.

Demo

📦 Repository: https://github.com/Sarah-okolo/Coffee-Fantasy

🔗 Live Demo:

The experience blends:

Fantasy game-like design
Immersive animations
A fully themed potion-selection mechanic
Charming character interactions
A playful, enchanted shopping flow

It’s a coffee shop — but enchanted.

Interactive Features & Screenshots

Coffee Fantasy isn't just beautiful — it’s interactive and alive.

✨ Spellbook Homepage

A magical animated book cover that opens when “Explore Potions” is clicked.

✨ Wizard Guide

A friendly illustrated wizard appears throughout the UI, giving the experience charm and personality.

✨ Potion Selection Grid

Coffee choices appear as magical potions inside an illustrated grimoire layout.

✨ Dynamic Potion Details Page

Each potion displays:

3D-styled coffee image
Add to Basket animations

✨ Cart system turned to Basket

A woven straw basket with magical vines holds selected brews.

Basket Page Empty and Filled

An enchanted page where users view their chosen potions inside their baskets.

Brewing the ritual

This represents confirming the order.

Ritual Brewed and completed

The user's coffee order has been confirmed and is out for delivery.

✨ Overall Interaction

Buttons with enchantment effects
Smooth transitions
Themed UI containers (scrolls, spellbook pages, carved borders)
Subtle particle-like sparkles

The result feels like a mini fantasy game disguised as a coffee app

Cross-Platform Magic

The Coffee Fantasy application currently runs on:

🪟 Windows
🌐 WebAssembly (WASM)

Thanks to the single-codebase approach, the core UI, animations, and interactions behave consistently across platforms — even with heavy thematic styling and custom image assets. Deploying to both environments required no redesign; the fantasy UI scaled seamlessly.

The Wow Factor

The true wow factor is the cohesive fantasy world built around a functional coffee-ordering application.

The entire UI is crafted to resemble a wizard’s spellbook
Every page, button, and interaction feels like part of the story
The potion concept transforms everyday coffee into magical items
The app feels alive thanks to animations and character art
It takes a mundane task (choosing coffee) and turns it into an experience

Coffee Fantasy doesn't just let you order coffee — it invites you into a wonderful, mythical world.

🤖Custom-Embeddable Secure Agentic Chatbot for SaaS Applications

sahra 💫 — Mon, 27 Oct 2025 06:55:00 +0000

This is a submission for the Auth0 for AI Agents Challenge

💡 What I Built

Euclid is a custom-embeddable, agentic chatbot that lets application owners configure their own secure AI assistant — one that can think, act, and integrate directly into existing systems without compromising identity or access control.

Want to give your users the power of AI in your application without having to build it from scratch? Euclid gives every application owner a personalized, embeddable AI agent that connects to their APIs, retrieves relevant knowledge, and performs safe, authorized actions on request — all powered by Auth0 for AI Agents.

🔗 Live Bot Config Site:

💻 Github Repository:

Sarah-okolo / euclid-BE

🎬 Bot Config Demo

🎬 Bot Embed and Customization Demo

FGA in action

At its core, Euclid is:

Configurable: App owners configure (Create or Edit) their chatbot via a live site— defining persona, tone, and allowed API endpoints, roles, and the application's knowledge base.
Secure: Auth0 ensures every AI action is identity-verified and role-restricted.
Context-aware: Using RAG (Retrieval-Augmented Generation), Euclid retrieves relevant app-specific knowledge before each response.
Embeddable: A lightweight JS widget that can be dropped into any SaaS or web app.
Agentic: Beyond conversation, the AI can safely act on behalf of authenticated users.

In simple terms:

Euclid learns about the application it's embedded into — it looks up and uses your data provided during configuration intelligently.

🧩 How It Works

1. Configuration Site

The dashboard lets application owners:

Upload PDFs or internal documentation (knowledge base).
Set bot personality, default prompts, and visual appearance.
Connect their Auth0 credentials (domain, audience, namespace).
Define which API endpoints are accessible to which user roles.

Each bot is stored with a unique botId and configuration metadata in MongoDB.
When an app owner uploads a PDF, Euclid automatically splits it into chunks, generates embeddings (using Gemini), and stores them in Chroma or Pinecone for contextual retrieval.

2. The Widget

Embedding a bot is as easy as adding this snippet:

<script
  src="https://euclid-widget.netlify.app/widget.js"
  data-bot-id="euclid-bot-xxxxxxxxxxxx"
  data-color="#06B6D4"
  data-default-state="info"
  data-info-message="Hi there! Need any help?"
></script>

That snippet instantly renders a chat bubble (position and color configurable) that expands into a full chat window.
The widget manages the chat lifecycle, handles message flow, and includes smooth, pulsing typing animations for natural feedback.

3. The Backend

Behind the scenes:

Express.js powers the REST API for bot creation, updates, and chat sessions.
MongoDB stores bot configurations and state.
Gemini handles embeddings and AI text generation.
Pinecone/Chroma stores and retrieves vector embeddings for RAG.
Auth0 for AI agents secures the action layer and knowledge access— ensuring the AI acts only within authenticated and authorized scopes.

🔐 How I Used Auth0 for AI Agents

1. Enforcing fine-grained document-level access with FGA

I integrated Auth0 Fine-Grained Authorization (FGA) into the retrieval pipeline to make sure the agent never exposes sensitive information from a knowledge base that the user shouldn’t see.
Whenever the agent retrieves documents from the knowledge base, I check each document against FGA before feeding it to the LLM.


// Initialize FGA client for document-level access
const fga = new OpenFgaClient({
  apiUrl: process.env.FGA_API_URL,
  storeId: process.env.FGA_STORE_ID,
  credentials: {
    method: "client_credentials",
    clientId: process.env.FGA_CLIENT_ID,
    clientSecret: process.env.FGA_CLIENT_SECRET,
    apiAudience: process.env.FGA_API_AUDIENCE,
  },
});

/**
 * Helper: Check FGA access for each document
 */
async function checkFgaAccess(userSub, botId, filename) {
  try {
    const resp = await fga.check({
      tuple_key: {
        user: `user:${userSub}`,
        relation: "reader",
        object: `document:${botId}/${filename}`,
      },
    });
    return Boolean(resp?.allowed);
  } catch (err) {
    console.error("FGA check failed:", err);
    return false;
  }
}

If a document isn’t authorized for that user, it’s excluded from the retrieval-augmented generation (RAG) context.
This guarantees that even the AI’s responses are scoped to what the user is actually allowed to access — preventing data leakage.

When the user sends a message, their userToken (Auth0 JWT) is sent with the message to Euclid’s /api/chat endpoint:

{
  "botId": "abc123",
  "userMessage": "Show my invoices",
  "userToken": "<Auth0 JWT>"
}

If the AI determines that the user’s question requires a real-world action (like fetching /invoices), it triggers a secure call to the Proxy Service.

Secure Proxy Execution

The proxy verifies the JWT using the app owner’s Auth0 JWKS endpoint, then extracts user roles from the configured namespace.

Each bot defines its own endpoint-role mapping, for example:

[
  { "endpoint": "/orders", "roles": ["admin", "sales"] },
  { "endpoint": "/invoices", "roles": ["finance"] }
]

If the user’s role doesn’t match the requirement, the AI is blocked before the request executes — ensuring zero-trust execution.

🧠 The result: the Agent becomes a trusted digital teammate, acting securely and transparently inside the app.

In summary

By combining Auth0’s AI Agents, FGA, and role-based access, I gave Euclid the ability to:

Understand who the user is (via Auth0 access tokens)

Act on their behalf securely (via the agent context and delegated calls)

Only access what the user is authorized to see (via FGA checks)

Enforce precise endpoint roles (via Auth0 roles and namespaces)

Support multiple independent businesses, each with their own Auth0 tenant

The end result is a deeply secure and modular agentic system — one where Auth0 manages all authentication and authorization complexity, and my AI agent simply focuses on understanding and executing the user’s intent.

Lessons Learned & Takeaways

Building Euclid reinforced a core principle of AI system design:

AI should be capable, but always accountable.

Here’s what I learned:

Integrating AI into SaaS products without proper identity control is risky.
Auth0 for AI Agents ensures every AI action is linked to a verified user.
Secure RAG pipelines let AI access private data safely, without retraining models.
Agentic doesn’t mean uncontrolled — it means autonomous within boundaries.

In short:

“Euclid lets AI work for your users — not around your security.”

✨ Final Thoughts

AI assistants are becoming more agentic — capable of reasoning and acting.
But true progress comes when that autonomy is paired with security.

Auth0 for AI Agents bridges that gap perfectly, allowing developers to give their AI systems both intelligence and integrity.

That’s what Euclid stands for:

Smart AI, within safe boundaries.

A big thanks to the Auth0 and DEV team for putting together this challenge. I had a really fun time building out my submission. And because I am very confident in its real-world value, I definitely would be taking the solution far beyond this challenge💪. Cheers🥂

🧱Build It: Visual Drag&Drop Responsive Site Builder

sahra 💫 — Mon, 29 Sep 2025 06:50:49 +0000

This is a submission for the KendoReact Free Components Challenge.

What I Built

Build It is a visual drag-and-drop site builder that empowers anyone to design and launch responsive websites without writing a single line of code.

Start with a blank canvas, drag and drop pre-built components, customize them with your own content and styles, and instantly see your site come to life. When you're ready, export the code and use it anywhere.

It’s perfect for developers who want a faster prototyping tool, and for non-coders who want to create professional-looking layouts effortlessly.

Demo

Live Site

GitHub Repository

Sarah-okolo / KDR-DD-site-builder

Build It

Build It is a visual drag-and-drop site builder that empowers you to design and launch responsive websites without writing code. Start with a blank canvas or use pre-built components to quickly create modern layouts, customize them to your style, and publish instantly.

✨ Features

Drag & Drop Builder – Visually arrange and customize components on a responsive canvas.
Responsive Design – Build layouts that adapt seamlessly across desktop, tablet, and mobile.
Component Library – Access a growing set of reusable UI blocks to accelerate design.
Live Preview – Instantly preview your site across devices before publishing.
One-Click Publish – Launch your project with a single click when it’s ready to go live.

🚀 Getting Started

Prerequisites

Node.js (v18 or higher recommended)
npm or yarn

Installation

Clone the repository and install dependencies:

git clone https://github.com/your-username/build-it.git
cd build-it
npm install

View on GitHub

How it works

Add Structure: Add structure components to define the layout of the site
Drag & Drop: Select a component from the sidebar and drag&drop it into structures on the canvas.
Edit & Customize: Select items to adjust properties in the Inspector panel. You can tweak text, images, button labels, dimensions, and more.
Responsive Layouts: Structures act as building blocks for your layout, letting you stack, resize, and rearrange content visually.
Instant Feedback: Every change updates the live preview on the canvas.
Export: Once done, you can export the code to integrate into your own project.

The goal is to bring together the ease of a site builder with the flexibility of clean, editable React code.

KendoReact Components Used

This project makes use of 15 of KendoReact's free components including:

✅ Button
✅ Input
✅ Checkbox
✅ Switch
✅ DatePicker
✅ DropDownList
✅ MultiSelect
✅ StackLayout
✅ GridLayout
✅ Card
✅ PanelBar
✅ AppBar
✅ Notification
✅ Popup
✅ Tooltip

A big thank you to the KendoReact team and DEV for hosting this challenge 🙌.
It was a fun opportunity to push the boundaries of what I could build with KendoReact.

How I did not participate in the World's Largest Hackathon

sahra 💫 — Wed, 30 Jul 2025 23:24:12 +0000

With everyone sharing how they took part in WLH and all the cool projects they built, winners and non-winners alike. Here I am to talk about how I did not participate in the World’s Largest Hackathon, hosted by Bolt.new. I actually heard about the hackathon a few months before it started. I’ll admit, I was hyped and really looking forward to it.

It was one of those hackathons where everyone had something to gain, whether it was the cash prizes, project recognition, hands-on experience, or even just the amazing build packs that were being given out to all participants. Honestly, it was a pretty sweet deal.

As the weeks rolled by, I watched the participant numbers grow. At first, there were around 10,000 people signed up, including me, of course. I kept checking the DevPost page, following the updates, and the numbers just kept climbing.

Fast forward to the week before launch, and the numbers had skyrocketed to over 70,000. Yeah, wild, but not surprising given what was at stake.

The problem? I still didn’t know what I was going to build. With just two days left before it kicked off, the number of participants had climbed close to 100,000. I’ll be honest, I started to feel like there was no point. The idea that anything I built would stand out in that sea of submissions felt impossible. And just like that, the pressure kicked in.

So what did I do? Yep, I procrastinated. I waited for the “perfect” idea to come. That unicorn concept that would blow minds. It never came. Eventually, the hackathon started, and I had nothing. Time passed. People built. People submitted. And I sat it out.

That’s how the World’s Largest Hackathon came and went—without me in it.

Here are a few questions I’ve asked myself since:

Did I let the idea of perfection stop me from doing something meaningful?
Most definitely.
Was I intimidated by the number of participants?
Oh yeah, big time.
Was I actually too busy with work to join in?
If I’m being honest—no, not really.

So what’s the point of this post? It’s this: chasing perfection often leads to anxiety. And that anxiety can turn into procrastination. You keep telling yourself you’ll start “soon,” but soon becomes never. And before you know it, the opportunity’s gone—and you realize you could’ve done something pretty solid if you had just started.

So yeah. That’s the story of how I did not participate in the World’s Largest Hackathon. Don't be like me.

Veew - Real-time video calling with live captioning, minutes recording, and speaker diarization.

sahra 💫 — Mon, 28 Jul 2025 06:57:39 +0000

This is a submission for the AssemblyAI Voice Agents Challenge

What I Built

Veew is a real-time video communication platform that connects users through video calls and enhances the experience with live captioning, automatic minutes generation and speaker diarization at sub-300ms latency. This project prioritizes a fast and responsive voice experience, ensuring captions for every spoken word is delivered to all participants in real time, offering an inclusive solution for individuals with auditory impairments, enabling them to fully participate in video calls.

Demo

Live Site

veew-lemon.vercel.app

GitHub Repository

Sarah-okolo / Veew

Veew - Simplifying Communication

Veew is a video communication platform, which utilizes the Assemblyai's universal streaming api to auto generate live video captions with speaker diarizations.

Features

Create room: This allows users to start a video channel
Join room: Users can join an already created room to connect with other participants.
Live Captioning: Users can enable live captions during a video call.

View on GitHub

Technical Implementation & AssemblyAI Integration

AssemblyAI's Universal Streaming played a pivotal role in turning the vision for this application into reality. By providing real-time, speaker-diarized transcription capabilities, it enabled the seamless generation of live video captions with high accuracy. This technology also made it possible to automatically produce well-structured meeting minutes, enhancing both accessibility and post-call productivity.

Below is a snippet of how I integrated AssemblyAI into the application to generate the live captions, as well as the meeting minutes

const startTranscription = useCallback(async () => {
  try {
    // Reset any previous error and set connection status
    setError(null);
    setConnectionStatus('connecting');

    // Fetch authentication token
    const token = await getToken();
    if (!token) return;

    // Create WebSocket connection with AssemblyAI using token and transcription parameters
    const wsUrl = `wss://streaming.assemblyai.com/v3/ws?sample_rate=16000&speaker_diarization=true&formatted_finals=true&token=${token}`;
    socket.current = new WebSocket(wsUrl);

    // When WebSocket connection is successfully opened
    socket.current.onopen = async () => {
      console.log('🔰🔰🔰AssemblyAI WebSocket connected');
      setIsConnected(true);
      setConnectionStatus('connected');
      setIsListening(true);

      // Access user's microphone
      mediaStream.current = await navigator.mediaDevices.getUserMedia({ audio: true });

      // Create audio context with sample rate matching AssemblyAI
      audioContext.current = new AudioContext({ sampleRate: 16000 });

      // Create a media stream source and script processor node
      const source = audioContext.current.createMediaStreamSource(mediaStream.current);
      scriptProcessor.current = audioContext.current.createScriptProcessor(4096, 1, 1);

      // Connect the audio nodes
      source.connect(scriptProcessor.current);
      scriptProcessor.current.connect(audioContext.current.destination);

      // Process and send audio data on each audio processing event
      scriptProcessor.current.onaudioprocess = (event) => {
        if (!socket.current || socket.current.readyState !== WebSocket.OPEN) return;

        const input = event.inputBuffer.getChannelData(0);
        const buffer = new ArrayBuffer(input.length * 2);
        const view = new DataView(buffer);

        // Convert audio float samples to 16-bit PCM
        for (let i = 0; i < input.length; i++) {
          const s = Math.max(-1, Math.min(1, input[i]));
          view.setInt16(i * 2, s < 0 ? s * 0x8000 : s * 0x7fff, true); // little-endian
        }

        // Send the audio buffer to the WebSocket
        socket.current.send(buffer);
      };
    };

    // Handle incoming messages from AssemblyAI WebSocket
    socket.current.onmessage = (event) => {
      console.log("⬅️⬅️⬅️ AssemblyAI says:", event.data);

      try {
        const message = JSON.parse(event.data);
        console.log("🟢🟢🟢Parsed message:", message);

        // Handle live partial transcript (for real-time display only)
        if (message.type === 'PartialTranscript') {
          const { text, speaker, created } = message;
          const timestamp = new Date(created || Date.now()).toLocaleTimeString();

          setPartialTranscript({
            text: text || '',
            speaker: speaker || 'Unknown',
            timestamp,
            type: 'partial'
          });
          return;
        }

        // Handle final transcript (Turn or FinalTranscript)
        if (message.type === 'Turn' || message.message_type === 'FinalTranscript') {
          const transcriptText = message.transcript || message.text || '';
          const speakerLabel = `${currentSpeakerRef.current}`;
          const timestamp = new Date(message.created || Date.now()).toLocaleTimeString();
          const transcriptId = message.id || Date.now().toString();

          const finalTranscript: Transcript = {
            text: transcriptText,
            speaker: speakerLabel,
            timestamp,
            id: transcriptId,
            type: 'final'
          };

          // Save the final transcript
          setTranscripts(() => ({
            [transcriptId]: finalTranscript
          }));

          // Clear the partial transcript display
          setPartialTranscript(null);

          // Update speaker statistics
          setSpeakers(prev => ({
            ...prev,
            [speakerLabel]: {
              name: speakerLabel,
              lastSeen: timestamp,
              totalMessages: (prev[speakerLabel]?.totalMessages || 0) + 1
            }
          }));

          // Add final transcript to minutes buffer if session is active
          if (minutesInSessionRef.current) {
            setMinutesBuffer(prev => [...prev, finalTranscript]);
          }
        }

      } catch (e) {
        console.error('Error parsing message:', e);
      }
    };

    // Handle WebSocket errors
    socket.current.onerror = (e) => {
      console.error('WebSocket error:', e);
      setError('WebSocket error');
      stopTranscription(); // Gracefully stop transcription on error
    };

    // Handle WebSocket close
    socket.current.onclose = () => {
      console.log('WebSocket closed');
      setIsConnected(false);
      setConnectionStatus('disconnected');
    };

  } catch (err) {
    console.error('startTranscription error:', err);
    setError('Failed to start transcription');
  }
}, []);

The complete code for this project can be found in the linked repository.

This was an amazing challenge to participate in, and I'd like to thank the AssemblyAI, as well as the DEV Team, for putting it together.

Year 3 crept up on me😲: Celebrating my third year on DEV🎊

sahra 💫 — Wed, 23 Jul 2025 14:14:18 +0000

Okay, I'm starting to believe a year isn't actually up to 12 months anymore. Or does time simply just move much faster for me 🤔😅

Well folks, it's been 365 days already, and it's that time of the year again, when I celebrate being a member of this AMAZING platform, clocking 3 years today😊🎇🎇.

This year came around so fast for me. I didn't realize the 23rd of July had slowly crept up the calendar and almost snuck past. I have been so tied up with a lot of work that I completely forgot I had to create my anniversary post. That would have been horrific, and would have broken a tradition I have grown to love😊. But thankfully, I realized what today was just in time😮‍💨😅.

Well, for the past year, some things have changed, and some haven't. Okay, let's start with the things that have changed:

Landed a Job: Within the past year, I was able to land my first full-time job as a Frontend developer at an amazing company. This was a big win for me, and I was so excited. Working with my team has improved my coding and collaboration skills a lot.
Won my first DEV Challenge: In my last anniversary post, I'd hoped to eventually win one of the challenges.

Ah, lest we forget the wonderful introduction of DEV challenges. I have participated in a few, but I am yet to win any😅. Here's to the hope of winning one before my next 365 update🍻.

Fast forward to today, guess what? I actually did🤭.

It was such an awesome experience for me, and I really appreciate the DEV team and the Bright Data team for hosting that challenge✨✨✨.

I also participated for the first time in the Hacktoberfest event as a contributor. It was an amazing one.
Dare I forget to mention the beautiful collection of awesome DEV badges that I have gone on to amass since my last anniversary post? Absolutely not😅. What can I say? I love badges.

Now here are some of the things that haven't changed, unfortunately 😩:

Completed my portfolio: Oh, now this one is a tale as old as time. I don't know what it is, but I just never seem to be able to complete my web portfolio. I build, I break, I leave, I return (rinse and repeat). My brain is just never satisfied with whatever I build and always feel it's not good enough, and more could be done. The turmoils of perfectionism😮‍💨 (it can be a hindrance to actual progress at times). Hopefully, I would have settled for one before my next update😅
Publish Contents more often: Now this seems like a much bigger task with each passing day. I have a number of drafts, which I haven't been able to bring myself to complete and publish. Is it because I am too busy most time? probably, or is it because I am too lazy most times, now most definitely😩😂. I promise to change this before my next update as well🤞

Alright guys, that's a wrap for year 3, lest it gets too lengthy, here's to another awesome 365 days on DEV 🥂. See you again in the next one😊

Your Next Idea💡: AI-powered content ideation service

sahra 💫 — Sun, 06 Jul 2025 23:27:23 +0000

This is a submission for the Runner H "AI Agent Prompting" Challenge

What I Built

If you're like me, coming up with fresh ideas for your next content upload can prove to be quite a hassle and challenge most times 😩. And the researchhh, ugh, I for one, am extremely lazy on that aspect. Well, if you suffer the same perils as I do, I have got something exciting for you😁. Say hi to Your Next Idea.

Your Next Idea is a daily AI-powered content ideation service that delivers personalized, relevant, SEO-optimized, and well-researched content ideas straight to your inbox, with each idea being tailored to your specified niche.

Demo

How I Used Runner H

For this workflow, I utilized Runner H's built-in Notion and Gmail connections for storing and sending the generated content.

I also leveraged the built-in files library to store the creator's content style template, which is essential for ensuring the personalization of each content strategy to be generated.

The prompt

You're my expert creative strategist and content researcher.

Each day at 8:00 am, your job is to help me stay ahead by generating one fresh, original, and highly personalized content idea based on my preferences and brand style.

Here’s what I need you to do:
If this is the first time the agent is running, do the following:

- Use @tool:Google Calendar  to create a recurring daily event titled **"Generate Daily Content Idea"** at **8:00 AM**, starting today.
- Set the event to repeat **every day indefinitely**.
- Make sure the event is visible on my primary calendar.
- This event will serve as the daily trigger for this agent.
(Important! Only set this event if it is not already present in the calendar.)

1. Reference the file @file:my-content-style.txt. This file contains all my personal info — my niche, brand tone, content goals, preferred formats, platforms, target audience, and topics to avoid. Use that as your only reference.
2. Based on that, come up with one content idea that’s completely unique and aligned with everything I’ve described in that file.
3. The idea must be well-researched, timely, and relevant — and it must **not** be too common or similar to any idea listed under my previous ideas.
4. Save the generated idea to my Notion page @tool:Notion.
5. Email this idea to me @tool:Gmail  
Send me an email with:
- Subject: ✨ Your Next Content Idea – [Idea title] - [Today's date]
- Body: Include the full formatted idea and a clickable link to the saved Notion entry.


## Output Format

**Today's Content Idea**
Title: [Engaging and creative title]

**Idea Summary**  
Brief overview in 2–3 sentences explaining the core concept.

**Why This Works**  
Explain why this idea is timely, trending, or audience-relevant. Include seasonal, cultural, or platform-specific reasoning where relevant.

**Suggested Content Format**  
Pick one from my preferred list and explain how to use it effectively for this idea.

**Execution Plan**  
List the key steps I need to follow to bring this idea to life (e.g., research, scripting, production, editing, publishing).

**Platform Fit**  
Tell me how to adapt or optimize this content across each of my listed platforms.

**Engagement Hook**  
Give me a compelling hook or intro to grab attention immediately.

**Call to Action (CTA)**  
Write a short CTA that aligns with my listed goals.

**Hashtag/SEO Suggestions**  
List 3–5 relevant and unique hashtags or keywords for discovery.

**Plagiarism Safety**  
Verify that this idea is fresh and hasn’t been reused from my previous ideas. Avoid generic content that’s overdone.

**Tone Check**  
Match the tone listed in `my-content-style.txt` (e.g., friendly, witty, inspiring, data-driven).

How to replicate this workflow

Enable the Gmail, Google Calendar, and Notion connections in your RunnerH workspace. This is important to ensure you get your daily dose of fresh content ideas straight to your inbox.

Next, in a plain text editor, create a .txt file named my-content-style with the following data:

industry:
target_audience:
content_platforms:
content_format_preferences:
goals:
content_tone:
brand_keywords: 
avoid_topics: 
previous_ideas:

Populate this template with data with your content style.

Here's an example of how to populate the my-content-style.txt template:

industry: "Tech and Development"
target_audience: "Aspiring frontend developers and junior devs"
content_platforms:
  - "Twitter/X"
  - "YouTube"
  - "Dev.to"
  - "Newsletter"
content_format_preferences:
  - "Code walkthrough videos"
  - "Visual cheat sheets"
  - "Step-by-step blog tutorials"
goals:
  - "Build a personal brand"
  - "Increase GitHub followers and stars"
  - "Drive newsletter and portfolio traffic"
content_tone: "Approachable, practical, motivating"
brand_keywords: ["JavaScript tips", "React projects", "CSS tricks", "developer tools"]
avoid_topics: ["gatekeeping", "toxic productivity", "non-tech political takes"]
previous_ideas: 
  - "Create a weather app with HTML, CSS, JS"
  - "Top 5 VS Code extensions I can’t live without"
  - "How I fixed my ugly UI: before & after breakdown"

After you are done, add it as a file to your Runner H workspace.

The file can then be referenced by the automation.

Example output email:

Challenges

While setting up the workflow for this automation, I did encounter some challenges. Let's find out how I overcame them, shall we?

Unable to access my-content-style.txt file error: This error kept popping up each time I ran the prompt. But why, though? I mean the file was present in the file library. I was eventually able to fix this issue by removing and reuploading the file.
Unsuccessful writing of the generated file to Notion due to a validation error with the Notion page ID: This error indicates that something was incorrect in my connection setup. I eventually found out that I had not selected a specific notion page while setting it up. I was able to successfully resolve this error by disconnecting my Notion account and then reconnecting it back with at least one Notion page selected.

Use Case & Impact

Content creators spend a lot of time trying to come up with what content to put out next. This struggle often involves coming up with relevant content, problem-solving, and interesting, engaging ideas while staying on top of trends.

This solution helps eliminate all those hectic processes, and helps creators save a ton of time on ideation and keeping them consistently relevant in their field, without creative fatigue. Creator's block? Not a thing anymore. Just get your daily content idea like a fresh cup of morning coffee and get to doing what you do best☕.

[Boost]

sahra 💫 — Thu, 03 Jul 2025 08:10:37 +0000

Why Your Deadlines Are Wrong: Evidence-Based Estimation for Developers

Pratham naik for Teamcamp ・ Jun 27

#webdev #productivity #opensource #learning

BlokLy AI: From space to site

sahra 💫 — Mon, 30 Jun 2025 06:55:36 +0000

This is a submission for the Storyblok Challenge

What I Built

BlokLy AI is an automated AI application that generates a fully working, visually styled, live-deployed website from one or more Storyblok spaces

Demo

Live Site:

blok-ly.vercel.app

Code Repository:

Sarah-okolo / BlokLy-BE

Demo Video or Screenshots

How it works
Okay, so I decided to make the flow of the application as simple and as straightforward as possible:

First, the user is required to input their PAT connected to their Storyblok account
The PAT is then validated, and the app fetches all spaces connected to the provided account.
The user then selects the spaces they would like to include in the site.
Once the space(s) have been chosen, they are then prompted to provide additional optional details for the site creation.
The app then scaffolds a new application based on the provided details, hosts the site, and then returns the live site link.

Tech Stack

For this project, I opted for the following tech stack:

Frontend

React TS
TailwindCss
Tanstack
Shadcn UI

Backend

NodeJS Express
Gemini 2.0 Flash
Netlify CLI

How I Used Storyblok

For this project, I made use of the Storyblok Management API to validate the user's PAT and to fetch all the spaces connected to the provided account.

AI Integration

Well, now, the core of this project doesn't work by waving a little wand and voilà, you have a live site😲🤭. Nope, that little magic is all AI, and for that, I utilized Gemini's 2.0 Flash model. The Gemini AI is responsible for generating the site name and description (if not provided by the user). Next, through a properly crafted prompt, it generates the entire codebase based on the data provided for the space(s).

Learnings and Takeaways

Building out this project came with its ups and downs. The easy part of it was the seamless integration of Storyblok into the application through the management API. Then the hard part of it was crafting the perfect prompt to generate the correct code for the application in the right formats, and parsing each of the returned code blocks into actual code files. It took a lot of trial and error, but thankfully, I was finally able to make it work😊.

This was an interesting project to tackle. A big thanks to the Storyblok and DEV team for hosting this challenge🥂.

🛡️InvisiBox: Bi-directional anonymous email-based communication channel for workplaces.💡

sahra 💫 — Fri, 06 Jun 2025 22:27:58 +0000

This is a submission for the Postmark Challenge: Inbox Innovators.

What I Built

I built an MVP-ready✅ application that aims to address a significant issue in the workplace.

InvisiBox is a platform that empowers employees in corporate environments to send anonymous reports, messages or complaints, participate in private email-based dialogues with management, and engage in confidential voting — all without revealing their identity or needing to log in.

Armed with 100% anonymity and confidentiality, employees are now given the power to speak out on matters and issues in the company and be heard without fear of judgment or retaliation ✅.

Demo

Live Site

invisibox.netlify.app

Use the following credentials to log in to an existing Management account:

Invisibox email: techcorpczu5os@invisibox.email
Password: 54321cba

For Employee access, use the following credential to send a message to the linked company:

Invisibox email: empc0487cfe52@invisibox.email

Note: These demo accounts are connected to my personal email, so you won’t be able to view the emails sent.
✨To fully experience the app’s features, I recommend signing up for a Management account and subscribing to your Management Invisibox channel using an email you have access to✨.

How it works

The app is structured around two core components—Management Access and Employee Access.

Features of the Management Access

Companies seeking to onboard with the Invisibox platform are required to create a Management account.

Once successfully signed up, A unique proxy email address would be generated for that account (e.g, companynamexxxx@invisibox.email).

The management is to share that email address with their employees.

For Employees Access

💡To enable an employee to have access to send and receive messages anonymously, they are required to subscribe to their company's Invisibox channel using their email address and the company's unique Invisibox email address.

✔️Once subscribed, the employee's unique Invisibox proxy email (e.g, emp9x83xxx@invisibox.email) will be generated and sent to their provided email address

The employee can now communicate anonymously with their company's management.

Email communication flow

InvisiBox leverages Postmark's Inbound Email feature as the backbone of its communication system:

Inbound Email Processing:

Employee Sends Message: Employee sends email from their proxy address to the company address
Postmark Reception: Postmark receives the email and forwards it to the app's inbound webhook endpoint /inbound-handler
Backend Processing: The backend processes the inbound email, extracts content, and sends to the appropriate management.

Example messaging flow between employee and management:

Outbound Broadcast Email Delivery:

Management Sends Message: Management creates a message/poll through the dashboard
Backend Processing: The app processes the message and prepares it for delivery
Postmark Delivery: Messages are sent to the emails of all subscribers of that company via Postmark
Employee Reception: Employees receive messages in their regular email inbox

Email Proxy System:

Anonymous Routing: All emails are routed through InvisiBox proxy addresses
Identity Protection: Real employee emails are never exposed to management
Bidirectional Flow: Messages flow seamlessly in both directions while maintaining anonymity

Code Repository

FrontEnd Repo

Sarah-okolo / invisibox-client

InvisiBox is a platform that empowers employees in corporate environments to send anonymous reports, messages, or complaints, participate in private email-based dialogues with management, and engage in confidential voting .

InvisiBox - Anonymous Workplace Communication Platform

InvisiBox is a privacy-first anonymous communication platform that bridges the gap between employees and management. It enables secure, two-way communication without requiring employees to create accounts or reveal their identities.

🌟 Key Features

Account-Free Employee Access: Employees can participate without creating accounts or passwords; they are only required to subscribe to their company's Invisibox channel.
Anonymous Identity Protection: Employees receive unique proxy email addresses that completely mask their real identity
Two-Way Anonymous Communication and Real-time Messaging: Management can create and send messages to all employees; employees can reply and participate anonymously. Employees can also send anonymous messages to their management and receive replies. Instant communication through email integration and identity masking through Invisibox's proxy emails
Poll & Survey System: Create polls, employees can vote anonymously, and poll results can be shared to all subscribed employees
Subscriber Management: Warn or…

View on GitHub

Tech Stack / Tools

React - TypeScript ( Framework - Language )
Shadcn ( UI components)
TailwindCSS ( Style framework)
Zustand (State management library)
Axios ( HTTP client for API requests)

BackEnd Repo

Sarah-okolo / invisibox-server

This is the server repository for the Invisibox application.

Tech Stack / Tools

NodeJS - Express ( Language - Framework)
MongoDB ( Database )
PostMark ( Email parsing )
Cloudinary ( Image file storage )

For this application, I am making use of all three of Postmark's email message streams:

How I Built It

Built on Postmark’s powerful Email Parsing, InvisiBox transforms traditional email into a powerful, privacy-first channel for workplace communication.

🟡PostMark's inbound email parsing role in InvisiBox🟡

Postmark's inbound email parsing plays a crucial role in this application by allowing the server to receive and process emails sent to specific Invisibox email addresses. When an email is sent to an Invisibox email, Postmark captures the email content and forwards it to the application through the inbound webhook endpoint /inbound-handler, which I had already configured on my Postmark dashboard.

This inbound webhook is responsible for parsing the incoming email data, which includes the sender's email address, the recipient's Invisibox email, the subject, and the body of the message.

The application then determines whether the sender is a management or an employee based on their email address. Depending on the sender's role, the application either forwards the message using Postmark's transactional message stream to the appropriate recipient (employee or management) or sends an error notification if the sender or receiver is not recognized.

router.post('/inbound-handler', async (req, res) => {
  const db = getDB();
  const inboundData = req.body;

  console.log('Inbound email received:', inboundData);

  try {
    const invisiboxEmail = inboundData.ToFull[0]?.Email;
    const from = inboundData.FromFull.Email;
    const textBody = inboundData.TextBody || inboundData.TextBody || 'null';
    const subject = inboundData.Subject || 'No Subject';
    const message = stripQuotedReply(textBody);

    const employees = db.collection('employee_subscriptions');
    const users = db.collection('management_users');

    // Check if the sender is MANAGEMENT
    const company = await users.findOne({ email: from });
    const receiverIsEmployee = await employees.findOne({ employeeInvisiboxEmail: invisiboxEmail });

    if (!company && receiverIsEmployee) {
      // If the sender is not recognized as a company, send an error email
      await companyNotSubscribedEmail({
        to: from,
        subject,
        empInvisiboxEmail: invisiboxEmail,
      });
      return res.status(200).json({ message: 'Sender not recognized as management' });
    }
...
}

Example email sent from employee to management:

Complete flow diagram of how the 🟡Postmark Inbound stream🟡 communicates with the application and how the backend processes that data

This parsing and routing mechanism enables seamless communication between employees and management while maintaining anonymity and security, which are core features of the Invisibox platform.

Features and the Postmark message stream used

Feature	Postmark Message Stream	Function
Subscription success message Delivery	Outbound (Transactional)	Sends a subscription success email to the user, including their unique Invisibox email address
Employee Message Delivery	Inbound	Receives emails sent by employees to the company's Invisbox email address
Sends polls and their results	Outbound (Broadcast)	Delivers poll and poll results emails to all subscribed employees
Management sends messages from the app	Outbound (Broadcast)	Delivers message created by management to all subscribed employees
Employee Broadcast message reply	Inbound	Receives replies from employees and sends to the app, which sets the message as a reply to the appropriate broadcast message
Management password Reset	Outbound (Transactonal)	Sends password reset instructions to the user
Management sends a message from their inbox	Inbound	Receives messages sent by management to an employee's Invisibox email address, parses it to the webhook which routes the message to the appropriate email address
Subscription Notification	Outbound (Transactional)	Notifies management of new employee subscriptions

... Rest features utilize the Outbound (Transactional) stream.

The email integration with Postmark ensures reliable message delivery while maintaining complete anonymity for employees.

Continuous Development

As my first time making use of email parsing in an application, PostMark really opened my eyes to the true capabilities of emails.

I appreciate the PostMark and DEV team for putting together this amazing challenge.

As for Invisibox, who knows, I might turn into my very own first SaaS application😁. I believe it has a lot of potential and I would keep developing on it, of course keeping PostMark as the core email client and backbone of the app ☺️. Thoughts, questions, and feedback on the app are highly welcome.

Well, if you made it this far in the post, here is a glass of wine for you 🥂 Cheers 😁✨

HireFlow: For candidates, recruiters, and companies

sahra 💫 — Mon, 05 May 2025 05:59:37 +0000

This is a submission for the Permit.io Authorization Challenge: Permissions Redefined

What I Built

HireFlow is a comprehensive hiring platform that connects candidates, recruiters, and companies in one streamlined ecosystem.

For this application, users can take on 3 different roles when creating their account:

Candidates can search for jobs, apply to positions, and track application status.
Recruiters can post and manage job listings and review applicants
Companies can oversee their recruitment process and manage their team of recruiters

Demo

Test the application

To login to the application without having to create a new account, simply make use of the following pre-existing credentials:

To login to a candidate account:

candiUser
2025DEVChallenge
To login to a recruiter account:

recruiUser
2025DEVChallenge
To login to a company account:

compUser
2025DEVChallenge

Project Repo

The repository for the front and back end of the application is provided below:

Frontend Repo

Sarah-okolo / HireFlow

HireFlow - Connecting Talent with Opportunity

HireFlow is a comprehensive hiring platform that connects candidates, recruiters, and companies in one streamlined ecosystem.

About HireFlow

HireFlow simplifies the hiring process with a role-based approach:

Candidates can search for jobs, apply to positions, and track application status
Recruiters can post and manage job listings and review applicants
Companies can oversee their recruitment process and manage their team of recruiters

Key Features

Role-based user system with specific dashboards for candidates, recruiters, and companies
Job posting and application management
Application status tracking
Company management system for recruiters
Responsive design for all devices

Technology Stack

This project is built with:

React with TypeScript
Vite for fast development
Tailwind CSS for styling
shadcn/ui for component library
React Router for navigation
Zustand for state management
React Query for data fetching

View on GitHub

Backend Repo

Sarah-okolo / Hireflow-server

HireFlow

HireFlow is a full-stack hiring platform that facilitates interaction between candidates, recruiters, and companies. It allows each user type to perform role-specific actions such as posting jobs, applying to roles, and managing applications — all with fine-grained access control powered by Permit.io.

Features

Role-based authentication and authorization with three user types:
- Candidates: Search and apply for jobs, view application status.
- Recruiters: Post and manage jobs, view and shortlist applicants.
- Companies: Manage recruiters and job postings, oversee recruitment progress.
Secure login/signup with role selection
Protected routes and data visibility depending on user roles
Integration with Permit.io for access control and permission enforcement

Demo

Visit the live application here:
👉 https://hirefloww.netlify.app/

Authorization with Permit.io

This project uses Permit.io for managing authorization and user roles…

View on GitHub

My Journey

For this challenge, I wanted to build something beyond the typical CRUD app — something with real-world complexity, yet still approachable. That’s how HireFlow came to life.

It was both fun and challenging figuring out how to manage user roles, permissions, and protected routes in a way that mimicked real hiring workflows. And I enjoyed every bit of that process.

I had no challenges while integrating Permitio into the application, as everything worked seamlessly out of the box🚀.

Using Permit.io for Authorization

For this challenge, I leaned fully into Permit.io’s CLI (not the dashboard!) to do everything — from creating resources, defining roles, and setting granular permissions to assigning users to roles. Here's a breakdown of how I set it up:

Installed the permit CLI:

npm install -g @permitio/cli

This enabled me to run the permit CLI commands from anywhere in my terminal.

Logged into my permit account:

permit Login

Initialized permit:

permit init

Selected the Create a simple policy option:

I was then prompted to configure my resources
Configure resources:

jobs, applications, companies, recruiters, candidates

Next, I was prompted to configure actions for the resources that I just created.

Configure actions: These were the actions I configured for my resources

create, read, update, delete, approve, reject, shortlist

Next, I was prompted to configure the roles and permissions.

Configure roles and permissions: The roles and resources were assigned as such:

Company|recruiters:delete|jobs:read|jobs:delete|candidates:read|companies:delete|applications:approve|applications:reject, 
Candidate|jobs:read|applications:create|applications:read, 
Recruiter|jobs:create|jobs:read|jobs:delete|applications:read|applications:reject|applications:shortlist

Next, my request was processed:

Data setup:
I was then prompted to select my data setup, on which I opted for the 'Interactively create users' option
Select user number:
I was prompted to select the number of users I wished to create, on which I specified 3, for the candidate, recruiter, and company.
Assign each user to their roles:
I assigned all 3 users to their different roles:

Next, I was prompted to enforce a PDP.
PDP (Policy Decision Point) setup:
I skipped the part where I’d have to enforce a self-hosted PDP because I chose to use Permit’s cloud-hosted PDP instead — simpler and faster for my current needs.

https://cloudpdp.api.permit.io

This lets the app connect with Permit’s decision engine over the cloud.

And the permit initialization has been successfully completed.

Install the permit SDK:
Once initialization was complete, I installed the Permit SDK to integrate it into my codebase:

npm install permitio

From there, I could wrap permission checks around specific views and features to ensure users only had access to what their role allowed.

⭐⭐⭐
To see exactly how I used Permitio's checks in my code, simply head over to the README.md file on the HireFlow-server repository that outlines the full process.
⭐⭐⭐

This was a rewarding challenge, and I genuinely enjoyed working with Permit.io's CLI — it gave me complete control over everything right from my terminal. I now feel more confident about handling role-based access in real-world applications and plan to take this even further post-challenge🥂.

Thanks to DEV and Permit.io for making this happen 🙌

Where we are headed

sahra 💫 — Sun, 30 Mar 2025 20:35:52 +0000

This is a submission for the Future Writing Challenge: How Technology Is Changing Things.

Dear Liz,

In the world we live in today, technology has become the cornerstone of our daily functions, being integrated into every sector of our lives. Across industries from hospitality to beauty, education, and beyond, technology has left its mark. Whether we notice it or not, its presence is undeniable.

In the past, technology was reserved for the highly skilled, requiring specialized knowledge to navigate. But as time goes on, even the layman seems to have become increasingly reliant on it. Now, artificial intelligence is handling complex, brain-intensive tasks that once took humans days or even months of research to complete. Isn’t that amazing? And yet, I believe technology is still in its early stages, with plenty of room for growth and refinement.

Take your field of culinary arts, for example. The idea that humans might one day no longer prepare their own meals sounds daunting, right? But that reality is already taking shape. In 2021, Moley Robotics introduced the first-ever fully automated robotic kitchen to the commercial market, transforming what once seemed far-fetched into a vivid reality.

Now, Liz, you might be wondering what all this means for chefs like yourself. Does the rise of robotic kitchens signal the end of human chefs? Not at all. While automation will undoubtedly change certain aspects of the culinary world, it won’t replace the creativity, intuition, and artistry that chefs bring to the table. Instead, it offers new opportunities, allowing chefs to focus on innovation, presentation, and the human experience of food while automation handles repetitive tasks.

Here's the thing, I believe technology is a tool, not a replacement. The future of catering, much like other industries, will likely be a collaboration between human expertise and technological advancement. And as technology matures, so too will the ways we adapt and evolve alongside it.

What do you think about this? I’d love to hear your perspective!

Best regards,
Sahra💫

Additional Prize Categories

Ripple Effects