DEV Community: Neetigya Chahar

The End of Clicking: Why Voice-Based AI is the Final Frontier of UX (feat. ShopSage)

Neetigya Chahar — Tue, 23 Dec 2025 13:31:35 +0000

🛒 Meet ShopSage: Your AI Shopping Partner

I recently built ShopSage, an AI-powered shopping assistant that replaces complex menus and filters with a simple, natural conversation. Instead of hunting for the "Summer Collection" or clicking through five pages of filters, you just tell the AI what you need—and it does the work for you.

Experience the Demo here

// Detect dark theme var iframe = document.getElementById('tweet-2003001610533048733-409'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2003001610533048733&theme=dark" }

Deployment: ShopSage

We’ll dive into the technical "how-to" of building this later, but first, let's talk about why the way we use the internet is about to change forever.

🎙️ The Future is No-UI: Why We’re Returning to Our Roots

For decades, we’ve forced humans to learn the language of machines—clicking icons, navigating nested menus, and typing specific keywords. But as Elon Musk has often pointed out regarding AI and Neuralink/Optimus: "The best interface is no interface." The ultimate goal is to reduce the "bandwidth" bottleneck between human intent and machine execution.

Why Voice Wins:

The Evolutionary Edge: Homo sapiens survived and thrived because of our ability to communicate complex ideas through voice. It is our most natural, low-friction method of interaction.
The "Jarvis" Reality: We’ve seen Tony Stark control an entire laboratory just by talking to JARVIS. We are finally reaching a point where the latency and intelligence of AI make this "science fiction" a daily reality.
Universal Accessibility: A voice-based UI doesn't care if you're tech-savvy or if you're 80 years old. It breaks down language barriers and physical limitations, making the digital world truly inclusive.

The Hurdle

Of course, this shift isn't without challenges. Running real-time voice AI is currently cost-intensive compared to traditional UI. There is also a behavioral shift—people are used to the privacy of typing. However, as the tech becomes cheaper and more ubiquitous, "talking to your apps" will become as second-nature as "googling it."

🏗️ The Technical Magic: Real-time Agents & Tool Calling

We are currently in the era of Agentic Workflows. Unlike traditional chatbots that just "chat," these agents can actually act.

How it Works: The Agentic Loop

The backbone of this experience is the OpenAI Realtime API (and similar models like Gemini Multimodal Live). These models don't just process text; they process audio-to-audio natively, drastically reducing latency.

The real power comes from Tool Calling. When you say, "Add those blue Nikes to my cart," the AI recognizes the intent and triggers a specific function in your code.

Logic Flow: How Voice Becomes Action

Integrating AI into Existing Systems

One of the biggest realizations I had while building ShopSage is how simple it is to integrate this into existing products. If you have:

Well-defined business logic functions (e.g., addToCart(id), searchProducts(query)).
Clear state management (like Zustand or Redux).

Then the AI simply acts as a "bridge." You just map your existing functions to the AI's "Tools" and provide a system prompt that explains the "personality" of the assistant.

The architecture bridging OpenAI's Realtime API with a modern React frontend and MongoDB backend.

💎 Deep Dive: How ShopSage Redefines Shopping

ShopSage isn't just a voice skin; it’s a fully capable shopping agent. I wanted to create something that felt like walking into a high-end store with a personal shopper.

1. A Personality That Connects

To make it feel human, ShopSage is configured as a witty, energetic Indian salesman. It uses phrases like "Arre Bhai," and "Ek dum solid choice!" This makes the shopping journey engaging rather than transactional.

2. Semantic Search (Powered by MongoDB Vector Search)

Instead of exact keyword matching, ShopSage uses OpenAI’s `text-embedding-ada-002` to understand context.

User says: "I need an outfit for a summer wedding in Italy under ₹15,000."
ShopSage understands: It filters for "Wedding" categories, breathable fabrics (linen/cotton), and applies a price cap—all in one go.

3. The Tech Stack

Frontend: Next.js 15 (React 19) & Tailwind CSS v4.
AI Integration: @openai/agents SDK for Realtime API.
Backend: Firebase Cloud Functions & Node.js 22.
Database: MongoDB with Vector Search (dotProduct similarity).
Dataset: A processed version of the Ajio Fashion dataset (~5,000 high-quality products).

4. Actions Beyond the Screen

ShopSage can perform actions that don't even have visible buttons. It can scroll the page for you, navigate between "Home" and "Orders," and even manage your wallet balance—all through voice commands.

🚀 What's Next?

Voice-based UI is more than a gimmick; it's the next logical step in human-computer interaction. As we move toward AR glasses and screenless devices, your voice will be your primary cursor.

I’d love to hear your thoughts! Do you think voice-based shopping is the future, or will we always prefer the "click"?

Check out the GitHub Repository
Connect with me on LinkedIn
Experience ShopSage

Happy hacking! 🚀

Building dynamic Sanity CMS driven UI with Builder Pattern

Neetigya Chahar — Thu, 29 May 2025 12:14:21 +0000

The Builder Pattern is a creational design pattern used to construct complex objects step by step. It separates the construction of a complex object from its representation, so the same construction process can create different representations.

Whether you're crafting the perfect burger 🍔 or dynamically composing UI layouts from CMS data, the Builder Pattern shines in scenarios where plain object creation logic becomes messy.

🧠 When to Use Builder Pattern

When an object requires multiple steps to be created
When an object has many optional parameters or configurations
When creating complex objects with nested fields or layout trees

🧱 Structure of the Builder Pattern

Product – The complex object to be built
Builder Interface – Defines the steps for building the product
ConcreteBuilder – Implements the builder interface
Director (optional) – Orchestrates the building process
Client – Uses the builder to construct the object

🍔 Real-World Analogy: Building a Burger

Let’s start with a simple example.

1. Product

class Burger:
    def __init__(self):
        self.bun = None
        self.patty = None
        self.cheese = False
        self.lettuce = False
        self.tomato = False

    def __str__(self):
        return f"Burger with {self.bun} bun, {self.patty} patty" + \
               (", cheese" if self.cheese else "") + \
               (", lettuce" if self.lettuce else "") + \
               (", tomato" if self.tomato else "")

2. Builder

class BurgerBuilder:
    def __init__(self):
        self.burger = Burger()

    def set_bun(self, bun):
        self.burger.bun = bun
        return self

    def set_patty(self, patty):
        self.burger.patty = patty
        return self

    def add_cheese(self):
        self.burger.cheese = True
        return self

    def add_lettuce(self):
        self.burger.lettuce = True
        return self

    def add_tomato(self):
        self.burger.tomato = True
        return self

    def build(self):
        return self.burger

3. Client Usage

builder = BurgerBuilder()
burger = (
    builder.set_bun("Whole Wheat")
           .set_patty("Veg")
           .add_cheese()
           .add_lettuce()
           .build()
)

print(burger)

🖨 Output:

Burger with Whole Wheat bun, Veg patty, cheese, lettuce

💡 Benefits of the Builder Pattern

Cleaner and more maintainable code
Easy to add/remove steps in building process
Fluent API through method chaining
Useful for testing and configurability

🧠 Advanced Use Case: Building Nested UI Layouts from CMS

Now let’s go beyond burgers and into frontend development.

Imagine you're using a CMS like Sanity that gives you a structured array of components — but some components are layouts like HStack or VStack which themselves contain children. In this case, a flat .map() won’t work. You need a builder that can recursively build components based on their type.

Here’s an example of such data:

[
  {
    "_type": "hstack",
    "gap": 16,
    "children": [
      { "_type": "image", "src": "a.jpg" },
      { "_type": "card", "title": "Card A", "content": "..." },
      {
        "_type": "vstack",
        "gap": 8,
        "children": [
          { "_type": "text", "content": "Inside VStack" },
          { "_type": "button", "label": "Click me", "link": "/click" }
        ]
      }
    ]
  }
]

👨‍💻 Step-by-Step Builder in React

1. Leaf Components

export const ImageBlock = ({ src }) => <img src={src} className="rounded" />;
export const TextBlock = ({ content }) => <p>{content}</p>;
export const ButtonBlock = ({ label, link }) => (
  <a href={link} className="btn">{label}</a>
);
export const Card = ({ title, content }) => (
  <div className="card">
    <h3>{title}</h3>
    <p>{content}</p>
  </div>
);

2. Layout Components

export const HStack = ({ gap, children }) => (
  <div style={{ display: 'flex', gap }}>{children}</div>
);

export const VStack = ({ gap, children }) => (
  <div style={{ display: 'flex', flexDirection: 'column', gap }}>{children}</div>
);

3. 🔧 Recursive Section Builder

// SectionBuilder.tsx
import { HStack, VStack } from "./Layouts";
import { ImageBlock, TextBlock, ButtonBlock, Card } from "./Blocks";

const builders = {
  image: (data) => <ImageBlock {...data} />,
  text: (data) => <TextBlock {...data} />,
  button: (data) => <ButtonBlock {...data} />,
  card: (data) => <Card {...data} />,
  hstack: (data, builder) => (
    <HStack gap={data.gap}>
      {data.children.map((child, i) => (
        <div key={i}>{builder.build(child)}</div>
      ))}
    </HStack>
  ),
  vstack: (data, builder) => (
    <VStack gap={data.gap}>
      {data.children.map((child, i) => (
        <div key={i}>{builder.build(child)}</div>
      ))}
    </VStack>
  ),
};

export const SectionBuilder = {
  build(data) {
    const builder = builders[data._type];
    if (!builder) return null;
    return builder(data, SectionBuilder); // Recursive call
  },
};

4. Rendering a Page

export const Page = ({ sections }) => {
  return (
    <main>
      {sections.map((section, i) => (
        <div key={i}>{SectionBuilder.build(section)}</div>
      ))}
    </main>
  );
};

✅ Why This is a Builder Pattern

This is a Builder Pattern because:

It separates the construction of a complex, recursive UI tree from its representation.
Each block knows only how to render itself, not its siblings or parents.
The SectionBuilder is the Director, orchestrating rendering through specific builders.
You can add new types (like grid, tab, carousel) without changing existing builder logic.

🖥️ Where is the Builder Pattern Used in Backend?

The Builder Pattern isn't just for frontend UI — it's heavily used in backend development too. Some common places include:

Query Builders: ORM tools like Prisma, Sequelize, and Hibernate let you construct complex database queries step-by-step.
HTTP Request Builders: Libraries like OkHttp and RestTemplateBuilder help construct configurable requests.
Email Builders: Services like SendGrid or Nodemailer use builders to construct emails with optional subject, body, attachments, etc.
Config Builders: Used in SDKs and APIs to initialize configuration objects with optional parameters.
Document Builders: For generating structured JSON, XML, or even PDFs in steps.

These patterns improve readability, allow optional parameters, and separate object construction logic from representation — the core goals of the builder pattern.

💡 Extensions and Improvements

Add React.lazy() and Suspense for large component blocks
Use CMS-driven styles via Tailwind/CSS-in-JS props
Add error boundaries for invalid CMS structures
Serialize/deserialize preview versions for internal tooling

✨ Final Thoughts

Builder pattern is often taught with backend examples, but it's hugely powerful in frontend development, especially when dealing with dynamic, nested UI construction from content management systems.

Happy hacking! 🚀

Claude Sonnet 4 has arrived!

Neetigya Chahar — Thu, 22 May 2025 22:41:15 +0000

Anthropic has unveiled Claude Sonnet 4, a transformative upgrade over its predecessor, Sonnet 3.7. Tailored for developers, enterprises, and AI enthusiasts, Sonnet 4 delivers enhanced coding capabilities, advanced reasoning, and precise instruction following.

📈 Performance Breakthroughs

SWE-bench Excellence: Claude Sonnet 4 achieves a state-of-the-art 72.7% on the SWE-bench benchmark, marking a significant improvement over Sonnet 3.7's performance. (Anthropic)
Error Reduction: Navigation errors have been dramatically reduced from 20% to near zero, showcasing a deeper understanding of complex codebases.
Enhanced Safety: The model is 65% less likely to exploit shortcuts or loopholes in completing tasks compared to Sonnet 3.7, contributing to safer and more reliable AI behavior. (Anthropic)

🛠️ Advanced Features

Hybrid Model with Dual Modes: Offers near-instant responses for quick tasks and extended thinking for deeper, multi-step reasoning, allowing flexibility depending on task complexity.
Tool Use and Memory Improvements: Supports "extended thinking" with tool use, enabling it to alternate between reasoning and using external tools such as web search to improve responses. When given access to local files, it demonstrates improved memory capabilities by extracting and saving key facts to maintain continuity over time.
Context Window: Supports a large 200,000 token context window, enabling it to process and generate long documents or complex codebases with consistent quality and coherence. (Anthropic)

🤝 Industry Integration and Adoption

GitHub Copilot: Claude Sonnet 4 is being integrated into GitHub Copilot, powering a new coding agent that enhances developer productivity. (The GitHub Blog)
Developer Tools: Now generally available, Claude Code supports background tasks via GitHub Actions and native integrations with VS Code and JetBrains, displaying edits directly in your files for seamless pair programming.

💰 Availability and Pricing

Access: Claude Sonnet 4 is available on the Anthropic API, Amazon Bedrock, and Google Cloud's Vertex AI.
Pricing: Set at \$3 per million input tokens and \$15 per million output tokens, consistent with previous Sonnet models.

📝 Conclusion

Claude Sonnet 4 represents a significant advancement in AI capabilities, offering enhanced performance, safety, and integration features. Its adoption by industry leaders like GitHub underscores its practical utility and reliability in real-world development environments. Whether you're a developer seeking to streamline your workflow or an enterprise aiming to leverage advanced AI, Claude Sonnet 4 stands out as a powerful and efficient choice.

Figma to Next.js: AI-Powered Code Generation with MCP & Windsurf

Neetigya Chahar — Sun, 18 May 2025 15:57:24 +0000

✨ Introduction

Turning Figma designs into working code can save hours of manual work and keep your UI consistent. By setting up an MCP (Model Context Protocol) server, AI-powered editors like Windsurf (formerly Codeium) or VS Code can pull component metadata directly from Figma—colors, typography, layouts—and generate React/Next.js code automatically. In this demo, we used Sonnet 3.7 🧠, a Figma developer key 🔑, and a Next.js starter project ⚙️ to convert a simple e-commerce design into usable code. This setup streamlines design-to-code handoffs and lets you focus on features rather than boilerplate.

Repo: https://github.com/neetigyachahar/figma-mcp-demo

🚀 Why This Matters

⚡ Faster Turnaround: No more exporting SVGs or copying CSS. The MCP server exposes your Figma file’s structure so the AI can generate components in seconds.
🎨 Design Consistency: Since the AI fetches actual style tokens from Figma, your React components match the design system without extra tweaking.
🔁 Iterative Workflow: Designers update Figma, then developers re-run a single command to refresh components—no manual syncing needed.

🛠️ Configuring the Figma MCP Server

0️⃣ Identify which MCP server to use

Visit mcp.so and search Figma to discover MCPs
The most popular one for Figma is https://mcp.so/server/Figma-Context-MCP/GLips
Windsurf has a Figma MCP listed in their plugins, that being https://github.com/MatthewDailey/figma-mcp

There are two main steps: generate a Figma token and add it to your MCP server config for Windsurf or VS Code.

1️⃣ Generate a Figma Personal Access Token

Open Figma, click your profile (top-right), go to Settings → Security → Personal access tokens.

Click Generate new token, give it a name like “MCP Access”, and copy the token 🔐.

2️⃣ Add MCP Server Details to Your Code Editor

Here, I am sharing how to add an MCP server in Windsurf or VS Code.

💡 You can press Command + Shift + P (Mac) or Ctrl + Shift + P (Win/Linux) and search for “MCP” in either editor to see all related options (add/remove servers, reload, etc.).

1️⃣ Windsurf (Codeium) Configuration

Open or create the file at:

   /Users/your-username/.codeium/windsurf/mcp_config.json

Replace any existing content with a generic template like this (no real API keys included):

   {
     "mcpServers": {
       "figma-developer-mcp": {
         "command": "npx",
         "args": [
           "-y",
           "figma-developer-mcp",
           "--stdio"
         ],
         "env": {
           "FIGMA_API_KEY": "YOUR_FIGMA_API_KEY_HERE"
         }
       }
     }
   }

Save the file. Windsurf will now know to invoke npx figma-developer-mcp --stdio whenever you use any MCP-related commands.
In Windsurf, press Command + Shift + P, type “MCP,” and you’ll see things like MCP: Reload Servers or MCP: List Servers—verify that figma-developer-mcp appears in the list.

2️⃣ VS Code Configuration

In your project, open or create:

   .vscode/mcp.json

Populate it with this generic template:

   {
     "servers": {
       "figma-developer-mcp": {
         "command": "npx",
         "args": ["-y", "figma-developer-mcp", "--stdio"],
         "env": {
           "FIGMA_API_KEY": "YOUR_FIGMA_API_KEY_HERE"
         }
       }
     }
   }

Save the file. Any MCP-aware extension in VS Code will automatically detect figma-developer-mcp next time you reload the window (Command + Shift + P → “Reload Window”).
Again, press Command + Shift + P and search “MCP” to confirm that figma-developer-mcp is listed.

🎬 Demo

A minimal demo of using Windsurf + Sonnet 3.7 to convert a Figma design into Next.js code.

Figma Design 🔗:

Furniture store Figma design

The prompt:

https://www.figma.com/design/raEIgBuckuZUJCI8QLMUjI/ecom?node-id=0-3&t=WRAH3qQbDGS0GZOR-4
Read this figma file, understand the structure of the UI. I have provided you a new Next.js project in the "mcp-demo-2" folder. Your task is to implement the complete UI in the project. Create components as appropriate, use tailwind. For images, download them in the public folder first and then use them, don't generate svg when you have images.

Code generation:

Generated UI:

That’s it—just a few lines of prompt and your design becomes live code! 🎉

✅ Conclusion

By configuring an MCP server with your Figma token and pointing Windsurf (or VS Code) to it, you enable Sonnet 3.7 to generate React/Next.js code directly from your designs. This approach:

🔧 Cuts Down Manual Work
🎯 Keeps Styles in Sync
🔄 Speeds Up Iteration

Use this workflow as a template: swap in any Figma design, tweak AI prompts for your needs, and enjoy a smoother, smarter design-to-code pipeline. 💡

Happy hacking 🚀

Building a RAG System with Firebase Functions, OpenAI, and Pinecone

Neetigya Chahar — Sun, 04 May 2025 16:05:50 +0000

Few months back, I built the GenQL tool to generate SQL queries from natural text with the ability to provide context of database schema of my database to the AI. Here, I'm sharing the concepts of a basic RAG implementation that made it happen.

Retrieval-Augmented Generation (RAG) is a powerful approach that combines large language models (LLMs) with external knowledge sources. In this project, I implemented a RAG system using Python, Firebase Functions, OpenAI for embeddings, and Pinecone as the vector database. The system exposes three main APIs: indexing data, searching, and deleting namespaces. Let’s break down the concepts behind each API.

1. Indexing Data: Turning Your Schema into Searchable Vectors

Concept:

Before you can search your data with natural language, you need to convert it into a format that a machine can understand and compare. This is done by transforming your data (like database schemas) into embeddings—numerical representations that capture the meaning of your text. These embeddings are then stored in a vector database.

How it works:

Describe your data: For each table in your schema, create a descriptive string that summarizes its name, columns, and descriptions.
Generate embeddings: Use a model like OpenAI to turn these descriptions into vectors.
Store in vector DB: Save these vectors in a vector database, organized by a namespace (like a project or user ID).

Simplified code:

# Pseudocode for indexing
for each item in your_data:
    description = summarize(item)
    embedding = get_embedding(description)
    vector_db.upsert(id=item.id, vector=embedding, metadata=description, namespace=your_namespace)

Why?

This process makes your data searchable by meaning, not just by keywords.

2. Searching: Finding Relevant Data with Semantic Queries

Concept:

When a user asks a question, you want to find the most relevant pieces of your indexed data. This is done by converting the user’s query into an embedding and searching for the closest vectors in your database.

How it works:

Embed the query: Turn the user’s question into an embedding using the same model.
Search the vector DB: Find the vectors (your indexed data) that are most similar to the query embedding.
Return results: Fetch and return the metadata or original data associated with the closest vectors.

Simplified code:

# Pseudocode for searching
query_embedding = get_embedding(user_query)
results = vector_db.query(vector=query_embedding, top_k=5, namespace=your_namespace)
return results

Why?

This allows users to ask questions in natural language and get relevant answers from your own data, even if the exact words don’t match.

3. Deleting a Namespace: Cleaning Up

Concept:

Since a particular namespace id is provided to your indexed schema in the database, you can remove all data associated with that id. This is done by deleting a namespace from your vector database.

Simplified code:

# Pseudocode for deleting a namespace
vector_db.delete(namespace=your_namespace)

Deployment: Firebase Functions in Python

All these APIs are deployed as serverless functions using Firebase, making them easy to scale and integrate with other services.

Conclusion

By indexing your data as embeddings, searching with semantic queries, and managing namespaces, you can build a robust RAG system that brings the power of LLMs to your own datasets. This architecture is flexible and can be adapted to many use cases, from database documentation to knowledge management.

GitHub repo: https://github.com/neetigyachahar/GenQL

Happy hacking! 🚀

Server‑Side Rendering (SSR) vs React Server Components (RSC) in Next.js: The "use client" Directive

Neetigya Chahar — Tue, 22 Apr 2025 14:03:32 +0000

TL;DR

SSR is on by default and always runs, regardless of the "use client" directive.
The "use client" directive (an RSC feature) only controls whether the JS bundle (and hydration) for that component is sent or not. SSR‑generated HTML is still always delivered.
Hooks skipped during SSR: In client components ("use client"), hooks like useEffect don’t execute on the server—so any UI you render based on state manipulation in hooks (e.g. displaying <div>Data loaded</div> only after a fetch in useEffect) won’t be included in the initial HTML, which can impact SEO.
RSCs can be async (you can call APIs directly in the component); client components ("use client") behave like normal React components in the browser.

Scroll to bottom for demo examples 👇

Server‑Side Rendering (SSR)

Server‑Side Rendering (SSR) generates HTML on each request by executing your React components on the server before sending it to the browser. (Rendering in Next.js)

Every request is fresh: HTML is rebuilt on each incoming request, ensuring up‑to‑date data.
Server‑only environment: Runs in Node.js on the server—no access to browser APIs like window or document.
Independent of "use client": Components are SSR’d whether or not you mark them with "use client"; that directive only controls bundling, not where rendering happens.
Always ships HTML: Even client components get pre‑rendered to HTML on the server, then their JS bundle is sent for hydration if "use client" is used.
Async/Await support: You can freely use async functions in your page components (e.g., fetch data) and have them await before sending HTML.

// app/dashboard/page.tsx  (SSR by default)
export default async function DashboardPage() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return <h1>Welcome back, {data.user.name}!</h1>;
}

React Server Components (RSC)

React Server Components (RSC) are components that execute only on the server and are the default component type in Next.js’s App Router. (RSC in Next.js) ("use client" directive)

No hooks or browser APIs: Cannot use useState, useEffect, or event handlers, since they never run in the browser. (Client Components)
Zero JS bundle by default: Only HTML and a serialized data payload are sent to the client—no extra JavaScript. (React)
Compose with Client Components: To add interactivity, import or wrap a Client Component (marked with "use client") inside your RSC.
Streaming support: Can stream partial HTML to the browser as data resolves, improving Time to First Byte (TTFB). (Loading UI and Streaming)

// app/Weather.tsx  (RSC by default)
export default async function Weather() {
  const weather = await getWeatherFor('London');
  return <div>Current temp: {weather.temp}°C</div>;
}

// app/WeatherClient.tsx  (Client Component)
'use client';
import { useState } from 'react';

export default function WeatherClient({ temp }: { temp: number }) {
  const [unit, setUnit] = useState<'C'|'F'>('C');
  const display = unit === 'C' ? `${temp}°C` : `${Math.round(temp * 9/5 + 32)}°F`;
  return <button onClick={() => setUnit(unit === 'C' ? 'F' : 'C')}>{display}</button>;
}

Demo examples

1 . SSR in RSC

// page.tsx
import Welcome from "./Welcome"

export default async function Home() {
  console.log("Page file: Welcome to the app!")
  return <Welcome />
}

//Welcome.tsx
const Welcome = () => {
  console.log("Welcome file: Welcome to the app!")

  return (
    <section>
      <h1>Welcome to the App!</h1>
      <p>This is a simple React application.</p>
      <p>Feel free to explore the features and functionalities.</p>
    </section>
  )
}
export default Welcome

Output

2 . SSR in RSC with async API call

// page.tsx
import Welcome from "./Welcome"

export default async function Home() {
  console.log("Page file: Welcome to the app!")
  return <Welcome />
}

//Welcome.tsx
const Welcome = async () => {
  console.log("Welcome file: Welcome to the app!")

  // fetch data from an API
  const response = await fetch("https://jsonplaceholder.typicode.com/posts/1")

  const data = await response.json()
  console.log("Data fetched from API:", data)

  return (
    <section>
      <h1>Welcome to the App!</h1>
      <p>This is a simple React application.</p>
      <p>Feel free to explore the features and functionalities.</p>
    </section>
  )
}
export default Welcome

Output
Note: For the above two examples with Server Side Components, you can see in the below output that JavaScript is disabled (disabled only for the below output) and the DOM contains the tags, which came from SSR as client side rendering is disabled. Also, in the above output screenshots, there's no console log in client side, that simply means, since these are RSC components, there JavaScript is not sent in the bundle to client, improving efficiency.

3 . SSR in RCC (Client Side Component)

// page.tsx
import Welcome from "./Welcome"

export default async function Home() {
  console.log("Page file: Welcome to the app!")
  return <Welcome />
}

"use client"
//Welcome.tsx
const Welcome = () => {
  console.log("Welcome file: Welcome to the app!")

  return (
    <section>
      <h1>Welcome to the App!</h1>
      <p>This is a simple React application.</p>
      <p>Feel free to explore the features and functionalities.</p>
    </section>
  )
}
export default Welcome

Output

Output of the same code when client side JavaScript is disabled (No client side rendering). This is the validation that client side components still get SSR rendered.

4 . SSR in RCC (Client Side Component) with hooks

// page.tsx
import Welcome from "./Welcome"

export default async function Home() {
  console.log("Page file: Welcome to the app!")
  return <Welcome />
}

"use client"
//Welcome.tsx

import { useEffect, useState } from "react"

const Welcome = () => {
  console.log("Welcome file: Welcome to the app!")

  const [isUIVisible, setShowUI] = useState<boolean>(false)

  useEffect(() => {
    setShowUI(true)
  }, [])

  if (!isUIVisible) {
    return <div>Loading...</div>
  }

  return (
    <section>
      <h1>Welcome to the App!</h1>
      <p>This is a simple React application.</p>
      <p>Feel free to explore the features and functionalities.</p>
    </section>
  )
}
export default Welcome

Output, appears after showing "Loading..." for an instance.

Output of the same code when javascript is blocked. This is where SSR and SEO will not work out for projects where UI rendering logic depends on React hooks.

Happy hacking! 🚀

DSA with Python - Why? Pros, Pitfalls & Best Practices. Frequently updated.

Neetigya Chahar — Sat, 12 Apr 2025 12:04:40 +0000

Hello readers!

Why Python is Great for Learning Data Structures & Algorithms (DSA)

When it comes to mastering Data Structures and Algorithms (DSA), choosing the right language can make a huge difference. Python stands out as one of the best choices—and here's why.

🧠 Simple Syntax, Clear Logic

Python's clean and readable syntax makes it much easier to focus on the logic rather than getting lost in the language. Whether it's a binary tree, graph traversal, or dynamic programming, you write fewer lines of code, and they’re easier to understand at a glance.

🎯 Perfect for Interviews

In coding interviews, time is precious. Python helps you explain your approach clearly, thanks to its natural-language-like structure. It’s much easier to walk your interviewer through a solution written in Python than in verbose languages like Java or C++.

🔧 Built-in Power

Python offers powerful built-in data structures like lists, sets, and dictionaries, which allow you to quickly prototype and test ideas without reinventing the wheel.

🚀 Fast to Write, Easy to Debug

Quick iterations and minimal boilerplate make Python ideal for solving multiple problems efficiently while preparing for interviews or contests.

In short: Python lets you focus on thinking like a problem-solver—not just a programmer. And that’s exactly what interviews test for.

Now, starting below, I'm appending important notes about using Python in DSA as I come across them.

Python’s Recursion Limit

One common pitfall in Python when writing recursive solutions—especially for problems like DFS or tree traversal—is hitting the recursion depth limit. Unlike some other languages, Python has a relatively low default recursion limit (usually around 1000), which can easily be exceeded for deep recursive calls.

import sys

sys.setrecursionlimit(10**6)  # Use cautiously!

def factorial(n):
    if n == 0:
        return 1
    return n * factorial(n - 1)

print(factorial(1000))  # This will likely raise a RecursionError

If you're not careful, this can lead to a RecursionError: maximum recursion depth exceeded. Always consider whether a recursive solution is the best approach—or whether it can be rewritten iteratively or optimized with memoization or tail recursion (which Python doesn’t optimize by default).

🧠 Understanding Python's Time Complexity: Operations That Seem O(n) But Aren't

When working with Python for DSA, understanding the real time complexity of common operations can help you write more optimized code — and explain it better in interviews! Some operations might look like they take linear time but are actually constant (or vice versa). Let’s explore these nuanced cases:

🔍 `in` Operator — `list` vs `set`/`dict`

✅ `in` on a `set` or `dict`: `O(1)` average

⚠️ `in` on a `list`: `O(n)`

# O(n): list
print(3 in [1, 2, 3, 4, 5])

# O(1): set or dict
print(3 in {1, 2, 3, 4, 5})

Python uses hash tables for sets and dictionaries, enabling constant-time lookups.

➕ `list.append(x)`

✅ Looks like: `O(n)`

Actually: Amortized `O(1)`

Python lists are dynamic arrays. They resize occasionally, but append() is amortized constant time.

nums = [1, 2]
nums.append(3)  # O(1) on average

🧹 `list.pop(0)` vs `deque.pop()`

⚠️ `list.pop(0)`: `O(n)`

✅ `deque.pop()` (either end): `O(1)`

from collections import deque

# O(n): shifts all elements
lst = [1, 2, 3]
lst.pop(0)

# O(1): deque
dq = deque([1, 2, 3])
dq.pop()

Use deque for efficient queue-like operations.

↔️ `list.insert(0, x)` and `list.remove(x)`

insert(0, x) shifts all elements right → O(n)
remove(x) searches + shifts → also O(n)

nums = [1, 2, 3]
nums.insert(0, 0)  # Insert at start: O(n)

nums.remove(2)     # Remove specific value: O(n)

🧩 Copying a List

new_list = old_list[:]  # or list(old_list)

Although it looks trivial, copying a list is O(n) because it duplicates every element.

🔀 `list.sort()` / `sorted(list)`

✅ Looks like: `O(n)`

Actually: `O(n log n)`

nums = [4, 1, 3]
nums.sort()  # Uses Timsort: O(n log n)

Python uses Timsort, which is optimized but still O(n log n) in worst-case scenarios.

✂️ String Concatenation in a Loop

s = ""
for word in words:
    s += word  # O(n²) in total!

Each += creates a new string, leading to quadratic time if done repeatedly.

✅ Better: ''.join(words) → O(n) total.

⚙️ Dict Resizing

Dictionaries in Python offer amortized O(1) insertions. But occasionally, the internal table resizes and rehashes all keys, which spikes to O(n).

You don't need to worry in practice, but it's good to mention in interviews for depth.

✅ TL;DR

Operation	Time Complexity	Gotcha?
`x in list`	O(n)	Use `set`/`dict` for O(1) lookups
`list.append(x)`	Amortized O(1)	Resizing happens occasionally
`list.pop(0)` / `insert(0,x)`	O(n)	Use `deque` instead
`list.remove(x)`	O(n)	Searches then shifts elements
`copy list via [:]`	O(n)	Every element is copied
`list.sort()` / `sorted()`	O(n log n)	Timsort internally
`s += word in loop`	O(n²)	Use `''.join()` for `O(n)`
`dict insert/lookup`	Amortized O(1)	Rare resizing can spike to `O(n)`

Using Comparator Functions in Python’s `sorted()` and `.sort()`

In Python, both the sorted() function and the .sort() method are used to sort collections. While they are quite similar, they differ slightly in their usage and functionality. Python also allows you to provide a comparator function to customize the sorting order.

🔄 `sorted()` vs `.sort()`

sorted(): Returns a new sorted list from the elements of any iterable.
.sort(): Sorts the list in-place and returns None.

💡 Using a Comparator Function

Python uses a key function instead of a traditional comparator. The key function transforms each element before comparison, which is more efficient and preferred in Python. However, you can simulate the effect of a comparator using functools.cmp_to_key().

Note: cmp_to_key is part of the functools library, which is built into Python, so you do not need to install it separately.

Example 1: Using `sorted()` with a Comparator

from functools import cmp_to_key

# Comparator function
def compare(x, y):
    return x - y  # Sort in ascending order (simulating a comparator)

lst = [5, 2, 9, 1]
sorted_lst = sorted(lst, key=cmp_to_key(compare))  # Using comparator function
print(sorted_lst)

Example 2: Using `.sort()` with a Comparator

from functools import cmp_to_key

# Comparator function
def compare(x, y):
    return y - x  # Sort in descending order (simulating a comparator)

lst = [5, 2, 9, 1]
lst.sort(key=cmp_to_key(compare))  # Using comparator function
print(lst)

🧠 Internal Algorithm

Both sorted() and .sort() use the Timsort algorithm internally, a hybrid sorting algorithm derived from merge sort and insertion sort. It's optimized for real-world data and has a time complexity of O(n log n) in the average and worst cases.

`MIN_INT` and `MAX_INT`

MIN_INT = -sys.maxsize
MAX_INT = sys.maxsize

Map between number and characters

letter = chr(64 + number)  # where number is between 1 and 26 for A to Z

letter = chr(96 + number)  # where number is between 1 and 26 for a to z

number = ord('A') - 64  # ord('A') = 65

number = ord('a') - 96  # ord('a') = 97

🚀 Python Heap Cheat-Sheet

🔹 Import

import heapq

🔹 Min Heap (default in Python)

heap = []                      # create empty heap
heapq.heappush(heap, 10)       # insert O(log n)
heapq.heappush(heap, 5)
heapq.heappush(heap, 20)

print(heapq.heappop(heap))     # extract min → 5
print(heap[0])                 # peek min → 10

🔹 Max Heap (store negatives)

max_heap = []
heapq.heappush(max_heap, -10)  # insert O(log n)
heapq.heappush(max_heap, -5)
heapq.heappush(max_heap, -20)

print(-heapq.heappop(max_heap)) # extract max → 20
print(-max_heap[0])             # peek max → 10

🔹 Build Heap from List (O(n))

arr = [3, 1, 5, 7, 2]
heapq.heapify(arr)   # arr becomes min-heap in-place
print(heapq.heappop(arr))   # 1

For max heap:

arr = [-x for x in [3, 1, 5, 7, 2]]
heapq.heapify(arr)
print(-heapq.heappop(arr))  # 7

Why use `(val, idx, node)` in heap?

heapq compares tuples left to right.
First element: val (ensures min-heap on node values).
Second element: idx (unique tie-breaker when values are equal).
Third element: node (actual reference, not compared directly).
Without idx, Python would try to compare node objects (error).

🔹 Replace Root (insert + pop in one step)

heap = [1, 3, 5]
heapq.heapify(heap)
print(heapq.heappushpop(heap, 2))   # pushes 2, pops 1 → 1
print(heap)                         # [2, 3, 5]

🔹 Get N Smallest / Largest

arr = [7, 2, 5, 3, 9, 1]

print(heapq.nsmallest(3, arr))   # [1, 2, 3]
print(heapq.nlargest(2, arr))    # [9, 7]

Will update it with more learnings,
Happy hacking! 🚀

🚀 Introducing PSQLab – Your In-Browser PostgreSQL Playground

Neetigya Chahar — Sun, 06 Apr 2025 11:20:57 +0000

Imagine running a full PostgreSQL database directly in your browser without any server setup—pure, instant, and local. Meet PSQLab, an innovative UI built on pglite, that lets you experiment with PostgreSQL natively on the frontend. Whether you’re a college student learning SQL, a developer prototyping new ideas, or a curious mind exploring in-browser databases, PSQLab is designed just for you. 🧑‍💻📘

🔍 What is PSQLab?

PSQLab is a free, interactive playground that harnesses the power of pglite—a lightweight WebAssembly build of PostgreSQL—to deliver a full-fledged SQL database experience right in your browser. It comes with a modern, notebook-style interface reminiscent of Jupyter notebooks 🧪 where each executable block ties its own query result. This setup not only makes learning fun and interactive but also transforms the way you prototype and test database-driven applications.

⚙️ How It Works

At its core, PSQLab leverages pglite to run a complete PostgreSQL database in-browser. Here’s how it transforms your workflow:

🖥️ In-Browser PostgreSQL: Forget about installing and configuring a server. With pglite, PostgreSQL runs seamlessly in your browser.
📒 Notebook Interface: Write, execute, and view SQL queries in distinct blocks, just like a Jupyter notebook. Each block maintains its own query history and results.
💾 Persistent Changes: All your modifications and data are stored in your browser’s local storage, ensuring that your work is preserved between sessions.
🤖 Smart Suggestions: As you type your queries, the UI offers intelligent suggestions to speed up your workflow.
🌗 Customizable Themes: Switch effortlessly between dark and light themes for a personalized coding environment.

✨ Key Features

🧩 Full PostgreSQL Experience: Run almost any psql query and leverage many PostgreSQL features, all within your browser.
🧱 Interactive Blocks: Execute multiple query blocks with their own output, making experimentation and debugging a breeze.
🧑‍🤝‍🧑 Preloaded Social Media Schema: Dive straight into exploring a sample Social Media network database schema, complete with sample data.
🧠 Intelligent Autocomplete: Get suggestions while typing to reduce errors and boost productivity.
🎨 Responsive Design: Enjoy a polished UI with support for both dark and light themes.

🎓 Who Can Benefit?

PSQLab is perfect for:

🧑‍🎓 College Students: Learn SQL hands-on without needing expensive software or backend setups.
👨‍💻 Developers and Hobbyists: Prototype, test, and share database experiments quickly.
🧑‍🏫 Educators: Use it as a teaching tool in the classroom for interactive database lessons.
🌐 Anyone Curious About Databases: Explore PostgreSQL in a friendly, accessible environment.

🛠️ Contribute & Expand

While PSQLab already packs powerful features, there’s plenty of room for innovation:

🧰 UI Add-Ons: Enhance the interface with custom widgets, more advanced themes, or additional query visualization tools.
🧠 AI Integration: Imagine an assistant that not only suggests code but can also debug your queries or optimize them in real-time.
🆕 New Features: Extend support for additional PostgreSQL functionalities or integrate collaborative features for multi-user sessions.

Your contributions can make PSQLab even better. Whether you’re a seasoned developer or a newcomer, your ideas and code are welcome! 💡

🌐 Try It Out!

👉 Visit the live demo at: psqlab.neetigya.me\
🔗 Check out the source code on GitHub: github.com/neetigyachahar/PSQLab

Below is a screenshot of the PSQLab interface:

🤝 Let’s Connect

I’m always excited to discuss ideas, get feedback, and collaborate on this project. Feel free to reach out:

💻 GitHub Repository: neetigyachahar/PSQLab
🌍 Live Demo: psqlab.neetigya.me
🔗 LinkedIn: Connect with me

Jump in, explore, and help shape the future of in-browser databases. PSQLab is completely free—built with passion and open for contributions. Let’s build something amazing together! ✨

Happy querying! 🐘💻

Architecture Guide: Building Scalable React (or React Native) Apps with Zustand & React Query

Neetigya Chahar — Sat, 22 Feb 2025 13:52:38 +0000

In this blog, I'll share my approach to creating a clean architecture with Zustand stores, custom hooks, React Query, and UI components. I’ll explore how to keep business logic in custom hooks, avoid mixing it with stores, and manage API calls effectively. My goal is to structure these layers in a maintainable way while ensuring flexibility and separation of concerns. Do checkout the repo for the example.

Core Technologies

Zustand (State Management)

🚀 Minimal Boilerplate: Simple store creation with automatic re-renders
🔒 Immutable State: Built-in immutable updates via set method
🧩 Middleware Support: Extend with persistence, logging, or custom logic
🔄 Cross-Store Operations: Access multiple stores in business logic
📦 TypeScript First: Full type safety out of the box

React Query (Server State Management)

🌐 Smart Caching: Automatic cache management and deduping
⚡ Background Updates: Silent server synchronization
🛠 Mutations: Optimistic updates and error rollbacks
🔄 Auto Revalidation: Stale-while-revalidate strategy
🧩 Hooks-based API: Seamless integration with React components

Folder Structure

zustand-react-query-demo/  
├── src/  
│   ├── app/ 
│   ├── examples/
│   │   └── product-listing/
│   │       ├── api/
│   │       │   ├── fetchCategories.ts
│   │       │   └── fetchProducts.ts
│   │       ├── components/
│   │       │   ├── Product.tsx
│   │       │   └── TopBar.tsx
│   │       ├── hooks/
│   │       │   ├── useCategory.ts
│   │       │   └── useProducts.ts
│   │       ├── store/
│   │       │   └── useProductStore.ts
│   │       └── ProductList.tsx
├── tailwind.config.ts
├── package.json
└── next.config.ts

Architecture Principles

Visual representation of the data flow

UI Layer (Dumb Components)
- 💻 Only handles presentation and user interactions
- 🔗 Uses custom hooks for all business logic
- 🚫 No direct store/API access

// ProductList.tsx
const ProductList: FC = () => {
  const { data: products, isLoading, error } = useProducts()

  if (isLoading) {
    return (
      <div className="flex items-center justify-center min-h-[400px]">
        <p className="text-lg">Loading products...</p>
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex items-center justify-center min-h-[400px]">
        <p className="text-lg text-red-500">Error loading products</p>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <TopBar />
      <div className="max-w-7xl mx-auto">
        {/* Product grid */}
      </div>
    </div>
  );
};

Business Layer (Custom Hooks)
- 🧠 Contains all business logic and side effects
- 🔗 Orchestrates Zustand stores and React Query
- ♻️ Reusable across components/features

// useProducts.ts
const useProducts = () => {
  const { selectedCategory, sortOrder } = useProductStore();

  const products = useQuery<ProductType[]>({
    queryKey: ['products', selectedCategory, sortOrder],
    queryFn: async () => {
      // If category is selected, use category-specific endpoint
      if (selectedCategory) {
        return fetchCategoryProducts(selectedCategory, sortOrder || undefined);
      }
      // Otherwise use main products endpoint
      return fetchProducts(sortOrder || undefined);
    },
    staleTime: 1000 * 60 * 2, // Use the cache value till 2 minutes have passed
  });

  return products;
};

State Layer (Zustand Stores)
- 📦 Simple state containers
- 📤 Only basic setters/getters
- 🚫 No business logic

// useProductStore.ts
const useProductStore = create<ProductStore>((set) => ({
  selectedCategory: '',
  sortOrder: '',
  hasLoadedCategories: false,
  setSelectedCategory: (category) => set({ selectedCategory: category }),
  setSortOrder: (order) => set({ sortOrder: order }),
  setHasLoadedCategories: (loaded) => set({ hasLoadedCategories: loaded })
}));

API Layer (React Query)
- 🌐 Handles server communication
- 🔄 Automatic caching/revalidation
- 🛡 Type-safe API definitions

// api/fetchProducts.ts
export const fetchProducts = (sort?: string): Promise<ProductType[]> => 
  fetch(`https://fakestoreapi.com/products${sort ? `?sort=${sort}` : ''}`).then(res => res.json());

export const fetchCategoryProducts = (category: string, sort?: string): Promise<ProductType[]> =>
  fetch(`https://fakestoreapi.com/products/category/${category}${sort ? `?sort=${sort}` : ''}`).then(res => res.json());

Key Benefits

Separation of Concerns
- UI: Only presentation
- Business Logic: Centralized in hooks
- State: Simple storage
- API: Clean data fetching
Reusable Logic
- Custom hooks compose multiple stores/APIs
Testability
- Isolated store tests
- Mocked API tests
- Hook behavior tests
Type Safety
- End-to-end TypeScript support
- Shared types across layers
Scalability
- Add features without refactoring
- Predictable patterns for team members

FAQ

Q: How to handle complex cross-store operations?

// useThemeSetup.ts
export const useThemeSetup = () => {
  const {user} = useUserStore();
  const {setTheme} = useUiStore();

  useEffect(() => {
    if(user?.preferences?.theme) {
      setTheme(user.preferences.theme);
    }
  }, [user?.preferences]);
};

Q: How to prevent duplicate API calls?

// useUserData.ts
export const useUserData = (userId: string) => {
  return useQuery({
    queryKey: ['user', userId],
    queryFn: () => userApi.get(userId),
    staleTime: 5 * 60 * 1000
  });
};

This architecture combines Zustand's lightweight state management with React Query's powerful data synchronization, creating a robust foundation for complex applications. By strictly separating concerns and centralizing business logic in custom hooks, we achieve maintainable, testable, and scalable code that grows gracefully with your application's needs.

Output

Output of the example

Repo: zustand-with-react-query-demo

Happy hacking! 🚀

🚀 React 19: The Coolest Updates You Can't Miss! 😎

Neetigya Chahar — Sat, 22 Feb 2025 06:01:02 +0000

Hey there, fellow React devs! The wait is over—React 19 has landed, and it's packed with awesome features that'll make your coding life a breeze. Let's dive into the coolest updates and see how they can amp up your projects. 🛠️🔥

1. Bye-Bye `useCallback` and `useMemo` 👋

Remember juggling useCallback and useMemo to keep your app speedy? Well, React 19's got your back with automatic performance optimization. Now, the compiler handles those tweaks for you, so you can focus on building rad features without sweating the small stuff.

Before React 19:

import React, { useCallback } from 'react';

function Button({ onClick }) {
  const handleClick = useCallback(() => {
    // Do something cool
    onClick();
  }, [onClick]);

  return <button onClick={handleClick}>Click me</button>;
}

With React 19:

import React from 'react';

function Button({ onClick }) {
  const handleClick = () => {
    // Do something cool
    onClick();
  };

  return <button onClick={handleClick}>Click me</button>;
}

No more wrapping functions in hooks—the new compiler's got it covered. Get the scoop here.

2. Actions: Smooth Moves for Data Updates 🕺

Updating data just got a whole lot smoother with Actions. Say goodbye to manual state juggling and hello to automated:

Loading States: Let React handle the wait.
Error Handling: Keep things running, even when stuff goes sideways.
Form Submissions: Less boilerplate, more action.
Optimistic Updates: Instant UI feedback FTW.

Check out this slick example:

function UpdateProfile() {
  const [username, setUsername] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleUpdate = () => {
    startTransition(async () => {
      const error = await updateUsername(username);
      if (error) {
        setError(error);
        return;
      }
      redirect("/dashboard");
    });
  };

  return (
    <div>
      <input value={username} onChange={(e) => setUsername(e.target.value)} />
      <button onClick={handleUpdate} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

With useTransition in the mix, your UI stays snappy during updates. Dive deeper into Actions.

3. The `use` Function: Your New Best Friend 🛠️

Meet use, the versatile function that's here to make your life easier. With use, you can:

Handle Promises: Async operations? No sweat.
Access Contexts: Grab what you need, when you need it.
Manage Async Data: Fetch and render, all in one go.

Peep this example:

function UserDashboard({ userId }) {
  const user = use(fetchUserData(userId));
  return <div>Welcome, {user.name}!</div>;
}

Cleaner code, happier devs. Learn more about use.

4. Document Management Made Easy 🗂️

Tired of wrestling with metadata and resources? React 19 streamlines the process, letting you:

Set Metadata: Titles, metas, and links right in your components.
Manage Stylesheets: New precedence system for better style control.
Load Scripts: Async scripts without the hassle.

For example:

function HomePage() {
  return (
    <>
      <title>Awesome App</title>
      <meta name="description" content="The coolest app built with React 19" />
      <link rel="stylesheet" href="styles.css" />
      <h1>Welcome to Awesome App</h1>
    </>
  );
}

Keep your metadata and components together for easy maintenance. Read up on document management.

5. Developer Experience Upgrades 👩‍💻👨‍💻

React 19 is all about making your dev life smoother with:

Simplified Refs: Pass refs like props in function components.
Cleaner Context Usage: <Context> is the new <Context.Provider>.
Better Error Messages: Hydration errors with clear guidance.
Custom Elements Support: Seamless web component integration.

These tweaks mean less friction and more flow. Check out all the enhancements.

6. Static Site Generation: Prerender Like a Pro 🏗️

Building static sites? React 19's prerender APIs offer:

Advanced Data Loading: Fetch data during build time like a boss.
Streaming Compatibility: Go with the flow in modern environments.
Performance Boosts: Speedy load times for static content.

Craft high-performance static sites with ease. Start prerendering today.

Ready to Upgrade? ⏰

Starting a new project? React 19 is a no-brainer. Updating an existing app? The upgrade's designed to be smooth, but make sure to check the official guide for any breaking changes.

Step into the future of React development with version 19 and unlock new possibilities. Happy coding! 🎈

Note: Code examples are for illustration. For the full lowdown, hit up the official React 19 docs.

DeepSeek is now available on Microsoft Azure 🌚

Neetigya Chahar — Thu, 30 Jan 2025 17:22:59 +0000

DeepSeek R1, a cutting-edge open-source AI model renowned for its advanced reasoning capabilities, is now accessible through Microsoft's Azure AI Foundry and GitHub. This integration offers developers a robust tool for tasks requiring complex problem-solving, such as mathematics, coding, and analytical reasoning.

About DeepSeek R1

Developed by the Chinese AI startup DeepSeek, the R1 model has garnered attention for its exceptional performance across various benchmarks. Notably, it achieved a 79.8% score on the AIME 2024 mathematics tests and a 97.3% accuracy on MATH-500, underscoring its proficiency in mathematical reasoning. Additionally, with a 2,029 rating on Codeforces, it outperformed 96.3% of human programmers, highlighting its coding capabilities. (github.com)

Accessing DeepSeek R1 on Azure AI Foundry

Azure AI Foundry serves as a platform for developers to explore and deploy advanced AI models. With the inclusion of DeepSeek R1, users can seamlessly integrate this model into their applications. To get started:

Navigate to Azure AI Foundry: Visit the Azure AI Foundry platform.
Select DeepSeek R1: Browse the available models and select DeepSeek R1 to view its details and deployment options.
Deploy the Model: Follow the provided guidelines to deploy DeepSeek R1 within your Azure environment, tailoring it to your specific application needs.

Utilizing DeepSeek R1 via GitHub

For developers interested in a more hands-on approach, DeepSeek R1's open-source code is available on GitHub:

Access the Repository: Visit the DeepSeek R1 GitHub repository to explore the model's codebase.
Clone the Repository: Use Git to clone the repository to your local machine:

   git clone https://github.com/deepseek-ai/DeepSeek-R1.git

Set Up the Environment: Follow the instructions in the repository to set up the necessary environment and dependencies.
Integrate and Customize: Leverage the model's capabilities by integrating it into your projects, customizing it as needed to suit your application's requirements.

Benefits of Integration

Incorporating DeepSeek R1 into your applications offers several advantages:

Enhanced Problem-Solving: The model's advanced reasoning abilities can improve the efficiency and effectiveness of tasks involving complex problem-solving.
Open-Source Flexibility: Being open-source, DeepSeek R1 allows for customization and adaptation to fit specific project needs.
Scalability with Azure: Deploying the model through Azure AI Foundry ensures scalability and robust performance, accommodating varying workloads.

The availability of DeepSeek R1 on both Azure AI Foundry and GitHub empowers developers to harness advanced AI capabilities, fostering innovation across diverse applications.

Integrate VS Code editor in your project! Monaco Editor 🚀

Neetigya Chahar — Mon, 20 Jan 2025 15:19:53 +0000

If you're looking to integrate a 💪 and versatile 🖥️ editor into your project, the Monaco Editor should be at the top of your 📜. Developed by Microsoft 🏢, Monaco is the same editor that powers Visual Studio Code, offering a feature-rich 🛠️ experience for developers 👨‍💻.

Key Features of Monaco Editor ✨

🖍️ Syntax Highlighting: Supports a wide range of 📜 languages out of the box.
💡 IntelliSense: Provides smart 💭 suggestions, parameter hints, and auto-completion.
⚙️ Extensibility: Easily customizable 🎨 themes, ⌨️ keybindings, and configurations.
🗣️ Multiple Language Support: Offers support for multiple programming languages simultaneously.
⚡ Lightweight: Designed to load 🚀 quickly and work seamlessly within 🌐 environments.

Whether you're building an IDE, a coding 🛝, or a markdown 🖋️, Monaco provides the flexibility and tools to get started 🏃‍♂️.

Why Choose Monaco Editor? 🤔

🛡️ Battle-tested: Backed by Microsoft 🏢 and used in VS Code, it’s robust and reliable.
🔌 Rich API: Offers extensive APIs for 🛠️ and 🧩 integration.
🌍 Browser-based: Ideal for web applications, as it runs entirely in the 🌐.

Integrating Monaco Editor with React ⚛️

Here’s how you can integrate Monaco Editor into your React 🛠️:

🛠️ Installation

First, install the required package 📦:

npm install @monaco-editor/react

🧩 Basic Component Configuration

Create a React component to render the Monaco Editor 🖍️:

import React from 'react';
import Editor from '@monaco-editor/react';

const CodeEditor = () => {
  const handleEditorChange = (value) => {
    console.log('Editor content:', value);
  };

  return (
    <Editor
      height="500px"
      defaultLanguage="javascript"
      defaultValue="// Start coding here..."
      theme="vs-dark"
      onChange={handleEditorChange}
    />
  );
};

export default CodeEditor;

📝 Key Props Explained

height: Specifies the height of the 🖥️.
defaultLanguage: Sets the default programming language (e.g., JavaScript, Python 🐍).
defaultValue: Provides the initial 📜 for the editor.
theme: Customizes the editor’s 🎨 (e.g., vs-dark, light).
onChange: A callback that triggers whenever the 🖋️ changes.

🚀 Running the Application

Start your React app, and you'll have a fully functional 🖥️ in your 🌐!

Final Thoughts 💭

The Monaco Editor is a developer’s 🛌 for embedding rich code editing functionality into web 🛠️. With its extensive 🛠️ and seamless integration, it’s an excellent choice for any project requiring advanced editor capabilities.

Monaco editor by Microsoft
@monaco-editor/react

Happy coding! 😃

DEV Community: Neetigya Chahar

The End of Clicking: Why Voice-Based AI is the Final Frontier of UX (feat. ShopSage)

🛒 Meet ShopSage: Your AI Shopping Partner

Experience the Demo here

🎙️ The Future is No-UI: Why We’re Returning to Our Roots

Why Voice Wins:

The Hurdle

🏗️ The Technical Magic: Real-time Agents & Tool Calling

How it Works: The Agentic Loop

Logic Flow: How Voice Becomes Action

Integrating AI into Existing Systems

💎 Deep Dive: How ShopSage Redefines Shopping

1. A Personality That Connects

2. Semantic Search (Powered by MongoDB Vector Search)

3. The Tech Stack

4. Actions Beyond the Screen

🚀 What's Next?

Building dynamic Sanity CMS driven UI with Builder Pattern

🧠 When to Use Builder Pattern

🧱 Structure of the Builder Pattern

🍔 Real-World Analogy: Building a Burger

1. Product

2. Builder

3. Client Usage

💡 Benefits of the Builder Pattern

🧠 Advanced Use Case: Building Nested UI Layouts from CMS

👨‍💻 Step-by-Step Builder in React

1. Leaf Components

2. Layout Components

3. 🔧 Recursive Section Builder

4. Rendering a Page

✅ Why This is a Builder Pattern

🖥️ Where is the Builder Pattern Used in Backend?

💡 Extensions and Improvements

✨ Final Thoughts

Claude Sonnet 4 has arrived!

📈 Performance Breakthroughs

🛠️ Advanced Features

🤝 Industry Integration and Adoption

💰 Availability and Pricing

📝 Conclusion

Figma to Next.js: AI-Powered Code Generation with MCP & Windsurf

✨ Introduction

🚀 Why This Matters

🛠️ Configuring the Figma MCP Server

0️⃣ Identify which MCP server to use

1️⃣ Generate a Figma Personal Access Token

2️⃣ Add MCP Server Details to Your Code Editor

1️⃣ Windsurf (Codeium) Configuration

2️⃣ VS Code Configuration

🎬 Demo

✅ Conclusion

Building a RAG System with Firebase Functions, OpenAI, and Pinecone

1. Indexing Data: Turning Your Schema into Searchable Vectors

2. Searching: Finding Relevant Data with Semantic Queries

3. Deleting a Namespace: Cleaning Up

Deployment: Firebase Functions in Python

Conclusion

Server‑Side Rendering (SSR) vs React Server Components (RSC) in Next.js: The "use client" Directive

TL;DR

Server‑Side Rendering (SSR)

React Server Components (RSC)

Demo examples

DSA with Python - Why? Pros, Pitfalls & Best Practices. Frequently updated.

🧠 Simple Syntax, Clear Logic

🎯 Perfect for Interviews

🔧 Built-in Power

🚀 Fast to Write, Easy to Debug

Python’s Recursion Limit

🧠 Understanding Python's Time Complexity: Operations That Seem O(n) But Aren't

🔍 in Operator — list vs set/dict

✅ in on a set or dict: O(1) average

⚠️ in on a list: O(n)

➕ list.append(x)

✅ Looks like: O(n)

Actually: Amortized O(1)

🧹 list.pop(0) vs deque.pop()

⚠️ list.pop(0): O(n)

✅ deque.pop() (either end): O(1)

↔️ list.insert(0, x) and list.remove(x)

🔍 `in` Operator — `list` vs `set`/`dict`

✅ `in` on a `set` or `dict`: `O(1)` average

⚠️ `in` on a `list`: `O(n)`

➕ `list.append(x)`

✅ Looks like: `O(n)`

Actually: Amortized `O(1)`

🧹 `list.pop(0)` vs `deque.pop()`

⚠️ `list.pop(0)`: `O(n)`

✅ `deque.pop()` (either end): `O(1)`

↔️ `list.insert(0, x)` and `list.remove(x)`

🔀 `list.sort()` / `sorted(list)`

✅ Looks like: `O(n)`

Actually: `O(n log n)`

Using Comparator Functions in Python’s `sorted()` and `.sort()`

🔄 `sorted()` vs `.sort()`

Example 1: Using `sorted()` with a Comparator

Example 2: Using `.sort()` with a Comparator

`MIN_INT` and `MAX_INT`

Why use `(val, idx, node)` in heap?

1. Bye-Bye `useCallback` and `useMemo` 👋

3. The `use` Function: Your New Best Friend 🛠️