<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Md. Mehedi Hasan</title>
    <description>The latest articles on DEV Community by Md. Mehedi Hasan (@mehedihasan712277).</description>
    <link>https://dev.to/mehedihasan712277</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3988244%2F18c0eda4-3a06-46db-8699-a6c64564b1b1.jpg</url>
      <title>DEV Community: Md. Mehedi Hasan</title>
      <link>https://dev.to/mehedihasan712277</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/mehedihasan712277"/>
    <language>en</language>
    <item>
      <title>The 7 Decisions That Quietly Decide Whether Your App Survives</title>
      <dc:creator>Md. Mehedi Hasan</dc:creator>
      <pubDate>Mon, 20 Jul 2026 20:30:13 +0000</pubDate>
      <link>https://dev.to/mehedihasan712277/the-7-decisions-that-quietly-decide-whether-your-app-survives-507h</link>
      <guid>https://dev.to/mehedihasan712277/the-7-decisions-that-quietly-decide-whether-your-app-survives-507h</guid>
      <description>&lt;p&gt;Your app doesn't crash because of bad code. It crashes because of the decisions you never made.&lt;/p&gt;

&lt;p&gt;Where does your data actually live? What happens to your bill when you go from 10 users to 10,000? Who's responsible when something breaks at midnight? Most builders find out the hard way — you don't have to. Here's the 7-question checklist to run &lt;em&gt;before&lt;/em&gt; you write your first line of code.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Before you write a single line of code, you make choices you'll be living with for years. Here's how to make them on purpose instead of by accident — explained with a real app.&lt;/em&gt;&lt;/p&gt;




&lt;p&gt;Imagine two friends, Alex and Sam, decide to build a note-taking app together — think a simple version of Notion. They're excited. They open their laptops and start coding the login page that same night.&lt;/p&gt;

&lt;p&gt;Six months later, Alex is up at 2 AM because the database is down and nobody knows how to restore it. Sam just found out a client in Germany can't legally use the app because user data is stored in a country with no privacy agreement. Neither of these problems was a coding bug. They were architecture problems — decisions that should've been made &lt;em&gt;before&lt;/em&gt; the first line of code, not discovered in a panic afterward.&lt;/p&gt;

&lt;p&gt;This is what "architecture" really means: not the fancy diagrams, but the small set of decisions that are expensive to undo later. Let's walk through seven of them, using Alex and Sam's note-taking app as our running example.&lt;/p&gt;




&lt;h2&gt;
  
  
  1. Where Should Your Data Be Stored?
&lt;/h2&gt;

&lt;p&gt;Every app needs a home for its data — user accounts, notes, files, settings. The question is: where, physically and logically, does that home sit?&lt;/p&gt;

&lt;p&gt;Alex and Sam had three real options:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;A managed cloud database&lt;/strong&gt; (like Amazon RDS or Supabase) — someone else runs the servers, they just use it.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Their own server&lt;/strong&gt; — full control, but they have to maintain it themselves.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;A hybrid&lt;/strong&gt; — some data in the cloud, some cached locally for speed (like notes stored on your phone so the app works offline).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;They picked a managed cloud database. Why? Because neither of them had ever managed a production database before, and a managed service handles the scary parts — patching, scaling, security updates — automatically.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The beginner lesson:&lt;/strong&gt; where your data lives determines your speed (how fast users can access it), your risk (who's responsible if it leaks), and how much of your time goes into "keeping the lights on" versus building features.&lt;/p&gt;




&lt;h2&gt;
  
  
  2. How Will Your Expenses Scale Over Time?
&lt;/h2&gt;

&lt;p&gt;Here's a trap almost every new builder falls into: they check the price &lt;em&gt;today&lt;/em&gt; and ignore the price &lt;em&gt;at 100,000 users&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;Alex and Sam started with a "free tier" database that costs nothing when you have 10 users. But when they modeled it out, they found the app's cost curve was &lt;strong&gt;not a straight line&lt;/strong&gt; — image storage costs jumped sharply once they crossed a certain number of files, because their chosen provider charged much more per gigabyte after the free allowance.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The beginner lesson:&lt;/strong&gt; ask "what does this cost at 10 users, 10,000 users, and 1,000,000 users?" before you commit. A tool that looks free today can quietly become your biggest expense once you succeed. Success should never accidentally bankrupt you.&lt;/p&gt;




&lt;h2&gt;
  
  
  3. How Much Say Does Your Team Really Have?
&lt;/h2&gt;

&lt;p&gt;Control is a trade-off, not a free win. More control means more responsibility.&lt;/p&gt;

&lt;p&gt;Sam wanted to self-host everything — "so we own our destiny." Alex pushed back: "We're a two-person team. If the server crashes at midnight, who's fixing it?"&lt;/p&gt;

&lt;p&gt;They compromised: they used a managed database (less control, less burden) but hosted their own custom backend logic on a cloud server they controlled (more control where it actually mattered — their unique features).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The beginner lesson:&lt;/strong&gt; don't ask "do we want control?" — of course you do. Ask "do we have the &lt;em&gt;time and people&lt;/em&gt; to responsibly use that control?" A team of two rarely benefits from managing their own servers, load balancers, and security patches. A team of fifty engineers might.&lt;/p&gt;




&lt;h2&gt;
  
  
  4. Do You Need to Follow Any Regulations?
&lt;/h2&gt;

&lt;p&gt;This is the one beginners skip entirely — until a customer's legal team emails them.&lt;/p&gt;

&lt;p&gt;Alex and Sam's note app started getting interest from a healthcare company that wanted employees to store patient-related notes. Suddenly, "just store the text in a database" wasn't good enough. Healthcare data in many countries falls under strict rules (like HIPAA in the US) about who can access it, how it's encrypted, and how long it's kept.&lt;/p&gt;

&lt;p&gt;They hadn't planned for this, and it meant weeks of re-work: encrypting data at rest, adding audit logs (a record of who accessed what and when), and picking a hosting region that met the requirement.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The beginner lesson:&lt;/strong&gt; ask early — even if you think the answer is "no" — whether your app will touch health data, payment data, children's data, or data from users in regions with strict privacy laws (like the EU's GDPR). If there's &lt;em&gt;any&lt;/em&gt; chance, design for it from day one. Retrofitting compliance is far more painful than building it in.&lt;/p&gt;




&lt;h2&gt;
  
  
  5. How Will You Recover If Something Goes Wrong?
&lt;/h2&gt;

&lt;p&gt;This is the one that woke Alex up at 2 AM.&lt;/p&gt;

&lt;p&gt;Their database provider &lt;em&gt;did&lt;/em&gt; offer backups — but only if you turned the setting on, which they hadn't. A routine update accidentally deleted a table, and there was nothing to restore from.&lt;/p&gt;

&lt;p&gt;A good backup strategy answers three questions:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;How often&lt;/strong&gt; do we back up? (Every hour? Once a day?)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;How long&lt;/strong&gt; do we keep backups? (A week? A year?)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;How fast&lt;/strong&gt; can we actually restore, and have we ever tested it?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That last point matters most. A backup you've never tried to restore isn't a backup — it's a hope.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The beginner lesson:&lt;/strong&gt; backups aren't a "nice to have" you add later. They're a seatbelt — invisible until the one moment they save you completely.&lt;/p&gt;




&lt;h2&gt;
  
  
  6. Do You Actually Need a Custom Setup?
&lt;/h2&gt;

&lt;p&gt;Most apps don't need anything exotic. A standard web server, a standard database, a standard hosting platform — that's enough for the vast majority of ideas.&lt;/p&gt;

&lt;p&gt;Alex and Sam briefly considered building their own custom search engine for notes, from scratch, because "existing tools felt slow." They spent a week on it before realizing an existing open-source search tool did 95% of what they needed, for free, already battle-tested by thousands of other apps.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The beginner lesson:&lt;/strong&gt; a custom environment (custom infrastructure, custom frameworks, custom anything) should be the &lt;em&gt;last&lt;/em&gt; resort, not the first instinct. Ask: "does a standard, boring, well-tested tool already solve this?" Usually, it does. Save your custom-building energy for the one thing that actually makes your app special.&lt;/p&gt;




&lt;h2&gt;
  
  
  7. How Much Say Do You Need Over How It Behaves?
&lt;/h2&gt;

&lt;p&gt;This is about how predictable and adjustable your app's behavior needs to be — especially relevant now that many apps use AI features.&lt;/p&gt;

&lt;p&gt;Alex and Sam added an AI feature that auto-summarizes long notes. Early on, they used a third-party AI service with default settings. But they quickly found they had almost no control over &lt;em&gt;how&lt;/em&gt; it summarized things — it sometimes changed the tone or missed key details, and they couldn't adjust it.&lt;/p&gt;

&lt;p&gt;They switched to a setup where they could give the AI clear instructions and guardrails, giving them far more control over its behavior — while still not having to build the AI themselves.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The beginner lesson:&lt;/strong&gt; figure out, for each major feature, whether you need tight control over exactly how it behaves (important for anything user-facing or safety-related) or whether "good enough, out of the box" is fine. Paying for more control only where it truly matters keeps you fast &lt;em&gt;and&lt;/em&gt; safe.&lt;/p&gt;




&lt;h2&gt;
  
  
  Putting It All Together
&lt;/h2&gt;

&lt;p&gt;None of these seven questions have a single correct answer. The right answer for Alex and Sam's two-person note-taking app is different from the right answer for a 200-person fintech company. What matters is that you &lt;em&gt;ask the questions on purpose&lt;/em&gt;, before you're forced to answer them during an outage, a legal notice, or a surprise bill.&lt;/p&gt;

&lt;p&gt;A simple way to remember them:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Question&lt;/th&gt;
&lt;th&gt;What it protects you from&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Where should the data be stored?&lt;/td&gt;
&lt;td&gt;Slow, insecure, or inflexible systems&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;How will expenses scale?&lt;/td&gt;
&lt;td&gt;A shocking bill at scale&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;How much say does the team have?&lt;/td&gt;
&lt;td&gt;Burning out a small team&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Any regulations to follow?&lt;/td&gt;
&lt;td&gt;Legal trouble and lost trust&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;How will we recover from failure?&lt;/td&gt;
&lt;td&gt;Losing everything in one bad moment&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Do we need a custom setup?&lt;/td&gt;
&lt;td&gt;Wasting time reinventing the wheel&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;How much say over its behavior?&lt;/td&gt;
&lt;td&gt;Unpredictable, hard-to-fix features&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Good architecture isn't about picking the fanciest tools. It's about picking tools that match your team, your budget, and your users — and being honest about the trade-offs before they become emergencies.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>devops</category>
      <category>architecture</category>
      <category>performance</category>
    </item>
    <item>
      <title>Stop Confusing SDK and API: The Difference Finally Explained (With Real-World Examples)</title>
      <dc:creator>Md. Mehedi Hasan</dc:creator>
      <pubDate>Sun, 19 Jul 2026 20:33:32 +0000</pubDate>
      <link>https://dev.to/mehedihasan712277/stop-confusing-sdk-and-api-the-difference-finally-explained-with-real-world-examples-11ll</link>
      <guid>https://dev.to/mehedihasan712277/stop-confusing-sdk-and-api-the-difference-finally-explained-with-real-world-examples-11ll</guid>
      <description>&lt;h2&gt;
  
  
  SDK vs API: Explained with a Real Example (Manual Backend vs Supabase)
&lt;/h2&gt;

&lt;p&gt;If you are learning backend development, you have probably heard two words a lot: &lt;strong&gt;API&lt;/strong&gt; and &lt;strong&gt;SDK&lt;/strong&gt;. Many beginners think they are the same thing. They are not.&lt;/p&gt;

&lt;p&gt;In this article, we will understand the difference in &lt;strong&gt;very easy English&lt;/strong&gt;, using a real example: building a simple "Sign Up" feature.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;First, we will build it the &lt;strong&gt;manual way&lt;/strong&gt; (like making our own backend with Express.js and a database).&lt;/li&gt;
&lt;li&gt;Then, we will build the &lt;strong&gt;same thing using Supabase&lt;/strong&gt;, which gives us a ready-made SDK.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;By the end, you will clearly understand: &lt;strong&gt;What is an API? What is an SDK? And how SDK makes life easier?&lt;/strong&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  1. What is an API? (Simple Explanation)
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;API&lt;/strong&gt; means &lt;strong&gt;Application Programming Interface&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Think of an API like a &lt;strong&gt;waiter in a restaurant&lt;/strong&gt;.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You (the frontend app) do not go inside the kitchen (the server/database) yourself.&lt;/li&gt;
&lt;li&gt;You give your order to the waiter (the API).&lt;/li&gt;
&lt;li&gt;The waiter goes to the kitchen, gets your food, and brings it back to you.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In technical words: &lt;strong&gt;An API is a set of rules that lets two applications talk to each other.&lt;/strong&gt; Usually, this means sending a request (like "give me user data") and getting a response back (like the user data in JSON format).&lt;/p&gt;

&lt;p&gt;A simple API call looks like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight http"&gt;&lt;code&gt;&lt;span class="err"&gt;POST https://myapp.com/api/signup
Body: { "email": "test@example.com", "password": "12345" }
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You are just sending a raw HTTP request. No special tool is required — you could even do this with a simple &lt;code&gt;fetch()&lt;/code&gt; call, or using a tool like Postman.&lt;/p&gt;




&lt;h2&gt;
  
  
  2. What is an SDK? (Simple Explanation)
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;SDK&lt;/strong&gt; means &lt;strong&gt;Software Development Kit&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Think of an SDK like a &lt;strong&gt;ready-made toolbox&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Instead of writing raw HTTP requests by hand (like calling the waiter yourself every time in a very formal way), the SDK gives you &lt;strong&gt;pre-written functions&lt;/strong&gt; that do the API calling FOR you, behind the scenes.&lt;/p&gt;

&lt;p&gt;So instead of writing this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;https://myapp.com/api/signup&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;method&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;POST&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;headers&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Content-Type&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;application/json&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="na"&gt;body&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;stringify&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;email&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;test@example.com&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;password&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;12345&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;An SDK lets you simply write:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;supabase&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;auth&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;signUp&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;email&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;test@example.com&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;password&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;12345&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Same result. Much easier to write.&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Key point to remember:
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;An SDK is built ON TOP OF an API.&lt;/strong&gt; The SDK is just a helper library that calls the API for you, so you don't have to write raw requests yourself.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  3. Real Example: Manual Backend App (Building Sign Up Yourself)
&lt;/h2&gt;

&lt;p&gt;Let's say you want to build a "Sign Up" feature completely by yourself, without any tool like Supabase.&lt;/p&gt;

&lt;p&gt;You will need to do ALL of these steps manually:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Set up a server (Express.js)&lt;/li&gt;
&lt;li&gt;Connect to a database (like PostgreSQL)&lt;/li&gt;
&lt;li&gt;Write a route to accept sign-up data&lt;/li&gt;
&lt;li&gt;Hash the password yourself (never store plain passwords!)&lt;/li&gt;
&lt;li&gt;Save the user in the database&lt;/li&gt;
&lt;li&gt;Create a login token (JWT) yourself&lt;/li&gt;
&lt;li&gt;Send the response back&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Here is what that looks like in code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// server.js - Manual backend using Express.js&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;express&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;express&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;bcrypt&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;bcrypt&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;jwt&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;jsonwebtoken&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Pool&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;pg&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// PostgreSQL connection&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;app&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;express&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;use&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;express&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;db&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Pool&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;connectionString&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;postgres://user:password@localhost:5432/mydb&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="c1"&gt;// Manual Sign Up Route (this itself IS an API endpoint)&lt;/span&gt;
&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;post&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/api/signup&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;email&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;password&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;body&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Step 1: Hash the password ourselves&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;hashedPassword&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;bcrypt&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;hash&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;password&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="c1"&gt;// Step 2: Save user to database ourselves&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;db&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;query&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
      &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;INSERT INTO users (email, password) VALUES ($1, $2) RETURNING id, email&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;email&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;hashedPassword&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
    &lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;newUser&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;rows&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;

    &lt;span class="c1"&gt;// Step 3: Create a login token ourselves&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;token&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;jwt&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;sign&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;userId&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;newUser&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;SECRET_KEY&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="na"&gt;expiresIn&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;7d&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
    &lt;span class="p"&gt;});&lt;/span&gt;

    &lt;span class="c1"&gt;// Step 4: Send response back&lt;/span&gt;
    &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;status&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;201&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;user&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;newUser&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;token&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;

  &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;status&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;500&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;error&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Something went wrong&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;listen&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;3000&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Server running on port 3000&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  What's happening here?
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;This whole &lt;code&gt;/api/signup&lt;/code&gt; route is YOUR OWN API.&lt;/strong&gt; You built it from scratch.&lt;/li&gt;
&lt;li&gt;You had to think about password security, database structure, tokens — everything.&lt;/li&gt;
&lt;li&gt;This works fine, but it takes &lt;strong&gt;a lot of time and knowledge&lt;/strong&gt; to do correctly and safely.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is what it means to build a backend &lt;strong&gt;manually&lt;/strong&gt;, calling low-level tools directly.&lt;/p&gt;




&lt;h2&gt;
  
  
  4. Real Example: Same Sign Up Feature Using Supabase (SDK)
&lt;/h2&gt;

&lt;p&gt;Now let's do the exact same thing using &lt;strong&gt;Supabase&lt;/strong&gt;, which is a backend-as-a-service platform.&lt;/p&gt;

&lt;p&gt;Supabase already has:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A database (PostgreSQL) ready for you&lt;/li&gt;
&lt;li&gt;A complete authentication system (sign up, login, password reset)&lt;/li&gt;
&lt;li&gt;A &lt;strong&gt;JavaScript SDK&lt;/strong&gt; that wraps their APIs into simple functions&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;First, install their SDK:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt; @supabase/supabase-js
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then connect to your Supabase project:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// supabaseClient.js&lt;/span&gt;

&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;createClient&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@supabase/supabase-js&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;supabaseUrl&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https://your-project.supabase.co&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;supabaseKey&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;your-public-anon-key&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;supabase&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;createClient&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;supabaseUrl&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;supabaseKey&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now here is the ENTIRE sign-up feature:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// signup.js&lt;/span&gt;

&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;supabase&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./supabaseClient&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;signUpUser&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;email&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;password&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;error&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;supabase&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;auth&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;signUp&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;email&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;email&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;password&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;password&lt;/span&gt;
  &lt;span class="p"&gt;})&lt;/span&gt;

  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Error:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;User created:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;signUpUser&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;test@example.com&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;12345678&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;That's it. Just a few lines.&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  What just happened?
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;No password hashing code written by you (Supabase's backend does it).&lt;/li&gt;
&lt;li&gt;No database table setup for users needed (Supabase manages it).&lt;/li&gt;
&lt;li&gt;No JWT token code written by you (Supabase creates and manages tokens).&lt;/li&gt;
&lt;li&gt;You just called &lt;code&gt;supabase.auth.signUp()&lt;/code&gt; — &lt;strong&gt;one simple SDK function.&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  5. So Where is the "API" in Supabase?
&lt;/h2&gt;

&lt;p&gt;Here is the important part that connects everything together.&lt;/p&gt;

&lt;p&gt;Even though you wrote &lt;code&gt;supabase.auth.signUp(...)&lt;/code&gt;, behind the scenes, &lt;strong&gt;the Supabase SDK is actually calling a real API&lt;/strong&gt; for you. It's happening automatically, hidden from your eyes.&lt;/p&gt;

&lt;p&gt;If you check your browser's network tab, you would actually see something like this happening automatically:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight http"&gt;&lt;code&gt;&lt;span class="err"&gt;POST https://your-project.supabase.co/auth/v1/signup
Body: { "email": "test@example.com", "password": "12345678" }
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;This is the real API request. The SDK just wrote this request FOR you.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;So the relationship is:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Your Code  →  SDK function (supabase.auth.signUp)  →  API request (POST /auth/v1/signup)  →  Supabase's Server
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  6. Side-by-Side Comparison Table
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Feature&lt;/th&gt;
&lt;th&gt;Manual Backend (Raw API)&lt;/th&gt;
&lt;th&gt;Supabase (SDK)&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Writing the server&lt;/td&gt;
&lt;td&gt;You build it yourself&lt;/td&gt;
&lt;td&gt;Already built for you&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Database setup&lt;/td&gt;
&lt;td&gt;You design tables, connect DB&lt;/td&gt;
&lt;td&gt;Ready-made, just configure&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Password security&lt;/td&gt;
&lt;td&gt;You write hashing code&lt;/td&gt;
&lt;td&gt;Handled automatically&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Auth tokens (JWT)&lt;/td&gt;
&lt;td&gt;You create and manage&lt;/td&gt;
&lt;td&gt;Handled automatically&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Code needed for sign up&lt;/td&gt;
&lt;td&gt;~20-30 lines&lt;/td&gt;
&lt;td&gt;~5 lines&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Speed of development&lt;/td&gt;
&lt;td&gt;Slow&lt;/td&gt;
&lt;td&gt;Fast&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Control over every detail&lt;/td&gt;
&lt;td&gt;Full control&lt;/td&gt;
&lt;td&gt;Less control, more convenience&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;What you're really using&lt;/td&gt;
&lt;td&gt;Raw HTTP requests&lt;/td&gt;
&lt;td&gt;Helper functions that call APIs internally&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h2&gt;
  
  
  7. The Simplest Way to Remember This
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;API&lt;/strong&gt; = the actual communication rule / request that goes from one app to another (like a raw letter you send).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;SDK&lt;/strong&gt; = a toolbox of ready-made functions that write and send that letter FOR you, so you don't have to write it by hand every time.&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Every SDK uses an API internally. But not every API has an SDK.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Some APIs are "raw" — you must call them yourself using &lt;code&gt;fetch()&lt;/code&gt; or similar tools (like our manual Express.js backend). Other services, like Supabase, Stripe, Firebase, and Twilio, give you an &lt;strong&gt;SDK&lt;/strong&gt; so that using their API becomes much simpler and safer.&lt;/p&gt;




&lt;h2&gt;
  
  
  8. Final Thought
&lt;/h2&gt;

&lt;p&gt;If you are learning backend development:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Building things &lt;strong&gt;manually first&lt;/strong&gt; (like we did with Express.js) is a GREAT way to learn how things really work underneath.&lt;/li&gt;
&lt;li&gt;Using &lt;strong&gt;SDKs&lt;/strong&gt; (like Supabase) later is great for &lt;strong&gt;building real products faster&lt;/strong&gt;, because you don't need to reinvent authentication, databases, and security every single time.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Both are useful skills. Understanding both means you truly understand how modern backend development works — from the ground up, and from the "easy tools" side too.&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>api</category>
      <category>webdev</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Vector search : Where meaning is matched, not keywords</title>
      <dc:creator>Md. Mehedi Hasan</dc:creator>
      <pubDate>Mon, 13 Jul 2026 05:22:28 +0000</pubDate>
      <link>https://dev.to/mehedihasan712277/vector-search-where-meaning-is-matched-not-keywords-gm3</link>
      <guid>https://dev.to/mehedihasan712277/vector-search-where-meaning-is-matched-not-keywords-gm3</guid>
      <description>&lt;p&gt;Ever wondered how searching "comfortable shoes for long walks" instantly finds the perfect pair—even when those exact words aren't in the product title?&lt;/p&gt;

&lt;p&gt;Vector Search takes search to the next level by understanding the intent behind user queries. In this article, I break down how it works, where it's used, and when your application actually needs it, why it's becoming essential in modern AI applications, its benefits and challenges.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Vector Search?
&lt;/h2&gt;

&lt;p&gt;Vector search is an AI-powered search technique that converts both user queries and stored data into &lt;strong&gt;numerical vectors (embeddings)&lt;/strong&gt;. Instead of matching words, it compares the meaning of the query with the meaning of the stored data and returns the closest results.&lt;/p&gt;

&lt;p&gt;For example, searching &lt;strong&gt;"coat for snow"&lt;/strong&gt; can return &lt;strong&gt;winter jackets&lt;/strong&gt;, even if the word &lt;em&gt;snow&lt;/em&gt; doesn't exist in the product title.&lt;/p&gt;




&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F01k98mt5x1s4tkguc78q.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F01k98mt5x1s4tkguc78q.png" alt="working process of vector search" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  How Does It Work?
&lt;/h2&gt;

&lt;p&gt;The process is simple:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Convert all products, documents, or images into vector embeddings.&lt;/li&gt;
&lt;li&gt;Convert the user's search query into an embedding using the same AI model.&lt;/li&gt;
&lt;li&gt;Compare the query embedding with stored embeddings using similarity algorithms such as &lt;strong&gt;Cosine Similarity&lt;/strong&gt; or &lt;strong&gt;Euclidean Distance&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Return the most relevant results based on semantic similarity.&lt;/li&gt;
&lt;/ol&gt;




&lt;h2&gt;
  
  
  What Are Vectors and Embeddings?
&lt;/h2&gt;

&lt;p&gt;A &lt;strong&gt;vector&lt;/strong&gt; is simply a list of numbers representing the meaning of data.&lt;/p&gt;

&lt;p&gt;An &lt;strong&gt;embedding&lt;/strong&gt; is the AI-generated vector created from text, images, audio, or other data types. Similar content produces similar embeddings, making semantic search possible.&lt;/p&gt;

&lt;p&gt;Popular embedding models include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;BERT&lt;/li&gt;
&lt;li&gt;Word2Vec&lt;/li&gt;
&lt;li&gt;GloVe&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Benefits of Vector Search
&lt;/h2&gt;

&lt;h3&gt;
  
  
  ✅ Better Search Results
&lt;/h3&gt;

&lt;p&gt;Understands user intent instead of relying on exact keywords.&lt;/p&gt;

&lt;h3&gt;
  
  
  ✅ Handles Unstructured Data
&lt;/h3&gt;

&lt;p&gt;Works with text, images, videos, audio, and documents.&lt;/p&gt;

&lt;h3&gt;
  
  
  ✅ Multilingual Search
&lt;/h3&gt;

&lt;p&gt;Can match similar meanings across different languages.&lt;/p&gt;

&lt;h3&gt;
  
  
  ✅ Personalized Experience
&lt;/h3&gt;

&lt;p&gt;Learns user preferences to deliver more relevant recommendations.&lt;/p&gt;

&lt;h3&gt;
  
  
  ✅ Powers AI Features
&lt;/h3&gt;

&lt;p&gt;Used in chatbots, recommendation engines, virtual assistants, and Retrieval-Augmented Generation (RAG) systems.&lt;/p&gt;




&lt;h2&gt;
  
  
  Challenges
&lt;/h2&gt;

&lt;p&gt;Although powerful, vector search comes with some trade-offs.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;High computational and storage requirements&lt;/li&gt;
&lt;li&gt;More complex implementation than traditional search&lt;/li&gt;
&lt;li&gt;Choosing the right embedding model is critical&lt;/li&gt;
&lt;li&gt;Harder to debug because results are based on semantic similarity&lt;/li&gt;
&lt;li&gt;Requires careful handling of privacy and sensitive data&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Common Use Cases
&lt;/h2&gt;

&lt;p&gt;Vector search is widely used across industries, including:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🛒 E-commerce product search and recommendations&lt;/li&gt;
&lt;li&gt;🤖 AI chatbots and customer support&lt;/li&gt;
&lt;li&gt;📄 Document search and retrieval&lt;/li&gt;
&lt;li&gt;🖼️ Image similarity search&lt;/li&gt;
&lt;li&gt;🎤 Voice assistants&lt;/li&gt;
&lt;li&gt;🏥 Medical image analysis&lt;/li&gt;
&lt;li&gt;😊 Sentiment analysis&lt;/li&gt;
&lt;li&gt;🔍 Hybrid search (keyword + vector search)&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Should Every Application Use Vector Search?
&lt;/h2&gt;

&lt;p&gt;Not necessarily.&lt;/p&gt;

&lt;p&gt;For most applications, especially MVPs, traditional search combined with filters and full-text search is enough.&lt;/p&gt;

&lt;p&gt;Vector search becomes valuable when you need semantic understanding, AI-powered recommendations, personalized experiences, or natural language search.&lt;/p&gt;




&lt;h2&gt;
  
  
  Final Thoughts
&lt;/h2&gt;

&lt;p&gt;Vector search is changing how modern applications retrieve information. Instead of matching words, it understands &lt;strong&gt;meaning&lt;/strong&gt;, making search more natural and accurate.&lt;/p&gt;

&lt;p&gt;As AI continues to evolve, vector search is becoming a core technology behind intelligent applications—from e-commerce and recommendation systems to chatbots and enterprise search.&lt;/p&gt;

&lt;p&gt;If you're building an AI-powered product, learning vector search is a skill worth investing in.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>productivity</category>
      <category>performance</category>
      <category>webdev</category>
    </item>
    <item>
      <title>The `Never` type - the typeScript feature most developers ignore… Until It Breaks Their Code</title>
      <dc:creator>Md. Mehedi Hasan</dc:creator>
      <pubDate>Wed, 17 Jun 2026 04:42:26 +0000</pubDate>
      <link>https://dev.to/mehedihasan712277/the-never-type-the-typescript-feature-most-developers-ignore-until-it-breaks-their-code-1n2e</link>
      <guid>https://dev.to/mehedihasan712277/the-never-type-the-typescript-feature-most-developers-ignore-until-it-breaks-their-code-1n2e</guid>
      <description>&lt;p&gt;TypeScript is known for catching bugs before runtime.&lt;/p&gt;

&lt;p&gt;But one of its most underrated features is the &lt;strong&gt;&lt;code&gt;never&lt;/code&gt; type&lt;/strong&gt;, especially for &lt;strong&gt;exhaustive type checking&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Most developers know &lt;code&gt;void&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Fewer understand &lt;code&gt;never&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Even fewer actually use it correctly.&lt;/p&gt;

&lt;p&gt;Yet this tiny feature can prevent entire classes of bugs in production.&lt;/p&gt;




&lt;h2&gt;
  
  
  🔹 &lt;code&gt;void&lt;/code&gt; vs &lt;code&gt;never&lt;/code&gt; (Quick Reality Check)
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="k"&gt;void&lt;/span&gt;  &lt;span class="err"&gt;→&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;finishes&lt;/span&gt; &lt;span class="nf"&gt;normally &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;no&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nx"&gt;never&lt;/span&gt; &lt;span class="err"&gt;→&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;never&lt;/span&gt; &lt;span class="nx"&gt;finishes&lt;/span&gt; &lt;span class="nf"&gt;normally &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;throws&lt;/span&gt; &lt;span class="nx"&gt;or&lt;/span&gt; &lt;span class="nx"&gt;infinite&lt;/span&gt; &lt;span class="nx"&gt;loop&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Example:
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;logMessage&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hello&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;throwError&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="nx"&gt;never&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;throw&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Something went wrong&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  💥 The Real Problem (Missing Exhaustiveness)
&lt;/h2&gt;

&lt;p&gt;We define a union type:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;Shape&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;
  &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;kind&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;circle&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nl"&gt;radius&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;kind&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;rectangle&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nl"&gt;width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nl"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;kind&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;triangle&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nl"&gt;base&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nl"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And write a function:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;getArea&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Shape&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;switch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;kind&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;circle&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
      &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;PI&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;radius&lt;/span&gt; &lt;span class="o"&gt;**&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;rectangle&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
      &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;width&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;height&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;triangle&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
      &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;base&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;height&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="nl"&gt;default&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
      &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
      &lt;span class="c1"&gt;// ❌ Problem: TypeScript assumes this is fine&lt;/span&gt;
      &lt;span class="c1"&gt;// ❌ But we are NOT ensuring all cases are handled&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  ⚠️ Hidden Bug (When Type Changes)
&lt;/h2&gt;

&lt;p&gt;Later, a new requirement comes:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;Shape&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;
  &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;kind&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;circle&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nl"&gt;radius&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;kind&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;rectangle&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nl"&gt;width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nl"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;kind&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;triangle&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nl"&gt;base&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nl"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;kind&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;square&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nl"&gt;side&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt; &lt;span class="c1"&gt;// NEW&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now our function is silently broken:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;getArea&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Shape&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;switch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;kind&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;circle&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
      &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;PI&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;radius&lt;/span&gt; &lt;span class="o"&gt;**&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;rectangle&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
      &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;width&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;height&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;triangle&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
      &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;base&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;height&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="nl"&gt;default&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
      &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

      &lt;span class="cm"&gt;/*
        ❌ PROBLEM:
        - "square" is NOT handled
        - No TypeScript error
        - No warning
        - This will fail silently in production
      */&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  🧠 The Fix: &lt;code&gt;never&lt;/code&gt; (Exhaustive Checking)
&lt;/h2&gt;

&lt;p&gt;We create a helper:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;assertNever&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;never&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="nx"&gt;never&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;throw&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`Unexpected value: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  🔥 Safe Version (WITH &lt;code&gt;never&lt;/code&gt; — Fully Exhaustive)
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;Shape&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;
  &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;kind&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;circle&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nl"&gt;radius&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;kind&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;rectangle&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nl"&gt;width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nl"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;kind&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;triangle&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nl"&gt;base&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nl"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;kind&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;square&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nl"&gt;side&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt; &lt;span class="c1"&gt;// NEW SHAPE ADDED&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;assertNever&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;never&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="nx"&gt;never&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;throw&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`Unexpected value: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;getArea&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Shape&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;switch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;kind&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;circle&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
      &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;PI&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;radius&lt;/span&gt; &lt;span class="o"&gt;**&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;rectangle&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
      &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;width&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;height&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;triangle&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
      &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;base&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;height&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="nl"&gt;default&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
          &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nf"&gt;assertNever&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="cm"&gt;/*
        🔥 This is where magic happens

        If ANY new shape is added and NOT handled,
        TypeScript will throw an error here.
      */&lt;/span&gt;

  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  🚨 What Happens Now?
&lt;/h2&gt;

&lt;p&gt;If someone adds:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;kind&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;square&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nl"&gt;side&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;TypeScript shows:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;❌ Argument of type '"square"' is not assignable to parameter of type 'never'
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  🧠 Meaning of This Error
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;“You said you handled all cases… but you didn’t.”&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  📊 Before vs After Mental Model
&lt;/h2&gt;

&lt;h3&gt;
  
  
  ❌ Without &lt;code&gt;never&lt;/code&gt;
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Type changes
   ↓
Switch not updated
   ↓
No TypeScript error
   ↓
💥 Bug reaches production
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  ✅ With &lt;code&gt;never&lt;/code&gt;
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Type changes
   ↓
Switch not updated
   ↓
TypeScript compile error
   ↓
🛑 Bug stopped before runtime
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  💡 Why This Matters in Real Projects
&lt;/h2&gt;

&lt;p&gt;This pattern is extremely useful in:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🧾 Payment systems&lt;/li&gt;
&lt;li&gt;📦 Order status flows&lt;/li&gt;
&lt;li&gt;👤 Role-based access control&lt;/li&gt;
&lt;li&gt;🌐 API response handling&lt;/li&gt;
&lt;li&gt;🎯 UI state machines&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  🚀 Final Thought
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;never&lt;/code&gt; is not just a TypeScript trick.&lt;/p&gt;

&lt;p&gt;It is a &lt;strong&gt;compile-time safety guarantee for your business logic&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;If you're not using exhaustive checking yet, you're only partially using TypeScript.&lt;/p&gt;




&lt;h2&gt;
  
  
  🧠 One-line summary
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;“If you're not using &lt;code&gt;never&lt;/code&gt; for exhaustive checks, TypeScript is not fully protecting your logic.”&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>webdev</category>
      <category>typescript</category>
      <category>performance</category>
      <category>coding</category>
    </item>
  </channel>
</rss>
