DEV Community: Duncan Maina

Why I Built a Custom E-Commerce Platform for My Store using Angular & Firebase

Duncan Maina — Thu, 26 Feb 2026 06:34:57 +0000

When running a digital Shop, your storefront is your first impression. While platforms like Shopify or WooCommerce are great for standard retail, selling digital solutions, custom software packages, and retainers often require a highly tailored checkout flow.

Instead of fighting against the constraints of off-the-shelf website builders, I decided to build the Duncan Digital Solutions e-commerce platform entirely from scratch.

Because this is the proprietary engine running my live business, the GitHub repository remains private. However, I want to pull back the curtain and share the architectural decisions, NoSQL data modeling, and security protocols I used to build a lightning-fast, serverless storefront using Angular and Firebase.

The Tech Stack

To ensure the platform was cost-effective, highly scalable, and real-time, I went with a fully serverless architecture:

Frontend: Angular (utilizing Signals for reactive state management)
Authentication: Firebase Auth (Google & Email/Password)
Database: Cloud Firestore (NoSQL document database)
Backend Logic: Firebase Cloud Functions (Node.js)
Hosting: Firebase Hosting with CDN caching

NoSQL Data Modeling for E-Commerce

Moving from a traditional SQL relational database to Firestore’s NoSQL structure requires a shift in mindset. You don't have SQL JOIN operations, so data must be structured for fast reads.

Here is how I structured the three core pillars of the platform: Users, Products, and Orders.

1. The Products Collection

Instead of heavily nesting data, products are kept flat so they can be queried instantly on the storefront.

// Collection: /products/{productId}
{
  "name": "Custom Angular Web App",
  "category": "Development",
  "price": 50000,
  "currency": "KES",
  "isActive": true,
  "features": ["Responsive Design", "Firebase Backend", "Admin Dashboard"],
  "createdAt": "Timestamp"
}

2. The Orders Collection (Denormalization)

In NoSQL, it is better to duplicate a little data than to require multiple reads. When a user checks out, I copy the product details into the order document. This ensures that if I change the price of a product next year, the historical order receipt remains completely accurate.

// Collection: /orders/{orderId}
{
  "userId": "auth_uid_123",
  "customerEmail": "client@example.com",
  "status": "PROCESSING", // PENDING, PROCESSING, COMPLETED
  "totalAmount": 50000,
  "items": [
    {
      "productId": "prod_889",
      "name": "Custom Angular Web App",
      "priceAtPurchase": 50000
    }
  ],
  "createdAt": "Timestamp"
}

Bulletproof Security with Firestore Rules

Because the frontend talks directly to the database, security is the most critical part of this architecture. A malicious user could theoretically open the browser console and try to read other people's orders or change a product price to $0.

To prevent this, I wrote strict Firestore Security Rules that act as an impenetrable firewall.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {

    // 1. PRODUCTS: Anyone can read, only the Admin can create/update/delete
    match /products/{productId} {
      allow read: if true;
      allow write: if request.auth != null && request.auth.token.admin == true;
    }

    // 2. ORDERS: Users can only read and create their OWN orders
    match /orders/{orderId} {
      // User must be logged in and the ID on the order must match their Auth ID
      allow read: if request.auth != null && resource.data.userId == request.auth.uid;

      // When creating an order, ensure they aren't spoofing the userId
      allow create: if request.auth != null && request.resource.data.userId == request.auth.uid;

      // Only Admin can update the order status (e.g., from PENDING to COMPLETED)
      allow update, delete: if request.auth != null && request.auth.token.admin == true;
    }
  }
}

By enforcing request.auth.uid == resource.data.userId, the database physically rejects any attempt by a user to fetch an order receipt that doesn't belong to them.

Reactive Cart State with Angular Signals

Managing shopping cart state across multiple components (the navbar cart icon, the product page, and the checkout drawer) used to require complex RxJS BehaviorSubjects. By leveraging modern Angular Signals, the cart logic became incredibly clean and synchronous.

import { Injectable, signal, computed } from '@angular/core';
import { Product } from '../models/product.model';

@Injectable({ providedIn: 'root' })
export class CartService {
  // The core reactive state
  private cartItems = signal<Product[]>([]);

  // Computed signals automatically update when cartItems changes
  readonly items = this.cartItems.asReadonly();
  readonly cartCount = computed(() => this.cartItems().length);
  readonly cartTotal = computed(() => 
    this.cartItems().reduce((total, item) => total + item.price, 0)
  );

  addToCart(product: Product) {
    this.cartItems.update(items => [...items, product]);
  }

  removeFromCart(productId: string) {
    this.cartItems.update(items => items.filter(i => i.id !== productId));
  }
}

Now, binding the cart total in the navbar is as simple as {{ cartService.cartTotal() }}, and Angular's change detection handles the rest with zero performance overhead.

Conclusion

Building a custom e-commerce solution is not for the faint of heart, but the level of control it gives your business is unmatched. By combining Angular's strict, component-driven architecture with Firebase's scalable, serverless backend, the Duncan Digital Solutions platform is fast, secure, and perfectly tailored to sell high-end digital services.

If you are an online shop owner, taking the time to build your own infrastructure is one of the best investments you can make in your brand's technical authority.

Website link [https://duncandigitals.com/]

Building a Localized Legal Assistant with Angular, Firebase & Gemini

Duncan Maina — Wed, 25 Feb 2026 16:21:35 +0000

Building AI applications for the legal sector presents a unique set of engineering challenges. General-purpose LLMs are notorious for hallucinating laws or confidently quoting United States federal law to users living in Nairobi or Kampala.

To solve this, I built SheriaSenseEA, a localized AI legal assistant specifically engineered for East Africa (Kenya, Uganda, and Tanzania).

Rather than relying on generic chat completion, this architecture utilizes strict System Prompting, forced frontend context injection, and multimodal document analysis to keep the AI strictly within the bounds of East African constitutional law.

Here is a deep dive into how it is built using Angular, Firebase Cloud Functions, and the Gemini 2.5 Pro model.

The Architecture of Constraint

The biggest risk in LegalTech is the AI giving advice outside its jurisdiction or acting as a general-purpose chatbot. To prevent this, SheriaSenseEA employs a two-tier constraint system: Frontend Context Injection and Backend Refusal Protocols.

1. Frontend Context Injection

Users switch between countries (Kenya, Uganda, Tanzania) in the Angular UI. Instead of trusting the LLM to remember this setting, the Angular service intercepts every message and forcibly prepends a hidden system directive before it reaches the network layer.

// Inside chat.component.ts
async sendMessage() {
  let finalPrompt = this.userInput;
  const country = this.geminiService.selectedCountry; // e.g., 'Kenya'

  // Forced Context Injection
  finalPrompt = `[Context: The user is located in ${country}. Answer strictly according to ${country} laws.] ${finalPrompt}`;

  if (this.isSwahili) {
    finalPrompt += " (Reply in fluent Swahili, use simple legal terms)";
  }

  // Send the payload to Firebase
  const response = await this.geminiService.chatWithGemini(finalPrompt);
}

This guarantees that even if a user simply types "What are my rights if arrested?", the LLM receives "[Context: The user is located in Kenya...] What are my rights if arrested?" and responds with the correct constitutional clauses.

2. The Backend Refusal Protocol

The Firebase Cloud Function acts as the secure gatekeeper holding the Gemini API key. Here, we instantiate GoogleGenerativeAI with a highly aggressive System Instruction.

Notice the Strict Mandate and Refusal Protocol. We explicitly teach the LLM what not to answer, effectively neutralizing prompt-injection attempts aimed at getting the bot to discuss politics or foreign laws.

import { onRequest } from "firebase-functions/v2/https";
import { GoogleGenerativeAI } from "@google/generative-ai";

export const getLegalAdvice = onRequest({ cors: true }, async (req, res) => {
  const { prompt, country, file } = req.body;
  const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);

  const SYSTEM_PROMPT = `
  You are SheriaSenseEA, a specialized legal assistant.
  Prioritize the Constitution and Laws of **${country}**.

  **YOUR STRICT MANDATE:**
  1. **SCOPE:** Deal ONLY with the Laws of Kenya, Uganda, and Tanzania.
  2. **REFUSAL PROTOCOL:** If a user asks about:
     - Politics (unrelated to law)
     - General Knowledge 
     - Laws of countries outside East Africa (e.g., US Law)

     **YOU MUST REPLY:** "My expertise is strictly limited to legal matters in East Africa. I cannot answer questions about that topic."

  **DISCLAIMER:** End EVERY message with: "**Disclaimer: This is for educational purposes only. Consult a qualified Advocate.**"
  `;

  const model = genAI.getGenerativeModel({ 
    model: "gemini-2.5-pro", 
    systemInstruction: SYSTEM_PROMPT,
  });

  // Execution logic...
});

Multimodal Document Analysis

A legal assistant isn't just about answering questions; it needs to review contracts and lease agreements.

When a user uploads a PDF or Image, the Angular frontend converts it into a Base64 string. The Firebase backend dynamically reconstructs this into an inlineData object that the Gemini Vision capabilities can process.

// Constructing the multimodal payload in Node.js
const contentParts: any[] = [prompt];

// If the Angular frontend sent a Base64 file, append it to the LLM context
if (file && file.data && file.mimeType) {
  contentParts.push({
    inlineData: {
      data: file.data,
      mimeType: file.mimeType
    }
  });
}

// Pass the combined array (Text + Document) to Gemini
const result = await model.generateContent(contentParts);

Native Browser Accessibility

To ensure the app is accessible to users who may not be comfortable typing long legal queries, I integrated the native Web Speech API directly into Angular.

This provides zero-cost, client-side Voice-to-Text and Text-to-Speech (TTS), fully localized for East African accents.

// Voice Recognition (Speech-to-Text)
const { webkitSpeechRecognition }: any = window;
this.recognition = new webkitSpeechRecognition();
this.recognition.lang = this.isSwahili ? 'sw-KE' : 'en-KE'; 

this.recognition.onresult = (event: any) => {
  this.zone.run(() => {
    this.userInput = event.results[0][0].transcript;
  });
};

// Reading Legal Advice Aloud (Text-to-Speech)
speak(text: string) {
  const cleanText = text.replace(/[*#]/g, ''); // Strip markdown
  const utterance = new SpeechSynthesisUtterance(cleanText);
  window.speechSynthesis.speak(utterance);
}

By dynamically swapping between sw-KE (Swahili-Kenya) and en-KE (English-Kenya), the dictation engine perfectly captures local dialects and legal terminology.

Conclusion

Building LegalTech requires a defensive engineering mindset. By combining Angular's robust service layer for context injection with Firebase Cloud Functions and Gemini's strict system prompting, SheriaSenseEA manages to provide highly accurate, multimodal legal guidance without bleeding into general-purpose AI hallucinations.

Live Demo: [https://sheriasense-app.web.app/]

GitHub Repo: [https://github.com/Maina-Duncan/SheriaSense-EA]

Building a Multi-Agent Medical Triage System with Angular, Firebase & Genkit

Duncan Maina — Wed, 25 Feb 2026 14:00:43 +0000

When building AI applications for healthcare, the stakes are incredibly high. If a standard chatbot hallucinates a recipe, dinner is ruined. If a medical triage bot hallucinates a diagnosis, lives are at risk.

To explore how to safely constrain LLMs in high-risk environments, I built AfyaSense—an AI-powered medical triage platform.

The goal wasn't just to wrap a frontend around a Gemini prompt. I wanted to build a system that extracts patient symptoms, calculates clinical risk levels (EMERGENCY, CLINIC, or SELF_CARE), and dynamically generates interactive maps to nearby hospitals, all while strictly preventing the AI from going off-topic.

Here is how I used Angular, Firebase Cloud Functions, and a 5-Agent Routing Architecture via Google Genkit to build a safe, hallucination-resistant medical app.

The Problem with "God Prompts" in Healthcare

Initially, developers try to stuff every instruction into a single, massive system prompt: "You are a doctor. Be polite. Extract these symptoms. Format as JSON. Give map coordinates." This "God Prompt" approach fails. The LLM gets confused, breaks JSON schemas, or gets easily jailbroken by users asking off-topic questions.

To solve this, I adopted a Multi-Agent Architecture. By splitting the workload into five specialized, isolated functions, the system became exponentially more reliable and predictable.

The AfyaSense Agent Pipeline

Instead of one AI doing everything, AfyaSense uses a sequential relay race orchestrated by Firebase Genkit.

1. The Traffic Cop (Intent Router)

Before any medical reasoning happens, the first agent simply reads the user's input and classifies the intent. If a user asks about the English Premier League or politics, the Router immediately blocks the request and stops the execution flow. It only allows medical, greeting, or location intents to pass.

2. The Intake Nurse (Data Extraction)

If the query is medical, it is handed to the Nurse agent. Crucially, this agent is forbidden from giving advice. Its only job is to read the chat history and extract exact data points into a strict Zod schema:

const PatientIntakeSchema = z.object({
  symptoms: z.array(z.string()),
  durationDays: z.number().optional(),
  severity: z.number().min(1).max(10).optional(),
  isBleedingOrUnconscious: z.boolean(), // Critical flag
});

3. Hardcoded Emergency Guardrails

This is where traditional engineering meets AI. I don't trust an LLM to decide if severe bleeding is an emergency. Instead, I intercept the parsed data natively in TypeScript. If the isBleedingOrUnconscious flag is true, my backend bypasses the reasoning AI entirely and instantly returns an emergency response.

// Bypassing LLM Reasoning for Emergencies
if (intakeData.isBleedingOrUnconscious) {
  return {
    riskLevel: 'EMERGENCY', 
    reasoning: 'Patient reported critical red-flag symptoms.',
    suggestedAction: 'Go to the nearest emergency room immediately.',
  };
}

4. The Diagnostic Engine (Reasoning)

Only if the patient is stable does the data proceed to the "Doctor" agent (powered by Gemini 2.5 Pro). This agent takes the clean JSON from the Nurse and calculates the differential diagnosis and triage instructions.

Headless Mapping: Avoiding API Costs

One of the coolest features of AfyaSense is its ability to generate interactive Google Maps directly inside the chat UI without relying on expensive Google Places API calls.

To achieve this, I built a headless mapping pipeline in the Angular frontend:

Fetch: The browser grabs the user's raw GPS coordinates.
Scan: The Angular app pings the free, open-source OpenStreetMap (Overpass API) to invisibly scan an 8km radius and extract the names of nearby clinics.
Inject: It takes those raw string names and dynamically constructs free Google Maps Embed URLs.

// 1. Headless fetch from OpenStreetMap
const query = `[out:json];node["amenity"="hospital"](around:8000,${lat},${lng});out body 3;`;
const res = await fetch(`https://overpass-api.de/api/interpreter?data=${encodeURIComponent(query)}`);
const data = await res.json();

const names = data.elements.map((e: any) => e.tags.name).slice(0, 3);

// 2. Build Google Maps iframes safely
this.hospitalMaps = names.map(name => {
  const mapUrl = `https://maps.google.com/maps?q=${encodeURIComponent(name)}+near+${lat},${lng}&t=m&z=14&output=embed`;
  return { 
    name, 
    // Bypassing Angular's strict XSS protections for our generated iframes
    url: this.sanitizer.bypassSecurityTrustResourceUrl(mapUrl) 
  };
});

Tying it all together with Angular

The frontend is built on Angular 18. Because we are dynamically injecting HTML iframes into a chat bubble, Angular's strict Cross-Site Scripting (XSS) protections will normally block the maps. By explicitly running our generated URLs through DomSanitizer, we can render secure, beautiful maps right inside the user's chat flow without ever kicking them to another app.

The Takeaway

You don't need a massive monolithic LLM prompt to build intelligent apps. By breaking down your logic into micro-agents using Genkit and combining AI with traditional programming guardrails, you can build systems that are not only smarter, but significantly safer.

Live Demo: [https://afya-sense.web.app/]

Source Code: [https://github.com/Maina-Duncan/AfyaSense]