DEV Community: Rahul Agarwal

Passion Pilot - AI-Powered Learning Journeys

Rahul Agarwal — Sun, 12 Jul 2026 13:11:34 +0000

This is a submission for Weekend Challenge: Passion Edition 2026

What I Built

Passion Pilot is an intelligent, interactive roadmap generator and contextual AI mentor designed to help you master any new hobby or obsession.

When you type in a passion (e.g., "Gaming", "Photography", or "Woodworking") and your current skill level, Passion Pilot uses the Groq API to instantly generate a highly structured learning syllabus. Instead of a boring text list, it dynamically renders your roadmap as a beautiful, interactive Skill Tree where you can track your progress. It also generates a tiered Gear List outlining exactly what equipment you need to buy and how much it will cost.

The coolest feature? The Contextual AI Mentor. The floating chat bubble is deeply integrated with the global UI state. It knows exactly which task node you currently have marked as "Active" and provides hyper-focused, personalized advice based on exactly where you are stuck in your journey!

Demo

Live Project URL: https://passion-pilot-three.vercel.app/

Code

rahulagarwal18 / passion-pilot

Passion Pilot

Passion Pilot is an AI-powered roadmap generator and contextual mentor designed to help you master any new hobby or obsession.

Built for the DEV.to Hackathon.

Features

Instant Syllabus Generation: Enter any passion and skill level to receive a highly-structured JSON syllabus outlining phases and tasks.
Dynamic Gear List: Generates a tiered gear list required to pursue the hobby, complete with estimated costs.
Interactive Skill Tree: Visualize your learning roadmap dynamically with interactive nodes and progress tracking.
Contextual AI Mentor: The built-in AI chat bubble is deeply integrated with the UI state. It knows exactly which task you are currently working on and gives hyper-focused, contextual advice.

Tech Stack

React & Vite
Zustand (Global State Management)
Tailwind & Vanilla CSS (Dark Mode / Glassmorphism)
Groq API (Llama 3.3 for lightning-fast structured JSON output)

Getting Started

Clone the repository:

git clone https://github.com/rahulagarwal18/passion-pilot.git
cd passion-pilot

Install dependencies:

npm install

Configure your…

View on GitHub

How I Built It

I built this application using a modern, lightning-fast frontend stack:

React & Vite: For a rapid, component-driven frontend architecture.
Tailwind & Vanilla CSS: To design a premium, dark-mode dashboard with glassmorphism elements.
Zustand: For complex global state management.
Groq API & Llama-3.3-70b-versatile: For blazing fast AI inference.

1. Global State Management (Zustand)

To make the AI Mentor truly "context-aware", I needed the chat component to know exactly what the user was looking at. I used Zustand to create a global store that tracks the user's active task anywhere in the app:

import { create } from 'zustand'

const usePassionStore = create((set) => ({
  passion: '',
  skillLevel: '',
  roadmap: null,
  activeTask: null, // Tracks the node the user is currently working on!
  isGenerating: false,

  setPassion: (passion) => set({ passion }),
  setSkillLevel: (skillLevel) => set({ skillLevel }),
  setRoadmap: (roadmap) => set({ roadmap }),
  setActiveTask: (task) => set({ activeTask: task }),
  setIsGenerating: (isGenerating) => set({ isGenerating }),
}))

export default usePassionStore

2. The Contextual AI Mentor

By subscribing to the activeTask state, the Chatbot component automatically injects the exact task the user is struggling with into the AI prompt. This means you don't have to explain your problem to the AI—it already knows!

import React, { useState } from 'react';
import usePassionStore from '../store/usePassionStore';
import { askMentor } from '../services/gemini';
import { Send, Bot, Sparkles } from 'lucide-react';

export default function ContextualChat() {
  const { activeTask, passion } = usePassionStore();
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');

  const handleSend = async () => {
    if (!input.trim()) return;

    // Injecting the global UI state context directly into the chat!
    const contextStr = activeTask 
      ? `The user is currently working on this specific task: "${activeTask.title}".`
      : `The user is learning about ${passion}.`;

    const userMsg = { role: 'user', content: input };
    setMessages(prev => [...prev, userMsg]);
    setInput('');

    try {
      const response = await askMentor(passion, activeTask, input);
      setMessages(prev => [...prev, { role: 'assistant', content: response }]);
    } catch (e) {
      console.error(e);
    }
  };
  // ... rendering logic ...
}

3. Forcing Strict JSON with Llama 3

One of the biggest challenges was parsing the AI's response into a predictable UI. I engineered a highly specific prompt to force the Llama model to return nothing but strict JSON, bypassing markdown formatting:

export async function generateSyllabus(passion, skillLevel) {
  const apiKey = import.meta.env.VITE_GROQ_API_KEY;
  if (!apiKey) throw new Error("Missing Groq API Key");

  const prompt = `You are a master mentor for the topic: "${passion}". 
The user is at a "${skillLevel}" skill level.
Generate a structured learning roadmap and a gear list.
You MUST respond ONLY with a raw, valid JSON object. Do not include markdown formatting like \`\`\`json.
...`;

  const response = await fetch("https://api.groq.com/openai/v1/chat/completions", {
    method: "POST",
    headers: {
      "Authorization": `Bearer ${apiKey}`,
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      model: "llama-3.3-70b-versatile",
      messages: [{ role: "user", content: prompt }],
      temperature: 0.7,
      response_format: { type: "json_object" }
    })
  });

  const data = await response.json();
  return JSON.parse(data.choices[0].message.content);
}

The Engineering Pivot:
Originally, I intended to build this using Google's experimental Gemini models. However, halfway through the hackathon, I ran into unexpected account restrictions with my Google Cloud preview keys, which completely blocked the API. With the clock ticking, I engineered a rapid pivot to the Groq API. Because Groq's Llama 3.3 model is incredibly fast and supports strict JSON schema generation, the transition was incredibly seamless. Pivoting mid-hackathon to a completely different AI provider while keeping the UI parsing logic intact was a fantastic exercise in building resilient, loosely-coupled architectures!

The Reality of AI and Tech Layoffs in India (And How to Survive Them)

Rahul Agarwal — Mon, 06 Jul 2026 06:38:25 +0000

If you browse tech forums in India today, the anxiety is palpable. Major IT service companies are slowing down hiring, startups are running lean, and the word "layoff" is trending on LinkedIn every other week.

At the center of this fear is Artificial Intelligence. The big question on everyone's mind: Is AI helping developers, or is it causing a massive decline in tech jobs in India?

The truth is nuanced, and if you want to survive the 2026 tech market, you need to look past the panic.

The Reality of Layoffs: Is AI to Blame?

Yes and no.

The Decline of the "Code Monkey"
Historically, a massive portion of the Indian IT sector relied on high-volume, low-complexity outsourcing (e.g., basic CRUD apps, manual QA testing, and legacy maintenance). AI tools like GitHub Copilot and autonomous agents are absolutely devastating this segment of the market. A task that used to require a team of five junior developers can now be done by one mid-level developer orchestrating an LLM.

The Economic Factor
However, it is unfair to blame AI entirely. High interest rates globally have forced Western companies to cut costs, which naturally trickles down to outsourcing hubs in India. Startups that were fueled by easy VC money have had to prioritize profitability over headcount.

Where AI is Actually Helping (The GCC Boom)

While service-based roles for basic web development are shrinking, Global Capability Centers (GCCs) in India are booming.

Top-tier companies are no longer just outsourcing cheap labor; they are building core R&D centers in Bengaluru, Hyderabad, and Pune. These companies are desperately looking for developers who know how to integrate AI into their products.

AI is creating a massive demand for:

Developers who understand Retrieval-Augmented Generation (RAG).
Engineers who can optimize cloud architecture for AI inference.
Frontend devs who can build streaming, generative UIs.

The Solution: How to Bulletproof Your Career

If you are worried about layoffs, here is the harsh truth: AI won't replace software engineers, but engineers who use AI will replace those who don't.

Here is the exact playbook to survive and thrive in this market:

1. Stop Competing on Syntax

Knowing React or Node.js syntax is no longer a competitive advantage—an AI can generate a React component in two seconds. Your value is in Architecture and Problem Solving. Focus on system design, database optimization, and scalable architectures.

2. Become an "AI Orchestrator"

Stop treating AI as a threat and start treating it as a compiler. Learn how to use agents to write your boilerplate, so you can spend 100% of your time on business logic. If you can output the work of three developers by effectively prompting an AI, you become indispensable to your employer.

3. Shift to Product-Minded Engineering

The era of just picking up a Jira ticket, writing the code, and closing it is over. You need to understand the business. Ask yourself: How does this feature increase revenue or decrease churn? Product-minded engineers who understand the user experience and business metrics are layoff-proof.

The Indian tech market isn't dying; it is evolving. The barrier to entry has simply been raised. Upskill, embrace the AI wave, and position yourself as an architect, not just a coder.

Are you seeing the impact of AI at your current company? Let's discuss in the comments.

HTMX vs React: When to Actually Use Which in 2026

Rahul Agarwal — Mon, 06 Jul 2026 06:34:34 +0000

If you spend any time on developer Twitter (or X), you've probably seen the raging war between React developers and the HTMX cult.

React developers claim HTMX is just a regression back to 2010s jQuery spaghetti. HTMX developers claim React is a bloated, over-engineered mess that ships 5MB of JavaScript just to render a static blog.

As a Full Stack Developer, I've built production applications with both. The truth is, they solve entirely different problems. Here is the definitive guide on when to use which in 2026.

The Case for HTMX

HTMX is brilliant because it extends HTML. Instead of writing JavaScript to fetch data and update the DOM, you simply add attributes like hx-get and hx-swap directly to your buttons and forms. The server returns raw HTML, and HTMX swaps it into the page.

Use HTMX When:

You are building a CRUD application: Dashboards, internal admin tools, and content management systems. HTMX thrives here.
You have a backend-heavy team: If your team loves Python (Django), Go, or PHP (Laravel), HTMX allows them to build highly interactive UIs without ever touching Node.js or Webpack.
SEO and Initial Load Speed are critical: Because everything is rendered on the server, you ship zero kilobytes of framework JavaScript.

The Case for React

React (especially modern React with Next.js App Router) is an application architecture, not just a UI library. It excels at managing complex, deeply nested state on the client side.

Use React When:

You are building a highly interactive Web App: If you are building a tool like Figma, Google Docs, or a complex video editor in the browser, HTMX will fail you. You need client-side state management.
You have a dedicated frontend team: React's component model and massive ecosystem (Tailwind, Radix UI, Framer Motion) make it vastly superior for building highly polished, heavily animated design systems.
You are building offline-first or PWA features: HTMX fundamentally requires a server connection to render changes. React can work entirely offline using local state and IndexedDB.

The Pragmatic Developer

Stop treating tech stacks like religions.

If you are building an internal data dashboard, using Next.js with Redux is probably overkill. Grab HTMX and build it in half the time.

If you are building a highly interactive SaaS product with complex client-side interactions, trying to force HTMX to handle offline sync and complex animations will be a nightmare. Grab React.

The best developers don't have a favorite tool; they have a well-stocked toolbox.

The Rise of DeepSeek and Qwen: Are Western LLMs Losing Their Moat?

Rahul Agarwal — Mon, 06 Jul 2026 06:34:31 +0000

For the past couple of years, the AI narrative in the developer world has been dominated by a few major players: OpenAI (GPT-4), Anthropic (Claude 3.5), and Google (Gemini). They set the benchmark for coding tasks, reasoning, and context windows.

But in 2026, the landscape is shifting rapidly. The moat that Western closed-source labs built is being aggressively challenged by a new wave of highly optimized, open-weight models from China—most notably DeepSeek and Alibaba's Qwen.

Here is why developers are starting to switch.

1. Cost-to-Performance Ratio

The biggest advantage of models like DeepSeek-Coder is their unprecedented cost efficiency. While GPT-4 remains a powerhouse, running millions of tokens through it for an automated dev-agent workflow gets expensive fast.

Chinese labs have focused heavily on architectural optimizations (like highly tuned Mixture-of-Experts) that allow their models to punch way above their weight class while costing a fraction of the price of Western frontier models. For startups building AI-heavy applications, this cost difference isn't just a perk; it determines whether the business model is viable.

2. The Open-Weight Advantage

Anthropic and OpenAI offer API access, but you can't run their models on your own infrastructure. Qwen and DeepSeek release incredibly powerful open weights.

For enterprise applications dealing with sensitive healthcare or financial data, sending code snippets and user data to a third-party API is a massive compliance risk. The ability to pull a 72B Qwen model and run it locally on a private server using vLLM or Ollama is a game changer for enterprise developers.

3. Coding Benchmarks

It used to be a given that open-source models couldn't code. Not anymore.
DeepSeek-Coder and Qwen-Coder have consistently traded blows with GPT-4 on the HumanEval and MBPP benchmarks. In many practical scenarios—like generating React components or writing Python boilerplate—the difference in output quality is virtually indistinguishable, yet the inference speed of the open models is significantly faster.

The Verdict

Are Western models obsolete? Absolutely not. For the most complex, highly nuanced reasoning tasks, models like Claude 3.5 Sonnet still hold the crown.

However, for 90% of standard web development tasks, RAG pipelines, and automated coding agents, the gap has closed. The future of AI development isn't a single dominant model—it's a routing layer that sends complex tasks to Claude/GPT-4, and standard tasks to lightning-fast, cost-effective models like DeepSeek and Qwen.

Which models are you primarily using in your dev workflow right now? Let me know in the comments!

The End of useMemo: Why React 19's Compiler is a Game Changer

Rahul Agarwal — Sun, 05 Jul 2026 12:58:14 +0000

If you’ve been building complex React applications over the last few years, you are intimately familiar with the "memoization tax." We’ve all spent hours wrapping components in React.memo, variables in useMemo, and functions in useCallback, just to stop a rogue context update from re-rendering the entire page.

Well, as of React 19, the era of manual memoization is officially over.

The Problem: We Were Doing the Compiler's Job

Historically, React's rendering model was blunt: if state changes, re-render the component and all its children. To optimize this, developers had to act as human compilers, manually identifying which computations were expensive and caching them.

Not only did this pollute our codebases with useMemo hooks, but it also introduced subtle bugs when dependency arrays were inevitably misconfigured.

Enter the React Compiler

The React Compiler (formerly known as React Forget) changes everything. It is an ahead-of-time (AOT) compiler that understands your JavaScript and automatically applies fine-grained reactivity.

Instead of re-rendering everything, the compiler analyzes your code during the build step and automatically caches values and components that haven't changed.

Before React 19:

const UserProfile = ({ user, theme }) => {
  const formattedName = useMemo(() => {
    return `${user.firstName} ${user.lastName}`.toUpperCase();
  }, [user.firstName, user.lastName]);

  const handleClick = useCallback(() => {
    console.log("Clicked:", formattedName);
  }, [formattedName]);

  return <Button onClick={handleClick}>{formattedName}</Button>;
};

With React 19:

const UserProfile = ({ user, theme }) => {
  const formattedName = `${user.firstName} ${user.lastName}`.toUpperCase();

  const handleClick = () => {
    console.log("Clicked:", formattedName);
  };

  return <Button onClick={handleClick}>{formattedName}</Button>;
};

Look at how clean that is. The compiler automatically does the work of useMemo and useCallback under the hood.

Why This Makes You a Better Developer

By removing the mental overhead of tracking dependencies, the React Compiler allows you to focus purely on business logic and component architecture. Your code becomes strictly declarative again.

If you are migrating a legacy app to React 19, you can literally run a script to delete thousands of useMemo hooks and watch your app run faster.

Welcome to the golden age of React. 🚀

React Server Components (RSC): You're Probably Fetching Data Wrong

Rahul Agarwal — Sun, 05 Jul 2026 12:58:12 +0000

For years, the standard way to load data into a React application was the infamous useEffect hook. We would render a loading spinner on the client, fire off a REST API call, and then painfully update the state once the data arrived.

This pattern led to massive JavaScript bundles, waterfall network requests, and terrible SEO.

With the stabilization of React Server Components (RSC) in modern frameworks like Next.js App Router, the entire paradigm of data fetching has been turned upside down. If you are still relying heavily on useEffect in 2026, you are building legacy applications.

The Shift: Server vs. Client Components

The fundamental innovation of RSC is that components can now run exclusively on the server.

This means your component can securely access databases, read filesystems, and fetch APIs directly, without ever shipping a single byte of JavaScript to the user's browser.

The Old Way (Client-Side Fetching):

"use client";
import { useEffect, useState } from 'react';

export default function Dashboard() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/user-data')
      .then(res => res.json())
      .then(setData);
  }, []);

  if (!data) return <Spinner />;
  return <div>Welcome, {data.name}!</div>;
}

The New Way (Server Component):

// This runs purely on the server!
import { db } from '@/lib/db';

export default async function Dashboard() {
  // Direct, secure database query. No API route needed!
  const data = await db.user.findFirst(); 

  return <div>Welcome, {data.name}!</div>;
}

The Unfair Performance Advantage

When you use RSCs, the HTML is generated on the server and streamed directly to the client.

Zero Client-Side JS: The server component itself is never sent to the browser. Only the resulting HTML is.
Instant LCP: The user sees the content immediately, without waiting for the browser to parse JavaScript and trigger a network waterfall.
Enhanced Security: You can safely keep API keys and secret logic inside your React components because they never leave your server.

The Takeaway

Client components (using "use client") should now be strictly reserved for interactive elements—like buttons, forms, and animations. Everything else? Move it to the server.

Embracing React Server Components isn't just an optimization; it's the new baseline for professional web development.

Building AI-Powered React Apps in 2026: Beyond Basic Prompts

Rahul Agarwal — Sun, 05 Jul 2026 12:58:11 +0000

A few years ago, adding AI to a web app meant tossing a clunky chatbot iframe in the corner of the screen. Today, as a Full Stack React Developer, if you aren't deeply integrating Large Language Models (LLMs) into your core UI, you are falling behind.

The industry has moved past basic prompt wrappers. In 2026, the gold standard is Generative UI—streaming AI responses that render dynamic React components in real-time.

Here is how modern AI-powered React applications are actually built.

The Challenge: LLMs are Slow, UI must be Fast

Standard HTTP requests are synchronous: you ask the server for data, wait, and get a JSON response.

LLMs don't work like this. They generate text token-by-token. If you wait for the entire response to finish before updating your React state, your application will feel broken. The solution is HTTP Streaming.

Enter the Vercel AI SDK

The standard tooling for this has coalesced around the Vercel AI SDK. It abstracts away the complex Node.js streaming logic and provides custom React hooks like useChat and useCompletion.

import { useChat } from 'ai/react';

export default function AIHelper() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: '/api/chat',
  });

  return (
    <div className="flex flex-col gap-4">
      {messages.map(m => (
        <div key={m.id} className={m.role === 'user' ? 'text-blue-500' : 'text-gray-800'}>
          {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} placeholder="Ask anything..." />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

The Next Level: Generative UI

Instead of just streaming text back, modern apps stream structured JSON that React uses to dynamically mount UI components.

Imagine a user types: "Show me my sales data for Q3."
Instead of the AI replying with a text summary, the server streams down a payload that tells the React client to instantly mount a BarChart component with the parsed data injected into the props.

This is achieved using tools like ai/rsc (React Server Components with AI). The AI decides which component to render based on the user's intent.

The Future of Frontend

Frontend development is shifting from "wiring up static endpoints" to "building dynamic component registries" that AI can orchestrate on the fly.

If you want to be a top-tier Full Stack developer today, master the art of streaming, structured AI outputs, and Server Components. The future of UI is generative.

7 MORE VS Code Extensions You Need in 2026 (Part 2) 🚀

Rahul Agarwal — Sat, 04 Jul 2026 05:53:15 +0000

After the massive response to my first post on VS Code extensions, I had to make a Part 2! Many of you shared some incredible hidden gems in the comments that completely blew my mind.

Here are 7 MORE VS Code Extensions that will instantly make you a faster, better developer in 2026. 👇

1️⃣ Import Cost (Shoutout to the community for this one!)

If you work with JavaScript or TypeScript, this is an absolute must-have. It calculates the bundle size of imported packages and displays it inline right next to your import statement. It’s saved me from accidentally importing massive libraries more than once!

2️⃣ Auto Rename Tag

Another community favorite! If you write a lot of HTML or JSX, this extension automatically renames the closing tag when you edit the opening tag. It sounds simple, but it saves hours of tedious typing and prevents mismatched tag errors when refactoring deep component trees.

3️⃣ GitLens

If you work on a team, GitLens is practically mandatory. It provides inline "blame" annotations so you can instantly see who wrote a specific line of code and when they wrote it. It also gives you incredible insights into file history right inside the editor.

4️⃣ REST Client

Stop switching between VS Code and Postman just to test APIs. This extension lets you write HTTP requests in a plain text file (.http) and execute them directly inside VS Code. It's incredibly fast for testing endpoints without leaving your workflow.

5️⃣ Code Spell Checker

There is nothing more frustrating than a bug caused by a simple typo in a variable name. This extension acts like a standard spell checker but is specifically designed for code (it understands camelCase, snake_case, etc.).

6️⃣ Todo Tree

If your codebase is littered with // TODO: and // FIXME: comments that you always forget about, Todo Tree solves it. It searches your entire workspace for these tags and displays them in a neat, organized tree view in the activity bar so nothing slips through the cracks.

7️⃣ Better Comments

Make your comments actually readable! This extension color-codes your comments based on alerts, queries, TODOs, or highlights. It completely transforms a wall of grey text into an organized, scannable document.

What did I miss this time?
Drop your favorite obscure extension in the comments and I might have to make a Part 3! 👇

5 Free Open-Source Alternatives to Premium Software Subscriptions 💸🔥

Rahul Agarwal — Sat, 04 Jul 2026 05:50:11 +0000

You don't need to pay for premium software subscriptions. Here are 5 Open-Source alternatives to expensive paid tools that are actually better than the originals.

1️⃣ Supabase (Alternative to Firebase)

An incredible open-source Postgres database with auth, edge functions, and real-time subscriptions built right in.

2️⃣ PostHog (Alternative to Google Analytics / Mixpanel)

The ultimate product analytics platform. It gives you session replays, feature flags, and funnels—and you can self-host it for complete data privacy.

3️⃣ Cal.com (Alternative to Calendly)

Beautifully designed scheduling infrastructure. It's fully open source and highly customizable for developers.

4️⃣ Appwrite (Alternative to AWS / BaaS)

Everything you need to build a backend (auth, databases, storage, functions) wrapped into one seamless docker container.

5️⃣ Penpot (Alternative to Figma)

The first open-source design and prototyping platform built specifically for cross-domain teams. It speaks CSS and SVG natively.

Open source is winning! Have you completely switched to any open-source alternatives recently? Let me know below! 👇

90% of Developer Portfolios are making this exact same mistake. 🛑

Rahul Agarwal — Sat, 04 Jul 2026 05:49:56 +0000

I’ve looked at dozens of developer portfolios recently, and almost all of them are making the exact same critical mistake.

They focus entirely on what technologies they used, and say absolutely nothing about why they built it or the impact it had.

A project section that says:

"Built a Weather App using React and Tailwind"
is boring. 🥱

A project section that says:

"Built a real-time Weather Dashboard in React that caches API requests to reduce load times by 40%, solving the issue of slow refreshes for mobile users"
gets you hired. 💼

Recruiters and Senior Devs want to see that you can solve actual problems, not just follow a tutorial. They want to know the architecture decisions you made, the bugs you overcame, and why you chose a specific database over another.

Drop a link to your portfolio in the comments and I’ll give you some honest feedback! 👇

5 Chrome Extensions Every Web Developer Should Have Installed 🕸️🔍

Rahul Agarwal — Sat, 04 Jul 2026 05:49:24 +0000

VS Code extensions are great, but your browser is where the debugging actually happens. Here are 5 Chrome Extensions every Web Developer should have installed.

🎨 ColorZilla

Instantly grab the exact hex code of any color on any website. No more inspecting elements just to find a color value.

📏 VisBug

An open-source design debugging tool. Let's you tweak spacing, margins, and CSS of live websites visually without having to dig through the DevTools panel.

🚀 Wappalyzer

Click one button and instantly see the entire tech stack (Framework, Analytics, UI library, server software) of the website you are currently visiting.

📱 Responsive Viewer

See what your web app looks like on multiple screens (iPhone, iPad, Desktop) all at the exact same time. Essential for modern responsive design.

📝 JSON Viewer Pro

Stops JSON API responses from looking like a giant wall of unreadable text and formats them beautifully right inside the browser window.

Am I missing any? What Chrome extension can you not live without? 👇

Stop using the default terminal. You need these 5 CLI tools immediately. ⚡️

Rahul Agarwal — Sat, 04 Jul 2026 05:48:41 +0000

If you spend more than 10% of your day in the command line, the default terminal is slowing you down. Here are 5 tools you need to install immediately to 10x your speed.

1️⃣ Zsh + Oh My Zsh

The absolute standard. Auto-suggestions and themes make navigating directories effortless. If you aren't using this, you are missing out on thousands of community plugins.

2️⃣ Lazygit

A simple terminal UI for git commands. No more memorizing complex git flags—just point, click, and push directly from your terminal.

3️⃣ FZF (Fuzzy Finder)

Instantly find any file or command in your history by just typing a few letters. It completely eliminates the need to recursively ls or remember long file paths.

4️⃣ Zoxide (`z`)

A smarter cd. It remembers which directories you use most frequently so you can jump to them in one keystroke instead of typing out full absolute paths.

5️⃣ Bat

A much better cat command with syntax highlighting and Git integration built right in. Once you use it to view code files in the terminal, you'll never type cat again.

What is your favorite terminal hack? Drop it in the comments! 👨‍💻