DEV Community: Karthikeyan

I Missed 3 Hackathons This Year. So I Built DevPulse to Fix That.

Karthikeyan — Mon, 02 Mar 2026 08:00:41 +0000

This is a submission for the DEV Weekend Challenge: Community

The Problem

It happened again last week.

I was scrolling through Twitter and saw someone post their submission for a hackathon I'd never heard of. Great prizes. Interesting prompt. Deadline: yesterday.

I'm a Senior Software Engineer. I follow hundreds of devs. I'm on Reddit, DEV.to, Discord servers, newsletters. And somehow, I still missed it.

It's not just hackathons either. New frameworks drop and I'm the last to know. A tool that would've saved me 10 hours of work existed for 3 months before I stumbled across it. The dev world moves fast, and keeping up feels like a full-time job on top of an already full-time job.

I don't need more noise. I need a signal.

What I Built: DevPulse 🗞️

DevPulse is a personalized AI briefing tool for developers. You tell it your stack and what you care about — and it surfaces exactly what's relevant to you, right now.

No generic "top 10 tools of the week" listicles. No algorithm trying to sell you ads. Just a clean, focused briefing built around your world as a developer.

What it shows you:

🔧 New Tools & Frameworks — relevant to your stack
🏆 Active & Upcoming Hackathons — so you never miss one again
📦 Notable OSS Releases — the repos worth watching
🔥 Community Buzz — what devs are actually talking about

How it works:

Tell DevPulse your stack (React, Python, Go, AI/ML — whatever you work with)
Pick your interests (hackathons, OSS, career, new frameworks, etc.)
Choose your style: Quick Scan or Deep Dive
Get your briefing — personalized, AI-generated, ready in seconds

Under the hood, it uses Gemini with web search grounding to pull fresh, relevant information — not stale training data.

The Community It's For

This is built for the dev Twitter / online dev community — the people who are constantly building, learning, and shipping. The ones who care about what's next, not just what's now.

Whether you're a solo indie hacker, a team lead at a startup, or someone grinding through hackathons on weekends — DevPulse is for you if you've ever felt like the dev world is moving faster than you can track.

Tech Stack

Frontend: React + Tailwind (clean, dark, Linear-inspired UI)
AI: Google Gemini 2.5 Flash with web search grounding
Rate limiting: API key per user — your key, your quota, your privacy. No black-box backend holding your data.

What I Learned

The hardest part wasn't the code. It was figuring out what not to build.

My first instinct was to build something that aggregated everything — every newsletter, every RSS feed, every subreddit. But that's just recreating the noise problem with extra steps.

The insight that unlocked it: personalization is the feature. A briefing about Rust releases is useless to me if I write Python. Hackathon alerts are noise if I'm not looking to compete. The value isn't in the information — it's in the filtering.

Gemini's ability to reason about relevance and generate structured, scannable output made this possible to build in a weekend.

Screenshot

Try It

https://dev-pulse-ten.vercel.app/
https://github.com/skarthikeyan96/dev-pulse

Drop your stack into DevPulse and let me know what you think in the comments. And if you know of a hackathon I should add to my calendar — hit me up. 😄

Built for the "Build for Your Community" weekend challenge. The community: every developer who's ever felt like the world moved on without them.

🏃 StrideBoard — A Community Hype Wall for Runners

Karthikeyan — Sun, 01 Mar 2026 13:28:55 +0000

This is a submission for the DEV Weekend Challenge: Community

The Community

Runners. All of them — from the person chasing their first 5K finish to the ultramarathoner logging 100-mile weeks. Whether you're training for TCS World 10K Bengaluru, a local park run, or a marathon on the other side of the world, every runner carries a goal that deserves to be said out loud.

I'm currently training for the TCS World 10K Bengaluru and I wanted a place where runners could declare their goals publicly — and have the community send energy back. Race day is personal, but the journey to the start line is communal.

StrideBoard is built for all of them.

What I Built

StrideBoard — a community race goal hype wall for runners everywhere.

Runners can drop their race goal on the board — their target time, goal type, target pace, and a short message about what's driving them. The community can then 🔥 hype each card. It's part bulletin board, part leaderboard, part pre-race ritual.

Features

🎯 Goal Cards — post your race goal with target time, pace, and a motivation message
🔥 Hype Button — one-tap community support, fully anonymous count
🎭 Goal Types — Personal Best, Sub-60, First Ever Race, Just Finish Strong, Injury Comeback
🕶️ Privacy by default — auto-generated runner nicknames (like SwiftGazelle47) with a one-click anonymous mode so no real names are ever stored
📊 Community Stats — runners in, total hypes, sub-60 chasers, first-timers
🏆 Top Hyped Leaderboard — the most-supported runners float to the top
⏱️ Live Race Countdown — days to your target race + a 16-week training progress bar
📡 Real-time Redis backend — shared state across all users, no stale data

Demo

🔗 https://strideboard-rose.vercel.app/

Code

skarthikeyan96 / strideboard

StrideBoard 🏃

A community hype wall where runners everywhere can post their race goals and get hyped up by the crowd. 🔥

Deploy to Vercel

1. Get Upstash credentials

Go to console.upstash.com and create a free Redis database
Choose the Mumbai (ap-south-1) region for lowest latency
Copy the REST URL and REST Token from the database page

2. Deploy

npm i -g vercel    # if you don't have it
vercel             # follow prompts — deploy as-is, no framework

3. Get OpenAI API key (content moderation)

Go to platform.openai.com and sign in
API keys → Create new secret key
The app uses the Moderation API only (no ChatGPT usage)

4. Add environment variables

In the Vercel dashboard → your project → Settings → Environment Variables, add:

Name	Value	Required
`UPSTASH_REST_URL`	`https://xxxx.upstash.io`	✅
`UPSTASH_REST_TOKEN`	`AXxxxx...`	✅
`OPENAI_API_KEY`	Your OpenAI API key (for moderation)	✅
`ALLOWED_ORIGIN`	`https://your-app.vercel.app`	Optional (defaults to your Vercel URL)

…

View on GitHub

Screenshot

How I Built It

This was a deliberately lean stack — the goal was to ship fast and keep it deployable in one command.

Tech Stack

Layer	Choice	Why
Frontend	Vanilla HTML/CSS/JS	Zero build step, fast to iterate
Backend	Vercel Serverless Function	Token proxy — credentials never hit the browser
Database	Upstash Redis (REST API)	Serverless, Mumbai region, instant reads
Deployment	Vercel	One `vercel` command, done
Fonts	Bebas Neue + DM Mono	Race bib aesthetic — felt right for runners

Architecture

The whole app is a single index.html served from Vercel's CDN. All Redis commands go through a thin /api/redis.js serverless function that proxies requests with an allow-list (LRANGE, LPUSH, HGETALL, HINCRBY only). The Upstash token never touches the browser.

Browser → /api/redis (Vercel Function) → Upstash Redis

Redis schema:

stride:cards — a Redis List. Each card is LPUSH'd as JSON so LRANGE 0 99 always returns newest-first.
stride:hypes — a Redis Hash. Each field is a card ID, value is the hype count. Incremented with HINCRBY so concurrent hypes from different users don't collide.

Hype counts are separated from card data intentionally — it means we never need to rewrite card JSON just to bump a counter.

Privacy Decisions

One thing I thought carefully about was PII. A running community is a tight-knit group — real names on a public board felt uncomfortable.

The solution:

Auto-generated nicknames on load (20 adjectives × 20 animals × 90 numbers = 36,000 combos). No real name is ever suggested.
Anonymous mode checkbox — posts as 🕶️ Anonymous Runner, the nickname is never sent to Redis at all.
Hypes are fully anonymous — just a count in Redis, no user identity attached.

Zero PII hits the database either way.

Challenges

The trickiest part was deciding how to handle hype state across sessions. Since there's no auth, I used sessionStorage to track "did this browser tab already hype this card" — which prevents double-hyping within a session without requiring login. It's a deliberate trade-off: refresh the page and you can hype again, but that felt fine for a community hype board rather than a voting system.

All writes are optimistic with rollback — the UI updates instantly and reverts if the Redis call fails.

Reflections

I usually build side projects that solve my problems. This one was different — I built it thinking about every runner who has a goal sitting in their head that they haven't told anyone yet.

The first-timers who are terrified. The comeback runners who've been off for months with an injury. The sub-60 chasers who've been trying for years. They exist in every city, in every running community, at every race.

StrideBoard is for all of them.

Whatever your race, whatever your goal — drop it on the board. The community's got you. 🏃

🙏 Thanks for reading! Would love any feedback or ideas in the comments.

DevFlow: AI-Powered Git Workflow Automation with GitHub Copilot CLI

Karthikeyan — Sat, 14 Feb 2026 05:42:05 +0000

This is a submission for the GitHub Copilot CLI Challenge

What I Built

I built DevFlow - a CLI tool that automates your entire Git workflow using GitHub Copilot CLI as its AI brain. Think of it as your AI pair programmer that handles the boring parts of Git so you can focus on writing code.

DevFlow does three things really well:

Generates commit messages from your changes using AI (no more "fix stuff" commits)
Creates PR descriptions automatically by analyzing your commits
Names branches semantically from GitHub issues

The tool was born from a simple frustration: I spend way too much time crafting commit messages and PR descriptions. I wanted to automate this, but every existing tool either used generic templates or required me to write the message myself anyway. So I built DevFlow to actually understand my code changes and generate meaningful descriptions.

Install it:

npm install -g git-devflow

Links:

🔗 GitHub: https://github.com/karthik-zoro-96/devflow-cli
📦 npm: https://www.npmjs.com/package/git-devflow

Demo

1. Smart Commit Messages

Make your changes, run devflow commit, and get 3 AI-generated conventional commit messages to choose from. Copilot analyzes your git diff and generates proper feat:/fix:/chore: messages.

2. Automated PR Descriptions

Running devflow pr create analyzes your commits, auto-pushes your branch, and creates a PR with a properly structured description including summary, changes, and testing notes.

3. Branch Naming from Issues

devflow branch create --issue 7 fetches the GitHub issue and generates a semantic branch name like feature/7-add-changelog-generation.

Core Features:

🤖 AI-powered commit message generation
📝 Automatic PR description creation
🌿 Branch naming from GitHub issues or descriptions
⚙️ AI model selection (Sonnet 4.5 / Haiku 4.5 / GPT-4.1)
🔐 Secure token storage with 600 file permissions
🚀 Auto-push branches before PR creation
💰 Smart quota management with automatic free model fallback

My Experience with GitHub Copilot CLI

Building DevFlow taught me that integrating with Copilot CLI isn't just about calling an API - it's about handling edge cases, quota limits, and shell escaping nightmares. Here's what I learned:

The Architecture: Copilot CLI as the Product

Most people use Copilot CLI during development. I used it as the product itself. Every DevFlow command pipes data to Copilot CLI and parses the response:

const diff = await git.diff();
const response = await copilot.generateCommitMessage(diff);
const commits = parseResponse(response);

Simple architecture, complex execution.

Challenge #1: Shell Escaping Hell

My first attempt at calling Copilot CLI looked innocent:

execSync(`copilot -p "${prompt}"`)

This broke immediately. Why? Git diffs contain backticks, quotes, dollar signs, and every special character bash can interpret. The prompt would either fail to parse or, worse, execute unintended commands.

First attempt at fixing: escape everything manually. Failed.

Second attempt: write prompts to temp files. Better, but cluttered with file I/O.

Final solution: Use execFileAsync with an args array instead of shell execution:

const args: string[] = [];
if (model) args.push('--model', model);
args.push('-s', '--prompt', prompt);

await execFileAsync('copilot', args, {
  maxBuffer: 1024 * 1024,
  timeout: 60000,
});

This passes arguments directly to the Copilot binary without any shell interpretation. No escaping needed. Problem solved.

Lesson: When calling external CLIs with user data, never use shell execution. Always use the args array approach.

Challenge #2: SSH Keys and Custom Hosts

I have two GitHub accounts (work and personal) with different SSH keys. My personal SSH config uses a custom host alias:

Host github-personal
  HostName github.com
  IdentityFile ~/.ssh/id_ed25519_personal

My git remote: git@github-personal:user/repo.git

DevFlow's initial regex for parsing remotes: git@github.com:user/repo.git

Result: DevFlow couldn't find my repository!

Every time I tried to create a PR, it failed with "Not a GitHub repository". I spent hours debugging before realizing the regex only matched the standard GitHub hostname.

The fix:

// Handle ANY SSH host, not just github.com
const sshMatch = url.match(/git@([^:]+):(.+?)\/(.+?)(\.git)?$/);
if (sshMatch) {
  return {
    owner: sshMatch[2],
    repo: sshMatch[3]
  };
}

Lesson: Never assume standard configurations. Developers customize everything.

Challenge #3: Quota Management

Here's what nobody tells you about building with Copilot CLI: you'll hit quota limits constantly during development.

Each test run consumed quota. I burned through my monthly allowance in two days of testing. When users hit limits, the tool would crash with cryptic errors.

My solution: Automatic fallback to free models

async execWithQuotaRetry(prompt: string): Promise<string> {
  const model = config.getCopilotModel(); // e.g., claude-sonnet-4.5

  try {
    return await this.execCopilotPrompt(prompt, model);
  } catch (error) {
    // Detect quota errors
    if (this.isQuotaError(error)) {
      console.log('⚠️  Premium request limit reached');
      console.log('   Retrying with gpt-4.1 (free)...');

      // Automatically retry with free model
      return await this.execCopilotPrompt(prompt, 'gpt-4.1');
    }
    throw error;
  }
}

When the premium model fails due to quota, DevFlow automatically retries with GPT-4.1 (free tier). Users get a gentle warning and keep working. No crashes.

I also added model cost visibility:

🤖 Model: claude-sonnet-4.5  Balanced  ·  1 premium request(s) per prompt

Users can see exactly what they're spending before each request.

Lesson: Plan for quota limits from day one. Free model fallbacks aren't nice-to-have, they're essential.

Challenge #4: Parsing AI Responses

Copilot CLI doesn't return structured JSON - it returns natural language text. Parsing this reliably is harder than it sounds.

For commit messages, I asked for this format:

1. feat: add user authentication
2. fix: resolve login bug  
3. chore: update dependencies

What I got back varied wildly:

Sometimes numbered lists
Sometimes markdown lists with -
Sometimes just sentences
Sometimes with bold markdown **

My solution: Multiple parsing strategies

parseCommitMessages(response: string): string[] {
  const lines = response.split('\n');

  for (const line of lines) {
    // Try pattern 1: "1. message"
    let match = line.match(/^\d+[\.)]\s*(.+)$/);
    if (match) messages.push(stripMarkdown(match[1]));

    // Try pattern 2: Direct conventional format
    match = line.match(/^(feat|fix|chore)(\(.+?\))?: .+/i);
    if (match) messages.push(stripMarkdown(line));

    // Try pattern 3: "- message"
    match = line.match(/^[-*]\s+(.+)$/);
    if (match) messages.push(stripMarkdown(match[1]));
  }
}

Lesson: AI output is unpredictable. Always have fallback parsing strategies.

Challenge #5: Silent Failures

Copilot CLI sometimes fails with zero error output. The process just exits with code 1 and nothing in stderr.

This was a nightmare to debug. Users would see "unknown error" with no explanation.

My solution: Read Copilot's log files

private readLatestCopilotLog(): string | undefined {
  const logDir = join(homedir(), '.copilot', 'logs');
  const files = readdirSync(logDir)
    .filter(f => f.startsWith('process-'))
    .sort()
    .reverse();

  const content = readFileSync(join(logDir, files[0]), 'utf-8');
  const errorLines = content
    .split('\n')
    .filter(line => /\[ERROR\]/.test(line));

  // Return the actual error message
  return errorLines[errorLines.length - 1];
}

When Copilot fails silently, DevFlow reads the most recent log file and extracts the actual error. This revealed authentication issues, model availability problems, and network errors that stderr didn't show.

Lesson: When stderr is empty, check log files. They often contain the real error.

What Went Right

Despite all the challenges, some things worked beautifully:

1. Copilot's natural language understanding

I didn't need to fine-tune prompts extensively. "Generate 3 conventional commit messages" worked on the first try. The quality was genuinely impressive.

2. The execFile approach

Once I switched from shell execution to direct args passing, 90% of my bugs disappeared.

3. Fallback strategies

Having rule-based fallbacks meant DevFlow never crashes. When AI fails, it falls back gracefully.

4. Model cost transparency

Showing users exactly what each request costs builds trust and helps them manage quota.

The Stats

4 days to build
15 quota limit errors encountered and fixed
3 complete rewrites of the SSH URL parser
~600 lines of TypeScript
100% uptime with fallbacks (never crashes)

What I'd Do Differently

1. Start with execFile from day one

Don't waste time on shell escaping. Go straight to the args array approach.

2. Build quota monitoring earlier

I added model cost display as an afterthought. Should have been there from the start.

3. Test with weird SSH configs immediately

I only discovered the custom host issue when deploying. Should have tested edge cases earlier.

4. Read Copilot CLI docs twice

I missed useful flags and features because I skimmed the docs. RTFM saves time.

The Magic Moment

Despite all the debugging pain, there was one moment that made it all worth it:

I ran devflow pr create on a messy feature branch with 8 commits. Copilot analyzed them and generated this:

Title: Add comprehensive README with features, setup, and usage guide

Summary:
Complete documentation overhaul transforming the minimal README into 
a comprehensive guide with branding, detailed instructions, and complete 
feature documentation.

Changes:
- Added DevFlow logo, tagline, and GitHub Copilot CLI Challenge badge
- Documented all 5 core features (commits, PRs, branches, config, auto-push)
- Added npm installation command and interactive setup instructions
- Comprehensive examples for all commands
- Explained how DevFlow uses Copilot CLI as its AI engine

It was perfect. Better than I would have written myself. That's when I knew this tool was actually useful.

Final Thoughts

GitHub Copilot CLI is excellent for natural language generation tasks. It's less excellent when you try to pipe complex, special-character-filled text through bash. But with proper error handling, quota management, and fallback strategies, you can build genuinely useful tools on top of it.

The future of CLI tools is AI-powered. DevFlow is just the beginning.

Try DevFlow: npm install -g git-devflow

Built with ❤️ using GitHub Copilot CLI.

Introducing Blog Stats Generator: Auto-Updating Blog Cards for Dev.to

Karthikeyan — Sat, 16 Aug 2025 12:44:02 +0000

Hello 👋,

I recently built a side project to showcase my Dev.to blogging stats — and it’s live on Product Hunt! 🚀

Intro

As someone who loves writing on Dev.to and tracking my blogging journey, I always wanted an easy way to showcase my progress — things like post counts, reactions, top tags, and more.

So, I built Blog Stats Generator 🎉

What It Does

📊 Generates auto-updating blog stats cards
🎨 Multiple themes (Default, Dev.to Light, Dracula, Night Owl, etc.)
🔗 Copy Markdown/HTML snippets to use in GitHub READMEs or blogs
✅ No login required — just enter your Dev.to username

Why I Built It

I wanted something simple and clean to:

Track my own blogging progress
Embed in my GitHub profile
Share milestones with my community

It was also inspired by github-readme-stats built by @anuraghazra.

Try It Out

👉 Live app: https://blog-stats-generator.vercel.app

👉 GitHub Repo: https://github.com/skarthikeyan96/blog-stats-generator

Product Hunt Launch 🚀

I’m super excited to share that I just launched this project on Product Hunt today!

If you find it useful, I’d love your support ❤️

👉 Check it out on Product Hunt

Next Steps

Add the integration for Hashnode and Medium
More theme options
Shareable social previews

Conclusion

That’s it for now! I’d love to hear your feedback on the application in the comments 🙌.

🧠 AI-Powered Quote Finder – Discover the Wisdom of Your Favorite Characters

Karthikeyan — Sat, 26 Jul 2025 13:39:00 +0000

This is a submission for the Algolia MCP Server Challenge

What I Built

Quote Finder is a lightning-fast, searchable archive of powerful quotes from anime, TV shows, games, and films. It helps fans rediscover iconic lines, explore character insights, and surface forgotten gems through a sleek UI powered by Algolia.

This project is a deeply personal one for me. I grew up immersed in anime — not just as entertainment, but as a wellspring of emotional depth, moral nuance, and philosophical reflection. From One Piece’s freedom, to Evangelion’s existential dread, anime taught me more about life than most textbooks ever could. Quote Finder is my tribute to that universe.

Features

🔍 Instant Search powered by Algolia
🧠 AI-Powered Tags & Sentiment (e.g. "hope", "despair", "wisdom")
❤️ Emotion Extraction for deeper context
🎭 Filter by Anime & Character
📱 Responsive & Mobile-First UI
💾 Built-in Favorites (via localStorage)

Tech Stack

Frontend: Next.js 15, React, TypeScript
Search: Algolia Search API, InstantSearch.js
Styling: Tailwind CSS, Radix UI
AI Processing: Sentiment & tag generation via GPT
Deployment: Vercel

Live Links

Live App: Quote Finder
GitHub: github.com/skarthikeyan96/quote-search

Screenshots

🎬 Full-Text Search

🎭 Filter by Character or Anime

💬 Saving the quotes

📱 Fully Responsive

How I Used Algolia MCP Server

1. Search Setup

Configured a dedicated Algolia index with fine-tuned searchable attributes like quote, character, and anime.
Integrated Algolia InstantSearch.js to handle real-time filtering and searching.

2. Dataset Design

Custom-built a quote dataset from a mix of anime and fictional media.
AI-tagged each quote with:
- sentiment_score (1–10)
- sentiment_label (positive/neutral/negative)
- tags (e.g. “truth”, “grief”, “purpose”)
- emotion (e.g. “inspiring”, “tragic”)

3. Search Experience

Faceted filtering by character & anime
Searchable fields: quote, anime, character, emotion, and tags
Highlighted keywords in results
LocalStorage-powered favorites

Learnings & Challenges

🎭 Emotional Inference

Challenge: How to assign emotion categories like “tragic” or “uplifting” without relying on external labels?

Solution: Combined sentiment score + thematic tags to derive high-level emotions algorithmically.

🗃️ Tag Consistency

Challenge: Quotes ranged from poetic to deeply philosophical. Tags needed to be accurate and meaningful.

Solution: Used GPT-4 to suggest tags based on meaning, not just keywords.

💡 UX Refinement

Challenge: Simple UI that honors the tone of the content.

Solution: Minimalist card layout, soft gradients, and readable typography using Tailwind.

Technical Highlights

Real-time search with InstantSearch.js
Clean filter-based UI using Radix UI + Tailwind
AI-derived metadata for nuanced discovery
Fast, SEO-friendly static site via Next.js
Highly scalable Algolia index structure

Future Improvements

🔒 User Accounts for cross-device saving
🎞️ Add show scenes or visuals per quote
📚 Expand to books, games, and films
🧠 Improve emotion detection models
📤 Allow user-submitted quotes

Project Metrics

Quotes Indexed: 200+
Characters Featured: 50+
Tags Generated: 300+
Bundle Size: ~190 kB
Lighthouse Score: > 95

Conclusion

Quote Finder is more than a search tool — it’s an emotional archive. It bridges my love for anime and my skills as a developer, turning nostalgia into a usable, searchable, and shareable tool.

Whether you're a long-time anime fan or just someone looking for a quote that resonates — there's something here for you.

🙏 Thank you for reading. Would love to hear your feedback or ideas!

SnippetSearch: Code Snippets Discovery Engine for Developers

Karthikeyan — Fri, 25 Jul 2025 21:43:09 +0000

This is a submission for the Algolia MCP Server Challenge

What I Built

SnippetSearch is a comprehensive code snippet discovery and management platform built to help developers find, save, and organize useful code snippets from multiple sources. It aggregates content from Dev.to, Hashnode, CSS-Tricks, Smashing Magazine, and more using RSS and APIs, then enables a seamless search experience powered by Algolia.

Features

Real-time Search: Powered by Algolia InstantSearch.js
Multi-source Indexing: Dev.to API, Hashnode RSS, CSS-Tricks, Smashing Magazine & more
Bookmarks: Save your favorite snippets (persisted via localStorage)
Smart Tagging: Automatic tag extraction from articles
Mobile First: Fully responsive interface
Clean UI: Built with Tailwind CSS
Fast & Optimized: Minimal bundle size and fast builds

Tech Stack

Frontend: Next.js 15, React, TypeScript
Search: Algolia Search API, InstantSearch.js
Styling: Tailwind CSS, Radix UI
Content Aggregation: Custom RSS & API scrapers
Deployment: Vercel

Live Links

Live App: SnippetSearch
GitHub: github.com/skarthikeyan96/dev-snippet-search

Screenshots

Homepage: Feature overview and clean hero section
Search Interface: Filters, pagination, bookmark toggles
Bookmarks Modal: Manage saved snippets
Mobile View: Touch-optimized UI

**Simple User analytics:

How I Used Algolia MCP Server

1. Search Infrastructure Setup

Configured optimized indices with searchable attributes, highlighting, and ranking.
Integrated InstantSearch.js with custom templates.
Enabled search analytics to monitor user behavior. ### 2. Indexing Snippet Data

Parsed and indexed 388+ snippets from multiple sources:

Dev.to API (324)
Hashnode (32)
CSS-Tricks (10)
Smashing Magazine (10)
Web Design Ledger (7)
UX Movement (5) Applied HTML cleaning and tag normalization.

3. Advanced Search Features

Faceted filtering by source.
Instant keyword highlighting.
Custom pagination and mobile-friendly search interface.

4. Performance Optimizations

Reduced bundle size to ~224 kB.
Implemented code splitting & vendor chunking.
Optimized search rendering pipeline.

Learnings & Challenges

Data Normalization

Challenge: Varying formats across sources.
Solution: HTML entity decoding + tag stripping.

UX in Search

Challenge: Balancing speed and relevance.
Solution: Custom ranking + highlighting.

Responsive Design

Challenge: Touch targets and layout flexibility.
Solution: Tailwind utilities + mobile-first grid.

State Persistence

Challenge: Bookmark state across reloads (without SSR issues).
Solution: Hydration-safe localStorage management.

Technical Highlights

Best practices for Algolia search tuning.
Clean integration with InstantSearch.js templates.
State hydration strategies for client-only features.
Real-world TypeScript with Next.js.
Tailwind for fast, maintainable UIs.

Future Improvements

Cloud sync for saved snippets
User accounts + snippet sharing
Code syntax highlighting
Server-side rendering for SEO
Offline-first PWA support

Project Metrics

Snippets Indexed: 388+
Sources Integrated: 6+
Bundle Size: 224 kB
Mobile Friendly: 100% responsive
Performance: Lighthouse score > 95

Conclusion

SnippetSearch showcases how Algolia's MCP Server can power a fast, elegant, and scalable search experience for developers. From content aggregation to real-time search, this project reflects the potential of modern tools when combined with thoughtful design and engineering.

Thank you for reading.

Nexus Dynamics - Frontend challenge

Karthikeyan — Sun, 06 Jul 2025 11:10:32 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

I built a modern and interactive employee intranet portal for "Nexus Dynamics," designed as a central hub for essential information and tools. The layout prioritizes a clean, intuitive, and production-ready user experience, featuring a prominent header, real-time information, and a notification system. The main content is divided into two columns, showcasing company statistics, announcements, team spotlights, quick links, upcoming events, and office information. The design emphasizes visual appeal, readability, and ease of navigation, using custom SVG icons and a cohesive card-based layout.

Demo

https://nexus-dynamics-99.netlify.app/

Journey

My journey focused on building a robust frontend using HTML, CSS, and vanilla JavaScript. I meticulously structured the index.html, applied modern styling with styles.css for responsiveness and visual depth, and added interactivity using script.js.

Key JavaScript features include a real-time clock, simulated dynamic data updates (notifications, weather, stats), and various click handlers for interactive elements. I also implemented a custom toast notification system and keyboard navigation shortcuts for enhanced usability.

Proudest Achievement: Dark Mode Implementation

I'm particularly proud of the comprehensive dark mode. This wasn't just a simple color inversion; it involved:

A dedicated toggle button with dynamic icons.
Persistence of user preference via localStorage.
Automatic detection of system theme preference (prefers-color-scheme).
Extensive styling adjustments across all UI elements in styles.css to ensure optimal contrast and visual appeal in both light and dark themes.
Smooth CSS transitions for a seamless theme switch.

This project allowed me to explore vanilla frontend development, focusing on performance, accessibility, and user experience, with the dark mode implementation being a highlight that significantly enhanced the portal's modern appeal.

🧠 Mom Mode – Let Runner H Nag You into a Better Life

Karthikeyan — Sun, 22 Jun 2025 13:52:15 +0000

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

What I Built

I created Mom Mode, a funny automation that turns Runner H into your passive-aggressive AI mom. It sends daily reminders via email and Slack to check the weather, eat lunch, attend meetings, and drink water—nagging you with love to stay on track!

Demo

Here’s Mom Mode in action:

On June 22, 2025, at 06:52 PM IST, I got this hydration email:

Logged messages in the Google Sheet:

Runner-H demo:

How I Used Runner H

I tapped into Runner H’s scheduling, web scraping, and messaging features to create Mom Mode:

Weather Check: Scrapes Google Weather for your place and sends an email.
Meal Reminders: Sends a Slack message at 2 PM IST.
Calendar Check: Checks Google Calendar and sends Slack meeting reminders.
Hydration Nudges: Sends hourly email reminders.
Logging: Logs messages in a Google Sheet.

To replicate this:

Sign Up: Get a Runner H account at runnerh.com.
Google Sheet: Create a sheet with columns: Time, Message, Platform. Set to “Anyone with the link can edit.”
Email: Link your Gmail in Runner H.
Slack: Set up a channel or DM in Slack and connect it to Runner H.
Calendar: Link your Google Calendar (set to “View events”).
Run the Prompt: Use this in Runner H, replacing placeholders:

At 8 AM IST daily, check the weather for [your city] on Google Weather and send an email to [your email address] with a reminder like: "It’s [weather condition] today—did you bring [item, e.g., an umbrella], or are you asking for a cold?" At 2 PM IST, send a meal reminder via Slack to [your Slack channel or DM] with: "It’s 2 PM, no lunch yet? Do I need to cook for you?" Check my Google Calendar for meetings today and send a Slack reminder 30 minutes before each to [your Slack channel or DM] with: "You have a meeting at [time]—don’t make me look bad by being late!" Every hour from 9 AM to 6 PM IST, send a hydration reminder via email to [your email address] with: "Drink water now, or you’ll turn into a prune—love, Mom!" Log all messages sent (time, message, platform) in a Google Sheet [insert your Google Sheet link]. If a source is inaccessible, skip it and proceed.

💡 Why It’s Special:

Turns a serious wellness use case into a funny, human experience.
Requires no code, just smart prompts and creativity.
Makes healthy routines feel like love from home.

💬 Testing Instructions:

Connect your Gmail, Slack, and Google Calendar to Runner H.
Use the prompt shared above (or tweak it to suit your mom’s "voice").
Watch the magic — personalized, caring reminders like you’re living with your mom again (but digitally 😅).

Thank you for reading. What do you think? Share your thoughts in the comments!

Global TrendSpark: Automate Viral Content Creation with Runner H

Karthikeyan — Sun, 15 Jun 2025 11:28:56 +0000

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

What I Built

I built Global TrendSpark, an AI-powered pipeline that automates viral content creation. It uses Runner H to scrape global trends, draft SEO-optimized articles, schedule social media posts, send newsletters, and track everything in a Google Sheet—all with one prompt. This solves the problem of time-consuming content creation, helping creators stay ahead of trends effortlessly.

Demo

Here’s Global TrendSpark in action:

On June 15, 2025, at 3:12 PM IST, it sent this newsletter with trending topics:

And logged the posts in a Google Sheet:

Watch the workflow in action:

How I Used Runner H

I leveraged Runner H’s web scraping, template filling, and multi-platform integration to automate the entire content pipeline:

Trend Discovery: Scrapes trends from Google Trends, X, Reddit (r/worldnews, r/technology), BBC, and CNN.
Article Generation: Pulls a template from Google Docs and drafts 600-word articles with 3-5 SEO keywords.
Social Posting: Schedules posts on X and LinkedIn with topic-specific hashtags.
Newsletter Sending: Sends articles via Gmail.
Tracking: Logs details in a Google Sheet.

To replicate this, follow these steps:

Sign Up: Create a Runner H account at runnerh.com.
Article Template: Create a Google Doc with a 5-section template (Introduction, Why It Matters, Key Developments, What’s Next, Conclusion). Set sharing to “Anyone with the link can view.”
Google Sheet: Create a Google Sheet with columns: Topic, Platform, Post Date, Article Link, Hashtags Used. Set sharing to “Anyone with the link can edit.”
Gmail Group: In Gmail, create a contact group (e.g., “MyNewsletterSubs”).
Run the Prompt: Use this in Runner H, replacing placeholders:

Search Google Trends, X, Reddit (r/worldnews, r/technology), BBC, and CNN for the top 3 global trending topics (tech, climate, or world events) from the last 24 hours. Pull my article template from Google Doc [insert your Google Doc link]. Draft a 600-word article for each topic, optimized for SEO with 3-5 trending keywords from the sources, following the template’s structure (Introduction, Why It Matters, Key Developments, What’s Next, Conclusion). Schedule posts on X and LinkedIn with 2-3 topic-specific hashtags (e.g., #AIRevolution for AI topics) and a caption like: “Discover the latest on [topic]! Read our new article: [link]. #[your project hashtag].” Compile articles into a newsletter with a subject line “[your project name]: Top Trends This Week,” embedding article links in the topic titles (e.g., “Technological Innovations”), and include a footer: “Follow us on X: [your X link] | LinkedIn: [your LinkedIn link].” Send via Gmail to my contact group [insert your Gmail contact group]. Log details (topic, platform, post date, article link, hashtags used) in a Google Sheet [insert your Google Sheet link]. If a source is inaccessible (e.g., paywall), skip it and proceed.

Test: Verify trends are scraped, articles are generated, posts are scheduled, newsletters are sent, and the Google Sheet updates.

Use Case & Impact

Global TrendSpark benefits content creators, marketers, and businesses by automating trend-based content creation. It’s perfect for bloggers targeting global audiences (5B+ internet users in 2025) or brands wanting to stay relevant. It saves hours of research and writing, boosts SEO with trending keywords, and increases engagement through timely posts. For example, a marketer can reach millions by sharing articles on “AI breakthroughs” or “climate tech” without manual effort.

Thanks for checking out Global TrendSpark! What do you think? Share your thoughts in the comments!

Building a GitHub Issue Auto-Labeler with Pulumi and Node.js: A Challenge Journey

Karthikeyan — Sun, 06 Apr 2025 09:14:35 +0000

This is a submission for the Pulumi Deploy and Document Challenge: Get Creative with Pulumi and GitHub

What I Built

I created the GitHub Issue Auto-Labeler, a powerful tool that automates GitHub issue management using Pulumi and Node.js. This project labels issues in real-time based on keywords in their titles or descriptions, customizable via a config.json file. It also posts friendly comments to remind contributors of guidelines and auto-closes stale issues after 30 days of inactivity. Built for the Pulumi Deploy and Document Challenge, it streamlines repository workflows, making it easier for maintainers and contributors alike to stay organized.

Live Demo Link

[Not applicable—local setup required]

Note: This is a server-side tool requiring local deployment with ngrok. Follow the README to set up and test locally. A hosted version is planned for the future.

Project Repo

Check out the project on GitHub:

The repository includes a detailed README.md with installation steps, usage instructions, troubleshooting tips, and screenshots. The docs/ folder contains architecture notes, and the code is open for contributions—see CONTRIBUTING.md.

My Journey

Process

My 10-day journey began with setting up Node.js, Pulumi, and a GitHub repo. I used Express to create a webhook server and Octokit to interact with the GitHub API. The first challenge was getting the webhook to work—initial 404 errors with ngrok were frustrating, but adding detailed logging (console.log for requests) helped me pinpoint the issue (wrong URL path). Overcoming this, I implemented real-time labeling based on keywords, extending it to body content after testing with issue #10 ("Test bug issue").

Adding configurable rules via config.json was smooth, but integrating comments and stale issue closing added complexity. The comment feature required client.issues.createComment, tested successfully on issue #13 ("Test enhancement #13"). For stale issues, I leveraged GitHub Actions with actions/stale, configuring a 30-day inactivity threshold—tricky to test instantly, but the workflow is set.

Challenges

Webhook Setup: Misconfigured ngrok URLs caused delays; I learned to double-check paths.
Pulumi Labels: Initial label creation failed due to missing tokens—fixed with proper environment setup.
Time Management: Balancing features across 10 days taught me to prioritize (labeling first, then enhancements).

What I Learned

Debugging with logs is a lifesaver.
Pulumi’s infrastructure-as-code approach simplifies label management.
GitHub Actions complement server-side automation seamlessly.

Using Pulumi with GitHub

Pulumi was the backbone of this project, enabling me to define and deploy GitHub labels as code. I used the @pulumi/github package to create labels (bug, enhancement, question) in my repo, ensuring consistency across environments. The pulumi up command set up the infrastructure, which the Node.js server then leveraged via Octokit for dynamic labeling.

Why Pulumi Was Beneficial

Automation: Eliminated manual label creation, saving time.
Version Control: Label definitions are tracked in Git, making changes reproducible.
Scalability: Easy to extend to multiple repos with Pulumi stacks.

I didn’t use Pulumi Copilot, but if I had, a key prompt might have been:

“Generate a Pulumi program to create GitHub labels ‘bug’, ‘enhancement’, and ‘question’ in my repo skarthikeyan96/issue-labeler.”

This would have accelerated the initial setup.

Cover Image

A huge thanks to the Pulumi and Dev.to communities for this challenge! I’m excited to see where this project goes next! Star the repo at https://github.com/skarthikeyan96/issue-labeler.

Understanding Graphs in JavaScript: Adjacency Matrix vs. Adjacency List

Karthikeyan — Sun, 16 Feb 2025 18:50:38 +0000

Introduction

Graphs are one of the most fundamental data structures in computer science. They consist of nodes (also called vertices) connected by edges. Graphs are widely used in various real-world applications, such as social networks, navigation systems, and recommendation engines.

In this post, we'll explore two common ways to represent graphs: Adjacency Matrix and Adjacency List. We'll also implement both representations in JavaScript and compare their efficiency.

Types of Graph Representations

1. Adjacency Matrix

An adjacency matrix is a 2D array (or matrix) that represents connections between nodes. If there is an edge between node i and node j, the matrix at position [i][j] contains 1 (or the weight of the edge, in case of weighted graphs). Otherwise, it contains 0.

Implementation in JavaScript

class Graph {
    constructor(numNodes) {
        this.matrix = [];
        for (let i = 0; i < numNodes; i++) {
            this.matrix.push(new Array(numNodes).fill(0));
        }
    }

    addEdge(to, from) {
        if (!this.isEdge(to, from) && !this.isEdge(from, to)) {
            this.matrix[to][from] = 1;
            this.matrix[from][to] = 1;
        } else {
            console.log("Edge already exists", to, from);
        }
    }

    removeEdge(from, to) {
        this.matrix[from][to] = 0;
        this.matrix[to][from] = 0;
    }

    isEdge(from, to) {
        return this.matrix[from][to] === 1;
    }
}

const graph = new Graph(3);
graph.addEdge(0, 1);
graph.addEdge(0, 2);
console.log(graph.matrix);

/*
Output : 
[
  [0, 1, 1],
  [1, 0, 0],
  [1, 0, 0]
]
*/

2. Adjacency List

An adjacency list represents a graph using a hash map (object in JavaScript) where each key (node) stores an array of connected nodes.

Implementation in JavaScript

// adjacency list ( unweighted and undirected graph )
/**
 * {
  1: [2, 3],
  2: [1],
  3: [1]
}
 */

class AdjacencyList {
    constructor() {
        this.list = {}
    }

    addNode(node) {
        if(this.list[node]){
            console.log(`${node} already exists`);
            return false; 
        }
        this.list[node] = []
        return true
    }

    addEdge(from, to) {
        if (!this.list[from] || !this.list[to]) {
            console.log(`One or both nodes (${from}, ${to}) do not exist.`);
            return;
        }

        if(!this.isEdge(from, to)){
            this.list[from].push(to);
            this.list[to].push(from);
        }
    }

    removeEdge(from, to) {
        if (this.list[from]) {
            this.list[from] = this.list[from].filter(node => node !== to)
        }

        if (this.list[to]) {
            this.list[to] = this.list[to].filter(node => node !== from)
        }
    }

    isEdge(from, to) {
        //return this.list[from]?.includes(to) || false;
        return this.list[from] ? this.list[from].indexOf(to) !== -1 : false
    }
}

const newGraph = new AdjacencyList();
newGraph.addNode(1)
newGraph.addNode(2)
newGraph.addNode(3)

newGraph.addEdge(1,2)
newGraph.addEdge(1,3)

console.log(newGraph)

Adjacency Matrix vs. Adjacency List - Edge Checking Differences

Adjacency Matrix (2D Array)

if (!this.isEdge(from, to) || !this.isEdge(to, from))

The matrix is a fixed-size 2D array where we manually set both matrix[from][to] and matrix[to][from] to 1.
Since we store edges explicitly in both directions, checking both is necessary to ensure symmetry in an undirected graph.
Example Matrix for 3 nodes:
```
  0  1  2
0 [0, 1, 1]
1 [1, 0, 0]
2 [1, 0, 0]
```
- If (0,1) exists, then (1,0) must also exist.
- The check ensures both positions are updated consistently.

Adjacency List (Object with Arrays)

if (!this.isEdge(from, to)) {

The adjacency list stores edges in a single-directional way (we manually push both from → to and to → from).
If from contains to, then to will automatically contain from, because we add both at the same time.
Example List:
```
{
    0: [1, 2],
    1: [0],
    2: [0]
}
```
- If 0 → 1 exists, then 1 → 0 is already guaranteed.
- So, checking just one direction is enough.

Comparison: Adjacency Matrix vs. Adjacency List

Feature	Adjacency Matrix	Adjacency List
Space Complexity	O(V^2)	O(V + E)
Checking an Edge	O(1)	O(V)
Adding an Edge	O(1)	O(1)
Removing an Edge	O(1)	O(V)
Best for Dense Graphs	✅	❌
Best for Sparse Graphs	❌	✅

Adjacency Matrix is great when the graph is dense (many edges) since edge lookups are O(1).
Adjacency List is ideal for sparse graphs as it requires less memory (O(V + E)).

Real-World Applications of Graphs

Social Networks (Facebook friends, LinkedIn connections)
Google Maps (Finding the shortest route)
Recommendation Systems (Netflix, Amazon product suggestions)

Conclusion

Both Adjacency Matrix and Adjacency List have their pros and cons. The choice depends on the use case:

Use Adjacency Matrix for dense graphs where edge lookup speed is crucial.
Use Adjacency List for sparse graphs where memory optimization matters.

Which approach do you prefer? Let me know in the comments! 🚀

Thank you for reading! I hope this gave you a clear understanding of adjacency matrices and lists. In the next blog, we’ll dive into graph traversal techniques like BFS and DFS.

💬 Let’s connect!

Twitter

Instagram

Top Tech Trends to Watch in 2025

Karthikeyan — Mon, 06 Jan 2025 10:35:35 +0000

Fun fact: The cover image was generated using AI!

As we step into 2025, the tech landscape is gonna get a major refresh. The past year has been laying the groundwork for some awesome innovations, and now it's time to look ahead to the trends, tech, and tools that'll be making headlines. In this article, we'll dive into the future of tech and highlight the trends that'll shape the world of tomorrow.

AI: The Continued Rise to Awesomeness

Artificial intelligence (AI) has been making some serious waves in the tech world. In 2025, we can expect AI to keep on trucking, changing the game for industries and transforming the way we live and work. From automating processes to supercharging analytics, AI will play a huge role in driving business decisions and making operations way more efficient.

One area where AI will really make a difference is in natural language processing (NLP). As AI-powered chatbots and virtual assistants become more mainstream, we can expect to see some major advancements in language understanding, sentiment analysis, and text generation.

The Emergence of Quantum Computing

Quantum computing is another area that's set to gain significant momentum in 2025. With the power to process complex calculations at insane speeds, quantum computing has the potential to solve some of the world's most pressing problems, from climate modeling to drug discovery. As quantum computing keeps evolving, we can expect to see some breakthroughs in medicine, finance, and materials science.

Extended Reality (XR): Redefining the Future of Interaction

Extended reality (XR) is gonna become way more mainstream in 2025. As XR tech gets even better, we can expect to see new use cases pop up in areas like education, entertainment, and healthcare.

The Rise of 5G and Edge Computing

With 5G networks rolling out everywhere, we'll get to enjoy faster data transfer rates, lower latency, and way more connectivity. This will supercharge the growth of edge computing, as data processing moves closer to the source. The combo of 5G and edge computing will enable a ton of new apps, from smart cities to autonomous vehicles.

Web Development 2.0: A New Era of Building the Web

In 2025, web development will undergo a significant transformation driven by emerging technologies like AI, blockchain, and XR. We can expect to see the rise of more secure, decentralized, and interactive web applications. AI-powered tools will revolutionize the way we design, develop, and maintain web applications, making the process more efficient and accessible to a wider range of people.

Blockchain: Secure, Transparent, and Accountable

Blockchain tech will keep playing a vital role in keeping data secure and transparent. As more and more industries need transparent and accountable systems, we can expect to see blockchain get adopted way more widely in areas like supply chain management, voting systems, and identity verification.

The Internet of Bodies (IoB): A New Frontier

The Internet of Bodies (IoB) is all about the network of wearable devices, implants, and sensors that collect and transmit health-related data. In 2025, we can expect to see some major advancements in IoB, enabling new apps in health monitoring, disease diagnosis, and personalized medicine.

Cybersecurity: A Growing Concern

As we rely more and more on tech, the threat of cyberattacks gets bigger. In 2025, cybersecurity will become an even bigger deal, with the need for way more sophisticated security measures to protect against threats like ransomware, phishing, and data breaches.

Conclusion

As we look ahead to 2025, it's clear that the future of tech will be shaped by a combo of emerging trends, technologies, and tools. From AI and quantum computing to XR and blockchain, the next year will be all about innovations and advancements. As we embark on this journey, it's essential to stay informed, adapt to the changing landscape, and grab the opportunities that the future holds.