DEV Community: Sparsh Jain

I Built a RAG Search Engine from Scratch to Understand How Modern Search Actually Works

Sparsh Jain — Thu, 26 Feb 2026 04:16:03 +0000

Everyone is building RAG apps.

But most tutorials skip the most important part — search quality.

So instead of just plugging in a framework, I decided to build my own RAG Search Engine from scratch to deeply understand how retrieval systems work under the hood.

This project helped me explore the real mechanics behind:

Keyword search
Semantic search
Hybrid ranking
Reranking models
Evaluation metrics
Multimodal retrieval
Retrieval-Augmented Generation (RAG)

You can watch the full breakdown here:

YouTube Video: [https://www.youtube.com/watch?v=HEx0A5R-_Tc]

GitHub repository:

Source Code: [https://github.com/SplinterSword/RAG-Search-Engine]

What This Project Implements

Keyword Search (BM25)

I implemented classical information retrieval techniques like:

TF (Term Frequency)
IDF (Inverse Document Frequency)
BM25 scoring

This helped me understand why traditional keyword search is still extremely powerful in production systems.

Semantic Search (Embeddings + Vector Similarity)

I added dense retrieval using embeddings and cosine similarity to capture meaning instead of exact keyword matches.

This allows the system to handle:

Synonyms
Context
Conceptual similarity

Hybrid Search

Instead of choosing between keyword or semantic search, I combined them using:

Weighted fusion
Reciprocal Rank Fusion (RRF)

This is closer to how modern production search systems operate — combining precision and semantic understanding.

Reranking with Cross-Encoders

After retrieving top results, I added a reranking stage to refine relevance.

This significantly improved result quality by evaluating query-document pairs more deeply.

Evaluation (The Part Most People Skip)

I didn’t just build the system — I measured it.

I implemented:

Precision
Recall
F1 Score
Manual evaluation
LLM-as-a-judge evaluation

This helped me understand how to properly assess retrieval performance.

Multimodal Search

I also experimented with text + image retrieval using embedding-based similarity.

Retrieval-Augmented Generation (RAG)

Finally, I connected the hybrid retrieval system to an LLM to generate grounded responses.

This reinforced one important lesson:

Better retrieval > Bigger model.

Why I Built This

Most RAG demos abstract away the hardest part — retrieval.

I wanted to understand:

How ranking algorithms work
Why hybrid systems outperform pure approaches
How reranking improves precision
How evaluation should actually be done
What tradeoffs exist in search system design

This project was about learning how modern search systems are engineered — not just calling an API.

If you're interested in:

Search engines
Information retrieval
RAG systems
AI system design
Hybrid search architectures

I’d love to hear your thoughts.

Let me know what you’d improve or explore next 👇

THIS IS HOW REAL PASSWORD MANAGERS ACTUALLY WORK

Sparsh Jain — Mon, 09 Feb 2026 12:00:39 +0000

Most people use password managers every day.

Very few understand how they actually keep passwords secure.

In this article, I break down how real, production-grade password managers work — the same core ideas used by tools like 1Password or Bitwarden — by walking through a project I built called Passwuts.

🎥 Full video walkthrough:

👉 https://youtu.be/G1m7K7ZG1M0

Why I Built Passwuts

Password reuse is one of the biggest security risks today.

When a single website is breached, reused passwords expose users across every service they use.

Passwuts solves this by:

Enforcing strong, unique passwords
Using client-side encryption
Ensuring the server never sees plaintext credentials

This is the same security philosophy used by serious password managers.

High-Level Architecture (Zero-Knowledge Model)

Passwuts follows a zero-knowledge, client-first encryption model:

🔐 Master password never leaves the client
🔑 Encryption keys are derived locally using PBKDF2
🔒 Passwords are encrypted using AES-GCM
🗄️ Server stores only ciphertext + IV

Even if the backend is compromised, passwords remain safe.

How Encryption Works (Step-by-Step)

User creates a master password
A strong encryption key is derived using PBKDF2
- Inputs: master password + user UID (as salt)
Passwords are encrypted using AES-GCM
- Each encryption uses a random IV
Only encrypted data is stored in Firestore

At no point does plaintext leave the browser.

Vault Verification (Without Storing Passwords)

A common problem:

How do you verify the master password without storing it?

Passwuts uses a verifier pattern:

A known string ("vault-check") is encrypted
Stored in Firestore as vault metadata
On unlock:
- Client decrypts it locally
- If it decrypts correctly → password is valid

✅ Secure

✅ Zero-knowledge

✅ No password storage

Browser Extension Architecture

The browser extension reuses the exact same crypto layer as the web app:

Firebase authentication
Shared internal crypto package (@pm/crypto)
Client-side encryption only
No secret logic in the backend

This keeps behavior consistent across platforms.

What This Project Taught Me

Building a password manager taught me some hard lessons:

🔍 Crypto failures usually come from misuse, not math
🔄 IV / nonce management is critical
🧠 Security UX matters as much as cryptography
🔐 Zero-knowledge systems require discipline everywhere

Final Thoughts

Password managers are not magic.

They are carefully engineered systems built on:

Key derivation
Authenticated encryption
Secure client-side architecture

Understanding how they work makes you:

A better engineer
A safer user

If you enjoyed this breakdown, watch the full video walkthrough 👇

🎥 https://youtu.be/G1m7K7ZG1M0

Understanding Polyfills: Bridging the Gap in Modern and Old Web Browsers

Sparsh Jain — Sun, 28 Sep 2025 12:05:36 +0000

Modern web development is exciting. With JavaScript evolving rapidly and new web APIs emerging constantly, developers can build highly interactive and feature-rich applications. But here’s the challenge: not all browsers support these features natively, especially older ones like Internet Explorer.

This is where polyfills come in—a small piece of code that ensures your modern web features work across all browsers, bridging the gap between the old and the new.

What is a Polyfill?

A polyfill is essentially a patch for missing features in older browsers. It implements functionality that is present in modern browsers but absent in older ones.

Think of it like this: if modern browsers speak a new language, polyfills act as translators for older browsers, allowing them to understand and execute your code.

Polyfills are crucial for cross-browser compatibility. They let developers use modern JavaScript features without worrying that some users will see broken functionality.

Why Do We Need Polyfills?

Even though modern browsers like Chrome, Firefox, Edge, and Safari update frequently, not all users keep their browsers updated. Some might still be using older versions or legacy browsers, which could break your website if you rely solely on modern APIs.

Polyfills help:

Ensure cross-browser compatibility: Your application behaves consistently across different browsers and versions.
Enable progressive enhancement: You can use modern features while providing fallbacks for unsupported browsers.
Maintain a smooth user experience: Avoid runtime errors that could break your application for certain users.
Future-proof your code: You can write modern code now without worrying about alienating users on older platforms.

Example Scenario: `Array.forEach()` and Simulating Unsupported Browsers

The Array.prototype.forEach() method allows you to iterate over arrays conveniently:

const numbers = [1, 2, 3, 4];
numbers.forEach(num => console.log(num * 2));
// Output: 2, 4, 6, 8

Older browsers like Internet Explorer 8 do not support forEach(), which would break your code. To simulate an unsupported browser, you can temporarily remove forEach:

// Simulate missing forEach in old browsers
Array.prototype.forEach = null;

// This would throw an error in browsers that don't support it
// numbers.forEach(num => console.log(num * 2));

Polyfill for `Array.forEach`

// Polyfill for Array.forEach
if (!Array.prototype.forEach) {
  Array.prototype.forEach = function(callback, thisArg) {
    for (let i = 0; i < this.length; i++) {
      if (i in this) {
        callback.call(thisArg, this[i], i, this);
      }
    }
  };
}

// Test after applying polyfill
const numbers = [1, 2, 3, 4];
numbers.forEach(num => console.log(num * 2));
// Output: 2, 4, 6, 8

Full Demonstration Code

Here’s the complete example combining all steps:

// Step 1: Original array
const numbers = [1, 2, 3, 4];
console.log("Original forEach:");
numbers.forEach(num => console.log(num * 2));
// Output: 2, 4, 6, 8

// Step 2: Simulate unsupported browser
Array.prototype.forEach = null;

// Step 3: Uncommenting the following line would throw an error
// numbers.forEach(num => console.log(num * 2));

// Step 4: Polyfill for Array.forEach
if (!Array.prototype.forEach) {
  Array.prototype.forEach = function(callback, thisArg) {
    for (let i = 0; i < this.length; i++) {
      if (i in this) {
        callback.call(thisArg, this[i], i, this);
      }
    }
  };
}

// Step 5: Test after polyfill
console.log("After polyfill:");
numbers.forEach(num => console.log(num * 2));
// Output: 2, 4, 6, 8

Other Common Features Needing Polyfills

Promise
fetch() API
Array.includes()
Object.assign()
String.padStart() / String.padEnd()

Instead of writing these polyfills manually, developers often rely on libraries like core-js, babel-polyfill, or services like polyfill.io.

Tools for Using Polyfills

1. core-js

A modular library that implements ES6, ES7, and beyond features. You can selectively import only what you need:

import 'core-js/es/array/includes';

2. @babel/preset-env

Babel can automatically include necessary polyfills based on your target browsers:

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', { useBuiltIns: 'entry', corejs: 3 }]
  ]
};

3. polyfill.io

A service that serves only the polyfills needed for the requesting browser, minimizing bundle size:

<script src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.forEach,Promise"></script>

Best Practices for Using Polyfills

Polyfill selectively: Only include what is needed to reduce your bundle size.
Feature detection first: Always check if a browser supports a feature before polyfilling it.
Encourage modern browsers: While polyfills help, it’s better to prompt users to update their browsers for performance and security benefits.
Combine with transpilers: Tools like Babel can transform modern syntax while polyfills add missing runtime features.
Test across browsers: Always test your application in the browsers you aim to support.

Conclusion

Polyfills are a bridge between modern web capabilities and older browser environments. They let developers write modern, clean code without leaving behind users on outdated browsers.

By understanding polyfills, using feature detection wisely, and combining them with tools like Babel or core-js, you can create robust, cross-browser applications that work for everyone.

Modern web development is about innovation, but accessibility matters too. Polyfills ensure no one is left behind.

The Googly way of Making AI Agents

Sparsh Jain — Fri, 27 Jun 2025 12:06:31 +0000

Introduction

I want to start by saying, this not a guide or post explaining how to use tools like n8n or ToolHouse AI (By the way, already written a blog about how to use ToolHouse AI, you can read it by going here).

I wanted to write about how to make like a BIG BOI DEVELOPER using python and real lines of code. Allowing you all to make your customise AI Agents easily for any app you desire. Who knows maybe you can create the next million dollar AI Agent startup.

Now setup your local IDE with python and get ready to build your first AI Agent.

Which Framework to choose

Though there are many frameworks to build AI Agents like LangChain, https://www.crewai.com/, etc, I recommend Google Agent Development Kit because first of all it is genuinely awesome and second of all it is by far the least complicated ,all the while being very powerful and providing all the necessary tools to build a Multi Agent Modal from scratch.

What is Google ADK

Google Agent Development Kit is is a flexible and modular framework for developing and deploying AI agents. While optimized for Gemini and the Google ecosystem, ADK is model-agnostic (fancy word for saying that it can use any agent like openAI,etc), deployment-agnostic, and is built for compatibility with other frameworks. ADK was designed to make agent development feel more like software development, to make it easier for developers to create, deploy, and orchestrate agentic architectures that range from simple tasks to complex workflows.

It makes task so simple that it even has it's own function for starting a fastAPI server (which can be used as any other fastAPI server), handling all the complex session management, on its own so you can just focus on creating your app.

It even has a built in Angular web application to test your AI Agents, where you can see what is the flows of actions taking place under the hood. You can even customize the UI to build your own custom made web app.

You can all accomplish it by using just one package, Google ADK.

How to use Google ADK

Now I will talk about how to use it :-

First and most obvious is to download and install the python package, you can install it running this command :-

pip install google-adk

Now before moving you need make sure that you have this exact structure in your directory if you don't want to deal with session management and creating a runner. You also need to have a root_agent in every agent.py file. If you want full customizability in file structure you have create a your own session management and runner which not that hard either. I will link the docs at the end of this section.

parent_folder/
    multi_tool_agent/ (Directory name = Name of the agent = App Name)
        __init__.py
        agent.py
        .env

Second setup your .env file in this format

GOOGLE_GENAI_USE_VERTEXAI=FALSE
GOOGLE_API_KEY=PASTE_YOUR_ACTUAL_API_KEY_HERE

Now we get to the meet and potatoes of the code first open your init.py file and paste this :-

from . import agent

After you are done with previous step, open the agent.py files(the file where the agents are defined) and paste this.

import datetime
from zoneinfo import ZoneInfo
from google.adk.agents import Agent

def get_weather(city: str) -> dict:
    """Retrieves the current weather report for a specified city.

    Args:
        city (str): The name of the city for which to retrieve the weather report.

    Returns:
        dict: status and result or error msg.
    """
    if city.lower() == "new york":
        return {
            "status": "success",
            "report": (
                "The weather in New York is sunny with a temperature of 25 degrees"
                " Celsius (77 degrees Fahrenheit)."
            ),
        }
    else:
        return {
            "status": "error",
            "error_message": f"Weather information for '{city}' is not available.",
        }


def get_current_time(city: str) -> dict:
    """Returns the current time in a specified city.

    Args:
        city (str): The name of the city for which to retrieve the current time.

    Returns:
        dict: status and result or error msg.
    """

    if city.lower() == "new york":
        tz_identifier = "America/New_York"
    else:
        return {
            "status": "error",
            "error_message": (
                f"Sorry, I don't have timezone information for {city}."
            ),
        }

    tz = ZoneInfo(tz_identifier)
    now = datetime.datetime.now(tz)
    report = (
        f'The current time in {city} is {now.strftime("%Y-%m-%d %H:%M:%S %Z%z")}'
    )
    return {"status": "success", "report": report}


root_agent = Agent(
    name="weather_time_agent",
    model="gemini-2.0-flash",
    description=(
        "Agent to answer questions about the time and weather in a city."
    ),
    instruction=(
        "You are a helpful agent who can answer user questions about the time and weather in a city."
    ),
    tools=[get_weather, get_current_time],
)

and you are done with creating your AI Agent.

Final step is testing which can be easily done by just navigating to the parent directory and just running this command :-

adk web

which will open this UI in your library.

You can test the modal and see the workflow in this UI by giving it a prompt and using the Events tab which looks like this :-

On the Events tab, you can also click the Trace button to see the trace logs for each event that shows the latency of each function calls:

Breaking down the above code

The code in agent.py (which is the main code) has several variables and functions, which contain the tools used by the AI agents to complete the request and the Agent Definition, I will break down these part one by one :-

Tools - Tools are the functions which the agent has access to accomplish tasks. These functions can be custom python functions or built in functions provided by google (which include google search, code runner, etc). If you want to build your custom tool (custom python function), It is important to keep one thing in mind.
Write clear, descriptive, and accurate docstrings for your tools (python functions). This is essential for the LLM to use the tool correctly.

def get_weather(city: str) -> dict:
    # Descriptive docstring
    """Retrieves the current weather report for a specified city.

    Args:
        city (str): The name of the city for which to retrieve the weather report.

    Returns:
        dict: status and result or error msg.
    """
    if city.lower() == "new york":
        return {
            "status": "success",
            "report": (
                "The weather in New York is sunny with a temperature of 25 degrees"
                " Celsius (77 degrees Fahrenheit)."
            ),
        }
    else:
        return {
            "status": "error",
            "error_message": f"Weather information for '{city}' is not available.",
        }

Agent Definition - This is the part which what your agent is and what does it / what is its role. This definition looks like this :-

root_agent = Agent(
    name=NAME OF THE AGENT,
    model=BASE LLM MODAL,
    description=(
          DESCRIPTION OF THE MODAL
    ),
    instruction=(
        INSTRUCTIONS OF THE MODAL I.E. WHAT IT DOES
    ),
    tools=[TOOLS ACCESSIBLE TO THE AGENT],
)

Particularly Description and Instructions are important as descriptions tell other agents in a multi agent modal what this agent is so they can use it accordingly and instructions define the agent behavior, constraints and guardrails, etc.

For deeper dive into these topics and if you want to learn about the Google ADK, here are the docs.

Conclusion

Google ADK is a powerful framework allowing you to build anything from a simple single agent workflow to complex multi-agent modal, with much complications while providing all the flexibility that a developer would need.

In fact here the multi agent modal I build for my personal project EduAssistant(Github), which is a ai tutor, making exam preparations easy. Go check it out. Now enough of shilling, here is the code :-

from google.adk.agents import Agent

quizzes_agent = Agent(
    name="Quizzes_Agent",
    model="gemini-2.0-flash",
    description=(
        "This is an AI agent which is responsible for generating MCQ questions and answers from the content provided to it."
    ),
    instruction=(
        "You are the Quizzes Agent responsible for generating MCQ questions with 4 options and answers of the content provided to you by the Manager Agent. Also you are to return this output back to the manager agent."
    ),
    output_key="quiz"
)

summarizer_agent = Agent(
    name="summarizer_agent",
    model="gemini-2.0-flash-exp",
    description=(
        "This is an AI agent which is responsible for generating summaries of the content provided to it."
    ),
    instruction=(
        """You are a Summarizer Agent in an educational multi-agent system.

Your role:
- Create concise, accurate summaries of educational content
- Focus on key concepts, main ideas, and important details
- Maintain academic accuracy and clarity
- Structure summaries logically with clear headings when appropriate

When given content, analyze it thoroughly and provide a well-structured summary that captures the essential information in a clear, academic style."""
    ),
    output_key="summary"
)

reference_agent = Agent(
    name="Reference_Agent",
    model="gemini-2.0-flash",
    description=(
        "This is an AI agent which is responsible for giving relevant references or citations related to the content provided to it."
    ),
    instruction=(
"""You are a Reference Agent specialized in identifying the content and giving relavent citations, references, and source materials from educational content.

Your role:
- Provide all types of references relavant to the content including:
  * Academic citations (APA, MLA, Chicago, etc.)
  * URLs and web links
  * PDFs and other documents
  * Images and other media
  * Book titles and authors
  * Journal articles and papers
  * Document titles and section references
- Format extracted references clearly and organized
- Include page numbers, dates, and other citation details when available

Provide a comprehensive list of all references related to the content provided to you."""
    ),
    output_key="references"
)

flash_card_agent = Agent(
    name="Flash_Card_Agent",
    model="gemini-2.0-flash",
    description=(
        "This is an AI agent which is responsible for generating flash cards from the content provided to it."
    ),
    instruction=(
        """You are a Flashcard Generation Agent that creates effective study flashcards from educational content.

Your role:
- Analyze content to identify key facts, concepts, and definitions
- Create clear question-answer pairs that test understanding
- Ensure questions are specific and answers are concise but complete
- Cover all important topics from the provided content

Create comprehensive flashcards that facilitate active recall and help students understand key concepts."""
    ),
    output_key="flashcards"
)

root_agent = Agent(
    name="Manager_Agent",
    model="gemini-2.0-flash",
    description=(
        "This AI agent functions as an orchestrator and coordinator in a multi-agent system designed to answer queries based on domain-specific content provided to it. Its primary role is to manage the interactions between multiple specialized agents and ensure accurate, context-aware, and efficient responses to user queries."
    ),
    instruction=(
       """You are the Manager Agent for the EduAssistant multi-agent system.

Your role:
- Understand user requests and determine appropriate actions
- Coordinate with specialized agents when needed:
  * Use summarizer_agent for summarization requests
  * Use reference_agent for reference extraction requests  
  * Use flashcard_agent for flashcard generation requests
  * Use quizzes_agent for quizzes generation requests
- Provide comprehensive educational assistance
- Maintain academic accuracy and helpful tone
- Format responses appropriately based on user needs

Available agents:
- summarizer_agent: Creates summaries of educational content
- reference_agent: Extracts references and citations
- flashcard_agent: Generates study flashcards
- quizzes_agent: Generates quizzes from educational content

When users ask for specific functions, delegate to the appropriate agent and provide the results in a clear, helpful format asked by the user."""
    ),
    sub_agents=[quizzes_agent, reference_agent, flash_card_agent, summarizer_agent],
)

only limitation which was able to find is that you can't use google's built in tools in sub-agents or with other sub agents. Also if you don't want handle session management but want to use the agent as a API call then you have to create a main.py in the parent directory and paste this :-

import os

import uvicorn
from google.adk.cli.fast_api import get_fast_api_app

AGENT_DIR = os.path.dirname(os.path.abspath(__file__))
ALLOWED_ORIGINS = ["http://localhost", "http://localhost:8080", "*"]
SERVE_WEB_INTERFACE = True

app = get_fast_api_app(
    agents_dir=AGENT_DIR,
    allow_origins=ALLOWED_ORIGINS,
    web=SERVE_WEB_INTERFACE,
)

if __name__ == "__main__":
    uvicorn.run(app, host="0.0.0.0", port=int(os.environ.get("PORT", 8000)))

and start it by running a uvicorn run command, this way you can implement the CORS policies preventing blocking of request.

Now here you go, I have given you every thing to get started with building AI Agent with Google ADK, but it has many things which I didn't cover like sequencial, loop agents, etc, so I encourage you explore the Google ADK Docs. If you have any feedback regarding this post I would love to hear from you. Toodles.

Making AI Agents Easy

Sparsh Jain — Sun, 01 Jun 2025 10:55:04 +0000

Everyone can agree that AI Agents are the next big thing the world development, It has huge potential not only just for developer but also for the everyday guy who is a teacher or a sales accountant,as it could literally automate things that us humans despise doing. But the problem is that non-coders can't take advantage of AI Agents, without learning how to code.

Well no more, because I found a tool where anyone can make to powerful AI Agent to automate their workflow without writing a single line of code. Even developers who want an easy way to integrate AI Agents in there next project and don't want to learn how to code it, can use this tool, even I used it to integrate AI Agents in an existing project that I had.

Toolhouse AI

Well enough beating around the bush, the tool I am talking about is Toolhouse AI.

Toolhouse AI is a cloud-based platform designed to simplify the integration of AI Agents into applications powered by Large Language Models (LLMs). It offers developers and non-developers a streamlined approach to enhance AI capabilities with minimal or no code.

You the best part is that they made their free tier so generous that 90% of the people are not going need more that this so for them it is essentially free.
How to use it

Now I am going to tell you how to use it. Are you excited, I know I am.

Log into toolhouse ai, like obviously what else did you expect the first step to be.
You will greeted with this screen

Here you have multiple option to explore multiple MCP severs and premade AI Agents you can go try these, if you want. I think they have good utility in everyday life.

But to make you own you need to click on the create new agent button on the top right of the screen.
You will taken to this page

Now all you have to do is describe what you want the AI Agent to do do and voila you created your very own AI Agent. It is that easy.

Here is an example agent for people who are looking for referrals and contacts for the company you want to work in.

Where I asked to find the linkedin and emails of Google HR and send it to my email.

You can also use it as an API in your own project by using the API endpoint the provide here

You can already guess how useful that can be.

Conclusion

We all know that AI Agents is the future and rather than it being limited to people who know how to code, tool like Toolhouse AI give access of AI Agents to the general public which I think is really cool, I just wanted to shed some light on this product.

If you have any feedback I would love to listen to it. Thanks for you time.

The Cheapest Way to Deploy Web Apps

Sparsh Jain — Sat, 24 May 2025 13:37:37 +0000

Introduction

This month I got my first bill for my google cloud platform. When I saw the bill, my first thought was "well, I am screwed, aren't I". It was like 6000 rupees ($70). I am a college student and there is no way in hell I can afford that.

So I did what any self respecting college student would do and decline all the payments and started fresh.

Armed with my prior experience, I started my crusade to find the cheapest and the most effective way to deploy my apps.

Which cloud platform to choose

Choosing the appropriate cloud platform, is the most important decision one can make, I mean they are the ones making the bills at the end of the day which you have to pay. So it is essential that every developer does his in depth research about these platforms, before making a decision.

Backend - I think Google Cloud Platform is the best for beginners. It is cheap, not that complicated to use, has a very generous free tier, and most importantly it asks before it charges your charges your credit card. Also while using it make sure that your storage and cloud run region are same and comes under the free tier of GCP, GCP charges extra for cross region transfer.

Frontend - Vercel is the best choice if your are using NEXT.js or any react app. One can deploy his/her frontend app easily in just 2 clicks with continuous deployment out of the box (any changes in main branch of github repo is automatically reflected there). Here is the fun part, you don't even need to enter your credit card details to get started, I know I haven't.

Why Seperate Frontend and Backend deployment

You must have noticed I choose different platforms for frontend and backend deployment. You might be wondering why do such a thing in the first place, isn't it better to have every thing on one place ??

The reason I do it because first it makes my work much more manageable, knowing that my frontend and backend seperated. But the more important reason is the specialized advantages that platform like Vercel provide for heavier frontend deployment (like static-site optimization, CDNs, caching) which platforms like Google Cloud Platform don't provide.

Google Cloud Platform, Heroku, AWS provide dynamic runtimes, scalability, database connection which are more tailored towards backend needs.

Having frontend and backend deployed seperately means that you don't have to worry about potential problems that might occur when you try to scale either.

What programming language to choose

I am of the belief that developers can choose whatever programming language to choose to build whatever they want. But sadly our world is not perfect and what language you choose will have a significant impact on your deployment cost, no matter what you which platform you decide to deploy on.

Why you ask ??, I have two words for you Complied Size.
Languages such as Javascript and Python has huge complied size compare to something written in Go, C++, etc, because program return in Javascript and Python include all the dependencies in their complied size.

Higher size means higher storing cost which leads to higher deployment cost and deployment time. It is as simple as that.

If you want to save as money as you possibly can, My recommendation is that you write your frontend in Next.js and for your backend use something like Go cause it has very low compile size as compare to something like Javascript while being easier to write and learn compare to something like Rust or C++.

The Correct way to build a Docker Image

If you are using docker images for deployment (p.s. you should), I learned that there are many optimization you do reduce the size of your docker image from (and I am not kidding) 1.7gb to like 100mb, and best the part it is that it can be achieved you just changing just a few lines of code in your dockerfile. You can imagine how much cost can you save from doing this in the long run.

Here is a step by step for how you can reduce the size :-

Choose a striped down base image, like python:3.10-alpine (60mb) instead of using python:3.10 (900mb) here is where you make the most significant reduction in size.
Do a Multistage Build of docker images. Multistage builds allow you to keep the build dependencies and debug tools like GCC out of the final image which can significantly free up space.
Make sure while building dependencies you use tags like --no-cache so there is not cache generated and even if it is generated make sure to delete in that step only. it can save up to like ~100mb

Now I have an example of a bloated python docker image compare to an unbloated one and you can see the difference.

This example created a docker image of 1.1gb

FROM python:3.10

WORKDIR /app

COPY . /app

RUN pip install --no-cache-dir -r requirements.txt

EXPOSE 8000

CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]

This example created a docker image of 160mb

# ---------- Stage 1: Build dependencies ----------
FROM python:3.10-alpine AS builder

WORKDIR /app

# Add compiler tools for dependencies like numpy, psycopg2, etc.
RUN apk add --no-cache gcc musl-dev libffi-dev

COPY requirements.txt .

# Build all dependencies into .whl (wheel) files
RUN pip wheel --no-cache-dir --wheel-dir /wheels -r requirements.txt

# ---------- Stage 2: Final minimal image ----------
FROM python:3.10-alpine

WORKDIR /app

# Only runtime dependency
RUN apk add --no-cache libffi

# Copy built wheels from builder
COPY --from=builder /wheels /wheels
RUN pip install --no-cache-dir --no-index --find-links=/wheels /wheels/*

# Copy your application source code
COPY . .

EXPOSE 8000
CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]

Conclusion

Doing these steps can significantly reduce the cost of your deployment, but remember I have just scratched the surface of these kinds of optimization and I encourage to learn more tricks like these which and be used to save cost in deployment.

If you have any questions or feedback, I would love to take it and connect with you guys.

DEV Community: Sparsh Jain

I Built a RAG Search Engine from Scratch to Understand How Modern Search Actually Works

What This Project Implements

Keyword Search (BM25)

Semantic Search (Embeddings + Vector Similarity)

Hybrid Search

Reranking with Cross-Encoders

Evaluation (The Part Most People Skip)

Multimodal Search

Retrieval-Augmented Generation (RAG)

Why I Built This

THIS IS HOW REAL PASSWORD MANAGERS ACTUALLY WORK

Why I Built Passwuts

High-Level Architecture (Zero-Knowledge Model)

How Encryption Works (Step-by-Step)

Vault Verification (Without Storing Passwords)

Browser Extension Architecture

What This Project Taught Me

Final Thoughts

Understanding Polyfills: Bridging the Gap in Modern and Old Web Browsers

What is a Polyfill?

Why Do We Need Polyfills?

Example Scenario: Array.forEach() and Simulating Unsupported Browsers

Polyfill for Array.forEach

Full Demonstration Code

Other Common Features Needing Polyfills

Tools for Using Polyfills

1. core-js

2. @babel/preset-env

3. polyfill.io

Best Practices for Using Polyfills

Conclusion

The Googly way of Making AI Agents

Introduction

Which Framework to choose

What is Google ADK

How to use Google ADK

Breaking down the above code

Conclusion

Making AI Agents Easy

Toolhouse AI

Conclusion

The Cheapest Way to Deploy Web Apps

Introduction

Which cloud platform to choose

Why Seperate Frontend and Backend deployment

What programming language to choose

The Correct way to build a Docker Image

Conclusion

Example Scenario: `Array.forEach()` and Simulating Unsupported Browsers

Polyfill for `Array.forEach`