<?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: Abhishek Gupta </title>
    <description>The latest articles on DEV Community by Abhishek Gupta  (@abhishek-nexgen-dev).</description>
    <link>https://dev.to/abhishek-nexgen-dev</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.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2038086%2Fc3e0a0ad-d888-4dc1-ade6-3ee10b7fed08.jpg</url>
      <title>DEV Community: Abhishek Gupta </title>
      <link>https://dev.to/abhishek-nexgen-dev</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/abhishek-nexgen-dev"/>
    <language>en</language>
    <item>
      <title>Backend Testing — Complete Notes</title>
      <dc:creator>Abhishek Gupta </dc:creator>
      <pubDate>Fri, 03 Apr 2026 19:57:52 +0000</pubDate>
      <link>https://dev.to/abhishek-nexgen-dev/backend-testing-complete-notes-4179</link>
      <guid>https://dev.to/abhishek-nexgen-dev/backend-testing-complete-notes-4179</guid>
      <description>&lt;h1&gt;
  
  
  📌 1. What is Backend Testing?
&lt;/h1&gt;

&lt;h3&gt;
  
  
  Definition:
&lt;/h3&gt;

&lt;p&gt;Backend testing means &lt;strong&gt;checking whether your server-side logic works correctly in all situations&lt;/strong&gt;.&lt;/p&gt;




&lt;h3&gt;
  
  
  Simple Understanding:
&lt;/h3&gt;

&lt;p&gt;When a user sends request:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;User → API → Backend → Database → Response
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;👉 You must ensure:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Correct response is returned&lt;/li&gt;
&lt;li&gt;Errors are handled properly&lt;/li&gt;
&lt;li&gt;Data is stored correctly&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  ❗ 2. Why Backend Testing is Important
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Without Testing:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Bugs go to production ❌&lt;/li&gt;
&lt;li&gt;Users face crashes ❌&lt;/li&gt;
&lt;li&gt;Data corruption ❌&lt;/li&gt;
&lt;li&gt;Security issues ❌&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  With Testing:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Bugs caught early ✅&lt;/li&gt;
&lt;li&gt;Safe deployment ✅&lt;/li&gt;
&lt;li&gt;Confident coding ✅&lt;/li&gt;
&lt;li&gt;Faster development ✅&lt;/li&gt;
&lt;/ul&gt;




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



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Case: User signup API
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Without testing:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Duplicate emails allowed ❌&lt;/li&gt;
&lt;li&gt;Password not validated ❌&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;With testing:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Duplicate → rejected ✅&lt;/li&gt;
&lt;li&gt;Invalid input → error ✅&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  🧠 3. What Should You Test?
&lt;/h1&gt;

&lt;p&gt;You should test:&lt;/p&gt;

&lt;h2&gt;
  
  
  ✅ Functional Behavior
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;API works correctly&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  ✅ Validation
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Wrong input handled&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  ✅ Security
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Unauthorized access blocked&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  ✅ Database
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Data saved correctly&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  ✅ Errors
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Server errors handled&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  🧩 4. Types of Backend Testing
&lt;/h1&gt;




&lt;h2&gt;
  
  
  🔹 1. Unit Testing
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Definition:
&lt;/h3&gt;

&lt;p&gt;Test &lt;strong&gt;single function in isolation&lt;/strong&gt;&lt;/p&gt;




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



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&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;a&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;b&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;Test:&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;expect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;)).&lt;/span&gt;&lt;span class="nf"&gt;toBe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  Features:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Fast ⚡&lt;/li&gt;
&lt;li&gt;No DB&lt;/li&gt;
&lt;li&gt;No API&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  🔹 2. Integration Testing (MOST IMPORTANT)
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Definition:
&lt;/h3&gt;

&lt;p&gt;Test multiple layers together&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Route → Controller → Service → DB
&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 javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;POST&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="nx"&gt;users&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Test:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Data sent&lt;/li&gt;
&lt;li&gt;Saved in DB&lt;/li&gt;
&lt;li&gt;Response returned&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  🔹 3. End-to-End Testing (E2E)
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Definition:
&lt;/h3&gt;

&lt;p&gt;Test full user journey&lt;/p&gt;




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



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Register → Login → Access profile
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  Features:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Real-world testing&lt;/li&gt;
&lt;li&gt;Slower&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  🏗️ 5. Backend Testing Tools
&lt;/h1&gt;

&lt;h2&gt;
  
  
  🥇 Core Tools
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Jest&lt;/li&gt;
&lt;li&gt;Supertest&lt;/li&gt;
&lt;li&gt;MongoDB Memory Server&lt;/li&gt;
&lt;li&gt;dotenv&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  🧠 6. Role of Each Tool
&lt;/h1&gt;

&lt;h2&gt;
  
  
  🧪 Jest
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Runs tests&lt;/li&gt;
&lt;li&gt;Provides &lt;code&gt;describe&lt;/code&gt;, &lt;code&gt;it&lt;/code&gt;, &lt;code&gt;expect&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Handles assertions&lt;/li&gt;
&lt;li&gt;Supports mocking&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  🌐 Supertest
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Sends HTTP requests&lt;/li&gt;
&lt;li&gt;Tests APIs like Postman&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  🗄️ MongoMemoryServer
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Fake DB&lt;/li&gt;
&lt;li&gt;Fast &amp;amp; isolated&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  ⚙️ dotenv
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Separate test environment&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  ⚙️ 7. How Testing Works (Flow)
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Jest starts test
 ↓
Supertest sends request
 ↓
Backend processes request
 ↓
DB stores data
 ↓
Response returned
 ↓
Jest verifies result
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  🧱 8. Basic Setup
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Install:
&lt;/h2&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; &lt;span class="nt"&gt;--save-dev&lt;/span&gt; jest supertest mongodb-memory-server dotenv
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  package.json
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="nl"&gt;"scripts"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"test"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"jest"&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  🧪 9. First Test Example
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;request&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;supertest&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;app&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;../app&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nf"&gt;describe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;GET /&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="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;it&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;should return message&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="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="nx"&gt;res&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;request&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;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="nf"&gt;expect&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="nx"&gt;statusCode&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;toBe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nf"&gt;expect&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="nx"&gt;body&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="nf"&gt;toBe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;API working&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  🔥 10. Real Backend Test Cases
&lt;/h1&gt;

&lt;h2&gt;
  
  
  ✅ Success Case
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;expect&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="nx"&gt;statusCode&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;toBe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  ❌ Validation Error
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;expect&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="nx"&gt;statusCode&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;toBe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;400&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  🔒 Unauthorized
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;expect&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="nx"&gt;statusCode&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;toBe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;401&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  🔁 Duplicate Data
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;expect&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="nx"&gt;body&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="nf"&gt;toMatch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sr"&gt;/already exists/i&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  💥 Server Error
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;expect&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="nx"&gt;statusCode&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;toBe&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  🔐 11. Authentication Testing
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;token&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nf"&gt;beforeAll&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="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="nx"&gt;res&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;request&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="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="s1"&gt;/login&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="nf"&gt;send&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="nx"&gt;token&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;res&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="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="nf"&gt;it&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;should access protected route&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="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="nx"&gt;res&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;request&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="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/profile&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="nf"&gt;set&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Authorization&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s2"&gt;`Bearer &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="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="nf"&gt;expect&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="nx"&gt;statusCode&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;toBe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;200&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;h1&gt;
  
  
  🧠 12. Database Testing
&lt;/h1&gt;

&lt;p&gt;Use:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;MongoDB Memory Server&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Why:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;No real DB&lt;/li&gt;
&lt;li&gt;Fast&lt;/li&gt;
&lt;li&gt;Clean&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  🧪 13. Mocking
&lt;/h1&gt;

&lt;h3&gt;
  
  
  Why needed?
&lt;/h3&gt;

&lt;p&gt;To avoid calling real services&lt;/p&gt;




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



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;jest&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;mock&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;../emailService&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="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;sendEmail&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;jest&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;fn&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;h1&gt;
  
  
  ⚡ 14. Best Practices
&lt;/h1&gt;

&lt;h2&gt;
  
  
  ✅ Do:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Test real API behavior&lt;/li&gt;
&lt;li&gt;Cover edge cases&lt;/li&gt;
&lt;li&gt;Keep tests independent&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  ❌ Don’t:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Use real DB&lt;/li&gt;
&lt;li&gt;Start server&lt;/li&gt;
&lt;li&gt;Ignore errors&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  🧠 15. Testing Pyramid
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Unit → Most
Integration → Medium
E2E → Few
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  📊 16. Code Coverage
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;test&lt;/span&gt; &lt;span class="nt"&gt;--&lt;/span&gt; &lt;span class="nt"&gt;--coverage&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  ⚙️ 17. CI/CD Testing
&lt;/h1&gt;

&lt;p&gt;Use:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;GitHub Actions&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  🧠 18. Interview Questions
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Q: Why Jest?
&lt;/h2&gt;

&lt;p&gt;👉 Easy + powerful&lt;/p&gt;




&lt;h2&gt;
  
  
  Q: Why Supertest?
&lt;/h2&gt;

&lt;p&gt;👉 API testing without server&lt;/p&gt;




&lt;h2&gt;
  
  
  Q: Unit vs Integration?
&lt;/h2&gt;

&lt;p&gt;👉 Function vs full flow&lt;/p&gt;




&lt;h1&gt;
  
  
  🚀 19. Advanced Topics
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;TDD&lt;/li&gt;
&lt;li&gt;Load testing&lt;/li&gt;
&lt;li&gt;Security testing&lt;/li&gt;
&lt;li&gt;Contract testing&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  🏁 20. Final Summary
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Jest = test runner
Supertest = API tester
DB memory = safe DB
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  🧠 Final Thought
&lt;/h1&gt;

&lt;blockquote&gt;
&lt;p&gt;Testing is not about checking code&lt;br&gt;
It is about &lt;strong&gt;preventing failure before users face it&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

</description>
    </item>
    <item>
      <title>🚀 Sorting Algorithms in JavaScript (Complete Guide with Examples)</title>
      <dc:creator>Abhishek Gupta </dc:creator>
      <pubDate>Sun, 29 Mar 2026 05:26:15 +0000</pubDate>
      <link>https://dev.to/abhishek-nexgen-dev/sorting-algorithms-in-javascript-complete-guide-with-examples-3gam</link>
      <guid>https://dev.to/abhishek-nexgen-dev/sorting-algorithms-in-javascript-complete-guide-with-examples-3gam</guid>
      <description>&lt;p&gt;Let’s sort this array using different algorithms 👇&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="arr01"&lt;br&gt;
let nums = [40, 10, 50, 80];&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

## 🔹 1. Bubble Sort

Repeatedly swaps adjacent elements if they are in the wrong order.



```js id="bubble01"
let arr = [...nums];

for (let i = 0; i &amp;lt; arr.length - 1; i++) {
  for (let j = 0; j &amp;lt; arr.length - i - 1; j++) {
    if (arr[j] &amp;gt; arr[j + 1]) {
      let temp = arr[j];
      arr[j] = arr[j + 1];
      arr[j + 1] = temp;
    }
  }
}

console.log(arr);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;✅ Simple but slow (O(n²))&lt;/p&gt;


&lt;h2&gt;
  
  
  🔹 2. Selection Sort
&lt;/h2&gt;

&lt;p&gt;Finds the smallest element and places it at the correct position.&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="selection01"&lt;br&gt;
let arr = [...nums];&lt;/p&gt;

&lt;p&gt;for (let i = 0; i &amp;lt; arr.length - 1; i++) {&lt;br&gt;
  for (let j = i + 1; j &amp;lt; arr.length; j++) {&lt;br&gt;
    if (arr[j] &amp;lt; arr[i]) {&lt;br&gt;
      let temp = arr[i];&lt;br&gt;
      arr[i] = arr[j];&lt;br&gt;
      arr[j] = temp;&lt;br&gt;
    }&lt;br&gt;
  }&lt;br&gt;
}&lt;/p&gt;

&lt;p&gt;console.log(arr);&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


✅ Fewer swaps than bubble sort
⚠️ Still O(n²)

---

## 🔹 3. Insertion Sort

Builds the sorted array one element at a time.



```js id="insertion01"
let arr = [...nums];

for (let i = 1; i &amp;lt; arr.length; i++) {
  let key = arr[i];
  let j = i - 1;

  while (j &amp;gt;= 0 &amp;amp;&amp;amp; arr[j] &amp;gt; key) {
    arr[j + 1] = arr[j];
    j--;
  }

  arr[j + 1] = key;
}

console.log(arr);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;✅ Efficient for small or nearly sorted arrays&lt;br&gt;
⏱️ O(n²) worst case&lt;/p&gt;


&lt;h2&gt;
  
  
  🔹 4. Merge Sort (Divide &amp;amp; Conquer)
&lt;/h2&gt;

&lt;p&gt;Breaks the array into halves, sorts them, and merges back.&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="merge01"&lt;br&gt;
function mergeSort(arr) {&lt;br&gt;
  if (arr.length &amp;lt;= 1) return arr;&lt;/p&gt;

&lt;p&gt;let mid = Math.floor(arr.length / 2);&lt;br&gt;
  let left = mergeSort(arr.slice(0, mid));&lt;br&gt;
  let right = mergeSort(arr.slice(mid));&lt;/p&gt;

&lt;p&gt;return merge(left, right);&lt;br&gt;
}&lt;/p&gt;

&lt;p&gt;function merge(left, right) {&lt;br&gt;
  let result = [];&lt;br&gt;
  let i = 0, j = 0;&lt;/p&gt;

&lt;p&gt;while (i &amp;lt; left.length &amp;amp;&amp;amp; j &amp;lt; right.length) {&lt;br&gt;
    if (left[i] &amp;lt; right[j]) {&lt;br&gt;
      result.push(left[i]);&lt;br&gt;
      i++;&lt;br&gt;
    } else {&lt;br&gt;
      result.push(right[j]);&lt;br&gt;
      j++;&lt;br&gt;
    }&lt;br&gt;
  }&lt;/p&gt;

&lt;p&gt;return result.concat(left.slice(i)).concat(right.slice(j));&lt;br&gt;
}&lt;/p&gt;

&lt;p&gt;console.log(mergeSort(nums));&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


✅ Much faster for large datasets
⏱️ O(n log n)
📌 Uses extra space

---

## 🔹 5. Built-in Sort (JavaScript)



```js id="builtin01"
let arr = [...nums];
arr.sort((a, b) =&amp;gt; a - b);

console.log(arr);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;✅ Fast and optimized (recommended in real-world use)&lt;/p&gt;


&lt;h2&gt;
  
  
  🧠 Final Output
&lt;/h2&gt;

&lt;p&gt;All methods will return:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="out01"&lt;br&gt;
[10, 40, 50, 80]&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

## 💡 Key Takeaways

* Bubble, Selection, Insertion → Easy but slower (O(n²))
* Merge Sort → Efficient (O(n log n)) for large arrays
* Built-in `.sort()` → Best for practical use
* Always understand the logic before memorizing code


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

</description>
    </item>
    <item>
      <title>How to Print Alternate Elements of an Array in JavaScript (DSA)</title>
      <dc:creator>Abhishek Gupta </dc:creator>
      <pubDate>Fri, 20 Mar 2026 09:11:10 +0000</pubDate>
      <link>https://dev.to/abhishek-nexgen-dev/how-to-print-alternate-elements-of-an-array-in-javascript-dsa-3k11</link>
      <guid>https://dev.to/abhishek-nexgen-dev/how-to-print-alternate-elements-of-an-array-in-javascript-dsa-3k11</guid>
      <description>&lt;h2&gt;
  
  
  🧩 Problem: Alternate Elements of an Array
&lt;/h2&gt;

&lt;p&gt;Given an array &lt;code&gt;arr[]&lt;/code&gt;, your task is to print every alternate element of the array starting from the &lt;strong&gt;first element&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;In other words, print elements at index &lt;code&gt;0, 2, 4, ...&lt;/code&gt; and skip the rest.&lt;/p&gt;




&lt;h3&gt;
  
  
  📥 Input
&lt;/h3&gt;

&lt;p&gt;An array of integers &lt;code&gt;arr[]&lt;/code&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  📤 Output
&lt;/h3&gt;

&lt;p&gt;Print the alternate elements of the array (starting from index 0)&lt;/p&gt;




&lt;h3&gt;
  
  
  🧪 Examples
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Example 1:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Input: arr[] = [10, 20, 30, 40, 50]
Output: 10 30 50
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Explanation:&lt;/strong&gt;&lt;br&gt;
Print the first element (10), skip the second (20), print the third (30), skip the fourth (40), and print the fifth (50).&lt;/p&gt;



&lt;p&gt;&lt;strong&gt;Example 2:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Input: arr[] = [-5, 1, 4, 2, 12]
Output: -5 4 12
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  ⚠️ Constraints
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;1 ≤ arr.length ≤ 10^5&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;-10^9 ≤ arr[i] ≤ 10^9&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Solution
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Approach 1
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;removeAlternate&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;Pointer1&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;Pointer2&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="k"&gt;while &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;Pointer2&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;Pointer2&lt;/span&gt;&lt;span class="o"&gt;++&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;Pointer2&lt;/span&gt; &lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;Pointer1&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;Pointer2&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
      &lt;span class="nx"&gt;Pointer1&lt;/span&gt;&lt;span class="o"&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;arr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;Pointer1&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;arr&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;&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.amazonaws.com%2Fuploads%2Farticles%2Fmqrtl7zrvap6luybgjh3.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.amazonaws.com%2Fuploads%2Farticles%2Fmqrtl7zrvap6luybgjh3.png" alt=" " width="701" height="635"&gt;&lt;/a&gt;&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.amazonaws.com%2Fuploads%2Farticles%2F5skecf0fou9bgkc0wwux.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.amazonaws.com%2Fuploads%2Farticles%2F5skecf0fou9bgkc0wwux.png" alt=" " width="501" height="748"&gt;&lt;/a&gt;&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.amazonaws.com%2Fuploads%2Farticles%2F6gkiqwe75ltjdyepg7j8.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.amazonaws.com%2Fuploads%2Farticles%2F6gkiqwe75ltjdyepg7j8.png" alt=" " width="800" height="226"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Approach 2
&lt;/h3&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.amazonaws.com%2Fuploads%2Farticles%2Fullf7gi79xt1o1qc3ofa.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.amazonaws.com%2Fuploads%2Farticles%2Fullf7gi79xt1o1qc3ofa.png" alt=" " width="788" height="503"&gt;&lt;/a&gt;&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.amazonaws.com%2Fuploads%2Farticles%2Fff4r7lil1o0tkawlfv0o.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.amazonaws.com%2Fuploads%2Farticles%2Fff4r7lil1o0tkawlfv0o.png" alt=" " width="800" height="336"&gt;&lt;/a&gt;&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.amazonaws.com%2Fuploads%2Farticles%2F0hwtgbth3d3u9lzhbb68.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.amazonaws.com%2Fuploads%2Farticles%2F0hwtgbth3d3u9lzhbb68.png" alt=" " width="800" height="453"&gt;&lt;/a&gt;&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="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;removeAlternate&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;Alternate_Arr&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[]&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;index&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;

  &lt;span class="k"&gt;for&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&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;i&lt;/span&gt; &lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="p"&gt;){&lt;/span&gt;
      &lt;span class="nx"&gt;Alternate_Arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;index&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
      &lt;span class="nx"&gt;index&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;

    &lt;span class="p"&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;Alternate_Arr&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;h3&gt;
  
  
  Approach 3
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;removeAlternate&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;Alternate_Arr&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[]&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;index&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;

  &lt;span class="k"&gt;for&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&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;i&lt;/span&gt; &lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="p"&gt;){&lt;/span&gt;
      &lt;span class="nx"&gt;Alternate_Arr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;i&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="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;Alternate_Arr&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;



</description>
      <category>algorithms</category>
      <category>beginners</category>
      <category>computerscience</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Repeated Substring Pattern in JavaScript — Brute Force Approach Explained</title>
      <dc:creator>Abhishek Gupta </dc:creator>
      <pubDate>Sat, 14 Mar 2026 15:06:22 +0000</pubDate>
      <link>https://dev.to/abhishek-nexgen-dev/repeated-substring-pattern-in-javascript-brute-force-approach-explained-3813</link>
      <guid>https://dev.to/abhishek-nexgen-dev/repeated-substring-pattern-in-javascript-brute-force-approach-explained-3813</guid>
      <description>&lt;h1&gt;
  
  
  Problem Statement
&lt;/h1&gt;

&lt;p&gt;Given a string &lt;code&gt;s&lt;/code&gt;, determine whether it can be constructed by repeating a substring of itself.&lt;/p&gt;

&lt;p&gt;Return &lt;strong&gt;true&lt;/strong&gt; if the string can be formed by repeating a substring, otherwise return &lt;strong&gt;false&lt;/strong&gt;.&lt;/p&gt;




&lt;h1&gt;
  
  
  Example
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;Input&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;abab&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="nx"&gt;Output&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;
&lt;span class="nx"&gt;Explanation&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;ab&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;repeated&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt; &lt;span class="nx"&gt;times&lt;/span&gt;

&lt;span class="nx"&gt;Input&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;abcabcabc&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="nx"&gt;Output&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;
&lt;span class="nx"&gt;Explanation&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;abc&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;repeated&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt; &lt;span class="nx"&gt;times&lt;/span&gt;

&lt;span class="nx"&gt;Input&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;aba&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="nx"&gt;Output&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;

&lt;span class="nx"&gt;Input&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;aaaa&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="nx"&gt;Output&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;
&lt;span class="nx"&gt;Explanation&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;a&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;repeated&lt;/span&gt; &lt;span class="mi"&gt;4&lt;/span&gt; &lt;span class="nx"&gt;times&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Understanding the Problem
&lt;/h1&gt;

&lt;p&gt;We need to check if a &lt;strong&gt;smaller substring repeats multiple times to form the entire string&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;"abcabcabc"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Possible repeating substring:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;"abc"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If we repeat &lt;code&gt;"abc"&lt;/code&gt; three times:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;"abcabcabc"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This matches the original string, so the answer is &lt;strong&gt;true&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;But consider:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;"aba"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;There is no substring that can repeat to form &lt;code&gt;"aba"&lt;/code&gt;, so the answer is &lt;strong&gt;false&lt;/strong&gt;.&lt;/p&gt;




&lt;h1&gt;
  
  
  Brute Force Approach
&lt;/h1&gt;

&lt;p&gt;The simplest way to solve this problem is to &lt;strong&gt;try every possible substring&lt;/strong&gt; and check if repeating it forms the original string.&lt;/p&gt;

&lt;p&gt;Important observation:&lt;/p&gt;

&lt;p&gt;The repeating substring length must &lt;strong&gt;divide the length of the string&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;String = "abab"
Length = 4
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Possible substring lengths:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1
2
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now test them.&lt;/p&gt;

&lt;p&gt;Substring &lt;code&gt;"a"&lt;/code&gt;:&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;a&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;repeat&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="err"&gt;→&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;aaaa&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="err"&gt;❌&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Substring &lt;code&gt;"ab"&lt;/code&gt;:&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;ab&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;repeat&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="err"&gt;→&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;abab&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="err"&gt;✅&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So &lt;code&gt;"ab"&lt;/code&gt; is the repeating substring.&lt;/p&gt;




&lt;h1&gt;
  
  
  Algorithm
&lt;/h1&gt;

&lt;ol&gt;
&lt;li&gt;Get the length of the string.&lt;/li&gt;
&lt;li&gt;Iterate through all possible substring lengths from &lt;code&gt;1&lt;/code&gt; to &lt;code&gt;length / 2&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;If the string length is divisible by the substring length:&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;Extract the substring.&lt;/li&gt;
&lt;li&gt;Repeat it enough times to match the original length.&lt;/li&gt;
&lt;li&gt;Compare it with the original string.

&lt;ol&gt;
&lt;li&gt;If a match is found → return &lt;code&gt;true&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Otherwise return &lt;code&gt;false&lt;/code&gt;.&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  JavaScript Implementation
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;repeatedSubstringPattern&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;s&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;

    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;len&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;s&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;=&lt;/span&gt; &lt;span class="nx"&gt;len&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="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&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;len&lt;/span&gt; &lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;

            &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;sub&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;s&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;slice&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="nx"&gt;i&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;sub&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;repeat&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;len&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="nx"&gt;s&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kc"&gt;true&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="p"&gt;}&lt;/span&gt;

    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kc"&gt;false&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;h1&gt;
  
  
  Testing the Solution
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&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="nf"&gt;repeatedSubstringPattern&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;abcabcabcabc&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; 
&lt;span class="c1"&gt;// true&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="nf"&gt;repeatedSubstringPattern&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;aba&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; 
&lt;span class="c1"&gt;// false&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="nf"&gt;repeatedSubstringPattern&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;abab&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; 
&lt;span class="c1"&gt;// true&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="nf"&gt;repeatedSubstringPattern&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;aaaa&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; 
&lt;span class="c1"&gt;// true&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Dry Run Example
&lt;/h1&gt;

&lt;p&gt;Let’s test the string:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;"ababab"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Length:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;6
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Possible substring lengths:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1, 2, 3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Check each one.&lt;/p&gt;

&lt;p&gt;Substring &lt;code&gt;"a"&lt;/code&gt;:&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;a&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;repeat&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;6&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="err"&gt;→&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;aaaaaa&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="err"&gt;❌&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Substring &lt;code&gt;"ab"&lt;/code&gt;:&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;ab&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;repeat&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="err"&gt;→&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;ababab&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="err"&gt;✅&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So the function returns &lt;strong&gt;true&lt;/strong&gt;.&lt;/p&gt;




&lt;h1&gt;
  
  
  Time Complexity
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;O(n²)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Because we test multiple substring lengths and perform string comparisons.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>The Complete Guide to Working With AI While Coding (Hackathons, Cursor, VS Code, AI Agents)</title>
      <dc:creator>Abhishek Gupta </dc:creator>
      <pubDate>Tue, 10 Mar 2026 12:37:23 +0000</pubDate>
      <link>https://dev.to/abhishek-nexgen-dev/the-complete-guide-to-working-with-ai-while-coding-hackathons-cursor-vs-code-ai-agents-3821</link>
      <guid>https://dev.to/abhishek-nexgen-dev/the-complete-guide-to-working-with-ai-while-coding-hackathons-cursor-vs-code-ai-agents-3821</guid>
      <description>&lt;p&gt;AI has fundamentally changed how developers build software.&lt;/p&gt;

&lt;p&gt;In hackathons, startups, and daily development, many developers now rely on tools like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Cursor&lt;/li&gt;
&lt;li&gt;VS Code + GitHub Copilot&lt;/li&gt;
&lt;li&gt;ChatGPT / Claude&lt;/li&gt;
&lt;li&gt;Aider&lt;/li&gt;
&lt;li&gt;Continue&lt;/li&gt;
&lt;li&gt;Antigravity agents&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These tools can:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;generate code&lt;/li&gt;
&lt;li&gt;modify multiple files&lt;/li&gt;
&lt;li&gt;refactor large parts of a project&lt;/li&gt;
&lt;li&gt;debug errors&lt;/li&gt;
&lt;li&gt;suggest architecture&lt;/li&gt;
&lt;li&gt;write tests&lt;/li&gt;
&lt;li&gt;even build full features&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Because of this, &lt;strong&gt;small teams can now build large systems extremely fast&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;But there is a hidden problem.&lt;/p&gt;

&lt;p&gt;Many developers use AI &lt;strong&gt;without a system&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;At first everything feels amazing.&lt;br&gt;
AI generates code quickly and features appear fast.&lt;/p&gt;

&lt;p&gt;But after some time, the project starts breaking.&lt;/p&gt;

&lt;p&gt;You begin to notice things like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;messy code structure&lt;/li&gt;
&lt;li&gt;features randomly breaking&lt;/li&gt;
&lt;li&gt;AI modifying unrelated files&lt;/li&gt;
&lt;li&gt;duplicate logic appearing&lt;/li&gt;
&lt;li&gt;debugging becoming harder and harder&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This happens because developers &lt;strong&gt;don’t manage AI collaboration properly&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The correct approach is simple:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Treat AI like a developer on your team.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;If a new developer joins your project, you don’t just say:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Build whatever you want.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;You give them:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;documentation&lt;/li&gt;
&lt;li&gt;architecture explanation&lt;/li&gt;
&lt;li&gt;coding rules&lt;/li&gt;
&lt;li&gt;feature plans&lt;/li&gt;
&lt;li&gt;debugging notes&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;AI needs the &lt;strong&gt;same structure&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;This guide explains how to build a &lt;strong&gt;proper system for working with AI while coding&lt;/strong&gt;.&lt;/p&gt;


&lt;h1&gt;
  
  
  Why AI Sometimes Breaks Your Project
&lt;/h1&gt;

&lt;p&gt;AI tools work with &lt;strong&gt;limited context&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Most coding assistants only see:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;the file you opened&lt;/li&gt;
&lt;li&gt;a few related files&lt;/li&gt;
&lt;li&gt;your conversation with the AI&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;They &lt;strong&gt;do not automatically understand your entire project&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Imagine your project has:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;controllers&lt;/li&gt;
&lt;li&gt;services&lt;/li&gt;
&lt;li&gt;repositories&lt;/li&gt;
&lt;li&gt;event systems&lt;/li&gt;
&lt;li&gt;socket communication&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If AI doesn’t understand those rules, it may generate code that &lt;strong&gt;breaks your architecture&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;For example:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;business logic placed inside controllers&lt;/li&gt;
&lt;li&gt;duplicated services&lt;/li&gt;
&lt;li&gt;incorrect database queries&lt;/li&gt;
&lt;li&gt;conflicting APIs&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The result is &lt;strong&gt;architecture drift&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;To prevent this, developers must provide &lt;strong&gt;structured context&lt;/strong&gt; for AI.&lt;/p&gt;


&lt;h1&gt;
  
  
  The Solution: Build an AI Workspace
&lt;/h1&gt;

&lt;p&gt;The best way to work with AI is to treat your project as having &lt;strong&gt;two systems&lt;/strong&gt;:&lt;/p&gt;

&lt;p&gt;1️⃣ Your &lt;strong&gt;application code&lt;/strong&gt;&lt;br&gt;
2️⃣ Your &lt;strong&gt;AI collaboration system&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A clean structure might look like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;project-root/

README.md
AI_RULES.md

docs/
plans/
ai-logs/
debug/
reviews/
ai-history/

src/
tests/
scripts/
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This structure helps both:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;human developers&lt;/li&gt;
&lt;li&gt;AI coding tools&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;understand the project.&lt;/p&gt;




&lt;h1&gt;
  
  
  Step 1: Write a Clear README
&lt;/h1&gt;

&lt;p&gt;Many AI tools read the &lt;strong&gt;README first&lt;/strong&gt; to understand the project.&lt;/p&gt;

&lt;p&gt;A good README should explain:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;what the project does&lt;/li&gt;
&lt;li&gt;the technology stack&lt;/li&gt;
&lt;li&gt;the main modules&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight markdown"&gt;&lt;code&gt;&lt;span class="gh"&gt;# CommDesk&lt;/span&gt;

CommDesk is a platform for managing developer communities,
events, and hackathons.

Stack

Frontend: React + Vite
Backend: Node.js + Express
Database: MongoDB
Desktop: Tauri
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This gives AI &lt;strong&gt;immediate context about your system&lt;/strong&gt;.&lt;/p&gt;




&lt;h1&gt;
  
  
  Step 2: Create AI Rules
&lt;/h1&gt;

&lt;p&gt;Create a file called:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;AI_RULES.md
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This file tells AI &lt;strong&gt;how your codebase works&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;AI Rules

1. Controllers only handle HTTP requests.
2. Business logic must stay inside services.
3. Database queries belong in repositories.
4. Follow the existing folder structure.
5. Do not duplicate existing logic.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This prevents AI from &lt;strong&gt;breaking your architecture&lt;/strong&gt;.&lt;/p&gt;




&lt;h1&gt;
  
  
  Step 3: Create a Documentation Folder
&lt;/h1&gt;

&lt;p&gt;Create a folder:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docs/
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Example structure:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docs/
AI_CONTEXT.md
ARCHITECTURE.md
FILE_STRUCTURE.md
CODING_GUIDELINES.md
SYSTEM_FLOW.md
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;These documents provide &lt;strong&gt;project-level understanding&lt;/strong&gt;.&lt;/p&gt;




&lt;h3&gt;
  
  
  AI_CONTEXT.md
&lt;/h3&gt;

&lt;p&gt;Explain what the project does.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Project Overview

CommDesk is a platform for managing developer communities.

Core modules:
- Authentication
- Event Management
- Notification System
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  ARCHITECTURE.md
&lt;/h3&gt;

&lt;p&gt;Explain the system design.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Client → API → Services → Database

Services:

Auth Service
Event Service
Notification Service
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  FILE_STRUCTURE.md
&lt;/h3&gt;

&lt;p&gt;Explain how the codebase is organized.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;src/

controllers/
services/
models/
routes/
utils/
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This prevents AI from inventing &lt;strong&gt;new random structures&lt;/strong&gt;.&lt;/p&gt;




&lt;h1&gt;
  
  
  Step 4: Plan Features Before Asking AI
&lt;/h1&gt;

&lt;p&gt;Instead of telling AI:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Build notifications.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Create a plan first.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;plans/
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Example files:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;IMPLEMENTATION_PLAN.md
FUTURE_FEATURES.md
ROADMAP.md
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Example feature plan:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Feature: Notification System

Step 1 Create database schema
Step 2 Create service layer
Step 3 Create API endpoints
Step 4 Add socket events
Step 5 Create UI components
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now AI can &lt;strong&gt;build features step by step&lt;/strong&gt;.&lt;/p&gt;




&lt;h1&gt;
  
  
  Step 5: Track AI Changes
&lt;/h1&gt;

&lt;p&gt;Create a folder:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;ai-logs/
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Example files:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;CHANGE_LOG.md
PROMPTS.md
AI_SESSIONS.md
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Example log:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Date: 2026-03-10
AI Tool: Cursor

Task:
Create Notification Service

Files Created:
src/services/notificationService.js

Files Updated:
src/controllers/notificationController.js
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Tracking AI changes makes debugging &lt;strong&gt;much easier later&lt;/strong&gt;.&lt;/p&gt;




&lt;h1&gt;
  
  
  Step 6: Store AI Session History
&lt;/h1&gt;

&lt;p&gt;Create:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;ai-history/
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;ai-history/
2026/
 03/
  10/
   session-1.md
   session-2.md
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Example session log:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Date: 2026-03-10
Time: 15:30

AI Tool: Cursor

Task:
Create notification service

Files created:
notificationService.js

Developer Notes:
Added validation manually.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This becomes a &lt;strong&gt;timeline of how the project evolved&lt;/strong&gt;.&lt;/p&gt;




&lt;h1&gt;
  
  
  Step 7: Track Bugs and Fixes
&lt;/h1&gt;

&lt;p&gt;Create a folder:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;debug/
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Example files:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;ERRORS.md
FIXES.md
INCIDENTS.md
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Error

Notification event not triggering
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Cause:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Incorrect socket event name
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Fix:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Changed event name
notifyUser → notification:new
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This builds a &lt;strong&gt;knowledge base of problems and solutions&lt;/strong&gt;.&lt;/p&gt;




&lt;h1&gt;
  
  
  Step 8: Review AI Code
&lt;/h1&gt;

&lt;p&gt;AI-generated code should always be reviewed.&lt;/p&gt;

&lt;p&gt;Create:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;reviews/
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;AI_REVIEW.md
CODE_REVIEW.md
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Example review:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;File
notificationService.js

Issues
Missing validation
Missing error handling
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This keeps your codebase &lt;strong&gt;clean and maintainable&lt;/strong&gt;.&lt;/p&gt;




&lt;h1&gt;
  
  
  Example AI Development Workflow
&lt;/h1&gt;

&lt;p&gt;A typical workflow might look like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Feature Idea
      ↓
Write Implementation Plan
      ↓
Ask AI to generate step 1
      ↓
Review generated code
      ↓
Log AI changes
      ↓
Test the feature
      ↓
Fix bugs with AI
      ↓
Update documentation
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Example Bug Fix Workflow
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Bug detected
      ↓
Record in debug/ERRORS.md
      ↓
Ask AI to investigate
      ↓
Apply fix
      ↓
Log the change
      ↓
Document the solution
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Best Practices When Using AI
&lt;/h1&gt;

&lt;p&gt;Always:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;ask AI for &lt;strong&gt;small tasks&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;review generated code carefully&lt;/li&gt;
&lt;li&gt;track AI-generated changes&lt;/li&gt;
&lt;li&gt;maintain documentation&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Avoid:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;generating entire systems in one prompt&lt;/li&gt;
&lt;li&gt;blindly trusting AI output&lt;/li&gt;
&lt;li&gt;skipping architecture planning&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  The Most Important Skill in the AI Era
&lt;/h1&gt;

&lt;p&gt;Many developers believe the key skill today is &lt;strong&gt;prompt engineering&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;But the real skill is:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Context Engineering&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Context engineering means:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;organizing documentation&lt;/li&gt;
&lt;li&gt;structuring your project clearly&lt;/li&gt;
&lt;li&gt;giving AI the right information&lt;/li&gt;
&lt;li&gt;guiding AI step by step&lt;/li&gt;
&lt;li&gt;maintaining development history&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Developers who master this can build &lt;strong&gt;faster, more reliable software with AI&lt;/strong&gt;.&lt;/p&gt;




&lt;h1&gt;
  
  
  Final Thoughts
&lt;/h1&gt;

&lt;p&gt;AI tools like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Cursor&lt;/li&gt;
&lt;li&gt;Copilot&lt;/li&gt;
&lt;li&gt;VS Code AI extensions&lt;/li&gt;
&lt;li&gt;Antigravity&lt;/li&gt;
&lt;li&gt;AI coding agents&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;are transforming software development.&lt;/p&gt;

&lt;p&gt;But AI works best when it is &lt;strong&gt;guided properly&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;When developers provide:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;clear documentation&lt;/li&gt;
&lt;li&gt;structured plans&lt;/li&gt;
&lt;li&gt;coding rules&lt;/li&gt;
&lt;li&gt;review processes&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;AI becomes &lt;strong&gt;a powerful development partner&lt;/strong&gt; instead of a source of chaos.&lt;/p&gt;

&lt;p&gt;And learning how to collaborate with AI will likely become one of the &lt;strong&gt;most important skills for developers in the coming years&lt;/strong&gt;.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>🧠 Sorting Algorithms Practice (Level 0 Hero)</title>
      <dc:creator>Abhishek Gupta </dc:creator>
      <pubDate>Sun, 08 Mar 2026 07:34:44 +0000</pubDate>
      <link>https://dev.to/abhishek-nexgen-dev/sorting-algorithms-practice-level-0-hero-1h8e</link>
      <guid>https://dev.to/abhishek-nexgen-dev/sorting-algorithms-practice-level-0-hero-1h8e</guid>
      <description>&lt;h2&gt;
  
  
  Part 1 — Beginner Level (Problems 0–10)
&lt;/h2&gt;

&lt;p&gt;Sorting is one of the &lt;strong&gt;core foundations of Data Structures and Algorithms&lt;/strong&gt;. Many interview questions become easier after sorting the data.&lt;/p&gt;

&lt;h1&gt;
  
  
  Problem 0 — Sort Three Numbers
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Difficulty
&lt;/h2&gt;

&lt;p&gt;Easy&lt;/p&gt;

&lt;h2&gt;
  
  
  Problem Statement
&lt;/h2&gt;

&lt;p&gt;You are given &lt;strong&gt;three integers&lt;/strong&gt; &lt;code&gt;a&lt;/code&gt;, &lt;code&gt;b&lt;/code&gt;, and &lt;code&gt;c&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Your task is to return the numbers in &lt;strong&gt;ascending order&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The result should be returned as an array or list.&lt;/p&gt;




&lt;h2&gt;
  
  
  Input
&lt;/h2&gt;

&lt;p&gt;Three integers.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;a = 7
b = 2
c = 5
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Output
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[2,5,7]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Example 1
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Input
a = 10
b = 3
c = 6

Output
[3,6,10]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Explanation
&lt;/h2&gt;

&lt;p&gt;The numbers sorted in ascending order are:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;3 &amp;lt; 6 &amp;lt; 10
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Constraints
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;-10^6 ≤ a,b,c ≤ 10^6
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Hint
&lt;/h2&gt;

&lt;p&gt;You can solve this by:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;comparing numbers manually&lt;/li&gt;
&lt;li&gt;using a small sorting algorithm&lt;/li&gt;
&lt;li&gt;using built-in sort function&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  Problem 1 — Sort an Integer Array
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Difficulty
&lt;/h2&gt;

&lt;p&gt;Easy&lt;/p&gt;

&lt;h2&gt;
  
  
  Problem Statement
&lt;/h2&gt;

&lt;p&gt;Given an integer array &lt;code&gt;nums&lt;/code&gt;, sort the array in &lt;strong&gt;ascending order&lt;/strong&gt; and return it.&lt;/p&gt;

&lt;p&gt;You may use any sorting algorithm such as:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Bubble Sort&lt;/li&gt;
&lt;li&gt;Merge Sort&lt;/li&gt;
&lt;li&gt;Quick Sort&lt;/li&gt;
&lt;li&gt;Heap Sort&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Input
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nums = [5,2,3,1]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Output
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[1,2,3,5]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Example 2
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Input
nums = [5,1,1,2,0,0]

Output
[0,0,1,1,2,5]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Constraints
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1 ≤ nums.length ≤ 50000
-50000 ≤ nums[i] ≤ 50000
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Explanation
&lt;/h2&gt;

&lt;p&gt;Sorting the numbers in ascending order means:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;smallest → largest
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Original:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;5,2,3,1
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Sorted:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1,2,3,5
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Hint
&lt;/h2&gt;

&lt;p&gt;Efficient algorithms:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Merge Sort  → O(n log n)
Quick Sort  → O(n log n)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Problem 2 — Sort Array in Descending Order
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Difficulty
&lt;/h2&gt;

&lt;p&gt;Easy&lt;/p&gt;

&lt;h2&gt;
  
  
  Problem Statement
&lt;/h2&gt;

&lt;p&gt;Given an array of integers &lt;code&gt;nums&lt;/code&gt;, sort the array in &lt;strong&gt;descending order&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Input
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nums = [1,5,3,2]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Output
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[5,3,2,1]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Example 2
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Input
nums = [10,4,7,1]

Output
[10,7,4,1]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Explanation
&lt;/h2&gt;

&lt;p&gt;Descending order means:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;largest → smallest
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Constraints
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1 ≤ nums.length ≤ 10^5
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Hint
&lt;/h2&gt;

&lt;p&gt;You can:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;sort normally&lt;/li&gt;
&lt;li&gt;reverse the result&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  Problem 3 — Check if Array is Sorted
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Difficulty
&lt;/h2&gt;

&lt;p&gt;Easy&lt;/p&gt;

&lt;h2&gt;
  
  
  Problem Statement
&lt;/h2&gt;

&lt;p&gt;Given an array &lt;code&gt;nums&lt;/code&gt;, determine whether the array is sorted in &lt;strong&gt;non-decreasing order&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Return:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;true  → if sorted
false → otherwise
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Input
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nums = [1,2,3,4,5]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Output
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;true
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Example 2
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Input
nums = [1,3,2]

Output
false
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Explanation
&lt;/h2&gt;

&lt;p&gt;The second example fails because:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;3 &amp;gt; 2
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So the array is &lt;strong&gt;not sorted&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Constraints
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1 ≤ nums.length ≤ 10^5
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Hint
&lt;/h2&gt;

&lt;p&gt;Loop through the array and check:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nums[i] ≤ nums[i+1]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Problem 4 — Bubble Sort Implementation
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Difficulty
&lt;/h2&gt;

&lt;p&gt;Easy&lt;/p&gt;

&lt;h2&gt;
  
  
  Problem Statement
&lt;/h2&gt;

&lt;p&gt;Implement the &lt;strong&gt;Bubble Sort algorithm&lt;/strong&gt; to sort an array in ascending order.&lt;/p&gt;

&lt;p&gt;Bubble Sort repeatedly swaps adjacent elements if they are in the wrong order.&lt;/p&gt;




&lt;h2&gt;
  
  
  Input
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nums = [5,1,4,2]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Output
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[1,2,4,5]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Example
&lt;/h2&gt;

&lt;p&gt;Original array&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;5 1 4 2
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Pass 1&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1 5 4 2
1 4 5 2
1 4 2 5
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Pass 2&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1 4 2 5
1 2 4 5
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Sorted array&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1 2 4 5
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Constraints
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1 ≤ nums.length ≤ 1000
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Time Complexity
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;O(n²)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Problem 5 — Selection Sort Implementation
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Difficulty
&lt;/h2&gt;

&lt;p&gt;Easy&lt;/p&gt;

&lt;h2&gt;
  
  
  Problem Statement
&lt;/h2&gt;

&lt;p&gt;Implement &lt;strong&gt;Selection Sort&lt;/strong&gt; to sort the array.&lt;/p&gt;

&lt;p&gt;Selection Sort works by repeatedly selecting the &lt;strong&gt;minimum element&lt;/strong&gt; from the unsorted part and placing it at the beginning.&lt;/p&gt;




&lt;h2&gt;
  
  
  Input
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nums = [64,25,12,22,11]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Output
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[11,12,22,25,64]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Explanation
&lt;/h2&gt;

&lt;p&gt;Steps&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;11 25 12 22 64
11 12 25 22 64
11 12 22 25 64
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Time Complexity
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;O(n²)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Problem 6 — Insertion Sort Implementation
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Difficulty
&lt;/h2&gt;

&lt;p&gt;Easy&lt;/p&gt;

&lt;h2&gt;
  
  
  Problem Statement
&lt;/h2&gt;

&lt;p&gt;Sort the array using &lt;strong&gt;Insertion Sort&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Insertion sort builds the sorted array &lt;strong&gt;one element at a time&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Input
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nums = [8,3,5,2]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Output
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[2,3,5,8]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Explanation
&lt;/h2&gt;

&lt;p&gt;Steps:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;8
3 8
3 5 8
2 3 5 8
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Time Complexity
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Best Case  → O(n)
Worst Case → O(n²)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Problem 7 — Move Zeros to End
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Difficulty
&lt;/h2&gt;

&lt;p&gt;Easy&lt;/p&gt;

&lt;h2&gt;
  
  
  Problem Statement
&lt;/h2&gt;

&lt;p&gt;Given an array &lt;code&gt;nums&lt;/code&gt;, move all &lt;code&gt;0&lt;/code&gt;s to the &lt;strong&gt;end of the array&lt;/strong&gt; while maintaining the &lt;strong&gt;relative order of non-zero elements&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Input
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nums = [0,1,0,3,12]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Output
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[1,3,12,0,0]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Explanation
&lt;/h2&gt;

&lt;p&gt;Original&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;0 1 0 3 12
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Move zeros&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1 3 12 0 0
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Constraints
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1 ≤ nums.length ≤ 10^4
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Problem 8 — Sort Even and Odd Numbers
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Difficulty
&lt;/h2&gt;

&lt;p&gt;Easy&lt;/p&gt;

&lt;h2&gt;
  
  
  Problem Statement
&lt;/h2&gt;

&lt;p&gt;Rearrange the array so that:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;All even numbers appear first
All odd numbers appear after them
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The relative order does not matter.&lt;/p&gt;




&lt;h2&gt;
  
  
  Input
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nums = [3,1,2,4]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Output
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[2,4,3,1]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Explanation
&lt;/h2&gt;

&lt;p&gt;Even numbers&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;2 4
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Odd numbers&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;3 1
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Combined&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;2 4 3 1
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Problem 9 — Sort 0s and 1s
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Difficulty
&lt;/h2&gt;

&lt;p&gt;Easy&lt;/p&gt;

&lt;h2&gt;
  
  
  Problem Statement
&lt;/h2&gt;

&lt;p&gt;Given a binary array containing only &lt;code&gt;0&lt;/code&gt; and &lt;code&gt;1&lt;/code&gt;, sort the array.&lt;/p&gt;




&lt;h2&gt;
  
  
  Input
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nums = [1,0,1,0,1]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Output
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[0,0,1,1,1]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Hint
&lt;/h2&gt;

&lt;p&gt;Count number of:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;zeros
ones
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Problem 10 — Sort Array by Absolute Value
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Difficulty
&lt;/h2&gt;

&lt;p&gt;Easy&lt;/p&gt;

&lt;h2&gt;
  
  
  Problem Statement
&lt;/h2&gt;

&lt;p&gt;Sort the array based on the &lt;strong&gt;absolute value of numbers&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Input
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nums = [-4,-1,0,3,10]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Output
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[0,-1,3,-4,10]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Explanation
&lt;/h2&gt;

&lt;p&gt;Absolute values:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;0 → 0
-1 → 1
3 → 3
-4 → 4
10 → 10
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Sorted by absolute value.&lt;/p&gt;

&lt;h1&gt;
  
  
  Part 2 — Intermediate Level (Problems 11–20)
&lt;/h1&gt;

&lt;p&gt;These problems introduce &lt;strong&gt;real interview patterns&lt;/strong&gt; where sorting is used with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Two pointers&lt;/li&gt;
&lt;li&gt;Hash maps&lt;/li&gt;
&lt;li&gt;Custom comparators&lt;/li&gt;
&lt;li&gt;Frequency counting&lt;/li&gt;
&lt;li&gt;Merging sorted data&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  Problem 11 — Sort Colors (Dutch National Flag Problem)
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Difficulty:&lt;/strong&gt; Medium&lt;/p&gt;

&lt;h2&gt;
  
  
  Problem Statement
&lt;/h2&gt;

&lt;p&gt;You are given an array &lt;code&gt;nums&lt;/code&gt; containing &lt;code&gt;n&lt;/code&gt; objects colored &lt;strong&gt;red, white, or blue&lt;/strong&gt;, represented by the integers:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;0 → red  
1 → white  
2 → blue
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Sort the array &lt;strong&gt;in-place&lt;/strong&gt; so that objects of the same color are adjacent in the order:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;0 → 1 → 2
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You must solve the problem &lt;strong&gt;without using the built-in sort function&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Input
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nums = [2,0,2,1,1,0]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Output
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[0,0,1,1,2,2]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Example 2
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Input
nums = [2,0,1]

Output
[0,1,2]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Constraints
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1 ≤ nums.length ≤ 300
nums[i] ∈ {0,1,2}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Explanation
&lt;/h2&gt;

&lt;p&gt;The sorted order should be:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;0s → first
1s → middle
2s → last
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Hint
&lt;/h2&gt;

&lt;p&gt;Use the &lt;strong&gt;Dutch National Flag Algorithm&lt;/strong&gt; with &lt;strong&gt;three pointers&lt;/strong&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;low
mid
high
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Time Complexity:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;O(n)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Problem 12 — Merge Two Sorted Arrays
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Difficulty:&lt;/strong&gt; Easy&lt;/p&gt;




&lt;h2&gt;
  
  
  Problem Statement
&lt;/h2&gt;

&lt;p&gt;You are given &lt;strong&gt;two sorted arrays&lt;/strong&gt; &lt;code&gt;nums1&lt;/code&gt; and &lt;code&gt;nums2&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Merge &lt;code&gt;nums2&lt;/code&gt; into &lt;code&gt;nums1&lt;/code&gt; as &lt;strong&gt;one sorted array&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Input
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nums1 = [1,2,3]
nums2 = [2,5,6]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Output
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[1,2,2,3,5,6]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Example 2
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Input
nums1 = [1,3,5]
nums2 = [2,4,6]

Output
[1,2,3,4,5,6]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Constraints
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1 ≤ nums1.length, nums2.length ≤ 1000
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Explanation
&lt;/h2&gt;

&lt;p&gt;Because both arrays are already sorted, we can merge them similar to the &lt;strong&gt;Merge step in Merge Sort&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Hint
&lt;/h2&gt;

&lt;p&gt;Use &lt;strong&gt;two pointers&lt;/strong&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;i → nums1
j → nums2
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Compare elements and insert the smaller one.&lt;/p&gt;




&lt;h1&gt;
  
  
  Problem 13 — Intersection of Two Sorted Arrays
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Difficulty:&lt;/strong&gt; Easy&lt;/p&gt;




&lt;h2&gt;
  
  
  Problem Statement
&lt;/h2&gt;

&lt;p&gt;Given &lt;strong&gt;two sorted arrays&lt;/strong&gt;, return their &lt;strong&gt;intersection&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The intersection should contain &lt;strong&gt;common elements appearing in both arrays&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Input
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nums1 = [1,2,2,3]
nums2 = [2,2]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Output
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[2,2]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Example 2
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Input
nums1 = [1,3,4,5]
nums2 = [2,3,5,7]

Output
[3,5]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Constraints
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1 ≤ nums1.length, nums2.length ≤ 1000
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Hint
&lt;/h2&gt;

&lt;p&gt;Use &lt;strong&gt;two pointers&lt;/strong&gt; to scan both arrays.&lt;/p&gt;




&lt;h1&gt;
  
  
  Problem 14 — Union of Two Sorted Arrays
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Difficulty:&lt;/strong&gt; Easy&lt;/p&gt;




&lt;h2&gt;
  
  
  Problem Statement
&lt;/h2&gt;

&lt;p&gt;Given two sorted arrays, return the &lt;strong&gt;union of the arrays&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The union should contain &lt;strong&gt;all unique elements from both arrays&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Input
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nums1 = [1,2,4]
nums2 = [2,3,5]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Output
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[1,2,3,4,5]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Example 2
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Input
nums1 = [1,1,2,3]
nums2 = [2,3,4]

Output
[1,2,3,4]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Hint
&lt;/h2&gt;

&lt;p&gt;Use:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;two pointers
set
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Problem 15 — Sort Array by Frequency
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Difficulty:&lt;/strong&gt; Medium&lt;/p&gt;




&lt;h2&gt;
  
  
  Problem Statement
&lt;/h2&gt;

&lt;p&gt;Given an integer array &lt;code&gt;nums&lt;/code&gt;, sort the array based on the &lt;strong&gt;frequency of values&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Rules:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Numbers with &lt;strong&gt;lower frequency come first&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;If frequencies are equal, &lt;strong&gt;larger numbers appear first&lt;/strong&gt;
&lt;/li&gt;
&lt;/ol&gt;




&lt;h2&gt;
  
  
  Input
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nums = [2,3,1,3,2]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Output
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[1,3,3,2,2]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Explanation
&lt;/h2&gt;

&lt;p&gt;Frequencies:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1 → 1 time
3 → 2 times
2 → 2 times
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Because &lt;code&gt;3&lt;/code&gt; and &lt;code&gt;2&lt;/code&gt; appear the same number of times, the &lt;strong&gt;larger number comes first&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Hint
&lt;/h2&gt;

&lt;p&gt;Steps:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Count frequencies using a hashmap&lt;/li&gt;
&lt;li&gt;Sort using a custom comparator&lt;/li&gt;
&lt;/ol&gt;




&lt;h1&gt;
  
  
  Problem 16 — Relative Sort Array
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Difficulty:&lt;/strong&gt; Medium&lt;/p&gt;




&lt;h2&gt;
  
  
  Problem Statement
&lt;/h2&gt;

&lt;p&gt;You are given two arrays:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;arr1
arr2
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Elements in &lt;code&gt;arr2&lt;/code&gt; are unique and appear in &lt;code&gt;arr1&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Sort &lt;code&gt;arr1&lt;/code&gt; such that:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Elements in &lt;code&gt;arr2&lt;/code&gt; appear first&lt;/li&gt;
&lt;li&gt;Their order matches &lt;code&gt;arr2&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Remaining elements appear in &lt;strong&gt;ascending order&lt;/strong&gt;
&lt;/li&gt;
&lt;/ol&gt;




&lt;h2&gt;
  
  
  Input
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;arr1 = [2,3,1,3,2,4,6,7,9,2,19]
arr2 = [2,1,4,3,9,6]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Output
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[2,2,2,1,4,3,3,9,6,7,19]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Hint
&lt;/h2&gt;

&lt;p&gt;Use:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;HashMap + Sorting
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Problem 17 — Sort Characters by Frequency
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Difficulty:&lt;/strong&gt; Medium&lt;/p&gt;




&lt;h2&gt;
  
  
  Problem Statement
&lt;/h2&gt;

&lt;p&gt;Given a string &lt;code&gt;s&lt;/code&gt;, sort it in &lt;strong&gt;descending order based on character frequency&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Input
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;s = "tree"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Output
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;"eert"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Explanation
&lt;/h2&gt;

&lt;p&gt;Frequency:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;e → 2
t → 1
r → 1
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The result starts with the most frequent character.&lt;/p&gt;




&lt;h2&gt;
  
  
  Hint
&lt;/h2&gt;

&lt;p&gt;Steps:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;count frequency
sort by frequency
rebuild string
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Problem 18 — Sort Matrix Diagonally
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Difficulty:&lt;/strong&gt; Medium&lt;/p&gt;




&lt;h2&gt;
  
  
  Problem Statement
&lt;/h2&gt;

&lt;p&gt;Given a matrix &lt;code&gt;mat&lt;/code&gt;, sort &lt;strong&gt;each diagonal in ascending order&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Input
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;mat =
[
[3,3,1],
[2,2,1],
[1,1,1]
]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Output
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[
[1,1,1],
[1,2,2],
[1,2,3]
]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Explanation
&lt;/h2&gt;

&lt;p&gt;Each diagonal must be sorted independently.&lt;/p&gt;




&lt;h2&gt;
  
  
  Hint
&lt;/h2&gt;

&lt;p&gt;Use:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;HashMap&amp;lt;diagonal, values&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then sort each list.&lt;/p&gt;




&lt;h1&gt;
  
  
  Problem 19 — Sort Linked List
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Difficulty:&lt;/strong&gt; Medium&lt;/p&gt;




&lt;h2&gt;
  
  
  Problem Statement
&lt;/h2&gt;

&lt;p&gt;Given the &lt;strong&gt;head of a linked list&lt;/strong&gt;, sort it in ascending order.&lt;/p&gt;




&lt;h2&gt;
  
  
  Input
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;4 → 2 → 1 → 3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Output
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1 → 2 → 3 → 4
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Constraints
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;0 ≤ nodes ≤ 50,000
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Hint
&lt;/h2&gt;

&lt;p&gt;Best solution:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Merge Sort on Linked List
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Time Complexity:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;O(n log n)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Problem 20 — Sort People by Height
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Difficulty:&lt;/strong&gt; Easy&lt;/p&gt;




&lt;h2&gt;
  
  
  Problem Statement
&lt;/h2&gt;

&lt;p&gt;You are given two arrays:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;names
heights
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Sort the people by &lt;strong&gt;heights in descending order&lt;/strong&gt; and return the names.&lt;/p&gt;




&lt;h2&gt;
  
  
  Input
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;names = ["Mary","John","Emma"]
heights = [180,165,170]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Output
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;["Mary","Emma","John"]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Explanation
&lt;/h2&gt;

&lt;p&gt;Sorted by height:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;180 → Mary
170 → Emma
165 → John
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;p&gt;Great — let’s continue the series.&lt;br&gt;
Below is &lt;strong&gt;Part 3: Problems 21–30&lt;/strong&gt; in a &lt;strong&gt;LeetCode-style detailed format&lt;/strong&gt;, moving toward &lt;strong&gt;advanced sorting patterns&lt;/strong&gt; such as &lt;strong&gt;QuickSelect, inversion counting, and swap optimization&lt;/strong&gt;.&lt;/p&gt;


&lt;h1&gt;
  
  
  Part 3 — Upper-Intermediate Level (Problems 21–30)
&lt;/h1&gt;

&lt;p&gt;These problems combine &lt;strong&gt;sorting with algorithmic techniques&lt;/strong&gt; like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Greedy strategies&lt;/li&gt;
&lt;li&gt;Divide and conquer&lt;/li&gt;
&lt;li&gt;QuickSelect&lt;/li&gt;
&lt;li&gt;Heap / priority queue&lt;/li&gt;
&lt;li&gt;Mathematical observations&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These appear frequently in &lt;strong&gt;coding interviews&lt;/strong&gt;.&lt;/p&gt;


&lt;h1&gt;
  
  
  Problem 21 — Kth Largest Element in an Array
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Difficulty:&lt;/strong&gt; Medium&lt;/p&gt;
&lt;h2&gt;
  
  
  Problem Statement
&lt;/h2&gt;

&lt;p&gt;Given an integer array &lt;code&gt;nums&lt;/code&gt; and an integer &lt;code&gt;k&lt;/code&gt;, return the &lt;strong&gt;kth largest element&lt;/strong&gt; in the array.&lt;/p&gt;

&lt;p&gt;Note:&lt;br&gt;
The kth largest element is the element that would appear in position &lt;code&gt;k&lt;/code&gt; if the array were sorted in &lt;strong&gt;descending order&lt;/strong&gt;.&lt;/p&gt;


&lt;h2&gt;
  
  
  Input
&lt;/h2&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nums = [3,2,1,5,6,4]
k = 2
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Output
&lt;/h2&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;5
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Example 2
&lt;/h2&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Input
nums = [3,2,3,1,2,4,5,5,6]
k = 4

Output
4
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Constraints
&lt;/h2&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1 ≤ k ≤ nums.length ≤ 100000
-10^4 ≤ nums[i] ≤ 10^4
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Explanation
&lt;/h2&gt;

&lt;p&gt;Sorted descending:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[6,5,4,3,2,1]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;2nd largest element = &lt;strong&gt;5&lt;/strong&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Hint
&lt;/h2&gt;

&lt;p&gt;Efficient solutions:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;QuickSelect
Heap
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Time Complexity:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Average → O(n)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Problem 22 — Kth Smallest Element in an Array
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Difficulty:&lt;/strong&gt; Medium&lt;/p&gt;




&lt;h2&gt;
  
  
  Problem Statement
&lt;/h2&gt;

&lt;p&gt;Given an array &lt;code&gt;nums&lt;/code&gt; and an integer &lt;code&gt;k&lt;/code&gt;, return the &lt;strong&gt;kth smallest element&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Input
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nums = [7,10,4,3,20,15]
k = 3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Output
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;7
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Explanation
&lt;/h2&gt;

&lt;p&gt;Sorted array:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[3,4,7,10,15,20]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;3rd smallest = &lt;strong&gt;7&lt;/strong&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Hint
&lt;/h2&gt;

&lt;p&gt;Use:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;QuickSelect
Min Heap
Sorting
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Problem 23 — Minimum Swaps to Sort Array
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Difficulty:&lt;/strong&gt; Medium&lt;/p&gt;




&lt;h2&gt;
  
  
  Problem Statement
&lt;/h2&gt;

&lt;p&gt;Given an array of &lt;strong&gt;distinct integers&lt;/strong&gt;, determine the &lt;strong&gt;minimum number of swaps required&lt;/strong&gt; to sort the array.&lt;/p&gt;




&lt;h2&gt;
  
  
  Input
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nums = [4,3,2,1]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Output
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;2
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Explanation
&lt;/h2&gt;

&lt;p&gt;Initial:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;4 3 2 1
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Swap:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;4 ↔ 1
3 ↔ 2
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Sorted:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1 2 3 4
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Total swaps = &lt;strong&gt;2&lt;/strong&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Hint
&lt;/h2&gt;

&lt;p&gt;Use &lt;strong&gt;cycle detection in permutation&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Time Complexity:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;O(n log n)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Problem 24 — Count Inversions in Array
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Difficulty:&lt;/strong&gt; Medium&lt;/p&gt;




&lt;h2&gt;
  
  
  Problem Statement
&lt;/h2&gt;

&lt;p&gt;An &lt;strong&gt;inversion&lt;/strong&gt; occurs when:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;i &amp;lt; j
nums[i] &amp;gt; nums[j]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Your task is to count the &lt;strong&gt;total number of inversions&lt;/strong&gt; in the array.&lt;/p&gt;




&lt;h2&gt;
  
  
  Input
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nums = [2,4,1,3,5]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Output
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Explanation
&lt;/h2&gt;

&lt;p&gt;Inversions:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;(2,1)
(4,1)
(4,3)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Total = &lt;strong&gt;3&lt;/strong&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Hint
&lt;/h2&gt;

&lt;p&gt;Efficient solution:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Merge Sort modification
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Time Complexity:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;O(n log n)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Problem 25 — Pancake Sorting
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Difficulty:&lt;/strong&gt; Medium&lt;/p&gt;




&lt;h2&gt;
  
  
  Problem Statement
&lt;/h2&gt;

&lt;p&gt;You are given an array &lt;code&gt;arr&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;In one operation you can &lt;strong&gt;flip the first k elements&lt;/strong&gt; of the array.&lt;/p&gt;

&lt;p&gt;Return a sequence of flips that sorts the array.&lt;/p&gt;




&lt;h2&gt;
  
  
  Input
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;arr = [3,2,4,1]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Output
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[4,2,4,3]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Explanation
&lt;/h2&gt;

&lt;p&gt;Flip operations reverse prefixes until array becomes sorted.&lt;/p&gt;




&lt;h2&gt;
  
  
  Hint
&lt;/h2&gt;

&lt;p&gt;Idea:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Bring largest element to front
Then flip to its correct position
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Problem 26 — Wiggle Sort
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Difficulty:&lt;/strong&gt; Medium&lt;/p&gt;




&lt;h2&gt;
  
  
  Problem Statement
&lt;/h2&gt;

&lt;p&gt;Reorder the array such that:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nums[0] ≤ nums[1] ≥ nums[2] ≤ nums[3] ≥ nums[4]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Input
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nums = [3,5,2,1,6,4]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Output
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[3,5,1,6,2,4]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Explanation
&lt;/h2&gt;

&lt;p&gt;Check the pattern:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;3 ≤ 5 ≥ 1 ≤ 6 ≥ 2 ≤ 4
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Hint
&lt;/h2&gt;

&lt;p&gt;Sort first then rearrange or use &lt;strong&gt;single pass swapping&lt;/strong&gt;.&lt;/p&gt;




&lt;h1&gt;
  
  
  Problem 27 — Wiggle Sort II
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Difficulty:&lt;/strong&gt; Medium/Hard&lt;/p&gt;




&lt;h2&gt;
  
  
  Problem Statement
&lt;/h2&gt;

&lt;p&gt;Rearrange numbers so that:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nums[0] &amp;lt; nums[1] &amp;gt; nums[2] &amp;lt; nums[3] &amp;gt; nums[4]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Input
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nums = [1,5,1,1,6,4]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Output
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[1,6,1,5,1,4]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Hint
&lt;/h2&gt;

&lt;p&gt;Steps:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Find median
Three-way partition
Rearrange
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Problem 28 — Maximum Gap
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Difficulty:&lt;/strong&gt; Hard&lt;/p&gt;




&lt;h2&gt;
  
  
  Problem Statement
&lt;/h2&gt;

&lt;p&gt;Given an integer array &lt;code&gt;nums&lt;/code&gt;, find the &lt;strong&gt;maximum difference between two successive elements&lt;/strong&gt; in the sorted form of the array.&lt;/p&gt;

&lt;p&gt;You must solve it in &lt;strong&gt;linear time&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Input
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nums = [3,6,9,1]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Output
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Explanation
&lt;/h2&gt;

&lt;p&gt;Sorted array:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[1,3,6,9]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Differences:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;2,3,3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Maximum = &lt;strong&gt;3&lt;/strong&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Hint
&lt;/h2&gt;

&lt;p&gt;Use &lt;strong&gt;Bucket Sort / Pigeonhole Principle&lt;/strong&gt;.&lt;/p&gt;




&lt;h1&gt;
  
  
  Problem 29 — Top K Frequent Elements
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Difficulty:&lt;/strong&gt; Medium&lt;/p&gt;




&lt;h2&gt;
  
  
  Problem Statement
&lt;/h2&gt;

&lt;p&gt;Given an integer array &lt;code&gt;nums&lt;/code&gt; and an integer &lt;code&gt;k&lt;/code&gt;, return the &lt;strong&gt;k most frequent elements&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Input
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nums = [1,1,1,2,2,3]
k = 2
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Output
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[1,2]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Explanation
&lt;/h2&gt;

&lt;p&gt;Frequency:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1 → 3 times
2 → 2 times
3 → 1 time
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Top 2 frequent elements:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1,2
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Hint
&lt;/h2&gt;

&lt;p&gt;Possible approaches:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Heap
Bucket Sort
QuickSelect
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Problem 30 — Sort Nearly Sorted Array
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Difficulty:&lt;/strong&gt; Medium&lt;/p&gt;




&lt;h2&gt;
  
  
  Problem Statement
&lt;/h2&gt;

&lt;p&gt;An array is &lt;strong&gt;k-sorted&lt;/strong&gt; if every element is at most &lt;code&gt;k&lt;/code&gt; positions away from its sorted position.&lt;/p&gt;

&lt;p&gt;Sort the array efficiently.&lt;/p&gt;




&lt;h2&gt;
  
  
  Input
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nums = [6,5,3,2,8,10,9]
k = 3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Output
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[2,3,5,6,8,9,10]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Hint
&lt;/h2&gt;

&lt;p&gt;Use a &lt;strong&gt;Min Heap of size k+1&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Time Complexity:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;O(n log k)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Below is &lt;strong&gt;Part 4&lt;/strong&gt; of the &lt;strong&gt;Sorting DSA Series (LeetCode Style)&lt;/strong&gt;.&lt;br&gt;
These problems move from &lt;strong&gt;advanced → interview level&lt;/strong&gt; and involve &lt;strong&gt;Quick Sort ideas, custom sorting, and greedy sorting logic&lt;/strong&gt;.&lt;/p&gt;


&lt;h1&gt;
  
  
  🧠 Sorting Problems (Hero Level) — Part 4
&lt;/h1&gt;


&lt;h1&gt;
  
  
  16. Maximum Gap
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Difficulty:&lt;/strong&gt; Hard&lt;br&gt;
&lt;strong&gt;Concepts:&lt;/strong&gt; Sorting, Bucket Sort, Pigeonhole Principle&lt;/p&gt;


&lt;h2&gt;
  
  
  Problem
&lt;/h2&gt;

&lt;p&gt;Given an integer array &lt;code&gt;nums&lt;/code&gt;, return the &lt;strong&gt;maximum difference between two successive elements&lt;/strong&gt; in its &lt;strong&gt;sorted form&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;If the array contains less than two elements, return &lt;code&gt;0&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;You must solve it in &lt;strong&gt;linear time and space&lt;/strong&gt; if possible.&lt;/p&gt;


&lt;h2&gt;
  
  
  Example 1
&lt;/h2&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Input:
nums = [3,6,9,1]

Output:
3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h3&gt;
  
  
  Explanation
&lt;/h3&gt;

&lt;p&gt;Sorted array:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[1,3,6,9]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Differences:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;3-1 = 2
6-3 = 3
9-6 = 3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Maximum gap = &lt;strong&gt;3&lt;/strong&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Example 2
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Input:
nums = [10]

Output:
0
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Explanation
&lt;/h3&gt;

&lt;p&gt;Only one element → no gap exists.&lt;/p&gt;




&lt;h2&gt;
  
  
  Constraints
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1 ≤ nums.length ≤ 10^5
0 ≤ nums[i] ≤ 10^9
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Follow-up
&lt;/h2&gt;

&lt;p&gt;Solve in &lt;strong&gt;O(n)&lt;/strong&gt; time without directly sorting.&lt;/p&gt;




&lt;h1&gt;
  
  
  17. Largest Number
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Difficulty:&lt;/strong&gt; Medium&lt;br&gt;
&lt;strong&gt;Concepts:&lt;/strong&gt; Custom Sorting, Comparator&lt;/p&gt;


&lt;h2&gt;
  
  
  Problem
&lt;/h2&gt;

&lt;p&gt;Given a list of &lt;strong&gt;non-negative integers&lt;/strong&gt;, arrange them such that they form the &lt;strong&gt;largest possible number&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Return the result as a &lt;strong&gt;string&lt;/strong&gt;.&lt;/p&gt;


&lt;h2&gt;
  
  
  Example 1
&lt;/h2&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Input:
nums = [10,2]

Output:
"210"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Example 2
&lt;/h2&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Input:
nums = [3,30,34,5,9]

Output:
"9534330"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Explanation
&lt;/h2&gt;

&lt;p&gt;Numbers must be sorted based on &lt;strong&gt;which concatenation produces a larger number&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Compare:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;34 + 3 = 343
3 + 34 = 334
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Since &lt;code&gt;343 &amp;gt; 334&lt;/code&gt;, &lt;code&gt;34&lt;/code&gt; should come before &lt;code&gt;3&lt;/code&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Constraints
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1 ≤ nums.length ≤ 100
0 ≤ nums[i] ≤ 10^9
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  18. H-Index
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Difficulty:&lt;/strong&gt; Medium&lt;br&gt;
&lt;strong&gt;Concepts:&lt;/strong&gt; Sorting, Counting&lt;/p&gt;


&lt;h2&gt;
  
  
  Problem
&lt;/h2&gt;

&lt;p&gt;Given an array &lt;code&gt;citations&lt;/code&gt;, where &lt;code&gt;citations[i]&lt;/code&gt; is the number of citations a researcher received for their &lt;code&gt;i-th&lt;/code&gt; paper.&lt;/p&gt;

&lt;p&gt;Return the &lt;strong&gt;researcher's h-index&lt;/strong&gt;.&lt;/p&gt;


&lt;h2&gt;
  
  
  Definition
&lt;/h2&gt;

&lt;p&gt;A scientist has &lt;strong&gt;h-index = h&lt;/strong&gt; if:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;h&lt;/code&gt; papers have &lt;strong&gt;at least h citations each&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;


&lt;h2&gt;
  
  
  Example
&lt;/h2&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Input:
citations = [3,0,6,1,5]

Output:
3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Explanation
&lt;/h2&gt;

&lt;p&gt;Sorted:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[0,1,3,5,6]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;There are &lt;strong&gt;3 papers with at least 3 citations&lt;/strong&gt;.&lt;/p&gt;




&lt;h1&gt;
  
  
  19. Sort Array by Increasing Frequency
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Difficulty:&lt;/strong&gt; Easy&lt;br&gt;
&lt;strong&gt;Concepts:&lt;/strong&gt; Sorting + HashMap&lt;/p&gt;


&lt;h2&gt;
  
  
  Problem
&lt;/h2&gt;

&lt;p&gt;Given an array of integers &lt;code&gt;nums&lt;/code&gt;, sort the array based on:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Increasing frequency&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;If frequency is same → &lt;strong&gt;sort by decreasing number&lt;/strong&gt;
&lt;/li&gt;
&lt;/ol&gt;


&lt;h2&gt;
  
  
  Example
&lt;/h2&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Input:
nums = [1,1,2,2,2,3]

Output:
[3,1,1,2,2,2]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Explanation
&lt;/h2&gt;

&lt;p&gt;Frequency:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1 → 2 times
2 → 3 times
3 → 1 time
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Sorted by frequency:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;3 → 1 time
1 → 2 times
2 → 3 times
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  20. Queue Reconstruction by Height
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Difficulty:&lt;/strong&gt; Hard&lt;br&gt;
&lt;strong&gt;Concepts:&lt;/strong&gt; Sorting + Greedy&lt;/p&gt;


&lt;h2&gt;
  
  
  Problem
&lt;/h2&gt;

&lt;p&gt;You are given an array &lt;code&gt;people&lt;/code&gt; where:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;people[i] = [hi, ki]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Where:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;hi&lt;/code&gt; = height of person&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;ki&lt;/code&gt; = number of people in front with height &lt;strong&gt;≥ hi&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Reconstruct the queue.&lt;/p&gt;




&lt;h2&gt;
  
  
  Example
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Input:
people = [[7,0],[4,4],[7,1],[5,0],[6,1],[5,2]]

Output:
[[5,0],[7,0],[5,2],[6,1],[4,4],[7,1]]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Explanation
&lt;/h2&gt;

&lt;p&gt;Sort people by:&lt;/p&gt;

&lt;p&gt;1️⃣ Height &lt;strong&gt;descending&lt;/strong&gt;&lt;br&gt;
2️⃣ k-value &lt;strong&gt;ascending&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Then insert them at position &lt;code&gt;k&lt;/code&gt;.&lt;/p&gt;


&lt;h1&gt;
  
  
  21. Minimum Number of Arrows to Burst Balloons
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Difficulty:&lt;/strong&gt; Medium&lt;br&gt;
&lt;strong&gt;Concepts:&lt;/strong&gt; Sorting + Greedy&lt;/p&gt;


&lt;h2&gt;
  
  
  Problem
&lt;/h2&gt;

&lt;p&gt;You are given balloons represented by intervals:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[xstart, xend]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;An arrow shot at position &lt;code&gt;x&lt;/code&gt; bursts all balloons where:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;xstart ≤ x ≤ xend
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Return the &lt;strong&gt;minimum arrows needed&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Example
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Input:
points = [[10,16],[2,8],[1,6],[7,12]]

Output:
2
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Explanation
&lt;/h2&gt;

&lt;p&gt;Burst:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Arrow 1 → [1,6] and [2,8]
Arrow 2 → [7,12] and [10,16]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  22. Minimum Platforms (Train Problem)
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Difficulty:&lt;/strong&gt; Medium&lt;br&gt;
&lt;strong&gt;Concepts:&lt;/strong&gt; Sorting + Two Pointers&lt;/p&gt;


&lt;h2&gt;
  
  
  Problem
&lt;/h2&gt;

&lt;p&gt;Given arrival and departure times of trains, find the &lt;strong&gt;minimum number of platforms required&lt;/strong&gt; so that no train waits.&lt;/p&gt;


&lt;h2&gt;
  
  
  Example
&lt;/h2&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Arrival:
[900, 940, 950, 1100, 1500, 1800]

Departure:
[910, 1200, 1120, 1130, 1900, 2000]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Output&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Explanation
&lt;/h2&gt;

&lt;p&gt;At &lt;strong&gt;11:00 AM&lt;/strong&gt;, three trains are present simultaneously.&lt;/p&gt;




&lt;h1&gt;
  
  
  23. Sort a Linked List
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Difficulty:&lt;/strong&gt; Medium&lt;br&gt;
&lt;strong&gt;Concepts:&lt;/strong&gt; Merge Sort on Linked List&lt;/p&gt;


&lt;h2&gt;
  
  
  Problem
&lt;/h2&gt;

&lt;p&gt;Given the &lt;code&gt;head&lt;/code&gt; of a linked list, sort the list in &lt;strong&gt;ascending order&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Time complexity should be:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;O(n log n)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Example
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Input:
head = [4,2,1,3]

Output:
[1,2,3,4]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  24. Minimum Difference Between Largest and Smallest
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Difficulty:&lt;/strong&gt; Easy&lt;br&gt;
&lt;strong&gt;Concepts:&lt;/strong&gt; Sorting + Sliding Window&lt;/p&gt;


&lt;h2&gt;
  
  
  Problem
&lt;/h2&gt;

&lt;p&gt;Given an integer array &lt;code&gt;nums&lt;/code&gt; and integer &lt;code&gt;k&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Choose &lt;code&gt;k&lt;/code&gt; elements such that the &lt;strong&gt;difference between maximum and minimum is minimized&lt;/strong&gt;.&lt;/p&gt;


&lt;h2&gt;
  
  
  Example
&lt;/h2&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Input:
nums = [9,4,1,7]
k = 2

Output:
2
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Explanation
&lt;/h2&gt;

&lt;p&gt;Sorted:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[1,4,7,9]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Minimum difference:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;4 - 1 = 3
7 - 4 = 3
9 - 7 = 2
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Answer = &lt;strong&gt;2&lt;/strong&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Find the Distance Value Between Two Arrays Easy Solution</title>
      <dc:creator>Abhishek Gupta </dc:creator>
      <pubDate>Thu, 05 Mar 2026 09:10:54 +0000</pubDate>
      <link>https://dev.to/abhishek-nexgen-dev/find-the-distance-value-between-two-arrays-easy-solution-13c4</link>
      <guid>https://dev.to/abhishek-nexgen-dev/find-the-distance-value-between-two-arrays-easy-solution-13c4</guid>
      <description>&lt;p&gt;The problem asks us to count how many elements in &lt;code&gt;arr1&lt;/code&gt; are &lt;strong&gt;far enough&lt;/strong&gt; from every element in &lt;code&gt;arr2&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;For an element &lt;code&gt;x&lt;/code&gt; in &lt;code&gt;arr1&lt;/code&gt;, we must check that:&lt;/p&gt;

&lt;p&gt;[&lt;br&gt;
|x - y| &amp;gt; d&lt;br&gt;
]&lt;/p&gt;

&lt;p&gt;for &lt;strong&gt;every element &lt;code&gt;y&lt;/code&gt; in &lt;code&gt;arr2&lt;/code&gt;&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;A simple way would be to compare every element of &lt;code&gt;arr1&lt;/code&gt; with every element of &lt;code&gt;arr2&lt;/code&gt;, but that would take &lt;strong&gt;O(n × m)&lt;/strong&gt; time.&lt;/p&gt;

&lt;p&gt;To optimize this, we can &lt;strong&gt;sort &lt;code&gt;arr2&lt;/code&gt; and use Binary Search&lt;/strong&gt;.&lt;br&gt;
Binary search helps us quickly check if there exists an element in &lt;code&gt;arr2&lt;/code&gt; whose distance from &lt;code&gt;arr1[i]&lt;/code&gt; is &lt;strong&gt;less than or equal to &lt;code&gt;d&lt;/code&gt;&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;If such an element exists, then the element from &lt;code&gt;arr1&lt;/code&gt; &lt;strong&gt;cannot be counted&lt;/strong&gt;.&lt;/p&gt;




&lt;h1&gt;
  
  
  Approach
&lt;/h1&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Sort &lt;code&gt;arr2&lt;/code&gt;&lt;/strong&gt; so we can apply binary search.&lt;/li&gt;
&lt;li&gt;For every element &lt;code&gt;arr1[i]&lt;/code&gt;:&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;Use &lt;strong&gt;binary search&lt;/strong&gt; on &lt;code&gt;arr2&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;During the search, check if&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;[&lt;br&gt;
|arr2[mid] - arr1[i]| \le d&lt;br&gt;
]&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;If such an element is found, return its index immediately.&lt;/li&gt;
&lt;li&gt;If the search ends without finding such an element, return &lt;code&gt;-1&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;In the main function:&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;If binary search returns &lt;code&gt;-1&lt;/code&gt;, it means no element in &lt;code&gt;arr2&lt;/code&gt; is within distance &lt;code&gt;d&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Increase the count.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This reduces unnecessary comparisons and improves efficiency.&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.amazonaws.com%2Fuploads%2Farticles%2Fhr45qjx7k9020cbzc3m0.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.amazonaws.com%2Fuploads%2Farticles%2Fhr45qjx7k9020cbzc3m0.png" alt="Screenshot at 2026-03-05 14-34-25.png" width="800" height="578"&gt;&lt;/a&gt;&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.amazonaws.com%2Fuploads%2Farticles%2Fzg3r7m8007frwo0vov2u.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.amazonaws.com%2Fuploads%2Farticles%2Fzg3r7m8007frwo0vov2u.png" alt="Screenshot at 2026-03-05 14-26-48.png" width="800" height="450"&gt;&lt;/a&gt;&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.amazonaws.com%2Fuploads%2Farticles%2Foihyvmywgnn2pkcbh4c6.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.amazonaws.com%2Fuploads%2Farticles%2Foihyvmywgnn2pkcbh4c6.png" alt="Screenshot at 2026-03-05 14-08-09.png" width="715" height="835"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Complexity
&lt;/h1&gt;

&lt;h3&gt;
  
  
  Time complexity
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Sorting &lt;code&gt;arr2&lt;/code&gt; → &lt;strong&gt;O(n log n)&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Binary search for each element of &lt;code&gt;arr1&lt;/code&gt; → &lt;strong&gt;O(m log n)&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Overall:&lt;/p&gt;

&lt;p&gt;[&lt;br&gt;
O(n \log n + m \log n)&lt;br&gt;
]&lt;/p&gt;




&lt;h3&gt;
  
  
  Space complexity
&lt;/h3&gt;

&lt;p&gt;No extra data structures are used apart from variables.&lt;/p&gt;

&lt;p&gt;[&lt;br&gt;
O(1)&lt;br&gt;
]&lt;/p&gt;




&lt;h1&gt;
  
  
  Code
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="cm"&gt;/**
 * @param {number[]} arr1
 * @param {number[]} arr2
 * @param {number} d
 * @return {number}
 */&lt;/span&gt;

&lt;span class="c1"&gt;// Binary search to check if an element in arr&lt;/span&gt;
&lt;span class="c1"&gt;// is within distance &amp;lt;= d from target&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;BinarySearch&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;d&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;let&lt;/span&gt; &lt;span class="nx"&gt;Left&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;Right&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;

  &lt;span class="k"&gt;while &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;Left&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;=&lt;/span&gt; &lt;span class="nx"&gt;Right&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;mid&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;floor&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;Left&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;Right&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="c1"&gt;// If distance is within d, target is too close&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;abs&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;mid&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;=&lt;/span&gt; &lt;span class="nx"&gt;d&lt;/span&gt;&lt;span class="p"&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;mid&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="c1"&gt;// Standard binary search movement&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;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;mid&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;target&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;Right&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;mid&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;Left&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;mid&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="c1"&gt;// No element within distance d&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;findTheDistanceValue&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;arr1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;arr2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;d&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;

  &lt;span class="c1"&gt;// Sort arr2 for binary search&lt;/span&gt;
  &lt;span class="nx"&gt;arr2&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;sort&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nx"&gt;b&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;a&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;

  &lt;span class="k"&gt;for&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;arr1&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;

    &lt;span class="c1"&gt;// Check if arr1[i] is close to any element in arr2&lt;/span&gt;
    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;el&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;BinarySearch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;arr2&lt;/span&gt; &lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;arr1&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;d&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

    &lt;span class="c1"&gt;// If no close element found, count it&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;el&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
      &lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;
    &lt;span class="p"&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;count&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






</description>
    </item>
    <item>
      <title>DSA Pattern Printing Question with js</title>
      <dc:creator>Abhishek Gupta </dc:creator>
      <pubDate>Wed, 04 Mar 2026 13:44:49 +0000</pubDate>
      <link>https://dev.to/abhishek-nexgen-dev/dsa-pattern-printing-question-with-js-12mc</link>
      <guid>https://dev.to/abhishek-nexgen-dev/dsa-pattern-printing-question-with-js-12mc</guid>
      <description>&lt;h2&gt;
  
  
  Question 1
&lt;/h2&gt;

&lt;p&gt;Write a program using &lt;strong&gt;nested loops&lt;/strong&gt; to print a &lt;strong&gt;4 × 4 grid of 1s&lt;/strong&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Expected Output
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1 1 1 1
1 1 1 1
1 1 1 1
1 1 1 1
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Understanding the Problem
&lt;/h2&gt;

&lt;p&gt;First, look at the output carefully.&lt;/p&gt;

&lt;p&gt;We can notice two simple things:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;There are &lt;strong&gt;4 rows&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Each row has &lt;strong&gt;4 numbers&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&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.amazonaws.com%2Fuploads%2Farticles%2F9bp1zxcxj9ze99udagvq.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.amazonaws.com%2Fuploads%2Farticles%2F9bp1zxcxj9ze99udagvq.png" alt=" " width="800" height="467"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;So the pattern is like a &lt;strong&gt;small square grid&lt;/strong&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Row 1 → 1 1 1 1
Row 2 → 1 1 1 1
Row 3 → 1 1 1 1
Row 4 → 1 1 1 1
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To print something like this, we use &lt;strong&gt;nested loops&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  What are Nested Loops?
&lt;/h2&gt;

&lt;p&gt;A &lt;strong&gt;nested loop&lt;/strong&gt; means a &lt;strong&gt;loop inside another loop&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;We use two loops because:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;One loop handles &lt;strong&gt;rows&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;The other loop handles &lt;strong&gt;columns&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Simple idea:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Outer loop → rows
Inner loop → numbers inside each row
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Approach
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Step 1 — Create the Row Loop
&lt;/h3&gt;

&lt;p&gt;We need &lt;strong&gt;4 rows&lt;/strong&gt;, so we create a loop that runs &lt;strong&gt;4 times&lt;/strong&gt;.&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="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Every time this loop runs, it means &lt;strong&gt;a new row will be printed&lt;/strong&gt;.&lt;/p&gt;




&lt;h3&gt;
  
  
  Step 2 — Create an Empty Row
&lt;/h3&gt;

&lt;p&gt;Before printing numbers, we create an empty string.&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="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;row&lt;/span&gt; &lt;span class="o"&gt;=&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;This string will store the numbers for one row.&lt;/p&gt;




&lt;h3&gt;
  
  
  Step 3 — Create the Column Loop
&lt;/h3&gt;

&lt;p&gt;Inside the first loop, we add another loop.&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="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;j&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This loop runs &lt;strong&gt;4 times&lt;/strong&gt; because each row needs &lt;strong&gt;4 numbers&lt;/strong&gt;.&lt;/p&gt;




&lt;h3&gt;
  
  
  Step 4 — Add the Number
&lt;/h3&gt;

&lt;p&gt;Inside the second loop we add &lt;code&gt;"1 "&lt;/code&gt; to the row.&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;row&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;1 &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;After each loop run the row becomes:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;First time  → 1
Second time → 1 1
Third time  → 1 1 1
Fourth time → 1 1 1 1
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  Step 5 — Print the Row
&lt;/h3&gt;

&lt;p&gt;After the inner loop finishes, we print the row.&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;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="nx"&gt;row&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then the outer loop runs again to create the next row.&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.amazonaws.com%2Fuploads%2Farticles%2F7vt9m56wh41k98xknieh.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.amazonaws.com%2Fuploads%2Farticles%2F7vt9m56wh41k98xknieh.png" alt=" " width="628" height="340"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Final Code
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&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;let&lt;/span&gt; &lt;span class="nx"&gt;row&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;""&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;j&lt;/span&gt;&lt;span class="o"&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;row&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;1 &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;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="nx"&gt;row&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;h1&gt;
  
  
  Final Output
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1 1 1 1
1 1 1 1
1 1 1 1
1 1 1 1
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Question 2
&lt;/h2&gt;

&lt;p&gt;Write a program using &lt;strong&gt;nested loops&lt;/strong&gt; to print the following pattern.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;333
313
323
333
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Constraints:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Use &lt;strong&gt;two loops&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;The &lt;strong&gt;outer loop controls rows&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;The &lt;strong&gt;inner loop controls columns&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  Understanding the Pattern
&lt;/h1&gt;

&lt;p&gt;The pattern has:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;4 rows&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;3 columns&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Row 1 → 333
Row 2 → 313
Row 3 → 323
Row 4 → 333
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We notice that:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The &lt;strong&gt;top row&lt;/strong&gt; and &lt;strong&gt;bottom row&lt;/strong&gt; are completely &lt;code&gt;3&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;The &lt;strong&gt;first column&lt;/strong&gt; and &lt;strong&gt;last column&lt;/strong&gt; are also &lt;code&gt;3&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Only the &lt;strong&gt;middle values change&lt;/strong&gt;.&lt;/li&gt;
&lt;/ul&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.amazonaws.com%2Fuploads%2Farticles%2Fq8tyla91ho30gonorllf.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.amazonaws.com%2Fuploads%2Farticles%2Fq8tyla91ho30gonorllf.png" alt=" " width="800" height="514"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Edge Cases
&lt;/h1&gt;

&lt;h2&gt;
  
  
  1️⃣ Top Row
&lt;/h2&gt;

&lt;p&gt;If the outer loop is at the &lt;strong&gt;first row&lt;/strong&gt;, print &lt;code&gt;3&lt;/code&gt; in all columns.&lt;/p&gt;

&lt;p&gt;Condition&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;i&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Example&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;333
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  2️⃣ Bottom Row
&lt;/h2&gt;

&lt;p&gt;If the outer loop reaches the &lt;strong&gt;last row&lt;/strong&gt;, print &lt;code&gt;3&lt;/code&gt; in all columns.&lt;/p&gt;

&lt;p&gt;Condition&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;i&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="nx"&gt;col&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Example&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;333
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  3️⃣ First Column
&lt;/h2&gt;

&lt;p&gt;For middle rows, if the inner loop index is &lt;strong&gt;0&lt;/strong&gt;, print &lt;code&gt;3&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Condition&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;j&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Example&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;3 _ _
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  4️⃣ Last Column
&lt;/h2&gt;

&lt;p&gt;If the inner loop reaches the &lt;strong&gt;last column&lt;/strong&gt;, print &lt;code&gt;3&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Condition&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;j&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="nx"&gt;row&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Example&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;_ _ 3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  5️⃣ Middle Position
&lt;/h2&gt;

&lt;p&gt;If the position is &lt;strong&gt;not on the edge&lt;/strong&gt;, print the column number.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Row 2 → 313
Row 3 → 323
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This happens using:&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;str&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&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.amazonaws.com%2Fuploads%2Farticles%2Fc84qeec3ve4amb2rxmey.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.amazonaws.com%2Fuploads%2Farticles%2Fc84qeec3ve4amb2rxmey.png" alt=" " width="800" height="379"&gt;&lt;/a&gt;&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.amazonaws.com%2Fuploads%2Farticles%2Fdwf3ks3nvvuiioi1oybt.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.amazonaws.com%2Fuploads%2Farticles%2Fdwf3ks3nvvuiioi1oybt.png" alt=" " width="520" height="479"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Final Code
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;row&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;col&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;4&lt;/span&gt;

&lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;col&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&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;let&lt;/span&gt; &lt;span class="nx"&gt;str&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;""&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;row&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;j&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&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;i&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="nx"&gt;col&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;str&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="nx"&gt;row&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt; 
    &lt;span class="k"&gt;else&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;j&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="nx"&gt;row&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;str&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="nx"&gt;row&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
      &lt;span class="p"&gt;}&lt;/span&gt; 
      &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;str&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&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="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="nx"&gt;str&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;h1&gt;
  
  
  Output
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;333
313
323
333
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Question 3
&lt;/h2&gt;

&lt;p&gt;Write a program using &lt;strong&gt;nested loops&lt;/strong&gt; to print the following number pattern.&lt;/p&gt;

&lt;h3&gt;
  
  
  Expected Output
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;6666
555
44
3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&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.amazonaws.com%2Fuploads%2Farticles%2F0b5wtxf4kp44uchev1di.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.amazonaws.com%2Fuploads%2Farticles%2F0b5wtxf4kp44uchev1di.png" alt=" " width="657" height="305"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Explanation
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;The first row prints &lt;strong&gt;4 times the number 6&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;The second row prints &lt;strong&gt;3 times the number 5&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;The third row prints &lt;strong&gt;2 times the number 4&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;The fourth row prints &lt;strong&gt;1 time the number 3&lt;/strong&gt;.&lt;/li&gt;
&lt;/ul&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.amazonaws.com%2Fuploads%2Farticles%2F0ohso345asj8mo909jop.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.amazonaws.com%2Fuploads%2Farticles%2F0ohso345asj8mo909jop.png" alt=" " width="800" height="557"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Approach
&lt;/h2&gt;

&lt;p&gt;First, look at the pattern.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;6666
555
44
3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We can see two things:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;The &lt;strong&gt;number changes in every row&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;The &lt;strong&gt;number of values in each row becomes smaller&lt;/strong&gt;
&lt;/li&gt;
&lt;/ol&gt;




&lt;h2&gt;
  
  
  Step 1 — Outer Loop (Rows)
&lt;/h2&gt;

&lt;p&gt;The &lt;strong&gt;outer loop runs from 0 to 3&lt;/strong&gt;, which means it runs &lt;strong&gt;4 times&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Each time the outer loop runs, &lt;strong&gt;one row is printed&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;i = 0 → first row
i = 1 → second row
i = 2 → third row
i = 3 → fourth row
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So the outer loop decides &lt;strong&gt;how many rows we print&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Step 2 — Inner Loop (Columns)
&lt;/h2&gt;

&lt;p&gt;At the beginning, the inner loop runs &lt;strong&gt;from 0 to 3&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;That means the number will be printed &lt;strong&gt;4 times&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;6666
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Step 3 — After the First Row
&lt;/h2&gt;

&lt;p&gt;When the first row is finished:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The &lt;strong&gt;number decreases&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;The &lt;strong&gt;number of columns also decreases&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So now the inner loop runs &lt;strong&gt;from 0 to 2&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Output becomes:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;555
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Step 4 — Continue the Same Process
&lt;/h2&gt;

&lt;p&gt;Every time a row is printed:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The &lt;strong&gt;number becomes smaller&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;The &lt;strong&gt;inner loop runs fewer times&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Row 1 → inner loop runs 4 times → 6666
Row 2 → inner loop runs 3 times → 555
Row 3 → inner loop runs 2 times → 44
Row 4 → inner loop runs 1 time  → 3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Step 5 — How We Control This
&lt;/h2&gt;

&lt;p&gt;After printing each row we update two things:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;num--   → decrease the number
row--   → decrease how many times the inner loop runs
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Because of this, both the &lt;strong&gt;number and the column size keep decreasing&lt;/strong&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Final Code
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;col&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;4&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;row&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;col&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;num&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;col&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&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="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;col&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&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;let&lt;/span&gt; &lt;span class="nx"&gt;str&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;""&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;row&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;j&lt;/span&gt;&lt;span class="o"&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;str&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;num&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="nx"&gt;num&lt;/span&gt;&lt;span class="o"&gt;--&lt;/span&gt;
  &lt;span class="nx"&gt;row&lt;/span&gt;&lt;span class="o"&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="nx"&gt;str&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;



</description>
    </item>
    <item>
      <title>🎓 Science Teacher Chatbot</title>
      <dc:creator>Abhishek Gupta </dc:creator>
      <pubDate>Sat, 21 Feb 2026 00:08:07 +0000</pubDate>
      <link>https://dev.to/abhishek-nexgen-dev/science-teacher-chatbot-full-explanation-everything-9ej</link>
      <guid>https://dev.to/abhishek-nexgen-dev/science-teacher-chatbot-full-explanation-everything-9ej</guid>
      <description>&lt;h1&gt;
  
  
  🌱 0️⃣ What We Are Building
&lt;/h1&gt;

&lt;p&gt;We are building an &lt;strong&gt;AI Science Teacher backend&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;This AI:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;answers science questions&lt;/li&gt;
&lt;li&gt;explains like teacher&lt;/li&gt;
&lt;li&gt;remembers conversation&lt;/li&gt;
&lt;li&gt;ignores non-science&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Example:&lt;/p&gt;

&lt;p&gt;You: What is gravity?&lt;br&gt;
AI: Gravity is a force…&lt;/p&gt;

&lt;p&gt;You: explain simpler&lt;br&gt;
AI: Imagine dropping a ball…&lt;/p&gt;

&lt;p&gt;👉 AI remembered context.&lt;/p&gt;
&lt;h2&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.amazonaws.com%2Fuploads%2Farticles%2F42wvv0g8bd706z0nsv2c.png" alt=" " width="800" height="315"&gt;
&lt;/h2&gt;
&lt;h1&gt;
  
  
  🧠 1️⃣ How Chatbot Works (Easy)
&lt;/h1&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Student → API → AI → Answer
           ↑
        Memory
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Steps:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Student sends question&lt;/li&gt;
&lt;li&gt;Backend receives&lt;/li&gt;
&lt;li&gt;Memory added&lt;/li&gt;
&lt;li&gt;AI generates answer&lt;/li&gt;
&lt;li&gt;Answer returned&lt;/li&gt;
&lt;/ol&gt;


&lt;h1&gt;
  
  
  🧰 2️⃣ Tools We Use (Simple)
&lt;/h1&gt;

&lt;p&gt;Node.js → runs backend&lt;br&gt;
Express → API server&lt;br&gt;
OpenAI → AI brain&lt;br&gt;
LangChain → connects AI + memory&lt;br&gt;
Memory → remembers chat&lt;br&gt;
dotenv → loads API key&lt;/p&gt;


&lt;h1&gt;
  
  
  📦 3️⃣ Create Project
&lt;/h1&gt;

&lt;p&gt;Open terminal:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;mkdir &lt;/span&gt;science-teacher-bot
&lt;span class="nb"&gt;cd &lt;/span&gt;science-teacher-bot
pnpm init
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  📦 4️⃣ Install Packages
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;pnpm add express cors dotenv langchain @langchain/openai @langchain/core
pnpm add &lt;span class="nt"&gt;-D&lt;/span&gt; nodemon
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  📁 5️⃣ Project Structure
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;science-teacher-bot/
│
├── src/
│   ├── memory.mjs
│   ├── llm.mjs
│   ├── route.mjs
│   └── server.mjs
│
├── .env
└── package.json
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  🔐 6️⃣ Add OpenAI Key
&lt;/h1&gt;

&lt;p&gt;Create &lt;code&gt;.env&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;OPENAI_API_KEY=your_key_here
PORT=3000
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  💾 7️⃣ memory.mjs — Chat History Storage
&lt;/h1&gt;

&lt;p&gt;This file stores conversation history for each user/session.&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="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;InMemoryChatMessageHistory&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="s2"&gt;@langchain/core/chat_history&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;histories&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{};&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;getSessionHistory&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;sessionId&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;default&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="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;histories&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;sessionId&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;histories&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;sessionId&lt;/span&gt;&lt;span class="p"&gt;]&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;InMemoryChatMessageHistory&lt;/span&gt;&lt;span class="p"&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;histories&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;sessionId&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;&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.amazonaws.com%2Fuploads%2Farticles%2Fs15ljctkaijaaf38ufnf.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.amazonaws.com%2Fuploads%2Farticles%2Fs15ljctkaijaaf38ufnf.png" alt=" " width="800" height="233"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h1&gt;
  
  
  🧠 What This Code Does
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;Creates memory storage for chatbot&lt;/li&gt;
&lt;li&gt;Stores chat separately per user&lt;/li&gt;
&lt;li&gt;Each user has unique sessionId&lt;/li&gt;
&lt;li&gt;Returns that user’s history&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;👉 Enables multi-user chatbot memory.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Hinglish:&lt;/strong&gt;&lt;br&gt;
Har user ka alag chat history store hota hai&lt;/p&gt;


&lt;h1&gt;
  
  
  👤 What are &lt;code&gt;student1&lt;/code&gt;, &lt;code&gt;student2&lt;/code&gt; ?
&lt;/h1&gt;

&lt;p&gt;They are &lt;strong&gt;session IDs (user IDs)&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Example:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;student1 → first user&lt;/li&gt;
&lt;li&gt;student2 → second user&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;You pass them when calling chatbot.&lt;/p&gt;

&lt;p&gt;So each user gets separate memory.&lt;/p&gt;


&lt;h1&gt;
  
  
  📦 What &lt;code&gt;new InMemoryChatMessageHistory()&lt;/code&gt; Creates
&lt;/h1&gt;

&lt;p&gt;It creates an object like:&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;InMemoryChatMessageHistory&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;messages&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This object stores:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;human messages&lt;/li&gt;
&lt;li&gt;AI messages&lt;/li&gt;
&lt;li&gt;conversation order&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  🔁 How histories Object Works
&lt;/h1&gt;

&lt;p&gt;&lt;code&gt;histories&lt;/code&gt; is a dictionary:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sessionId → chat history object
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So:&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;histories&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;student1&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;InMemoryChatMessageHistory&lt;/span&gt;
&lt;span class="nx"&gt;histories&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;student2&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;InMemoryChatMessageHistory&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  🧪 Example Conversation
&lt;/h1&gt;

&lt;h3&gt;
  
  
  User: student1
&lt;/h3&gt;

&lt;p&gt;Question:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;What is gravity?&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;AI:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Gravity is a force that pulls objects.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Memory stored for student1.&lt;/p&gt;




&lt;h3&gt;
  
  
  User: student2
&lt;/h3&gt;

&lt;p&gt;Question:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;What is photosynthesis?&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Memory stored separately.&lt;/p&gt;




&lt;h1&gt;
  
  
  📊 Example Output
&lt;/h1&gt;

&lt;p&gt;After chats:&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;histories&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;student1&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;InMemoryChatMessageHistory&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;messages&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="na"&gt;role&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;human&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;What is gravity?&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;role&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;ai&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Gravity is a force that pulls objects.&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="na"&gt;student2&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;InMemoryChatMessageHistory&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;messages&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="na"&gt;role&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;human&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;What is photosynthesis?&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="p"&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  🧾 Simplified View
&lt;/h1&gt;

&lt;p&gt;Sometimes shown as:&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;histories&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;student1&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="na"&gt;role&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;human&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;What is gravity?&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;role&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;ai&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Gravity is a force that pulls objects.&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;student2&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="na"&gt;role&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;human&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;What is photosynthesis?&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;(This is conceptual view, actual object is InMemoryChatMessageHistory)&lt;/p&gt;




&lt;h1&gt;
  
  
  🔁 How It Is Used by LangChain
&lt;/h1&gt;

&lt;p&gt;When chatbot runs:&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;getSessionHistory&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;student1&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;LangChain:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Finds student1 history&lt;/li&gt;
&lt;li&gt;Loads messages&lt;/li&gt;
&lt;li&gt;Sends to AI&lt;/li&gt;
&lt;li&gt;Adds new messages&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;So AI remembers conversation per user.&lt;/p&gt;




&lt;h1&gt;
  
  
  ⚠️ Important Notes
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;Memory stored in RAM&lt;/li&gt;
&lt;li&gt;Lost on server restart&lt;/li&gt;
&lt;li&gt;Good for demo/testing&lt;/li&gt;
&lt;li&gt;Production uses DB/Redis&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;Perfect 👍 — you want the &lt;strong&gt;same section completed and polished&lt;/strong&gt; like your previous memory section, with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;clear explanation&lt;/li&gt;
&lt;li&gt;beginner-friendly&lt;/li&gt;
&lt;li&gt;consistent format&lt;/li&gt;
&lt;li&gt;ready for notes&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Below is your **final clean “🧠 &lt;/p&gt;

&lt;h1&gt;
  
  
  🧠 8️⃣ llm.mjs — AI Chatbot Logic
&lt;/h1&gt;

&lt;p&gt;Creates AI teacher + memory chatbot.&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="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;config&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="s2"&gt;dotenv&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nf"&gt;config&lt;/span&gt;&lt;span class="p"&gt;();&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;ChatOpenAI&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="s2"&gt;@langchain/openai&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&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;ChatPromptTemplate&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;MessagesPlaceholder&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="s2"&gt;@langchain/core/prompts&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&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;RunnableWithMessageHistory&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="s2"&gt;@langchain/core/runnables&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&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;StringOutputParser&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="s2"&gt;@langchain/core/output_parsers&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&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;getSessionHistory&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="s2"&gt;./memory.mjs&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;llm&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;ChatOpenAI&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;model&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;gpt-4o-mini&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;temperature&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mf"&gt;0.3&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;prompt&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;ChatPromptTemplate&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;fromMessages&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;system&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;You are a Science Teacher. Answer only science questions. Explain simply.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
  &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;MessagesPlaceholder&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;chat_history&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;human&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;{input}&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;const&lt;/span&gt; &lt;span class="nx"&gt;chain&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;prompt&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;pipe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;llm&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;pipe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;StringOutputParser&lt;/span&gt;&lt;span class="p"&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;chatChain&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;RunnableWithMessageHistory&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;runnable&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;chain&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;getMessageHistory&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;getSessionHistory&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;inputMessagesKey&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;input&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;historyMessagesKey&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;chat_history&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;h1&gt;
  
  
  🧠 What This File Does
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;Creates AI model&lt;/li&gt;
&lt;li&gt;Defines teacher behavior&lt;/li&gt;
&lt;li&gt;Connects chat memory&lt;/li&gt;
&lt;li&gt;Creates chatbot system&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;👉 Main chatbot brain.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Hinglish:&lt;/strong&gt;&lt;br&gt;
Ye file AI teacher + memory chatbot banati hai&lt;/p&gt;


&lt;h1&gt;
  
  
  🤖 ChatOpenAI
&lt;/h1&gt;

&lt;p&gt;Creates AI model.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Connects to OpenAI&lt;/li&gt;
&lt;li&gt;Generates answers&lt;/li&gt;
&lt;li&gt;Brain of chatbot&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Hinglish:&lt;/strong&gt;&lt;br&gt;
AI model banata hai&lt;/p&gt;


&lt;h1&gt;
  
  
  🧾 Prompt (Teacher Rules)
&lt;/h1&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;prompt&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;ChatPromptTemplate&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;fromMessages&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;system&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;You are a Science Teacher. Answer only science questions. Explain simply.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
  &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;MessagesPlaceholder&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;chat_history&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;human&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;{input}&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;&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.amazonaws.com%2Fuploads%2Farticles%2Fvx0b9moashkwzy2tkfvc.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.amazonaws.com%2Fuploads%2Farticles%2Fvx0b9moashkwzy2tkfvc.png" alt=" " width="800" height="449"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Defines how AI behaves:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;science teacher role&lt;/li&gt;
&lt;li&gt;simple explanation&lt;/li&gt;
&lt;li&gt;science-only answers&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Hinglish:&lt;/strong&gt;&lt;br&gt;
AI ko teacher banata hai&lt;/p&gt;


&lt;h1&gt;
  
  
  🧠 MessagesPlaceholder("chat_history")
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;Inserts previous conversation&lt;/li&gt;
&lt;li&gt;Loads user memory&lt;/li&gt;
&lt;li&gt;Gives context to AI&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Hinglish:&lt;/strong&gt;&lt;br&gt;
Yaha pichli chat aati hai&lt;/p&gt;


&lt;h1&gt;
  
  
  🔗 chain = prompt → AI → text
&lt;/h1&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;chain&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;prompt&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;pipe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;llm&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;pipe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;StringOutputParser&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Flow:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Prompt prepared&lt;/li&gt;
&lt;li&gt;Sent to AI&lt;/li&gt;
&lt;li&gt;Text answer returned&lt;/li&gt;
&lt;/ol&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.amazonaws.com%2Fuploads%2Farticles%2Fa8wm3aqrxj3i0m7i24t9.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.amazonaws.com%2Fuploads%2Farticles%2Fa8wm3aqrxj3i0m7i24t9.png" alt=" " width="800" height="653"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Hinglish:&lt;/strong&gt;&lt;br&gt;
Prompt → AI → answer&lt;/p&gt;


&lt;h1&gt;
  
  
  💾 RunnableWithMessageHistory
&lt;/h1&gt;

&lt;p&gt;Adds memory to chatbot.&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="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;RunnableWithMessageHistory&lt;/span&gt;&lt;span class="p"&gt;({...})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Loads user chat history&lt;/li&gt;
&lt;li&gt;Adds new messages&lt;/li&gt;
&lt;li&gt;Maintains conversation&lt;/li&gt;
&lt;/ul&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.amazonaws.com%2Fuploads%2Farticles%2Fufoq1bel4u6mu27tly18.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.amazonaws.com%2Fuploads%2Farticles%2Fufoq1bel4u6mu27tly18.png" alt=" " width="800" height="359"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Hinglish:&lt;/strong&gt;&lt;br&gt;
AI ko user ki chat history deta hai&lt;/p&gt;


&lt;h1&gt;
  
  
  🏷️ inputMessagesKey: "input"
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;Name of user message field&lt;/li&gt;
&lt;li&gt;Matches &lt;code&gt;{input}&lt;/code&gt; in prompt&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Hinglish:&lt;/strong&gt;&lt;br&gt;
Student ke question ka naam&lt;/p&gt;


&lt;h1&gt;
  
  
  🏷️ historyMessagesKey: "chat_history"
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;Name of memory variable&lt;/li&gt;
&lt;li&gt;Matches MessagesPlaceholder&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Hinglish:&lt;/strong&gt;&lt;br&gt;
Memory ka naam&lt;/p&gt;


&lt;h1&gt;
  
  
  🔁 How It Works (Example)
&lt;/h1&gt;

&lt;p&gt;User: student1&lt;br&gt;
Question: What is gravity?&lt;/p&gt;

&lt;p&gt;LangChain sends to AI:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;System: You are science teacher
History: (student1 chat)
User: What is gravity?
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;AI replies → stored in memory.&lt;/p&gt;

&lt;p&gt;Next question uses same history.&lt;/p&gt;

&lt;h1&gt;
  
  
  🌐 9️⃣ route.mjs
&lt;/h1&gt;

&lt;p&gt;API endpoint &lt;code&gt;/ask&lt;/code&gt;&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="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Router&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="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="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;chatChain&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="s2"&gt;./llm.mjs&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&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;router&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Router&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="nx"&gt;router&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;/&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="k"&gt;try&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;text&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;sessionId&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;default&lt;/span&gt;&lt;span class="dl"&gt;"&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;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&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;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;400&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;Question required&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;const&lt;/span&gt; &lt;span class="nx"&gt;answer&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;chatChain&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;invoke&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
      &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;input&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;text&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
      &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;configurable&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;sessionId&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;res&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="nx"&gt;answer&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;err&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;AI error&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Easy Meaning
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Receives question&lt;/li&gt;
&lt;li&gt;Sends to AI&lt;/li&gt;
&lt;li&gt;Returns answer&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  🚀 1️⃣0️⃣ server.mjs
&lt;/h1&gt;

&lt;p&gt;Starts backend server.&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="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;express&lt;/span&gt; &lt;span class="k"&gt;from&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="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;cors&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;cors&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&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;config&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="s2"&gt;dotenv&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&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;router&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="s2"&gt;./route.mjs&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nf"&gt;config&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;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="nf"&gt;cors&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="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/&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;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="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;send&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Science Teacher AI running&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;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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/ask&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;router&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;PORT&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;PORT&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="mi"&gt;3000&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="nx"&gt;PORT&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="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;Server running on http://localhost:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;PORT&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;h3&gt;
  
  
  Easy Meaning
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Creates server&lt;/li&gt;
&lt;li&gt;Enables JSON&lt;/li&gt;
&lt;li&gt;Adds API route&lt;/li&gt;
&lt;li&gt;Starts app&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  ▶️ 1️⃣1️⃣ Run Project
&lt;/h1&gt;

&lt;p&gt;Add script in package.json:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="nl"&gt;"scripts"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"dev"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"nodemon src/server.mjs"&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;pnpm dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  🧪 1️⃣2️⃣ Test Chatbot
&lt;/h1&gt;

&lt;p&gt;POST → &lt;a href="http://localhost:3000/ask" rel="noopener noreferrer"&gt;http://localhost:3000/ask&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Body:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"text"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"What is gravity?"&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Response:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"answer"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Gravity is a force..."&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  🧠 1️⃣3️⃣ Memory Test
&lt;/h1&gt;

&lt;p&gt;Send:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"text"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"What is gravity?"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"sessionId"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"u1"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"text"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Explain simpler"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"sessionId"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"u1"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;AI remembers 👍&lt;/p&gt;




&lt;h1&gt;
  
  
  🏆 1️⃣4️⃣ What You Built
&lt;/h1&gt;

&lt;p&gt;You created:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;AI backend&lt;/li&gt;
&lt;li&gt;LangChain chatbot&lt;/li&gt;
&lt;li&gt;Memory system&lt;/li&gt;
&lt;li&gt;Express API&lt;/li&gt;
&lt;li&gt;Science teacher AI&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is real AI architecture.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>From Building Projects to Engineering Products</title>
      <dc:creator>Abhishek Gupta </dc:creator>
      <pubDate>Tue, 17 Feb 2026 04:59:28 +0000</pubDate>
      <link>https://dev.to/abhishek-nexgen-dev/from-building-projects-to-engineering-products-42g3</link>
      <guid>https://dev.to/abhishek-nexgen-dev/from-building-projects-to-engineering-products-42g3</guid>
      <description>&lt;p&gt;When I started building projects, I made a lot of mistakes.&lt;/p&gt;

&lt;p&gt;I only focused on one thing:&lt;br&gt;&lt;br&gt;
&lt;strong&gt;“Make the project work somehow.”&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I didn’t think about:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;performance
&lt;/li&gt;
&lt;li&gt;scalability
&lt;/li&gt;
&lt;li&gt;clean architecture
&lt;/li&gt;
&lt;li&gt;optimization
&lt;/li&gt;
&lt;li&gt;maintainable code
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If the feature worked, I was happy.&lt;/p&gt;

&lt;p&gt;But everything changed when I began sharing my projects publicly and collaborating with other developers.&lt;/p&gt;

&lt;p&gt;That’s when I realized:&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Building a project and engineering a product are very different things.&lt;/strong&gt;&lt;/p&gt;




&lt;h1&gt;
  
  
  🚀 The Beginner Mindset: Start Coding Immediately
&lt;/h1&gt;

&lt;p&gt;Most beginner developers (including my past self) follow this pattern:&lt;/p&gt;

&lt;p&gt;They get an idea like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Let’s build an e-commerce app
&lt;/li&gt;
&lt;li&gt;Let’s build a WhatsApp clone
&lt;/li&gt;
&lt;li&gt;Let’s build a social media app
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And they start coding immediately.&lt;/p&gt;

&lt;p&gt;No research.&lt;br&gt;&lt;br&gt;
No planning.&lt;br&gt;&lt;br&gt;
No architecture.&lt;br&gt;&lt;br&gt;
No clarity about users.&lt;/p&gt;

&lt;p&gt;At first, progress feels fast.&lt;/p&gt;

&lt;p&gt;But after some time, confusion starts:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Should I use MongoDB or PostgreSQL?&lt;/li&gt;
&lt;li&gt;Should I use Next.js or React?&lt;/li&gt;
&lt;li&gt;How should my database schema look?&lt;/li&gt;
&lt;li&gt;How will I store user data?&lt;/li&gt;
&lt;li&gt;Can this handle many users?&lt;/li&gt;
&lt;li&gt;How will authentication scale?&lt;/li&gt;
&lt;li&gt;Should I use caching?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Now development slows down.&lt;/p&gt;

&lt;p&gt;Because decisions were not made earlier.&lt;/p&gt;




&lt;h1&gt;
  
  
  ❗ The Real Problem: Unclear Goal
&lt;/h1&gt;

&lt;p&gt;Many developers take 6–7 months to build something that others finish in 2–3 months.&lt;/p&gt;

&lt;p&gt;The reason is not skill.&lt;/p&gt;

&lt;p&gt;The reason is &lt;strong&gt;unclear direction&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;When the final goal is not clear:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;you rewrite features
&lt;/li&gt;
&lt;li&gt;you change structure
&lt;/li&gt;
&lt;li&gt;you refactor repeatedly
&lt;/li&gt;
&lt;li&gt;you fix many bugs
&lt;/li&gt;
&lt;li&gt;you change tools mid-project
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Time is lost not in coding —&lt;br&gt;&lt;br&gt;
but in deciding.&lt;/p&gt;




&lt;h1&gt;
  
  
  🧠 The Professional Mindset: Think Before You Build
&lt;/h1&gt;

&lt;p&gt;Experienced developers don’t start coding immediately.&lt;/p&gt;

&lt;p&gt;They first spend time understanding the product.&lt;/p&gt;

&lt;p&gt;Sometimes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;1 week
&lt;/li&gt;
&lt;li&gt;15 days
&lt;/li&gt;
&lt;li&gt;1 month
&lt;/li&gt;
&lt;li&gt;even 2 months
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Only planning and designing.&lt;/p&gt;

&lt;p&gt;They define clearly:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;What problem are we solving?&lt;/li&gt;
&lt;li&gt;Who are the users?&lt;/li&gt;
&lt;li&gt;What features are required?&lt;/li&gt;
&lt;li&gt;How many users should it support?&lt;/li&gt;
&lt;li&gt;What should the architecture look like?&lt;/li&gt;
&lt;li&gt;How will data be stored?&lt;/li&gt;
&lt;li&gt;Which tech stack fits best?&lt;/li&gt;
&lt;li&gt;What are the trade-offs?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Then they start coding.&lt;/p&gt;

&lt;p&gt;Because decisions are already made.&lt;/p&gt;




&lt;h1&gt;
  
  
  🔍 Treat Projects Like DSA Problems
&lt;/h1&gt;

&lt;p&gt;There is a strong similarity between DSA and system design.&lt;/p&gt;

&lt;p&gt;In DSA, we don’t start coding immediately.&lt;/p&gt;

&lt;p&gt;We:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;understand constraints
&lt;/li&gt;
&lt;li&gt;choose algorithm
&lt;/li&gt;
&lt;li&gt;compare approaches
&lt;/li&gt;
&lt;li&gt;dry-run solution
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Good engineers do the same with software systems.&lt;/p&gt;

&lt;p&gt;They design first.&lt;br&gt;&lt;br&gt;
Then implement.&lt;/p&gt;




&lt;h1&gt;
  
  
  🧱 My Biggest Early Mistake: Messy Codebase
&lt;/h1&gt;

&lt;p&gt;In my early projects and open-source contributions, I didn’t care about structure.&lt;/p&gt;

&lt;p&gt;I created:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;random folders
&lt;/li&gt;
&lt;li&gt;unclear file names
&lt;/li&gt;
&lt;li&gt;long functions
&lt;/li&gt;
&lt;li&gt;duplicated logic
&lt;/li&gt;
&lt;li&gt;inconsistent patterns
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Everything still worked — so I ignored it.&lt;/p&gt;

&lt;p&gt;But as the project grew:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;contributors struggled to understand code
&lt;/li&gt;
&lt;li&gt;features became harder to add
&lt;/li&gt;
&lt;li&gt;bugs increased
&lt;/li&gt;
&lt;li&gt;refactoring became risky
&lt;/li&gt;
&lt;li&gt;even I struggled to understand my own code 😅
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The codebase became scary.&lt;/p&gt;

&lt;p&gt;This is called &lt;strong&gt;code quality debt&lt;/strong&gt;.&lt;/p&gt;




&lt;h1&gt;
  
  
  📈 When Projects Grow, Structure Matters
&lt;/h1&gt;

&lt;p&gt;At the beginning, you are alone.&lt;/p&gt;

&lt;p&gt;But if your project becomes useful:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;other developers want to contribute
&lt;/li&gt;
&lt;li&gt;new features are added
&lt;/li&gt;
&lt;li&gt;modules increase
&lt;/li&gt;
&lt;li&gt;complexity grows
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If the foundation is weak:&lt;/p&gt;

&lt;p&gt;The project becomes hard to scale.&lt;/p&gt;

&lt;p&gt;Good structure from the beginning saves months later.&lt;/p&gt;




&lt;h1&gt;
  
  
  🔄 The Key Shift: Project → Product
&lt;/h1&gt;

&lt;p&gt;The biggest mindset change in my journey was this:&lt;/p&gt;

&lt;p&gt;❌ I am building a project&lt;br&gt;&lt;br&gt;
✅ I am engineering a product  &lt;/p&gt;

&lt;p&gt;A project is for learning.&lt;br&gt;&lt;br&gt;
A product is for users.&lt;/p&gt;

&lt;p&gt;When you think like product engineering, you start asking:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Is this readable?&lt;/li&gt;
&lt;li&gt;Is this maintainable?&lt;/li&gt;
&lt;li&gt;Is this scalable?&lt;/li&gt;
&lt;li&gt;Can others understand this easily?&lt;/li&gt;
&lt;li&gt;Is architecture future-ready?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That changes your coding style completely.&lt;/p&gt;




&lt;h1&gt;
  
  
  📝 What I Do Before Starting Any Project Now
&lt;/h1&gt;

&lt;p&gt;Now I never start coding immediately.&lt;/p&gt;

&lt;p&gt;I first create a simple plan document.&lt;/p&gt;

&lt;p&gt;It includes:&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Problem Definition
&lt;/h3&gt;

&lt;p&gt;What problem does this solve?&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Target Users
&lt;/h3&gt;

&lt;p&gt;Who will use this?&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Core Features
&lt;/h3&gt;

&lt;p&gt;What is necessary (not everything)?&lt;/p&gt;

&lt;h3&gt;
  
  
  4. Architecture Idea
&lt;/h3&gt;

&lt;p&gt;Frontend + Backend + DB flow&lt;/p&gt;

&lt;h3&gt;
  
  
  5. Database Schema Draft
&lt;/h3&gt;

&lt;p&gt;Entities and relationships&lt;/p&gt;

&lt;h3&gt;
  
  
  6. Tech Stack Decision
&lt;/h3&gt;

&lt;p&gt;Why this stack?&lt;/p&gt;

&lt;h3&gt;
  
  
  7. Scaling Assumption
&lt;/h3&gt;

&lt;p&gt;Expected number of users&lt;/p&gt;

&lt;h3&gt;
  
  
  8. Folder Structure Plan
&lt;/h3&gt;

&lt;p&gt;Project organization&lt;/p&gt;

&lt;h3&gt;
  
  
  9. Implementation Phases
&lt;/h3&gt;

&lt;p&gt;Step-by-step build plan&lt;/p&gt;

&lt;p&gt;After this, coding becomes smooth and fast.&lt;/p&gt;




&lt;h1&gt;
  
  
  📚 Why Documentation Makes You a Better Engineer
&lt;/h1&gt;

&lt;p&gt;One habit that improved my thinking a lot:&lt;/p&gt;

&lt;p&gt;I started documenting my projects.&lt;/p&gt;

&lt;p&gt;For each project, I write:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;what it does
&lt;/li&gt;
&lt;li&gt;why I built it
&lt;/li&gt;
&lt;li&gt;challenges faced
&lt;/li&gt;
&lt;li&gt;solutions used
&lt;/li&gt;
&lt;li&gt;architecture decisions
&lt;/li&gt;
&lt;li&gt;trade-offs
&lt;/li&gt;
&lt;li&gt;lessons learned
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This helps in two ways:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Improves clarity of thinking
&lt;/li&gt;
&lt;li&gt;Shows depth to other developers
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;People don’t judge quickly — they understand your engineering process.&lt;/p&gt;




&lt;h1&gt;
  
  
  🧩 DSA and Development Are Similar Journeys
&lt;/h1&gt;

&lt;p&gt;DSA is not about solving 1000 problems.&lt;/p&gt;

&lt;p&gt;It’s about learning how to think.&lt;/p&gt;

&lt;p&gt;Similarly, building apps is not about making many projects fast.&lt;/p&gt;

&lt;p&gt;It’s about becoming a strong engineer.&lt;/p&gt;




&lt;h1&gt;
  
  
  💡 Advice to Beginners (From My Experience)
&lt;/h1&gt;

&lt;p&gt;If you are starting development:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Don’t rush into coding
&lt;/li&gt;
&lt;li&gt;Think before building
&lt;/li&gt;
&lt;li&gt;Design simple architecture
&lt;/li&gt;
&lt;li&gt;Keep code clean from day one
&lt;/li&gt;
&lt;li&gt;Plan folder structure
&lt;/li&gt;
&lt;li&gt;Define schema early
&lt;/li&gt;
&lt;li&gt;Document decisions
&lt;/li&gt;
&lt;li&gt;Treat projects like products
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;You will save months of time later.&lt;/p&gt;




&lt;h1&gt;
  
  
  ✅ Final Thought
&lt;/h1&gt;

&lt;p&gt;Making messy projects is normal at the beginning.&lt;/p&gt;

&lt;p&gt;I also did the same.&lt;/p&gt;

&lt;p&gt;But growth starts when you realize:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Good developers write code.&lt;br&gt;&lt;br&gt;
Great engineers design systems.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;And the moment you start treating your projects like products —&lt;br&gt;&lt;br&gt;
your engineering level changes.&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>learning</category>
      <category>programming</category>
      <category>softwareengineering</category>
    </item>
    <item>
      <title>Sliding Window Technique — Complete Guide (DSA)</title>
      <dc:creator>Abhishek Gupta </dc:creator>
      <pubDate>Mon, 16 Feb 2026 07:23:45 +0000</pubDate>
      <link>https://dev.to/abhishek-nexgen-dev/sliding-window-technique-complete-guide-dsa-1cla</link>
      <guid>https://dev.to/abhishek-nexgen-dev/sliding-window-technique-complete-guide-dsa-1cla</guid>
      <description>&lt;h2&gt;
  
  
  1️⃣ What is Sliding Window?
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Sliding Window&lt;/strong&gt; is an algorithmic technique used to efficiently process a &lt;strong&gt;contiguous subarray / substring of fixed or variable size&lt;/strong&gt; within an array or string.&lt;/p&gt;

&lt;p&gt;Instead of recomputing values for every subarray from scratch, we &lt;strong&gt;reuse previous computation&lt;/strong&gt; while moving the window forward.&lt;/p&gt;

&lt;p&gt;👉 Think of it as a window of size &lt;code&gt;k&lt;/code&gt; that slides over data.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Array: [1, 3, -1, -3, 5, 3, 6, 7]
k = 3

Window positions:
[1,3,-1]
  [3,-1,-3]
    [-1,-3,5]
      [-3,5,3]
         [5,3,6]
           [3,6,7]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&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.amazonaws.com%2Fuploads%2Farticles%2Fxiepbi27ng1xheghqo9q.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.amazonaws.com%2Fuploads%2Farticles%2Fxiepbi27ng1xheghqo9q.png" alt=" " width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h1&gt;
  
  
  2️⃣ What does “Window” mean?
&lt;/h1&gt;

&lt;p&gt;A &lt;strong&gt;window&lt;/strong&gt; = group of elements currently being processed together.&lt;/p&gt;

&lt;p&gt;If &lt;code&gt;k = 3&lt;/code&gt;, at any iteration you analyze &lt;strong&gt;exactly 3 elements&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;So:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Window size = how many elements you analyze at once&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h1&gt;
  
  
  3️⃣ How Sliding Window Works
&lt;/h1&gt;

&lt;p&gt;Instead of:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;For every subarray of size k:
    calculate result from scratch
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We do:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Compute first window result
Then slide:
    Remove left element
    Add right element
    Update result efficiently
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This reduces repeated work.&lt;/p&gt;




&lt;h1&gt;
  
  
  4️⃣ Example — Maximum in Subarray (Your Example)
&lt;/h1&gt;

&lt;p&gt;Array:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[1, 3, -1, -3, 5, 3, 6, 7]
k = 3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&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.amazonaws.com%2Fuploads%2Farticles%2Fn4tb1d2ipzbk5242d0hn.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.amazonaws.com%2Fuploads%2Farticles%2Fn4tb1d2ipzbk5242d0hn.png" alt=" " width="800" height="450"&gt;&lt;/a&gt;&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.amazonaws.com%2Fuploads%2Farticles%2Fp5czfcgnjcibbazc44fy.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.amazonaws.com%2Fuploads%2Farticles%2Fp5czfcgnjcibbazc44fy.png" alt=" " width="800" height="450"&gt;&lt;/a&gt;&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.amazonaws.com%2Fuploads%2Farticles%2F0d7qimfvfav66pbhe9p0.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.amazonaws.com%2Fuploads%2Farticles%2F0d7qimfvfav66pbhe9p0.png" alt=" " width="800" height="450"&gt;&lt;/a&gt;&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.amazonaws.com%2Fuploads%2Farticles%2F4po245wnvuaasxf6t19t.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.amazonaws.com%2Fuploads%2Farticles%2F4po245wnvuaasxf6t19t.png" alt=" " width="800" height="450"&gt;&lt;/a&gt;&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.amazonaws.com%2Fuploads%2Farticles%2Fol6lb3y21m1p4yr9j21f.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.amazonaws.com%2Fuploads%2Farticles%2Fol6lb3y21m1p4yr9j21f.png" alt=" " width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Windows:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[1,3,-1]  → max = 3
[3,-1,-3] → max = 3
[-1,-3,5] → max = 5
[-3,5,3]  → max = 5
[5,3,6]   → max = 6
[3,6,7]   → max = 7
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Output:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[3,3,5,5,6,7]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  5️⃣ Types of Sliding Window
&lt;/h1&gt;

&lt;h2&gt;
  
  
  ✅ 1. Fixed Size Window
&lt;/h2&gt;

&lt;p&gt;Window size constant (&lt;code&gt;k&lt;/code&gt; given)&lt;/p&gt;

&lt;p&gt;Examples:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Maximum sum subarray of size k&lt;/li&gt;
&lt;li&gt;Average of subarray size k&lt;/li&gt;
&lt;li&gt;Max/min in window size k&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  ✅ 2. Variable Size Window
&lt;/h2&gt;

&lt;p&gt;Window expands &amp;amp; shrinks dynamically&lt;/p&gt;

&lt;p&gt;Examples:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Longest substring without repeating characters&lt;/li&gt;
&lt;li&gt;Minimum window substring&lt;/li&gt;
&lt;li&gt;Longest subarray with sum ≤ K&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  6️⃣ Naive vs Sliding Window
&lt;/h1&gt;

&lt;h2&gt;
  
  
  ❌ Naive Approach
&lt;/h2&gt;

&lt;p&gt;For each window → scan k elements&lt;/p&gt;

&lt;p&gt;Time:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;O(n * k)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  ✅ Sliding Window
&lt;/h2&gt;

&lt;p&gt;Reuse previous result&lt;/p&gt;

&lt;p&gt;Time:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;O(n)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Huge improvement.&lt;/p&gt;




&lt;h1&gt;
  
  
  7️⃣ Sliding Window Algorithm Pattern (Fixed)
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1. Process first window (0 → k-1)
2. For i = k → n-1
       remove element i-k
       add element i
       update answer
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  8️⃣ Code — Maximum Sum Subarray Size K
&lt;/h1&gt;

&lt;h3&gt;
  
  
  JavaScript
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;maxSumSubarray&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;k&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;windowSum&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;maxSum&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="kc"&gt;Infinity&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="c1"&gt;// first window&lt;/span&gt;
  &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;k&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&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;windowSum&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="nx"&gt;maxSum&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;windowSum&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="c1"&gt;// slide window&lt;/span&gt;
  &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;k&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&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;windowSum&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;      &lt;span class="c1"&gt;// add right&lt;/span&gt;
    &lt;span class="nx"&gt;windowSum&lt;/span&gt; &lt;span class="o"&gt;-=&lt;/span&gt; &lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;k&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;  &lt;span class="c1"&gt;// remove left&lt;/span&gt;
    &lt;span class="nx"&gt;maxSum&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;max&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;maxSum&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;windowSum&lt;/span&gt;&lt;span class="p"&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;maxSum&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;Time: &lt;strong&gt;O(n)&lt;/strong&gt;&lt;br&gt;
Space: &lt;strong&gt;O(1)&lt;/strong&gt;&lt;/p&gt;


&lt;h1&gt;
  
  
  9️⃣ Hard Version — Maximum Element in Window (Deque)
&lt;/h1&gt;

&lt;p&gt;Your example problem requires &lt;strong&gt;monotonic deque&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Why?&lt;br&gt;
Because max changes non-linearly.&lt;/p&gt;


&lt;h2&gt;
  
  
  Algorithm Idea
&lt;/h2&gt;

&lt;p&gt;Deque stores &lt;strong&gt;indexes of useful elements&lt;/strong&gt;&lt;br&gt;
Maintains decreasing order.&lt;/p&gt;

&lt;p&gt;Rules:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1. Remove out-of-window elements
2. Remove smaller elements from back
3. Add current index
4. Front = max
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  JavaScript Code
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;maxSlidingWindow&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;nums&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;k&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;deque&lt;/span&gt; &lt;span class="o"&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;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;

  &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;nums&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;

    &lt;span class="c1"&gt;// remove out of window&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;deque&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nx"&gt;deque&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="o"&gt;&amp;lt;=&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;k&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;deque&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;shift&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="c1"&gt;// remove smaller elements&lt;/span&gt;
    &lt;span class="k"&gt;while &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;deque&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nx"&gt;nums&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;deque&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;deque&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;]]&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;nums&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;deque&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;pop&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="nx"&gt;deque&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="c1"&gt;// start recording after first window&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;i&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;=&lt;/span&gt; &lt;span class="nx"&gt;k&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;nums&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;deque&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="p"&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;result&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;Time: &lt;strong&gt;O(n)&lt;/strong&gt;&lt;br&gt;
Space: &lt;strong&gt;O(k)&lt;/strong&gt;&lt;/p&gt;


&lt;h1&gt;
  
  
  🔟 Variable Sliding Window Pattern
&lt;/h1&gt;

&lt;p&gt;Used when window size unknown.&lt;/p&gt;
&lt;h2&gt;
  
  
  Template
&lt;/h2&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;left = 0
for right in range:
    expand window

    while condition invalid:
        shrink window
        left++

    update answer
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  1️⃣1️⃣ Example — Longest Substring Without Repeat
&lt;/h1&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;longestUnique&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;s&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="kd"&gt;set&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;Set&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;left&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;maxLen&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;right&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;right&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;s&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;right&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;

    &lt;span class="k"&gt;while &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;set&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;has&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;s&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;right&lt;/span&gt;&lt;span class="p"&gt;]))&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="kd"&gt;set&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;delete&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;s&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;left&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
      &lt;span class="nx"&gt;left&lt;/span&gt;&lt;span class="o"&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;set&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;s&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;right&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
    &lt;span class="nx"&gt;maxLen&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;max&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;maxLen&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;right&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;left&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&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;maxLen&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;h1&gt;
  
  
  1️⃣2️⃣ Real-World Examples of Sliding Window
&lt;/h1&gt;
&lt;h2&gt;
  
  
  📊 1. Network Traffic Monitoring
&lt;/h2&gt;

&lt;p&gt;Find peak bandwidth usage in last 5 minutes.&lt;/p&gt;

&lt;p&gt;Window = last 5 min packets.&lt;/p&gt;


&lt;h2&gt;
  
  
  💰 2. Stock Market Analysis
&lt;/h2&gt;

&lt;p&gt;Maximum price in last 30 days.&lt;/p&gt;

&lt;p&gt;Window = 30 days.&lt;/p&gt;


&lt;h2&gt;
  
  
  🎥 3. Video Streaming Buffer
&lt;/h2&gt;

&lt;p&gt;Analyze last N frames for compression.&lt;/p&gt;


&lt;h2&gt;
  
  
  🧠 4. NLP / Text Processing
&lt;/h2&gt;

&lt;p&gt;Longest meaningful phrase without repetition.&lt;/p&gt;


&lt;h2&gt;
  
  
  📱 5. Sensor Data Processing
&lt;/h2&gt;

&lt;p&gt;Average temperature last 10 readings.&lt;/p&gt;


&lt;h2&gt;
  
  
  🔒 6. Cybersecurity
&lt;/h2&gt;

&lt;p&gt;Detect anomalies in last N requests.&lt;/p&gt;


&lt;h1&gt;
  
  
  1️⃣3️⃣ Time Complexity Analysis
&lt;/h1&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Problem Type&lt;/th&gt;
&lt;th&gt;Time&lt;/th&gt;
&lt;th&gt;Space&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Fixed sum/avg&lt;/td&gt;
&lt;td&gt;O(n)&lt;/td&gt;
&lt;td&gt;O(1)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Max/min (deque)&lt;/td&gt;
&lt;td&gt;O(n)&lt;/td&gt;
&lt;td&gt;O(k)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Variable window&lt;/td&gt;
&lt;td&gt;O(n)&lt;/td&gt;
&lt;td&gt;O(k)&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Why O(n)?&lt;br&gt;
Each element enters &amp;amp; exits window once.&lt;/p&gt;


&lt;h1&gt;
  
  
  1️⃣4️⃣ When to Use Sliding Window
&lt;/h1&gt;

&lt;p&gt;Use when you see:&lt;/p&gt;

&lt;p&gt;✅ Subarray&lt;br&gt;
✅ Substring&lt;br&gt;
✅ Contiguous segment&lt;br&gt;
✅ Fixed length k&lt;br&gt;
✅ Range processing&lt;br&gt;
✅ Running average/sum/max&lt;br&gt;
✅ Longest/shortest condition&lt;/p&gt;


&lt;h1&gt;
  
  
  1️⃣5️⃣ Sliding Window vs Two Pointers
&lt;/h1&gt;

&lt;p&gt;Sliding window = specialized two-pointer.&lt;/p&gt;

&lt;p&gt;Two pointers:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;left, right move independently
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Sliding window:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;right expands
left shrinks conditionally
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  1️⃣6️⃣ Common Interview Problems
&lt;/h1&gt;

&lt;p&gt;Must know:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Maximum sum subarray size k&lt;/li&gt;
&lt;li&gt;Sliding window maximum&lt;/li&gt;
&lt;li&gt;Longest substring without repeat&lt;/li&gt;
&lt;li&gt;Minimum window substring&lt;/li&gt;
&lt;li&gt;Longest subarray with sum ≤ K&lt;/li&gt;
&lt;li&gt;Count subarrays with condition&lt;/li&gt;
&lt;li&gt;Fruit into baskets&lt;/li&gt;
&lt;li&gt;Anagrams in string&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  1️⃣7️⃣ Common Mistakes
&lt;/h1&gt;

&lt;p&gt;❌ Forget removing left element&lt;br&gt;
❌ Off-by-one window size&lt;br&gt;
❌ Wrong while condition&lt;br&gt;
❌ Not updating answer after shrink&lt;br&gt;
❌ Using sliding window for non-contiguous problems&lt;/p&gt;


&lt;h1&gt;
  
  
  1️⃣8️⃣ Intuition (Most Important)
&lt;/h1&gt;

&lt;p&gt;Brute force:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Recalculate everything
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Sliding window:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Reuse previous work
Update only change
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is the core optimization mindset.&lt;/p&gt;




&lt;h1&gt;
  
  
  1️⃣9️⃣ Visual Intuition
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[1,3,-1,-3,5,3,6,7]
 k=3

Step1: [1,3,-1]
Step2:   [3,-1,-3]
Step3:     [-1,-3,5]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Only:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;remove left&lt;/li&gt;
&lt;li&gt;add right&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Everything else same.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>🍫 Chocolate Distribution Problem — JavaScript Solution Explained (Sliding Window)</title>
      <dc:creator>Abhishek Gupta </dc:creator>
      <pubDate>Mon, 16 Feb 2026 06:39:24 +0000</pubDate>
      <link>https://dev.to/abhishek-nexgen-dev/chocolate-distribution-problem-javascript-solution-explained-sliding-window-1gff</link>
      <guid>https://dev.to/abhishek-nexgen-dev/chocolate-distribution-problem-javascript-solution-explained-sliding-window-1gff</guid>
      <description>&lt;p&gt;This is a very common coding interview problem that teaches how to distribute items fairly.&lt;/p&gt;

&lt;p&gt;In this blog, we will understand the problem from zero level and then solve it step-by-step using JavaScript.&lt;/p&gt;




&lt;h1&gt;
  
  
  🧾 Problem in Simple Words
&lt;/h1&gt;

&lt;p&gt;We have many chocolate packets.&lt;/p&gt;

&lt;p&gt;Each packet has some chocolates.&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;arr = [7, 3, 2, 4, 9, 12, 56]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This means:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Packet 1 → 7 chocolates&lt;/li&gt;
&lt;li&gt;Packet 2 → 3 chocolates&lt;/li&gt;
&lt;li&gt;Packet 3 → 2 chocolates&lt;/li&gt;
&lt;li&gt;Packet 4 → 4 chocolates&lt;/li&gt;
&lt;li&gt;Packet 5 → 9 chocolates&lt;/li&gt;
&lt;li&gt;Packet 6 → 12 chocolates&lt;/li&gt;
&lt;li&gt;Packet 7 → 56 chocolates&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;We also have students:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;m = number of students
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;m = 3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So we must give exactly &lt;strong&gt;1 packet to each student&lt;/strong&gt;.&lt;/p&gt;




&lt;h1&gt;
  
  
  🎯 Goal (Most Important Part)
&lt;/h1&gt;

&lt;p&gt;We must choose &lt;strong&gt;m packets&lt;/strong&gt; such that:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;maximum chocolates − minimum chocolates
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;is as &lt;strong&gt;small as possible&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;This is called &lt;strong&gt;minimized difference&lt;/strong&gt;.&lt;/p&gt;




&lt;h1&gt;
  
  
  🤔 Why Difference?
&lt;/h1&gt;

&lt;p&gt;Because we want &lt;strong&gt;fair distribution&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Bad distribution:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[2, 3, 56]
diff = 56 − 2 = 54 ❌ unfair
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Good distribution:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[2, 3, 4]
diff = 4 − 2 = 2 ✅ fair
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So we always prefer packets that are close in value.&lt;/p&gt;




&lt;h1&gt;
  
  
  🔑 Important Observation
&lt;/h1&gt;

&lt;p&gt;If we sort the packets, similar values come together.&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Original: [7, 3, 2, 4, 9, 12, 56]
Sorted:   [2, 3, 4, 7, 9, 12, 56]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now close chocolate counts are neighbors.&lt;/p&gt;

&lt;p&gt;So the best &lt;code&gt;m&lt;/code&gt; packets will always be &lt;strong&gt;next to each other&lt;/strong&gt; in sorted array.&lt;/p&gt;

&lt;p&gt;This is the key idea of the problem.&lt;/p&gt;




&lt;h1&gt;
  
  
  🧠 Approach Step-by-Step
&lt;/h1&gt;

&lt;p&gt;Step 1 → Sort the array&lt;br&gt;
Step 2 → Take &lt;code&gt;m&lt;/code&gt; consecutive packets&lt;br&gt;
Step 3 → Find difference&lt;br&gt;
Step 4 → Move window&lt;br&gt;
Step 5 → Keep minimum&lt;/p&gt;

&lt;p&gt;This is called &lt;strong&gt;sliding window&lt;/strong&gt;.&lt;/p&gt;


&lt;h1&gt;
  
  
  📦 Example Walkthrough 1
&lt;/h1&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.amazonaws.com%2Fuploads%2Farticles%2F9kmm2oyq09rblfm8q7ny.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.amazonaws.com%2Fuploads%2Farticles%2F9kmm2oyq09rblfm8q7ny.png" alt=" " width="800" height="512"&gt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;arr = [7, 3, 2, 4, 9, 12, 56]
m = 3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&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.amazonaws.com%2Fuploads%2Farticles%2Fejaquaqjzr2ik09h3paq.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.amazonaws.com%2Fuploads%2Farticles%2Fejaquaqjzr2ik09h3paq.png" alt=" " width="780" height="478"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Sort:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[2, 3, 4, 7, 9, 12, 56]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now take groups of 3:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[2,3,4] → diff = 4−2 = 2
[3,4,7] → diff = 7−3 = 4
[4,7,9] → diff = 9−4 = 5
[7,9,12] → diff = 12−7 = 5
[9,12,56] → diff = 56−9 = 47
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Minimum = &lt;strong&gt;2&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;So answer = 2&lt;/p&gt;




&lt;h1&gt;
  
  
  📦 Example Walkthrough 2
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;arr = [1, 4, 7, 8, 9]
m = 3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Sort:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[1, 4, 7, 8, 9]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now take groups of 3:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[1,4,7] → diff = 7−1 = 6
[4,7,8] → diff = 8−4 = 4
[7,8,9] → diff = 9−4 = 2
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Minimum = &lt;strong&gt;2&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;So answer = 2&lt;/p&gt;

&lt;h1&gt;
  
  
  💻 JavaScript Code (Easy)
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;findMinDiff&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;m&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// Step 1: sort chocolates&lt;/span&gt;
  &lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;sort&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&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;a&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;minDiff&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Number&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;MAX_SAFE_INTEGER&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="c1"&gt;// window pointers&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;start&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;end&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;m&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="c1"&gt;// Step 2: slide window&lt;/span&gt;
  &lt;span class="k"&gt;while &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;end&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;diff&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;end&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;start&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;diff&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;minDiff&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;minDiff&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;diff&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="nx"&gt;start&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nx"&gt;end&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&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;minDiff&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;h1&gt;
  
  
  ▶️ Test
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&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="nf"&gt;findMinDiff&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="mi"&gt;7&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;9&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;12&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;56&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Output:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;2
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  🔍 Code Explanation Line-by-Line
&lt;/h1&gt;

&lt;h3&gt;
  
  
  Sort array
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;sort&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&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;a&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now chocolates are in increasing order.&lt;/p&gt;




&lt;h3&gt;
  
  
  Store minimum difference
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;minDiff&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Number&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;MAX_SAFE_INTEGER&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Start with very large number.&lt;/p&gt;




&lt;h3&gt;
  
  
  Create window of size m
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;start&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;end&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;m&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;m = 3
start = 0
end = 2
window = [2,3,4]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  Slide window
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;while &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;end&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Move window one step each time.&lt;/p&gt;




&lt;h3&gt;
  
  
  Calculate difference
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;diff&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;end&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;start&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Because:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;max = arr[end]
min = arr[start]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  Update minimum
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;diff&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;minDiff&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;minDiff&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;diff&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;Keep best answer.&lt;/p&gt;




&lt;h3&gt;
  
  
  Move window
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;start&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;end&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Next group.&lt;/p&gt;




&lt;h1&gt;
  
  
  ⏱ Time Complexity
&lt;/h1&gt;

&lt;p&gt;Sorting:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;O(n log n)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Sliding window:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;O(n)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Total:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;O(n log n)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  🧩 Why This Solution is Correct
&lt;/h1&gt;

&lt;p&gt;After sorting:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;closest numbers stay together&lt;/li&gt;
&lt;li&gt;best packets must be neighbors&lt;/li&gt;
&lt;li&gt;checking neighbors = checking all optimal choices&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So sliding window finds best answer.&lt;/p&gt;




&lt;h1&gt;
  
  
  🏁 Final Understanding
&lt;/h1&gt;

&lt;p&gt;We want to distribute chocolates fairly.&lt;/p&gt;

&lt;p&gt;Fair means:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;max − min → smallest
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Sorting + sliding window checks all fair groups.&lt;/p&gt;

&lt;p&gt;Minimum difference is the answer.&lt;/p&gt;




&lt;h1&gt;
  
  
  ✅ Final Answer
&lt;/h1&gt;

&lt;p&gt;Chocolate Distribution problem is solved by:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Sorting packets&lt;/li&gt;
&lt;li&gt;Checking all groups of m packets&lt;/li&gt;
&lt;li&gt;Choosing group with minimum difference&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>algorithms</category>
      <category>beginners</category>
      <category>interview</category>
      <category>javascript</category>
    </item>
  </channel>
</rss>
