However I did lean back on AI coding a lot more with my latest project - Pexand. I wanted to try how much can I like the core desktop app building experience that I have not delved into for sometime.

Pexand a text expander. It’s written in Rust. And it’s gloriously, unapologetically “dumb.”

The “Sentinel” is Watching

Most modern apps want to know your location, your mother’s maiden name, and your favorite flavor of cloud storage. Pexand just wants to know if you typed ;shrug.

The app just monitors key strokes and upon finding a pattern replaces the abbreviation with an expanded form. While the core design suggestions were by multiple AI agents, I did try to make the app blow up here and there.

The way it works is interesting -

1. A background thread called the Sentinel sits in the background, quietly monitoring your keystrokes using Windows hooks, waiting for a trigger.
2. When the sentinel sees one, it reaches into a Radix Trie (because O(m) lookup is the only way to live) and swaps your shortcut for the real deal in under 5ms.

And.. that’s it.

Here’s what it looks like.

Why build another text expander?

• Cloud Fatigue: I don’t want my snippets synced to a server in Singapore. I want them in a local SQLite database that I own.
• The “Dumb” Factor: No AI. No “smart” suggestions. No collaboration features. Just: I type ;addr, it gives me my address.
• Rust: Honestly? I just wanted to see if I could make a GUI app in Rust without losing my mind.

The Tech Stack

Building a native Windows app in 2026 feels like a superpower with AI coding.

• Iced: The GUI framework uses the Elm Architecture, which means state management did not actually make sense to me. But, something new for sure - no more “is this component re-rendering because of a ghost prop?”
• SQLite: Every snippet lives in a local .db file. It’s ACID compliant, fast, and portable. If I want to move my snippets, I just move the file. I could also export / import snippets - just saying.
• Radix Trie: This was most unfamiliar to me. Instead of looping through a list of snippets every time you press a key, the app traverses a tree. It’s fast!

I deliberately chose a tech stack that I had been putting away for sometime now. AI coding makes everything fast - even making terrible mistakes.

I was surprised and dismayed at the same time on how coding agents have evolved and helped through the process. That’s a story for another day.

Features for the Minimalist

• Dynamic Variables: Use {{date}} or {{clipboard}} to inject context on the fly.
• App Filtering: Want expansion in VS Code but not in your terminal? Just blacklist it.
• Fuzzy Search: The “Dashboard” (summoned with Ctrl+Alt+Shift+P) lets you find snippets even if you only remember half the trigger.

Conclusion

Pexand isn’t going to change the world. It’s not a “platform.” It’s a tool.

It’s for the people who still appreciate a single .exe that does one thing and one thing.. uh, better than average. Or, it’s only for me, because I’m tired of copying and pasting from Notepad++ every time.

Check out the code, or download the binary and start being efficiently lazy: https://github.com/techformist/pexand

Just kidding - the app is far more dumb.

Notocan: A Dumb Google Keep Alternative

Notocan is what I like to say “deliberately dumb”, local and fast. It’s not trying to be the next big productivity platform with AI features, cloud sync complexity, or fancy collaboration tools. It’s just notes, done right in a browser window.

tldr;

• Has it been done a million times? Yes.
• Has it been done by me in the past? Probably, yes.
• Will it deter me from building something dumb again. Absolutely not.

The core features are straightforward:

• Create notes with titles and rich text content
• Color-code your notes for visual organization
• Pin important notes to keep them at the top
• Archive notes you don’t need anymore
• Search through all your notes instantly
• Keyboard navigation

Check it out here: https://notocan.techformist.com

If you are gungho about todo’s and notes - Notocan is open source and available on GitHub.

Feel free to use the app, or just poke around the code!

Back to the Experience

The experience though has been nothing short of refreshing. No more complex configurations, no more wrestling with SSR setups and errors, just pure Vue 3 with the Composition API.

The dev experience is incredibly fast - hot reload is instantaneous, compilation is lightning-quick, and the build process feels almost instantaneous.

It’s amazing how much mental overhead you shed when you don’t have to think about server-side rendering for a client-side notes app. Also, there are no accounts, no subscriptions, no worrying about data privacy or service outages.

Your notes live in your browser’s IndexedDB, which means:

• Instant loading (no network calls)
• Works offline perfectly
• Your data stays yours
• Migration from localStorage is handled automatically

The IndexedDB implementation includes pagination for performance, so even with hundreds of notes, the app stays snappy.

Also, I can’t say enough good things about DaisyUI. Every time I use it, I’m reminded why it was my go-to UI library. The component system is thoughtful and the default styles just work without being overwhelming.

Combined with Tailwind CSS, DaisyUI makes building polished interfaces feel effortless. The color system, spacing, and component variants work together seamlessly. It’s the kind of library that gets out of your way and lets you focus on building features, not fighting CSS. And, not having all the code in my repo mocking my design skills. I would like that mocking to be deep insite the node_modules thank you very much.

Conclusion

Building Notocan reinforced some important lessons:

1. Simple is indeed beautiful
2. I continue to be undeterred by no one using the applications I build

If you need a simple notes app, check out Notocan - it might just become your new favorite way to jot down thoughts.

TimeMomo is designed for presenters, streamers, and event managers who need to share timers with audiences in real-time, without the complexity of traditional WebSocket implementations.

What is TimeMomo?

TimeMomo is a collaborative timer application that allows users to create “rooms” where timers can be started, paused, and synchronized across all participants in real-time. Think of it as a professional timer platform for:

• Presenters who need to manage speaking time during conferences
• Streamers who want to share countdowns with their audience
• Event managers coordinating multiple sessions
• Meeting facilitators keeping discussions on track

The app features a clean, intuitive interface with room management, user authentication, and responsive design that works seamlessly on both desktop and mobile devices.

Using TimeMomo is simple.

Register > Create a room > Share the room URL with audience and presenters to see a common timer.

It is an alternative to apps like stagetimer.io, but let’s face it - there are many great apps and it’s not a great alternative. TimeMomo happens to be the app I built.

Use it for free (well, limited to 3 concurrent rooms and ~100 participants). http://timemomo.techformist.com/

Or, make the project your own! TimeMomo is open source and available on GitHub.

Try it out and let me know what you think!

Why I Built This

My motivation was twofold: learning and solving a real problem. Despite my reservations about React (I’ve always preferred Vue/Nuxt), I wanted to challenge myself with Next.js to understand what all the hype was about. At the same time, I kept encountering situations where I needed a reliable timer that could be shared across devices without the hassle of screen sharing or manual coordination.

The idea crystallized when I realized how many professional settings could benefit from a real-time timer platform - from agile ceremonies to public speaking events. And since I’m a big fan of keeping things simple, I wanted to build something that didn’t require complex infrastructure.

Technology Choices: Keeping It Simple and Powerful

Next.js: Facing My React Fears

Choosing Next.js was a deliberate step outside my comfort zone. As someone who’s struggled with React’s verbosity and component lifecycle complexities, I approached this with skepticism. However, Next.js 15’s improvements, combined with TypeScript, made the experience surprisingly smooth. The App Router and server components felt more intuitive than I expected, and the built-in optimization features handled performance concerns automatically.

PocketBase: Real-Time Magic

This is where the project really shines. PocketBase is absolutely incredible for real-time applications. While I always appreciated the one-file philosophy for entire backend, I was blown away by how it handles live synchronization without needing to set up WebSocket servers or manage connection states. The real-time subscriptions API is so clean and reliable that I could focus on building features rather than infrastructure.

The decision to use PocketBase instead of traditional WebSockets was a game-changer. It simplified the architecture dramatically:

• No need for separate WebSocket servers
• Built-in authentication and authorization
• SQLite backend that’s easy to deploy
• Automatic real-time updates across all connected clients

Shadcn/UI: The UI I Always Wanted

If PocketBase is the backend hero, Shadcn is definitely the frontend star. The developer experience is exceptional - copy-paste components that just work, with full TypeScript support and excellent documentation.

Dokploy: Deployment Adventures

Using Dokploy for the first time was an interesting experience. I always wanted the Vercel / Netlify experience at budget and this is certainly it. The ability to deploy both the Next.js frontend and PocketBase backend as containers with automated CI/CD made the whole process much smoother than traditional hosting setups.

Travails and Turbulences: The Learning Curve

Building TimeMomo wasn’t without its challenges. As someone new to React/Next.js, I hit several roadblocks:

React Learning Pains

• Understanding React’s component lifecycle and hooks took time
• State management across real-time updates required careful planning
• TypeScript integration had a learning curve, especially with complex types

I am still not a fan.

Real-Time Synchronization Headaches

• Love the real-time capabilities
• Debugging hooks - not so much

Deployment Drama

• Dokploy’s initial setup was trickier than expected
• Docker networking between Next.js and PocketBase containers

And finally.. addressing the AI in the room

AI tools were incredibly helpful throughout this project. I started out with Bolt, and switched to VSCode. Throughout the cycle, AI assistance was a game-changer for Next.js and Shadcn specifically. I was never very successful getting clean first versions out with Nuxt in the past, but with React I could certainly iterate much faster.

• Fast conversion of design ideas into working React components
• Query issues during development
• Get contextual answers for deployment issues

In Conclusion

This project taught me that sometimes stepping outside your comfort zone pays off. While I’m still not a React convert, I now understand its strengths and can appreciate why it’s so popular. The combination of Next.js + PocketBase + Shadcn proved to be incredibly productive.

Looking ahead, I’m excited about the potential improvements:

• Nuxt 4 with Nuxt UI and Shadcn-Vue MCP (that AI-assisted Vue development I keep hearing about)
• Laravel with Laravel Boost!

My plans for this app? Well, not much - unless I see people really interested.

Why Another Utility Site?

The web is full of utility sites, but many come with drawbacks:

• Intrusive ads and analytics
• Server-side processing of potentially sensitive data
• Slow loading times
• Inconsistent UI/UX

utils.techformist.com addresses these issues by keeping everything client-side, ensuring your data never leaves your browser. The site loads quickly, works offline, and offers a clean, consistent interface for all tools.

Key Features

1. Tools that you want to use!

Our collection includes essential utilities that solve real problems :)

• Calculator: A simple yet powerful calculator for quick arithmetic operations.
• QR Code Generator: Create QR codes for URLs, WiFi networks, contact details, and more with customizable colors.
• Password Generator: Generate secure, random passwords with options for length, character types, and complexity.
• Barcode Generator: Create various barcode formats with customizable settings for professional or personal use.
• Image Converter: Convert images between different formats without uploading them to any server.
• Favicon Generator: Quickly create favicons for your website from any image.
• Color Picker: Extract and analyze colors from images with support for multiple color formats.
• JSON Formatter: Format, validate, and beautify JSON data with easy-to-use controls and copy functionality.
• Base64 Converter: Encode and decode text or files to and from Base64 format right in your browser.

.. and so on. Check out the site for the latest updates.

2. Fast Search and Category-Based Organization

A simple tool search is at the heart of the site! At the same time, tools are organized into logical categories for easy discovery:

• Code: Developer tools like JSON Formatter and Base64 Converter for everyday coding tasks
• Image: Tools for working with images, including QR Code Generator, Barcode Generator, Image Converter, and Favicon Generator
• Text: Text manipulation utilities like the Password Generator
• Design: Creative tools such as the Color Picker for design work
• File: File processing tools like the PDF Compressor
• Other: Miscellaneous utilities including the Calculator

This categorization ensures you can quickly find the right tool for your current task.

3. Responsive and Accessible Design

All tools feature:

• Fully responsive layouts that work on devices of any size
• Dark/light mode support

4. Privacy-First Approach

What sets util.techformist.com apart is its commitment to privacy:

• No tracking (except essentials)
• No server-side processing
• No data storage outside of the browser
• No data transmission to any external computer outside of your own browser

Technology Stack

Utils.techformist.com is built on modern web technologies:

• Nuxt 3: For its excellent developer experience, automatic routing, and performance optimizations
• NuxtUI: Providing a consistent design system and accessible components
• Tailwind CSS: For rapid styling and responsive design

The app is client-side only - no database or server processing.

Why Client-Side Only?

The decision to make util.techformist.com entirely client-side was deliberate:

1. Privacy: Your data never leaves your browser, eliminating privacy concerns.
2. Performance: No server roundtrips means instant processing of your tasks.
3. Availability: The site works offline once loaded.
4. Scalability: Without server costs, the site can scale infinitely.
5. Simplicity: The architecture remains clean without databases or APIs.

Development Approach

Building the site was straightforward with Nuxt’s module system and NuxtUI’s component library. The development workflow included:

1. Setting up a Nuxt 3 project with the content and UI modules
2. Creating a consistent layout and navigation system
3. Implementing individual utility components
4. Ensuring responsive design with Tailwind
5. Optimizing for performance

The entire project required no backend infrastructure, making deployment simple through static site hosting. The site is hosted on Cloudflare Pages.

Looking Ahead

Util.techformist.com is just getting started. Future plans include:

• Adding more utility tools based on user feedback!
• Implementing more advanced features like tool chaining :)
• Improving keyboard shortcuts and accessibility

Conclusion

Util.techformist.com represents my philosophy that web tools should be fast, private, and straightforward. By keeping everything in the browser, I’ve created a resource that respects your data while providing genuinely useful functionality.

Give it a try at utils.techformist.com and let me know what you think.

Features will include -

• 🔍 Create/pass a template in HTML and placeholders for values
• 🕶️ Real-time document analysis status
• 💾 Download merged content as PDF

Here’s a quick demo.

While the demo showcases invoice generation, the same program can be extended to any document type - filled application forms, documents, etc.

Technology stack -

1. NuxtJS
2. Tailwind CSS
3. PDFJS
4. CKEditor

Why Client-Side PDF Generation?

Generating PDFs on the client-side offers several benefits:

• Performance: Offloading PDF generation to the client’s device reduces server load and leads to faster response times.
• User Experience: Users can preview changes in real-time, adjust their inputs, and generate PDFs without a trip to the server.
• Cost-Effective: Avoid additional server infrastructure by leveraging modern browsers and their capabilities.
• Flexibility: Easily integrate rich text editing and custom templates to create personalized documents.

Who is this post for?

• You are trying to roll-out a PDF generator for invoices or filled applications
• You are using an external service to generate PDFs
• You are not satisfied with server-side PDF generators

Setting Up the Project

Before we start, make sure you have Node.js 18.x or later installed in your computer.

Create a blank Nuxt app.

bunx nuxi@latest init docgen

A key component of our PDF generator is a rich text editor to create templates. We will use CKEditor to achieve just that. We will also use a JSON editor to enable editing JSON data.

bun i ckeditor/ckeditor5-vue ckeditor5 vue3-json-editor

We will use pdfjs to preview and generate PDF, and DomPurify to make sure we are rendering things safer. Also, install types while at it.

bun i dompurify html2canvas jspdf pdfjs-dist pdfmake
bun i -d @types/pdfmake

Add styling and icons.

bunx nuxi@latest module add tailwindcss lucide-vue-next

Develop the app

Rich Text Editor

Rich text editor is one of the main components that enables users to edit templates. You will not need the rich text editor if you don’t plan to edit templates within the app (the template is plain HTML anyway.)

<template>
  <div class="richtext-editor">
    <ckeditor
      v-if="editor && config && modelValue"
      :editor="editor"
      v-model="modelValue"
      :config="config"
    />

    <div
      v-if="previewContent"
      class="preview-overlay prose"
      v-html="previewContent"
    ></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";

import {
  ClassicEditor,
  Autoformat,
  AutoImage,
  Autosave,
  Base64UploadAdapter,
  Bold,
  Essentials,
  // other items - see GitHub link
} from "ckeditor5";

import "ckeditor5/ckeditor5.css";

import { Ckeditor } from "@ckeditor/ckeditor5-vue";
import "ckeditor5/ckeditor5.css";
const isLayoutReady = ref(false);
const editor = ClassicEditor;
const LICENSE_KEY = "GPL"; // or <YOUR_LICENSE_KEY>.

const config = computed(() => {
  if (!isLayoutReady.value) {
    return null;
  }

  return {
    toolbar: {
      items: [
        "sourceEditing",
        "|",
        "heading",
        "|",
        "fontSize",
        "fontFamily",
        // other toolbar items. See GitHub link for all buttons
      ],
      shouldNotGroupWhenFull: false,
    },
    plugins: [
      // relevant plugins - see GitHub link
    ],
    fontFamily: {
      supportAllValues: true,
    },
    fontSize: {
      options: [10, 12, 14, "default", 18, 20, 22],
      supportAllValues: true,
    },
    heading: {
      options: [
        {
          model: "paragraph",
          title: "Paragraph",
          class: "ck-heading_paragraph",
        },
        {
          model: "heading1",
          view: "h1",
          title: "Heading 1",
          class: "ck-heading_heading1",
        },
        {
          model: "heading2",
          view: "h2",
          title: "Heading 2",
          class: "ck-heading_heading2",
        },
        {
          model: "heading3",
          view: "h3",
          title: "Heading 3",
          class: "ck-heading_heading3",
        },
        {
          model: "heading4",
          view: "h4",
          title: "Heading 4",
          class: "ck-heading_heading4",
        },
        {
          model: "heading5",
          view: "h5",
          title: "Heading 5",
          class: "ck-heading_heading5",
        },
        {
          model: "heading6",
          view: "h6",
          title: "Heading 6",
          class: "ck-heading_heading6",
        },
      ],
    },
    image: {
      toolbar: ["imageTextAlternative"],
    },
    initialData: "..",
    licenseKey: LICENSE_KEY,
    link: {
      addTargetToExternalLinks: true,
      defaultProtocol: "https://",
      decorators: {
        toggleDownloadable: {
          mode: "manual",
          label: "Downloadable",
          attributes: {
            download: "file",
          },
        },
      },
    },

    placeholder: "Type or paste your content here!",
    table: {
      contentToolbar: [
        "tableColumn",
        "tableRow",
        "mergeTableCells",
        "tableProperties",
        "tableCellProperties",
      ],
    },
  };
});
const modelValue = defineModel();

const props = defineProps<{
  previewContent?: string;
}>();

onMounted(() => {
  isLayoutReady.value = true;
});
</script>

<style>
/* include styles */
</style>

JSON Editor

Create the JSON editor that is used to edit JSON data.

<!-- components/DataEditor.vue -->
<template>
  <ClientOnly>
    <div
      class="h-[300px] border border-white/20 rounded-lg overflow-hidden bg-white/5"
    >
      <textarea
        v-model="jsonString"
        class="w-full h-full p-4 font-mono text-sm bg-transparent text-black dark:text-white/90 focus:outline-none"
        @input="handleInput"
        spellcheck="false"
      ></textarea>
    </div>
    <div v-if="error" class="mt-2 text-red-400 text-sm">
      {{ error }}
    </div>
  </ClientOnly>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { useDocumentStore } from "~/stores/document";

const props = defineProps<{ modelValue: Record<string, any> }>();
const emit = defineEmits<{
  "update:modelValue": [value: Record<string, any>];
}>();

const documentStore = useDocumentStore();
const error = ref("");
const jsonString = ref(JSON.stringify(props.modelValue, null, 2));

watch(
  () => props.modelValue,
  (newVal) => {
    const newString = JSON.stringify(newVal, null, 2);
    if (jsonString.value !== newString) {
      jsonString.value = newString;
    }
  }
);

const handleInput = (event: Event) => {
  const target = event.target as HTMLTextAreaElement;
  try {
    const parsed = JSON.parse(target.value);
    error.value = "";
    documentStore.isDirty = true;
    emit("update:modelValue", parsed);
  } catch (e) {
    error.value = "Invalid JSON format";
  }
};
</script>
<style>
/* include styles */
</style>

Create PDF Viewer

PDF viewer shows the PDF after merging data in template.

<!-- components/PdfViewer.vue -->
<template>
  <div class="pdf-viewer">
    <div v-if="loading" class="loading-indicator">
      <div class="spinner"></div>
      <div>Generating PDF preview...</div>
    </div>
    <div v-else-if="error" class="error-message">
      {{ error }}
    </div>
    <div v-else ref="canvasContainer" class="canvas-container"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, onBeforeUnmount } from "vue";

const props = defineProps<{
  content: string;
}>();

const canvasContainer = ref<HTMLElement | null>(null);
const loading = ref(true);
const error = ref<string | null>(null);
let pdfDoc: any = null;
let currentPage = 1;
let pageRendering = false;
let pageNumPending: number | null = null;
let pdfjsLib: any = null;

// Clean up any resources when component is unmounted
onBeforeUnmount(() => {
  if (pdfDoc) {
    pdfDoc = null;
  }
});

// Initialize PDF.js
onMounted(async () => {
  if (process.client) {
    try {
      // Import PDF.js dynamically
      const pdfjsModule = await import("pdfjs-dist");
      pdfjsLib = pdfjsModule;

      // Set worker source - using CDN for the worker
      pdfjsLib.GlobalWorkerOptions.workerSrc =
        "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";

      // Generate and render PDF
      await generatePdf();
    } catch (err) {
      console.error("Error initializing PDF.js:", err);
      error.value = "Failed to initialize PDF viewer. Please try again.";
      loading.value = false;
    }
  }
});

// Watch for content changes
watch(
  () => props.content,
  async () => {
    if (pdfjsLib && process.client) {
      loading.value = true;
      error.value = null;
      await generatePdf();
    }
  }
);

// Generate PDF from content
async function generatePdf() {
  if (!pdfjsLib || !process.client) return;

  try {
    // Import pdfMake dynamically
    const pdfMakeModule = await import("pdfmake/build/pdfmake");
    const pdfFontsModule = await import("pdfmake/build/vfs_fonts");

    // Get the default export or the module itself
    const pdfMake = pdfMakeModule.default || pdfMakeModule;

    // Manually set up the vfs with a basic font
    if (!pdfMake.vfs) {
      // @ts-ignore - We know this property might exist
      pdfMake.vfs = pdfFontsModule.pdfMake?.vfs || {};
    }

    // Create a temporary element to parse the HTML
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = props.content || "";

    // Extract text content and structure
    const pdfContent = extractPdfContent(tempDiv);

    // Define the document with basic fonts
    const docDefinition = {
      content: pdfContent,
      defaultStyle: {
        font: "Roboto",
        fontSize: 12,
        lineHeight: 1.5,
      },
      pageSize: "A4",
      pageMargins: [40, 60, 40, 60] as [number, number, number, number],
    };

    // Generate PDF as Blob
    const pdfDocGenerator = pdfMake.createPdf(docDefinition);

    pdfDocGenerator.getBlob(async (blob: Blob) => {
      try {
        // Convert blob to array buffer
        const arrayBuffer = await blob.arrayBuffer();

        // Load PDF document
        const loadingTask = pdfjsLib.getDocument({ data: arrayBuffer });
        pdfDoc = await loadingTask.promise;

        // Initial/first page rendering
        await renderPage(1);
        loading.value = false;
      } catch (err) {
        console.error("Error rendering PDF:", err);
        error.value = "Failed to render PDF preview.";
        loading.value = false;
      }
    });
  } catch (err) {
    console.error("Error generating PDF:", err);
    error.value = "Failed to generate PDF preview.";
    loading.value = false;
  }
}

// Render the specified page
async function renderPage(num: number) {
  if (!pdfDoc) return;

  pageRendering = true;

  try {
    // Get page
    const page = await pdfDoc.getPage(num);

    // Clear previous content
    if (canvasContainer.value) {
      canvasContainer.value.innerHTML = "";
    }

    // Calculate scale to fit the container width
    const containerWidth = canvasContainer.value?.clientWidth || 800;
    const viewport = page.getViewport({ scale: 1 });
    const scale = containerWidth / viewport.width;
    const scaledViewport = page.getViewport({ scale });

    // Create canvas for each page
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    canvas.height = scaledViewport.height;
    canvas.width = scaledViewport.width;
    canvas.className = "pdf-page";

    // Add canvas to container
    canvasContainer.value?.appendChild(canvas);

    // Render PDF page into canvas context
    const renderContext = {
      canvasContext: ctx,
      viewport: scaledViewport,
    };

    await page.render(renderContext).promise;
    pageRendering = false;

    // If there's a pending page, render it
    if (pageNumPending !== null) {
      renderPage(pageNumPending);
      pageNumPending = null;
    }

    // If there are more pages, render them too
    if (num < pdfDoc.numPages) {
      renderPage(num + 1);
    }
  } catch (err) {
    console.error("Error rendering page:", err);
    pageRendering = false;
    error.value = "Failed to render PDF page.";
  }
}

// Extract content from HTML for PDF generation
function extractPdfContent(element: HTMLElement): any[] {
  const result: any[] = [];

  // Process child nodes
  Array.from(element.childNodes).forEach((node: Node) => {
    if (node.nodeType === Node.TEXT_NODE) {
      const text = node.textContent?.trim() || "";
      if (text) {
        result.push({ text });
      }
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      const elementNode = node as HTMLElement;
      const nodeName = elementNode.nodeName.toLowerCase();

      // Handle different element types
      if (nodeName === "p") {
        result.push({
          text: elementNode.textContent?.trim() || "",
          margin: [0, 5, 0, 10],
        });
      } else if (nodeName === "h1") {
        result.push({
          text: elementNode.textContent?.trim() || "",
          fontSize: 24,
          bold: true,
          margin: [0, 10, 0, 10],
        });
      } else if (nodeName === "h2") {
        result.push({
          text: elementNode.textContent?.trim() || "",
          fontSize: 20,
          bold: true,
          margin: [0, 10, 0, 5],
        });
      } else if (nodeName === "h3") {
        result.push({
          text: elementNode.textContent?.trim() || "",
          fontSize: 16,
          bold: true,
          margin: [0, 10, 0, 5],
        });
      } else if (nodeName === "ul" || nodeName === "ol") {
        const items = Array.from(elementNode.children).map((li) => {
          return { text: li.textContent?.trim() || "", margin: [0, 2, 0, 2] };
        });

        result.push({
          ul: nodeName === "ul" ? items : undefined,
          ol: nodeName === "ol" ? items : undefined,
          margin: [0, 5, 0, 10],
        });
      } else if (nodeName === "table") {
        // Extract table data
        const tableData: string[][] = [];
        Array.from(elementNode.querySelectorAll("tr")).forEach((row) => {
          const rowData: string[] = [];
          Array.from(row.querySelectorAll("td, th")).forEach((cell) => {
            rowData.push(cell.textContent?.trim() || "");
          });
          if (rowData.length > 0) {
            tableData.push(rowData);
          }
        });

        if (tableData.length > 0) {
          result.push({
            table: {
              body: tableData,
              widths: Array(tableData[0].length).fill("*"),
            },
            margin: [0, 5, 0, 10],
          });
        }
      } else {
        // Recursively process other elements
        const childContent = extractPdfContent(elementNode);
        if (childContent.length > 0) {
          result.push(...childContent);
        }
      }
    }
  });

  return result;
}
</script>

Include this in a DocumentPreview.vue component that can toggle between PDF viewer and a rich text viewer - if needed, of course.

Layout and Page

Update layout -

<!-- layouts/default.vue -->
<template>
  <div class="min-h-screen bg-surface-ground">
    <nav class="bg-surface-card border-b border-surface-border md:px-12 px-6">
      <div class=" h-16 flex items-center justify-between">
        <h1 class="text-xl font-bold text-black">docgen</h1>
        <div class="flex items-center gap-4">
          <button
            variant="secondary"
            :icon="isDark ? 'sun' : 'moon'"
            @click="toggleTheme"
            :title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
          />
        </div>
      </div>
    </nav>
    <main class=" py-6">
      <slot />
    </main>
  </div>
</template>

<script setup lang="ts"></script>

<style></style>

… and the page.

<template>
  <div class="mx-auto px-12">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <div class="flex flex-col gap-6">
        <div class="card">
          <div class="toolbar">
            <h2 class="section-title">Template</h2>
          </div>
          <div class="h-[600px] overflow-hidden">
            <ClientOnly>
              <RichTextEditor v-model="template" class="h-full" />
            </ClientOnly>
          </div>
        </div>

        <div class="card">
          <!-- Removed flex-1 from card -->
          <div class="toolbar">
            <h2 class="section-title">Data (JSON)</h2>
          </div>
          <div class="editor-container h-[400px] overflow-hidden">
            <DataEditor v-model="jsonData" class="h-full" />
          </div>
        </div>
      </div>

      <div class="card">
        <!-- Removed flex-1 from card -->
        <div class="toolbar">
          <h2 class="section-title">Generated Document</h2>
          <div class="toolbar-actions">
            <!-- <Button variant="secondary" icon="refresh">Auto-refresh</Button> -->
          </div>
        </div>
        <div class="h-[1024px] overflow-hidden">
          <DocumentPreview :data="jsonData" class="h-full" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useDocumentStore } from "~/stores/document";
import { storeToRefs } from "pinia";

const documentStore = useDocumentStore();
const { template, jsonData } = storeToRefs(documentStore);
</script>

<style scoped>
/* styles */
</style>

Run the app!

bun dev

This should populate some default template and data, and show you a nice preview of the merged content.

Conclusion

Generating PDF on client is not hard and keeps your server load low.

While generating PDFs client-side can certainly help in most use cases (especially for enterprise customers), it may not be a pleasant experience for mobile users. Also, features like emailing PDF, supporting non-PDF formats, etc. are hard to achieve.

See complete code on GitHub.

• upload PDF or images
• specify fields (if needed)
• extract specific fields of information

Features will include -

• 🔍 Extract custom fields from identification documents
• 🔄 Real-time document analysis status
• 💾 Download extracted data as JSON
• 🎨 UI with Shadcn-vue /Tailwind CSS

Here’s a quick demo.

While the demo covers only identification documents, the same program can be extended to any document type - application forms, invoices, etc.

Prerequisites

Before we start, make sure you have the following:

• Node.js 18.x or later
• An Azure account with a Document Intelligence resource
• Azure Document Intelligence API key and endpoint

Step 1: Setting Up the Project

Create a blank Nuxt app..

pnpx nuxi@latest init docformist

Get your API key and environment details from Azure site. You can sign up for free and use a Free plan to test out the service.

Create a .env file in the root directory with your Azure credentials:

AZURE_DOCUMENT_INTELLIGENCE_KEY=your_key_here
AZURE_DOCUMENT_INTELLIGENCE_ENDPOINT=your_endpoint_here

Add Nuxt modules -

pnpx nuxi@latest module add shadcn-nuxt
pnpx nuxi@latest module add tailwindcss

Initialize shadcn and tailwind -

pnpx tailwindcss init
pnpx shadcn-vue@latest init

Accept sensible defaults.

Step 2: Configuring Nuxt

Ensure nuxt.config.ts is updated. Add the CSS file reference:

// ...existing code...
export default defineNuxtConfig({
  // ...existing code...
  modules: ["shadcn-nuxt", "@nuxt/icon", "@nuxtjs/tailwindcss"],
  css: ["~/assets/css/tailwind.css"],
  // ...existing code...
});

Add shadcn-vue components.

pnpx shadcn-vue@latest add label button card input separator

Step 3: Creating the Document Uploader Component

Create DocumentUploader.vue in the components folder to handle file uploads:

// filepath: /c:/dev/1p/nuxt/docformist/components/DocumentUploader.vue
<template>
  <!-- ...existing code... -->
</template>

<script setup lang="ts">
const emit = defineEmits(["file-selected"]);

const handleFileSelect = (event: Event) => {
  const file = (event.target as HTMLInputElement).files?.[0];
  if (file) {
    emit("file-selected", file);
  }
};

const handleDrop = (event: DragEvent) => {
  const file = event.dataTransfer?.files[0];
  if (file) {
    emit("file-selected", file);
  }
};
</script>

Step 4: Creating the Document Viewer Component

Create DocumentViewer.vue to preview the uploaded document:

// filepath: /c:/dev/1p/nuxt/docformist/components/DocumentViewer.vue
<template>
  <!-- ...existing code... -->
</template>

<script setup lang="ts">
const props = defineProps<{
  file: File;
}>();

const fileUrl = ref<string | null>(null);
const isPDF = computed(() => props.file.type === "application/pdf");

watch(
  () => props.file,
  (newFile) => {
    if (fileUrl.value) {
      URL.revokeObjectURL(fileUrl.value);
    }
    fileUrl.value = URL.createObjectURL(newFile);
  },
  { immediate: true }
);

onBeforeUnmount(() => {
  if (fileUrl.value) {
    URL.revokeObjectURL(fileUrl.value);
  }
});
</script>

Step 5: Creating the API Endpoint

Create an API endpoint analyze.post.ts for document analysis with Azure Document Intelligence:

import DocumentIntelligence, {
  getLongRunningPoller,
  isUnexpected,
} from "@azure-rest/ai-document-intelligence";
import { AzureKeyCredential } from "@azure/core-auth";
import formidable from "formidable";
import { readFile } from "fs/promises";

export default defineEventHandler(async (event) => {
  // ...existing code...
});

Step 6: Building the Main Page

Integrate the components and API in the main page index.vue:

// filepath: /c:/dev/1p/nuxt/docformist/pages/index.vue
<template>
  <!-- ...existing code... -->
</template>

<script setup lang="ts">
const selectedFile = ref<File | null>(null);
const extractedData = ref<Record<string, any> | null>(null);
const loading = ref(false);
const selectedFields = ref<string[]>([]);

const handleFileSelect = (file: File) => {
  selectedFile.value = file;
  extractedData.value = null;
};

const handleExtract = async () => {
  if (!selectedFields.value.length) {
    console.error("No fields selected");
    return;
  }

  loading.value = true;
  try {
    const formData = new FormData();
    formData.append("file", selectedFile.value!);
    formData.append("fields", JSON.stringify(selectedFields.value));

    const response = await fetch("/api/analyze", {
      method: "POST",
      body: formData,
    });

    if (!response.ok) {
      throw new Error("Failed to analyze document");
    }

    extractedData.value = await response.json();
  } catch (error) {
    console.error("Error analyzing document:", error);
    // TODO: Show error toast
  } finally {
    loading.value = false;
  }
};
</script>

Step 7: Run the Application

Start the development server:

pnpm dev

Visit http://localhost:3000 to upload a document and see the results.

Conclusion

That was a quick demo of how we build a document analysis / identification app using Azure Document Intelligence. Customize the application further to meet your needs.

Here’s the Github repo - https://github.com/prashanth1k/docformist.

All of this was done within 2 hours - thanks to AI. The era of personal applications is here.

How Auth was done earlier?

• Manual Token Generation: Developers manually created JWT tokens using libraries like System.IdentityModel.Tokens.Jwt and hardcoded key management.
• No Built-in User Management: Handling user registration, login, password hashing, and role management required custom code.
• Manual Claims Management: Claims (roles, permissions) were added to JWT tokens manually, increasing the risk of errors.
• Token Validation: Developers manually validated JWT tokens in each request, including signature, expiration, and claims validation.
• No Built-in Features for Role Management: Handling user roles and claims for authorization were complex

It’s not uncommon to see code like this even today (there continue to be valid use cases, of course).

var key = new SymmetricSecurityKey(Encoding.UTF8.GetBytes("YourSecretKey"));
var creds = new SigningCredentials(key, SecurityAlgorithms.HmacSha256);

var claims = new[]
{
    new Claim(JwtRegisteredClaimNames.Sub, "username"),
    new Claim(JwtRegisteredClaimNames.Jti, Guid.NewGuid().ToString())
};

var token = new JwtSecurityToken(
    issuer: "yourdomain.com",
    audience: "yourdomain.com",
    claims: claims,
    expires: DateTime.Now.AddMinutes(30),
    signingCredentials: creds);

// create token
var tokenString = new JwtSecurityTokenHandler().WriteToken(token);


// time passes..
//
// time now to validate in another part of the code..
// validate token

services.AddAuthentication(options =>
    {
        options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
        options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
    })
    .AddJwtBearer(options =>
    {
        options.TokenValidationParameters = new TokenValidationParameters
        {
            ValidateIssuer = true,
            ValidateAudience = true,
            ValidateLifetime = true,
            ValidateIssuerSigningKey = true,
            ValidIssuer = "yourdomain.com",
            ValidAudience = "yourdomain.com",
            IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes("YourSecretKey"))
        };
    });

Roll-in Identity

• Built-in User and Role Management
  • Identity provides a complete user management system with built-in support for user registration, login, password hashing, and role management.
  • No need to manually store user credentials or roles in the database; Identity handles it through its own entity models (e.g., IdentityUser, IdentityRole).
• Automatic Token Generation and Validation
  • Identity integrates easily with JWT authentication, automatically handling token generation, validation, and expiration management.
  • Developers no longer need to manually create or validate tokens using JwtSecurityTokenHandler.
• Claims and Role Management: Manage claims and roles through simple, high-level APIs (UserManager, RoleManager), which abstract away the complexity of managing claims in the token payload manually.
• Out-of-the-Box (“OOB”) Security
  • OOB industry-standard security practices such as password hashing (with customizable password policies) and token expiration management - reduce security risks.
  • Built-in support for multi-factor authentication (MFA), account lockout, and password recovery without custom implementations.
• Simplified Middleware Integration
  • Easily integrated into the ASP.NET middleware pipeline - no need to manually configure authentication schemes or token validation parameters.
  • Built-in Identity middleware automatically manages authentication cookies and tokens.
• Flexible Data Store: Work with multiple data stores (SQL Server, MySQL, etc.) by default
• Support for External Authentication Providers: Integrating OAuth providers like Google, Facebook, and Microsoft is simplified

Identity in Action: A Simple Demo

Create a new project..

dotnet new webapi -n dotnet-api-auth-demo

Add the below packages..

• Microsoft.EntityFrameworkCore.Sqlite
• Microsoft.EntityFrameworkCore.Design
• Microsoft.EntityFrameworkCore.Tools
• Microsoft.AspNetCore.Identity.EntityFrameworkCore

The first three are for Entity Framework Core and for using a SQLite database. The last one is for Identity.

Create the ApplicationDbContext class like as God intended. However, inherit from IdentityDbContext this time.

using Microsoft.AspNetCore.Identity;
using Microsoft.AspNetCore.Identity.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore;

public class ApplicationDbContext : IdentityDbContext<IdentityUser>
{
  public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options) : base(options)
  {
  }
}

IdentityDbContext will add magic that we are about to experience.

Add three lines of code in Program.cs.

builder.Services.AddAuthorization();
builder.Services.AddIdentityApiEndpoints<IdentityUser>().AddEntityFrameworkStores<ApplicationDbContext>();
// add the above lines before initializing `app`

var app = builder.Build();

// add the below line after `app` is initialized
app.MapIdentityApi<IdentityUser>();

• AddEntityFrameworkStores shows which database to use. In this case, we are using SQLite and using the main ApplicationDbContext itself. We could have used a different auth database as easily.
• MapIdentityApi automatically adds the necessary routes for Identity.

Since we have no other endpoints, add auth to the default weatherforecast endpoint using RequireAuthorization().

app.MapGet("/weatherforecast", () =>
{
    var forecast = Enumerable.Range(1, 5).Select(index =>
        new WeatherForecast
        (
            DateOnly.FromDateTime(DateTime.Now.AddDays(index)),
            Random.Shared.Next(-20, 55),
            summaries[Random.Shared.Next(summaries.Length)]
        ))
        .ToArray();
    return forecast;
})
.WithName("GetWeatherForecast")
.WithOpenApi().RequireAuthorization();

Do a build to ensure there are no errors.

dotnet build

Migrate the database.

dotnet ef migrations add InitAuth -o Data/Migrations
dotnet ef database update

Run the application.

dotnet run

Navigate to http://localhost:5001/swagger/index.html to see the Identity endpoints.

You can test the auth endpoints using Swagger, or as I prefer - Insomnia/Postman REST clients.

First, do a GET to http://localhost:5001/weatherforecast to see a 401 Unauthorized response.

Now, call the register to create a user, and subsequently, the login endpoint to get a token.

POST http://localhost:5001/register

{
  "email": "a1@a.com",
  "password": "Pass@123"
}

POST http://localhost:5001/login

{
  "email": "a1@a.com",
  "password": "Pass@123"
}

You should get the token response.

{
  "tokenType": "Bearer",
  "accessToken": "CfDJ8AcfSlDrZbhNlphsDvuO8gDgQty5M...",
  "expiresIn": 3600,
  "refreshToken": "CfDJ8AcfSlDrZbhNlphsDvuO8gD60O..."
}

Use the access token to call the weatherforecast endpoint and see the glorious response.

We have just scratched the surface of Identity in .NET. There is a lot more to explore, including:

• Account lockout/ recovery
• Password policies
• Claims and roles management
• Customizing Identity
• Using external providers
• Role-based authorization
• Multi-factor authentication

Conclusion

Check out the full code on GitHub.

Let us change that by using a few good editor tools and packages.

PHP Intelephense extension

I use VSCode and there is no better auto completion than PHP Intelephense. It is fast, reasonably accurate and provides more than few options for playing around the code.

Laravel Extra Intellisense extension

Install Laravel Extra Intellisense extension for -

• Route names and parameters
• Suggestions in middlewares
• Views

Laravel Snippets extension

Install Laravel Snippets extension for Laravel snippets.

Laravel Blade Snippets extension

Install Laravel Blade Snippets extension for Laravel Blade snippets.

Laravel IDE Helper package

Install [Laravel IDE Helper] https://github.com/barryvdh/laravel-ide-helper for better auto completion in Laravel.

composer require --dev barryvdh/laravel-ide-helper

Address Auto Complete Annoyances for Laravel and PHP in VSCode

When you open Laravel code, you will see autocomplete suggestions, but you will see a lot more than desired. The suggestions -

• lacks context
• has generic suggestions

There are a few things you can do -

• Ctrl + Shift + p > Go to Preferences > Open Settings (UI). Search for editor.snippetSuggestions and set it to bottom
• Next, search for php.suggest.basic and set it to false

Set Alias for php artisan

You will be typing php artisan at least a hundred times a day - better to save all the calories by setting an alias or a shortcut.

In Powershell, open your default profile -

notepad $Profile

Enter the below to set alias to pa-.

function pa { php artisan $args }

If you use wsl, you would be using bash or zsh. Just edit your .bashrc or .zshrc file to add an alias.

vim ~/.bashrc
# .. or
# vim ~/.zshrc

Add the below line -

alias pa='php artisan'

Now you can type pa instead of php artisan with how many ever arguments and it should work seamlessly.

Use Laravel debugbar.

Install the debugbar in your Laravel project.

composer require barryvdh/laravel-debugbar --dev

Ensure your .env file has APP_DEBUG=true and APP_ENV=local.

Start your Laravel server and you should see the debugbar at the bottom of the page. See the documentation for more options.

SVG images have the advantage of -

1. Being vector based, so it can be scaled to any size
2. “Is just text”
3. Can be styled
4. Small in size!

Using SVG Icons: Why do that?

You see in the old west, we used to have icons like this -

<i class="fa fa-user"></i>

With libraries like Vuetify, the above statement looks like this -

<v-icon>mdi-account</v-icon>

The code is easy to use, but you have to depend on the library to provide you the icon. You are also dependent on the library for applying changes to color, size, and probably even for the freaking dark mode.

With SVG, you can use the icon from any source, and apply any styling you want.

Using SVG Icons

Getting started with SVG icons is pretty easy.

1. Identify the SVG
2. Copy the SVG and paste it directly in a Vue component (OR) Save the SVG in a file and import it in a Vue component

As always the modern web makes using SVG icons trivial. 😜

Method 1: Use direct links to icons

You can use the SVG icon directly in your Vue component.

An example using icongram ie below.

<template>
  <img
    src="https://icongr.am/material/airplane-takeoff.svg?size=128&color=4023d1"
  />
</template>

The parameters are self-explanatory. You can see the image, change the size / color and see how URLs are constructed for various icons from the icongram website (linked to Material icons, it can be anything really).

Others doing the same fun stuff -

• Ionicons
• Iconify
• CSS icons - icons are also available as SVG

There is an easier way to use the icons directly. Use something like a NuxtIcon and set it up as a plugin.

And, voila -

<template>
  <!-- ... -->
  <Icon name="uil:github" color="black" />
  <!-- ... -->
</template>

Method 2: Download and use icons

Any of the sites outlined in the previous section allow you to download the SVG icon. Just save the file in your local public / assets folder and use it in your Vue component.

More example sites providing SVG downloads -

• Heroicons
• Feather
• SVG Repo
• Material

Once the images are available in your project, using them should be as simple as -

<template>
  <img src="images/airplane-takeoff.svg" />
</template>

Another way to do this (probably more efficient) is to create a pass through Vue component that renders the SVG. This way you can play around with the size/colors etc. in a more uniform way.

Example Vue component to render a given SVG -

<template>
  <svg
    :viewBox="viewBox"
    xmlns="http://www.w3.org/2000/svg"
    :width="width"
    :height="height"
    class="svg-icon"
  ></svg>
</template>

<script setup>
  import { defineProps, computed, Component } from "vue";

  defineProps({
    viewBox: { type: String, default: "0 0 24 24" },
    width: { type: String, default: "24" },
    height: { type: String, default: "24" },
  });
</script>

Invoke the component as any other Vue component. This approach has the advantage of consistency in the way you render the SVG icons - e.g., use similar sizes, color, etc.

Method 3: Just paste the SVG

As an alternative to downloading icons, just paste the SVG in your Vue component.

For e.g. -

<svg
  data-slot="icon"
  fill="none"
  stroke-width="1.5"
  stroke="currentColor"
  viewBox="0 0 24 24"
  xmlns="http://www.w3.org/2000/svg"
  aria-hidden="true"
>
  <path
    stroke-linecap="round"
    stroke-linejoin="round"
    d="m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z"
  ></path>
</svg>

As outlined in the previous section, you can also paste the SVG in a separate Vue component and use that component in your project.

Imagine the below situations -

1. You are rendering a list of products and their images. The image may be stored in local folder or coming in from S3/comparable infrastructure
2. You want to change image / make image interactive. For e.g., users select fruits and the corresponding fruit image gets added in a basket
3. You want to preprocess the image in some shape and form at runtime. For e.g., watermarking the image

Rendering an Image

Typically, you render images with -

<img src="https://example.com/images/apple.png" />

This assumes that images/apple.png exists in public folder or available publicly.

Rendering a Dynamic Image

While providing images from a public location is great (& should be preferred), sometimes we need the images to be “processed” during build, or make it “dynamic” in some way or the other (e.g., watermarked on the go). I typically use assets/images for images that need not be publicly exposed - but any folder should work well.

Pointing images to the assets or some other folder is straight-forward in Nuxt2.

<template>
    <img :src="require(`~/assets/images/${apple.image}`)"/>
</template>

require works since Nuxt2 uses Webpack, which will get the import image dynamically and make it available for rendering on the page.

Nuxt3 and Vite do not work in the same way. There is more than one way to render dynamic images in Nuxt 3.

1. Using glob

As mentioned here, you can use glob to feed the right input to the image -

<template>
  <img :src="fruit_name" />
</template>

<script setup>
  import { filename } from 'pathe/utils';

  const glob = import.meta.glob('~/assets/images/*.png', { eager: true });
  const images = Object.fromEntries(
    Object.entries(glob).map(([key, value]) => [filename(key), value.default])
  );

  const fruit_name = 'apple';
</script>

This option works, but is tiring to look at. There may also be performance issues if there are large number of images.

Note that the issue described here exists for local images. Remote images provide public URLs that can be rendered directly.

2. Use Vite require plugin

Bring the usability of Webpack require to Vite using vite-plugin-require plugin.

Install the plugin -

npm install -D vite-require-context

Change vite.config.js to add the plugin -

import vitePluginRequire from "vite-plugin-require";

export default {
  // ...
  plugins: [vitePluginRequire()],
  // ...
};

Nuxt (specifically NuxtImg) provides a helpful useImage composable.

You should now be able to do -

<template>
  <NuxtImg :src="require(fruit_image_url)" />
</template>

<script setup>
  const fruit_image_url = "~/assets/images/apple.png";
</script>

Conclusion

While both options work, do note that -

1. Use public for images that will not change. This option is easier and likely to be more performant
2. Else, use one of the above options based on your use case

I had not been quite sold on Astro for the stuff that I typically do.

• I tend to focus more on SPA-like apps. Am a fan of Vue, of course
• Hugo is more than enough as SSG. While I absolutely have no clue what I do there 90% of the time (or is it more like 99%?), it just works and works blazingly fast

Being a stickler to “try everything that is recommended on Twitter”, I could not continue the state of not jumpin on the Astro train for long. So, here we are.

What is Astro?

The official astro.build website says:

The web framework for content-driven websites.

The categories listed out there include -

• Marketing & other content sites
• Blogs
• eCommerce
• Portfolios
• Documentation (not featured, I see this as a good thing)

Astro is not the typical SPA, MPA or SSG.

You use Astro to -

• Build your app in components and connect all of them
• Deliver pages to client with no or minimal JS
• Use your favorite framework (React, Vue, Svelte, Preact, etc) for SSR or for interactivity

In terms of how all of that comes together -

• Astro creates static pages for static or dynamic routes
• Astro components and pages, as well as any of the components of the frameworks you use, are compiled to static pages. Addition of different frameworks in different pages or even on the same page does not necessarily mean performance impact .. if everything is server rendered
• Client interactivity can be with any framework of your choice, or with JS
• Get content from Markdown etc. or from external sites
• Astro provides many features (e.g. vue transitions, routing, image optimization, etc.) out of the box

Focus on developer experience and content sites means there are ** a lot of ** amazing features -

• Free and paid themes
• Many integrations. Includes integrations to CMS (of course), plugins to speedup deployment on AWS (e.g. SST)
• Integrations with backend services like Turso, Supabase, etc.

The below image on performance speaks volumes.

Create a blog using Astro

Let us get back on the topic at hand.

Create a blog by issuing the below command -

pnpm create astro@latest

Select the right options thereon. I chose the blog template with some dummy content for demo purposes.

Run the app -

pnpm dev

And, voila..

If I was honest, there is nothing more to say. But, I will continue blabbering on since creation of a blog with just one command is just crazy.

What have we created so far?

The structure of the application is inline with the expectations of a typical JS app -

1. public directory with all static content
2. src directory with all the code
3. src/page directory with all pages. You will see a curios markdown like header in the page that includes Javascript code. This is the frontmatter that is used to import components, data, etc. into the page. For e.g., see pages/index.astro -

   ---
   import BaseHead from '../components/BaseHead.astro';
   import Header from '../components/Header.astro';
   import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
   ---
   
   <!doctype html>
   <html lang="en">
       <head>
           <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
       </head>
       <body>
           <Header title={SITE_TITLE} />
           <main>
               <h1>🧑‍🚀 Hello, Astronaut!</h1>
               <p>
                   Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This
                   template serves as a lightweight, minimally-styled starting point for anyone looking to
                   build a personal website, blog, or portfolio with Astro.
               </p>
               <!-- snip -->
           </main>
       </body>
   </html>
   

4. Components that are imported in pages (or within other components) in src/components
5. src/layouts and src/styles directories that supplement pages & components
6. src/content directory with all content. Static content is seamlessly integrated into the app. For e.g., see pages/blog/index.astro -

   ---
   import Footer from '../../components/Footer.astro';
   import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
   import { getCollection } from 'astro:content';
   
   const posts = (await getCollection('blog')).sort(
       (a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
   );
   ---
   <!-- lot of lines -->
   posts.map((post) => (
                       <li>
                           <a href={`/blog/${post.slug}/`}>
                               <img width={720} height={360} src={post.data.heroImage} alt="" />
                               <h4 class="title">{post.data.title}</h4>
                               <p class="date">
                                   <FormattedDate date={post.data.pubDate} />
                               </p>
                           </a>
                       </li>
   					))
   <!-- more lines -->
   

7. Seamless styling scoped to the components or applied globally

Gotta say, I love the - - 📄simplicity - 🧩component architecture that just focuses on what is needed - no fluff

Remember all of this came with the template, I have not done anything yet.

Level-up the blog

Add a sitemap

Add a sitemap with a plugin. A single line configuration should be good in most cases-

// astro.config.mjs
export default defineConfig({
  // ...
  site: 'https://awesomesite.club',
  integrations: [sitemap()],
});
// ...

Embed videos, tweets, etc. in the blog

Use one of the many plugins (e.g., astro-embed) -

---
# src/content/examples/page.mdx
title: My MDX page with embed components
---

import { Tweet, Vimeo, YouTube } from 'astro-embed';

Embed a tweet _in Markdown_!

<Tweet id="https://twitter.com/astrodotbuild" />

<YouTube id="https://youtu.be/gxBkghlglTg" /

Make SEO better

Use a plugin like astro-seo and some code to level-up your SEO game.

Add Comments

Add Disqus or Utterances to add comments to your blog.

Add Analytics

Add Google Analytics or Vercel Analytics to add analytics to your blog.

Leverage Partytown plugin to lazy load everything.

Conclusion

Astro is just spectacular and consider me intrigued.

I am half-tempted to switch my blog to Astro - am sure that will take me down yet another rabit hole.

Vue has always been a tool that I depend on. Vue is quite easy to understand, use and build apps with. Nuxt just makes it even easier.

I found React to be too verbose, generally more complicated, and not fun to work with. With NextJS 14, React Server Components, and the ** huge ** number of NextJS templates out there (not to mention v0.dev), I could kinda see how my workflow could be so much more easier.

The big question though was - “does Next+React really deliver the goods for me”. And thus began a long time “investing” effort to find out what should be my stack of choice for the foreseeable future.

tldr; It does not matter. Stick to the tooling that you like.

Before we move forward, for those of you who want all the other libraries & frameworks considered - yes, I do code in them from time to time. No, they cannot be my go-to choice since I need to create things quickly lest I lose my interest and having lot of people out there simply means I can look forward to more answered questions and getting away with my scrappy “expertise”.

The Need

I am largely interested in building applications that help organize data, and provide ways to get things done in general. While not strictly focused on enterprises, they will border on things like -

1. CRM/ERP’s of the world
2. Project organization
3. People and task management for specific focus areas like recruitment, vendor management, etc.

My typical apps have -

1. Forms
2. Data tables
3. A few charts, reports and such

Indirectly, I need -

1. Ability to switch b/w real-time and classic fetching of updates
2. Easier state management
3. Ability to create a lot of reusable components
4. Ability to integrate with many libraries that can integrate well with documents, tables, reports and so forth

The Comparison Factors

Given the need is so generic and seem straight-forward at the outset, it is easy to get carried away. I decided to focus on a few seemingly random factors that I find useful or problematic.

1. Component Structure
2. Server-Side Rendering & Data Fetching
3. State Management
4. Performance
5. Developer Experience

Component Structure

Components are building blocks of any app. They are the ones that make up the UI and the logic behind it.

Creating components in Vue has been a breeze. The single file component structure is a joy to work with.

• Everything is neat and organized - from code, to styles, to the HTML
• The separation of concerns is easy to manage
• Code for reactive UI looks intuitive and easy to understand
• Reusable code can be managed through Components and Services. Auto imports in Nuxt make it even easier to use them

<template>
  <div>
    <h1> {{ title }} </h1>
  </div>
</template>

<script setup>
const title = 'Hello World'
</script>

React is not far off from here -

export default function App() {
  return (
    <div className="App">
      <h1>Hello World</h1>
    </div>
  );
}

A somewhat more complexified version can be -

import React, { useState } from 'react';

function TodoList() {
  const [items, setItems] = useState([]);
  const [newItem, setNewItem] = useState('');

  const addItem = () => {
    setItems([...items, newItem]);
    setNewItem('');
  };

  return (
    <div>
      <input value={newItem} onChange={e => setNewItem(e.target.value)} />
      <button onClick={addItem}>Add</button>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

Vue still manages to look clean -

<template>
  <div>
    <input v-model="newItem" />
    <button @click="addItem">Add</button>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';


const items = ref([]);
const newItem = ref('');

const addItem = () => {
    items.value.push(newItem.value);
    newItem.value = '';
};

</script>

I had a hard preference for Vue structure (think Options API), but not any more.

• Reactivity is easy to write & manage in Vue. Just use ref / reactive and you are good to go.
• Intuitive code in templates and script. Cleaner separation of concerns
• Bidirectional data binding is a breeze
• Template helpers like v-for, v-if are a God-send

Server-Side Rendering & Data Fetching

React Server Components make it easier to write server-side code and have the right mix of client and server logic in the same component.

For example, I could fetch posts data from server and send the HTML to the client.

import { useEffect, useState } from 'react';

export default function PostList() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(data => setPosts(data));
  }, []);

  if (posts.length === 0) {
    return <div>Loading...</div>;
  }

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </li>
      ))}
    </ul>
  );
}

No haggling around with API calls, no moving around JS to get basic things done, and more control over how/who fetches data.

If I use Nuxt for the same problem, here’s how the component looks like -

<script setup>

const { data: posts } = await useAsyncData(() => $fetch('https://jsonplaceholder.typicode.com/posts'))
</script>

<template>
    <div>
        <div v-for="post in posts" :key="post">
            {{ post }}
        </div>
    </div>
</template>

See Nuxt SSR.

RSC is a hard win for React. Next components are server by default, and mixing server / client components without a care for the world is enticing. While Nuxt makes it easy to build data fetching on top of Vue, it just does not compare to the magic of RSC.

That said, I really love the Vue way of doing things -

• don’t worry about useEffect and other thousand hooks
• no easy foot-guns causing performance issues or code spaghetti
• clean, easy to understand template

Many other SSR and data fetching features exist, but are not super important for me.

State Management

Using state management in React can be tricky. There are many ways to do it, and each has its own pros and cons. Let us see an example of a simple todo app using Zustland.

The component will look something like this -

import React from 'react';
import useStore from './store';

const TodoApp = () => {
  const todos = useStore(state => state.todos);
  const addTodo = useStore(state => state.addTodo);
  const toggleTodo = useStore(state => state.toggleTodo);
  const removeTodo = useStore(state => state.removeTodo);
  const [newTodo, setNewTodo] = React.useState('');

  const handleAddTodo = () => {
    addTodo(newTodo);
    setNewTodo('');
  };

  return (
    <div>
      <input value={newTodo} onChange={e => setNewTodo(e.target.value)} />
      <button onClick={handleAddTodo}>Add Todo</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            <input type="checkbox" checked={todo.completed} onChange={() => toggleTodo(index)} />
            {todo.text}
            <button onClick={() => removeTodo(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoApp;

.. and the store -

import create from 'zustand';

const useStore = create(set => ({
  todos: [],
  addTodo: (text) => set(state => ({ todos: [...state.todos, { text, completed: false }] })),
  removeTodo: (index) => set(state => {
    const newTodos = [...state.todos];
    newTodos.splice(index, 1);
    return { todos: newTodos };
  }),
}));

export default useStore;

In the Vue world, Pina (or even Nuxt state mgt.) is quite easy to use. The component is simpler but comparable -

<template>
  <div>
    <input v-model="newTodo" type="text">
    <button @click="addTodo">Add Todo</button>

    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo.text }}
        <button @click="removeTodo(index)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useStore } from './store';

export default {
  setup() {
    const store = useStore();
    const newTodo = ref('');

    const addTodo = () => {
      store.addTodo(newTodo.value);
      newTodo.value = '';
    };

    return {
      todos: store.todos,
      newTodo,
      addTodo,
      removeTodo: store.removeTodo,
    };
  },
};
</script>

Here’s how the store looks like -