Errong Leng

  Building the qz-l AI Chat Assistant Using Google Gemini 2.5 Flash Lite + Next.js Learn how qz-l.com's new AI chat assistant works using Gemini 2.5 Flash Lite, Next.js API routes, and function calling --- all free on the Google AI tier. November 20, 2025 • By qz-l team 🤖 Building the qz-l AI Chat Assistant Using Google Gemini 2.5 Flash Lite + Next.js I recently added a new feature to qz-l.com: an AI-powered chat assistant that can shorten URLs, show analytics, search blog posts, and help users navigate the service --- all through natural language. This post explains how the assistant works under the hood using the modern @google/genai SDK and the free-tier model gemini-2.5-flash-lite, which runs entirely at zero cost within Google's usage limits. 🚀 Why Build an AI Assistant? qz-l's mission is simple: privacy-first URL shortening with analytics. But users often ask: "How do I create a short link?" "Where's the dashboard?" "Can I delete a URL?...

  How to Set Up Giscus Comments for Your Website If you want to add a clean, GitHub-powered comment system to your website,   Giscus   is one of the best options. This guide walks you step-by-step through everything required: Creating a comments repository Enabling Discussions Installing the Giscus GitHub App Getting your   repoId   and   categoryId   via GitHub GraphQL Configuring the   <Giscus />   component in your site By the end, you’ll have a fully working comment system—powered entirely by GitHub Discussions. 1. Create a Repository for Storing Comments Create a new GitHub repository dedicated to comments: Q-Z-L-Corp/giscus-comments This is where all the comments from your website will be stored as   GitHub Discussions . 2. Enable GitHub Discussions for the Repo Go to: Settings → General → Features → Discussions → ✔ Enable Without Discussions enabled, Giscus cannot store or load comments. 3. Install the Giscus GitHub App Gisc...

  Building a Real-Time Analytics Dashboard for URL Shorteners One of the most powerful features of a URL shortener is the ability to track and analyze how your links perform. Today, we're sharing how we built qz-l's comprehensive analytics dashboard—a system that gives users instant insights into their traffic patterns, audience demographics, and referral sources. The Challenge When we started building the analytics feature, we knew we needed: Fast data retrieval : Users want instant results when they search for a link Comprehensive insights : Not just page views, but traffic sources, device types, browsers, and time patterns Beautiful visualizations : Raw numbers are boring; interactive charts tell the story Mobile-responsive design : Analytics should work everywhere User agent intelligence : Convert cryptic UA strings into readable "Chrome on macOS" format Architecture Overview Database Schema The foundation is a single  link_visits  table that captures everything a...

Building a Markdown-Based Blog System with Next.js When we decided to add a blog to https://qz-l.com/blog , we wanted something simple, fast, and easy to maintain. No complex databases, no heavy CMS—just markdown files and static generation. Why Markdown? Markdown is perfect for developer-focused projects because: Simple format : Easy to write and version control No database needed : Store posts as files in your repository Fast : Static generation means instant page loads Flexible : Can be extended with custom plugins Searchable : All content is in plain text Our Architecture File Structure app/blog/ ├── page.tsx # Blog listing page ├── [slug]/ │ └── page.tsx # Individual blog post page └── posts/ ├── welcome.md ├── markdown-blog-setup.md └── your-post.md Frontmatter Format Each markdown file starts with YAML frontmatter containing metadata: --- title: Your Post Title description: Brief description for listings date: 2025-11-16 author: Your Name ---...