<link>https://annelizekrause.com/</link></image><item><title>Building a Production-Ready REST API with Node.js and Express</h1> <article> <h1>Building a Production-Ready REST API with Node.js and Express</h1> <p>Tue, 10 Dec 2024 00:00:00 +0000</p> <p>Building a REST API seems straightforward until you need to handle authentication, validation, error handling, and documentation. This guide covers best practices for production-ready APIs.</p> <h2 id="table-of-contents">Table of Contents</h2> <ol> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </ol> <h2 id="project-setup">Project Setup</h2> <p>Start with a solid foundation:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">mkdir my-api <span class="o">&&</span> <span class="nb">cd</span> my-api </span></span><span class="line"><span class="cl">npm init -y </span></span><span class="line"><span class="cl">npm install express dotenv cors helmet compression </span></span><span class="line"><span class="cl">npm install -D typescript @types/node @types/express ts-node-dev </span></span></code></pre></div><p>Create <code>tsconfig.json</code>:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">"compilerOptions"</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">"target"</span><span class="p">:</span> <span class="s2">"ES2020"</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"module"</span><span class="p">:</span> <span class="s2">"commonjs"</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"lib"</span><span class="p">:</span> <span class="p">[</span><span class="s2">"ES2020"</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nt">"outDir"</span><span class="p">:</span> <span class="s2">"./dist"</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"rootDir"</span><span class="p">:</span> <span class="s2">"./src"</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"strict"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"esModuleInterop"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"skipLibCheck"</span><span class="p">:</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><h2 id="folder-structure">Folder Structure</h2> <p>Organize your code for maintainability:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">src/ </span></span><span class="line"><span class="cl">├── config/ # Configuration files </span></span><span class="line"><span class="cl">├── controllers/ # Route controllers </span></span><span class="line"><span class="cl">├── middleware/ # Custom middleware </span></span><span class="line"><span class="cl">├── models/ # Database models </span></span><span class="line"><span class="cl">├── routes/ # API routes </span></span><span class="line"><span class="cl">├── services/ # Business logic </span></span><span class="line"><span class="cl">├── utils/ # Helper functions </span></span><span class="line"><span class="cl">├── validators/ # Input validation </span></span><span class="line"><span class="cl">└── app.ts # App setup </span></span></code></pre></div><h2 id="database">Database Integration</h2> <p>Using Prisma for type-safe database access:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="c1">// prisma/schema.prisma </span></span></span><span class="line"><span class="cl"><span class="nx">model</span> <span class="nx">User</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span> <span class="nb">String</span> <span class="kd">@id</span> <span class="kd">@default</span><span class="p">(</span><span class="nx">uuid</span><span class="p">())</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span> <span class="nb">String</span> <span class="kd">@unique</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="nb">String</span> </span></span><span class="line"><span class="cl"> <span class="nx">password</span> <span class="nb">String</span> </span></span><span class="line"><span class="cl"> <span class="nx">createdAt</span> <span class="nx">DateTime</span> <span class="kd">@default</span><span class="p">(</span><span class="nx">now</span><span class="p">())</span> </span></span><span class="line"><span class="cl"> <span class="nx">updatedAt</span> <span class="nx">DateTime</span> <span class="kd">@updatedAt</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="c1">// src/config/database.ts </span></span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">PrismaClient</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@prisma/client'</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">prisma</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">PrismaClient</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">log</span>: <span class="kt">process.env.NODE_ENV</span> <span class="o">===</span> <span class="s1">'development'</span> <span class="o">?</span> <span class="p">[</span><span class="s1">'query'</span><span class="p">]</span> <span class="o">:</span> <span class="p">[]</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">prisma</span> </span></span></code></pre></div><h2 id="auth">Authentication & Authorization</h2> <p>Implement JWT-based authentication:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="c1">// src/middleware/auth.ts </span></span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">jwt</span> <span class="kr">from</span> <span class="s1">'jsonwebtoken'</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">Request</span><span class="p">,</span> <span class="nx">Response</span><span class="p">,</span> <span class="nx">NextFunction</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'express'</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">interface</span> <span class="nx">JWTPayload</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">userId</span>: <span class="kt">string</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span>: <span class="kt">string</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">authenticate</span> <span class="o">=</span> <span class="kr">async</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="nx">req</span>: <span class="kt">Request</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">res</span>: <span class="kt">Response</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">next</span>: <span class="kt">NextFunction</span> </span></span><span class="line"><span class="cl"><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">try</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">token</span> <span class="o">=</span> <span class="nx">req</span><span class="p">.</span><span class="nx">headers</span><span class="p">.</span><span class="nx">authorization</span><span class="o">?</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">' '</span><span class="p">)[</span><span class="mi">1</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">token</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">res</span><span class="p">.</span><span class="nx">status</span><span class="p">(</span><span class="mi">401</span><span class="p">).</span><span class="nx">json</span><span class="p">({</span> <span class="nx">error</span><span class="o">:</span> <span class="s1">'Authentication required'</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">payload</span> <span class="o">=</span> <span class="nx">jwt</span><span class="p">.</span><span class="nx">verify</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="nx">token</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">process</span><span class="p">.</span><span class="nx">env</span><span class="p">.</span><span class="nx">JWT_SECRET</span><span class="o">!</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> <span class="kr">as</span> <span class="nx">JWTPayload</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">req</span><span class="p">.</span><span class="nx">user</span> <span class="o">=</span> <span class="nx">payload</span> </span></span><span class="line"><span class="cl"> <span class="nx">next</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">res</span><span class="p">.</span><span class="nx">status</span><span class="p">(</span><span class="mi">401</span><span class="p">).</span><span class="nx">json</span><span class="p">({</span> <span class="nx">error</span><span class="o">:</span> <span class="s1">'Invalid or expired token'</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><h2 id="errors">Error Handling</h2> <p>Centralized error handling:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="c1">// src/middleware/errorHandler.ts </span></span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">Request</span><span class="p">,</span> <span class="nx">Response</span><span class="p">,</span> <span class="nx">NextFunction</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'express'</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">class</span> <span class="nx">AppError</span> <span class="kr">extends</span> <span class="nb">Error</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span>: <span class="kt">number</span> </span></span><span class="line"><span class="cl"> <span class="nx">isOperational</span>: <span class="kt">boolean</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">constructor</span><span class="p">(</span><span class="nx">message</span>: <span class="kt">string</span><span class="p">,</span> <span class="nx">statusCode</span>: <span class="kt">number</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">super</span><span class="p">(</span><span class="nx">message</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">statusCode</span> <span class="o">=</span> <span class="nx">statusCode</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">isOperational</span> <span class="o">=</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"> <span class="nb">Error</span><span class="p">.</span><span class="nx">captureStackTrace</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="kr">constructor</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">errorHandler</span> <span class="o">=</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="nx">err</span>: <span class="kt">Error</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">req</span>: <span class="kt">Request</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">res</span>: <span class="kt">Response</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">next</span>: <span class="kt">NextFunction</span> </span></span><span class="line"><span class="cl"><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">err</span> <span class="k">instanceof</span> <span class="nx">AppError</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">res</span><span class="p">.</span><span class="nx">status</span><span class="p">(</span><span class="nx">err</span><span class="p">.</span><span class="nx">statusCode</span><span class="p">).</span><span class="nx">json</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">status</span><span class="o">:</span> <span class="s1">'error'</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">message</span>: <span class="kt">err.message</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// Log unexpected errors </span></span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="s1">'Unexpected error:'</span><span class="p">,</span> <span class="nx">err</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">res</span><span class="p">.</span><span class="nx">status</span><span class="p">(</span><span class="mi">500</span><span class="p">).</span><span class="nx">json</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">status</span><span class="o">:</span> <span class="s1">'error'</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">message</span><span class="o">:</span> <span class="s1">'Internal server error'</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="p">{</span> <span class="nx">AppError</span> <span class="p">}</span> </span></span></code></pre></div><h2 id="validation">Validation</h2> <p>Use Zod for runtime validation:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="c1">// src/validators/userValidator.ts </span></span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">z</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'zod'</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">createUserSchema</span> <span class="o">=</span> <span class="nx">z</span><span class="p">.</span><span class="kt">object</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">body</span>: <span class="kt">z.object</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span>: <span class="kt">z.string</span><span class="p">().</span><span class="nx">email</span><span class="p">(</span><span class="s1">'Invalid email address'</span><span class="p">),</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span>: <span class="kt">z.string</span><span class="p">().</span><span class="nx">min</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="s1">'Name must be at least 2 characters'</span><span class="p">),</span> </span></span><span class="line"><span class="cl"> <span class="nx">password</span>: <span class="kt">z.string</span><span class="p">().</span><span class="nx">min</span><span class="p">(</span><span class="mi">8</span><span class="p">,</span> <span class="s1">'Password must be at least 8 characters'</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">validate</span> <span class="o">=</span> <span class="p">(</span><span class="nx">schema</span>: <span class="kt">any</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="kr">async</span> <span class="p">(</span><span class="nx">req</span>: <span class="kt">Request</span><span class="p">,</span> <span class="nx">res</span>: <span class="kt">Response</span><span class="p">,</span> <span class="nx">next</span>: <span class="kt">NextFunction</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">try</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">await</span> <span class="nx">schema</span><span class="p">.</span><span class="nx">parseAsync</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">body</span>: <span class="kt">req.body</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">query</span>: <span class="kt">req.query</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">params</span>: <span class="kt">req.params</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">next</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">error</span> <span class="k">instanceof</span> <span class="nx">z</span><span class="p">.</span><span class="nx">ZodError</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">res</span><span class="p">.</span><span class="nx">status</span><span class="p">(</span><span class="mi">400</span><span class="p">).</span><span class="nx">json</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">status</span><span class="o">:</span> <span class="s1">'error'</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">errors</span>: <span class="kt">error.errors</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="nx">next</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><h2 id="docs">API Documentation</h2> <p>Auto-generate docs with Swagger:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="c1">// src/config/swagger.ts </span></span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">swaggerJsdoc</span> <span class="kr">from</span> <span class="s1">'swagger-jsdoc'</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">options</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">definition</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">openapi</span><span class="o">:</span> <span class="s1">'3.0.0'</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">info</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">title</span><span class="o">:</span> <span class="s1">'My API'</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">version</span><span class="o">:</span> <span class="s1">'1.0.0'</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">description</span><span class="o">:</span> <span class="s1">'API documentation'</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">servers</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">url</span><span class="o">:</span> <span class="s1">'http://localhost:3000'</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">description</span><span class="o">:</span> <span class="s1">'Development server'</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">apis</span><span class="o">:</span> <span class="p">[</span><span class="s1">'./src/routes/*.ts'</span><span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">swaggerSpec</span> <span class="o">=</span> <span class="nx">swaggerJsdoc</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> </span></span></code></pre></div><p>Document endpoints in route files:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="cm">/** </span></span></span><span class="line"><span class="cl"><span class="cm"> * @openapi </span></span></span><span class="line"><span class="cl"><span class="cm"> * /api/users: </span></span></span><span class="line"><span class="cl"><span class="cm"> * post: </span></span></span><span class="line"><span class="cl"><span class="cm"> * summary: Create a new user </span></span></span><span class="line"><span class="cl"><span class="cm"> * tags: [Users] </span></span></span><span class="line"><span class="cl"><span class="cm"> * requestBody: </span></span></span><span class="line"><span class="cl"><span class="cm"> * required: true </span></span></span><span class="line"><span class="cl"><span class="cm"> * content: </span></span></span><span class="line"><span class="cl"><span class="cm"> * application/json: </span></span></span><span class="line"><span class="cl"><span class="cm"> * schema: </span></span></span><span class="line"><span class="cl"><span class="cm"> * type: object </span></span></span><span class="line"><span class="cl"><span class="cm"> * properties: </span></span></span><span class="line"><span class="cl"><span class="cm"> * email: </span></span></span><span class="line"><span class="cl"><span class="cm"> * type: string </span></span></span><span class="line"><span class="cl"><span class="cm"> * name: </span></span></span><span class="line"><span class="cl"><span class="cm"> * type: string </span></span></span><span class="line"><span class="cl"><span class="cm"> * password: </span></span></span><span class="line"><span class="cl"><span class="cm"> * type: string </span></span></span><span class="line"><span class="cl"><span class="cm"> * responses: </span></span></span><span class="line"><span class="cl"><span class="cm"> * 201: </span></span></span><span class="line"><span class="cl"><span class="cm"> * description: User created successfully </span></span></span><span class="line"><span class="cl"><span class="cm"> */</span> </span></span><span class="line"><span class="cl"><span class="nx">router</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="s1">'/users'</span><span class="p">,</span> <span class="nx">validate</span><span class="p">(</span><span class="nx">createUserSchema</span><span class="p">),</span> <span class="nx">createUser</span><span class="p">)</span> </span></span></code></pre></div><h2 id="testing">Testing</h2> <p>Write tests with Jest and Supertest:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="c1">// tests/users.test.ts </span></span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">request</span> <span class="kr">from</span> <span class="s1">'supertest'</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">app</span> <span class="kr">from</span> <span class="s1">'../src/app'</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">prisma</span> <span class="kr">from</span> <span class="s1">'../src/config/database'</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">(</span><span class="s1">'User API'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">beforeEach</span><span class="p">(</span><span class="kr">async</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">await</span> <span class="nx">prisma</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">deleteMany</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">afterAll</span><span class="p">(</span><span class="kr">async</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">await</span> <span class="nx">prisma</span><span class="p">.</span><span class="nx">$disconnect</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">describe</span><span class="p">(</span><span class="s1">'POST /api/users'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">'should create a new user'</span><span class="p">,</span> <span class="kr">async</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">res</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">request</span><span class="p">(</span><span class="nx">app</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="s1">'/api/users'</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">send</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="s1">'test@example.com'</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Test User'</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">password</span><span class="o">:</span> <span class="s1">'password123'</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">expect</span><span class="p">(</span><span class="mi">201</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">res</span><span class="p">.</span><span class="nx">body</span><span class="p">).</span><span class="nx">toHaveProperty</span><span class="p">(</span><span class="s1">'id'</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">res</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">email</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">'test@example.com'</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">'should return 400 for invalid email'</span><span class="p">,</span> <span class="kr">async</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">res</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">request</span><span class="p">(</span><span class="nx">app</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="s1">'/api/users'</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">send</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="s1">'invalid-email'</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Test User'</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">password</span><span class="o">:</span> <span class="s1">'password123'</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">expect</span><span class="p">(</span><span class="mi">400</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">res</span><span class="p">.</span><span class="nx">body</span><span class="p">).</span><span class="nx">toHaveProperty</span><span class="p">(</span><span class="s1">'errors'</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></div><h2 id="security-best-practices">Security Best Practices</h2> <ol> <li> <p><strong>Rate Limiting</strong></p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">rateLimit</span> <span class="kr">from</span> <span class="s1">'express-rate-limit'</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">limiter</span> <span class="o">=</span> <span class="nx">rateLimit</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">windowMs</span>: <span class="kt">15</span> <span class="o">*</span> <span class="mi">60</span> <span class="o">*</span> <span class="mi">1000</span><span class="p">,</span> <span class="c1">// 15 minutes </span></span></span><span class="line"><span class="cl"> <span class="nx">max</span>: <span class="kt">100</span> <span class="c1">// limit each IP to 100 requests per windowMs </span></span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="s1">'/api/'</span><span class="p">,</span> <span class="nx">limiter</span><span class="p">)</span> </span></span></code></pre></div></li> <li> <p><strong>Helmet</strong> for security headers</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">helmet</span> <span class="kr">from</span> <span class="s1">'helmet'</span> </span></span><span class="line"><span class="cl"><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">helmet</span><span class="p">())</span> </span></span></code></pre></div></li> <li> <p><strong>CORS</strong> configuration</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">cors</span> <span class="kr">from</span> <span class="s1">'cors'</span> </span></span><span class="line"><span class="cl"><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">cors</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">origin</span>: <span class="kt">process.env.ALLOWED_ORIGINS?.split</span><span class="p">(</span><span class="s1">','</span><span class="p">),</span> </span></span><span class="line"><span class="cl"> <span class="nx">credentials</span>: <span class="kt">true</span> </span></span><span class="line"><span class="cl"><span class="p">}))</span> </span></span></code></pre></div></li> <li> <p><strong>Input Sanitization</strong></p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">mongoSanitize</span> <span class="kr">from</span> <span class="s1">'express-mongo-sanitize'</span> </span></span><span class="line"><span class="cl"><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">mongoSanitize</span><span class="p">())</span> </span></span></code></pre></div></li> </ol> <h2 id="performance-optimization">Performance Optimization</h2> <h3 id="1-response-compression">1. Response Compression</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">compression</span> <span class="kr">from</span> <span class="s1">'compression'</span> </span></span><span class="line"><span class="cl"><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">compression</span><span class="p">())</span> </span></span></code></pre></div><h3 id="2-caching">2. Caching</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Redis</span> <span class="kr">from</span> <span class="s1">'ioredis'</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">redis</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Redis</span><span class="p">(</span><span class="nx">process</span><span class="p">.</span><span class="nx">env</span><span class="p">.</span><span class="nx">REDIS_URL</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">async</span> <span class="kd">function</span> <span class="nx">getCachedData</span><span class="p">(</span><span class="nx">key</span>: <span class="kt">string</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">cached</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">redis</span><span class="p">.</span><span class="kr">get</span><span class="p">(</span><span class="nx">key</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">cached</span><span class="p">)</span> <span class="k">return</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">cached</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">data</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetchFromDatabase</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="k">await</span> <span class="nx">redis</span><span class="p">.</span><span class="nx">setex</span><span class="p">(</span><span class="nx">key</span><span class="p">,</span> <span class="mi">3600</span><span class="p">,</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">data</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">data</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><h3 id="3-database-query-optimization">3. Database Query Optimization</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="c1">// Use pagination </span></span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">users</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">prisma</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">findMany</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">skip</span><span class="o">:</span> <span class="p">(</span><span class="nx">page</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)</span> <span class="o">*</span> <span class="nx">limit</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">take</span>: <span class="kt">limit</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">select</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span>: <span class="kt">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span>: <span class="kt">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span>: <span class="kt">true</span> </span></span><span class="line"><span class="cl"> <span class="c1">// Don't select sensitive fields like password </span></span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// Use indexes </span></span></span><span class="line"><span class="cl"><span class="err">@</span><span class="kd">@index</span><span class="p">([</span><span class="nx">email</span><span class="p">])</span> </span></span><span class="line"><span class="cl"><span class="err">@</span><span class="kd">@index</span><span class="p">([</span><span class="nx">createdAt</span><span class="p">])</span> </span></span></code></pre></div><h2 id="deployment-checklist">Deployment Checklist</h2> <ul> <li><input disabled="" type="checkbox"> Environment variables configured</li> <li><input disabled="" type="checkbox"> Database migrations run</li> <li><input disabled="" type="checkbox"> SSL/TLS certificates installed</li> <li><input disabled="" type="checkbox"> Rate limiting enabled</li> <li><input disabled="" type="checkbox"> Logging configured (Winston, Morgan)</li> <li><input disabled="" type="checkbox"> Error tracking (Sentry)</li> <li><input disabled="" type="checkbox"> Health check endpoint</li> <li><input disabled="" type="checkbox"> API documentation deployed</li> <li><input disabled="" type="checkbox"> Load testing completed</li> <li><input disabled="" type="checkbox"> Backup strategy implemented</li> </ul> <h2 id="monitoring">Monitoring</h2> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="c1">// Health check endpoint </span></span></span><span class="line"><span class="cl"><span class="nx">app</span><span class="p">.</span><span class="kr">get</span><span class="p">(</span><span class="s1">'/health'</span><span class="p">,</span> <span class="kr">async</span> <span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">try</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">await</span> <span class="nx">prisma</span><span class="p">.</span><span class="nx">$queryRaw</span><span class="sb">`SELECT 1`</span> </span></span><span class="line"><span class="cl"> <span class="nx">res</span><span class="p">.</span><span class="nx">status</span><span class="p">(</span><span class="mi">200</span><span class="p">).</span><span class="nx">json</span><span class="p">({</span> <span class="nx">status</span><span class="o">:</span> <span class="s1">'healthy'</span><span class="p">,</span> <span class="nx">timestamp</span>: <span class="kt">new</span> <span class="nb">Date</span><span class="p">()</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">res</span><span class="p">.</span><span class="nx">status</span><span class="p">(</span><span class="mi">503</span><span class="p">).</span><span class="nx">json</span><span class="p">({</span> <span class="nx">status</span><span class="o">:</span> <span class="s1">'unhealthy'</span><span class="p">,</span> <span class="nx">error</span>: <span class="kt">error.message</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></div><h2 id="conclusion">Conclusion</h2> <p>Building production-ready APIs requires attention to:</p> <ul> <li><strong>Structure</strong>: Organized code is maintainable code</li> <li><strong>Security</strong>: Authentication, validation, and rate limiting</li> <li><strong>Errors</strong>: Proper error handling and logging</li> <li><strong>Testing</strong>: Comprehensive test coverage</li> <li><strong>Documentation</strong>: Clear API docs for consumers</li> <li><strong>Performance</strong>: Caching and optimization</li> </ul> <p>The complete example code is available on .</p> <h2 id="resources">Resources</h2> <ul> <li> </li> <li> </li> <li> </li> </ul> <hr> <p>Questions? Leave a comment below or reach out on !</p> </article> <article> <h1>React Performance Optimization: A Practical Guide</h1> <p>Fri, 22 Nov 2024 00:00:00 +0000</p> <p>React apps can become slow as they grow. This guide covers practical techniques to identify bottlenecks and optimize performance, backed by real-world examples.</p> <h2 id="common-performance-issues">Common Performance Issues</h2> <p>Before optimizing, measure. Use React DevTools Profiler to identify:</p> <ul> <li>Unnecessary re-renders</li> <li>Heavy computations</li> <li>Large component trees</li> <li>Inefficient list rendering</li> </ul> <h2 id="1-prevent-unnecessary-re-renders">1. Prevent Unnecessary Re-renders</h2> <h3 id="problem-parent-re-renders-cascade">Problem: Parent Re-renders Cascade</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">// ❌ Bad: Child re-renders on every parent update </span></span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">Parent</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">[</span><span class="nx">count</span><span class="p">,</span> <span class="nx">setCount</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">button</span> <span class="na">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="p">=></span> <span class="nx">setCount</span><span class="p">(</span><span class="nx">count</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)}></span><span class="nx">Count</span><span class="o">:</span> <span class="p">{</span><span class="nx">count</span><span class="p">}</</span><span class="nt">button</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">ExpensiveChild</span> <span class="p">/></span> <span class="p">{</span><span class="cm">/* Re-renders even though it doesn't use count! */</span><span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><h3 id="solution-reactmemo">Solution: React.memo</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">// ✅ Good: Child only re-renders when props change </span></span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">ExpensiveChild</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">memo</span><span class="p">(()</span> <span class="p">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'ExpensiveChild rendered'</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p"><</span><span class="nt">div</span><span class="p">>{</span><span class="cm">/* expensive rendering */</span><span class="p">}</</span><span class="nt">div</span><span class="p">></span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></div><p><strong>When to use</strong>: Components that render often but rarely change props.</p> <h2 id="2-optimize-expensive-calculations">2. Optimize Expensive Calculations</h2> <h3 id="problem-recalculating-on-every-render">Problem: Recalculating on Every Render</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">// ❌ Bad: filterItems runs on every render </span></span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">ProductList</span><span class="p">({</span> <span class="nx">products</span><span class="p">,</span> <span class="nx">searchTerm</span> <span class="p">})</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">filtered</span> <span class="o">=</span> <span class="nx">products</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">p</span> <span class="p">=></span> </span></span><span class="line"><span class="cl"> <span class="nx">p</span><span class="p">.</span><span class="nx">name</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">().</span><span class="nx">includes</span><span class="p">(</span><span class="nx">searchTerm</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">())</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> <span class="c1">// Runs even when products/searchTerm haven't changed! </span></span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p"><</span><span class="nt">ul</span><span class="p">>{</span><span class="nx">filtered</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">p</span> <span class="p">=></span> <span class="p"><</span><span class="nt">li</span> <span class="na">key</span><span class="o">=</span><span class="p">{</span><span class="nx">p</span><span class="p">.</span><span class="nx">id</span><span class="p">}>{</span><span class="nx">p</span><span class="p">.</span><span class="nx">name</span><span class="p">}</</span><span class="nt">li</span><span class="p">>)}</</span><span class="nt">ul</span><span class="p">></span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><h3 id="solution-usememo">Solution: useMemo</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">// ✅ Good: Only recalculates when dependencies change </span></span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">ProductList</span><span class="p">({</span> <span class="nx">products</span><span class="p">,</span> <span class="nx">searchTerm</span> <span class="p">})</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">filtered</span> <span class="o">=</span> <span class="nx">useMemo</span><span class="p">(()</span> <span class="p">=></span> </span></span><span class="line"><span class="cl"> <span class="nx">products</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">p</span> <span class="p">=></span> </span></span><span class="line"><span class="cl"> <span class="nx">p</span><span class="p">.</span><span class="nx">name</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">().</span><span class="nx">includes</span><span class="p">(</span><span class="nx">searchTerm</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">())</span> </span></span><span class="line"><span class="cl"> <span class="p">),</span> </span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">products</span><span class="p">,</span> <span class="nx">searchTerm</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p"><</span><span class="nt">ul</span><span class="p">>{</span><span class="nx">filtered</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">p</span> <span class="p">=></span> <span class="p"><</span><span class="nt">li</span> <span class="na">key</span><span class="o">=</span><span class="p">{</span><span class="nx">p</span><span class="p">.</span><span class="nx">id</span><span class="p">}>{</span><span class="nx">p</span><span class="p">.</span><span class="nx">name</span><span class="p">}</</span><span class="nt">li</span><span class="p">>)}</</span><span class="nt">ul</span><span class="p">></span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><p><strong>When to use</strong>: Expensive calculations that don’t need to run on every render.</p> <h2 id="3-stabilize-function-references">3. Stabilize Function References</h2> <h3 id="problem-new-function-on-every-render">Problem: New Function on Every Render</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">// ❌ Bad: handleClick creates new function every render </span></span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">Parent</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">[</span><span class="nx">count</span><span class="p">,</span> <span class="nx">setCount</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">handleClick</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=></span> <span class="nx">setCount</span><span class="p">(</span><span class="nx">count</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p"><</span><span class="nt">Child</span> <span class="na">onClick</span><span class="o">=</span><span class="p">{</span><span class="nx">handleClick</span><span class="p">}</span> <span class="p">/></span> <span class="c1">// Child re-renders! </span></span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">Child</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">memo</span><span class="p">(({</span> <span class="nx">onClick</span> <span class="p">})</span> <span class="p">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p"><</span><span class="nt">button</span> <span class="na">onClick</span><span class="o">=</span><span class="p">{</span><span class="nx">onClick</span><span class="p">}></span><span class="nx">Click</span><span class="p"></</span><span class="nt">button</span><span class="p">></span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></div><h3 id="solution-usecallback">Solution: useCallback</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">// ✅ Good: handleClick reference stays stable </span></span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">Parent</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">[</span><span class="nx">count</span><span class="p">,</span> <span class="nx">setCount</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">handleClick</span> <span class="o">=</span> <span class="nx">useCallback</span><span class="p">(()</span> <span class="p">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setCount</span><span class="p">(</span><span class="nx">c</span> <span class="p">=></span> <span class="nx">c</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)</span> <span class="c1">// Use functional update! </span></span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="p">[])</span> <span class="c1">// Empty deps because we use functional update </span></span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p"><</span><span class="nt">Child</span> <span class="na">onClick</span><span class="o">=</span><span class="p">{</span><span class="nx">handleClick</span><span class="p">}</span> <span class="p">/></span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><p><strong>When to use</strong>: Passing callbacks to memoized child components.</p> <h2 id="4-virtual-lists-for-large-datasets">4. Virtual Lists for Large Datasets</h2> <h3 id="problem-rendering-10000-items">Problem: Rendering 10,000 Items</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">// ❌ Bad: Renders all 10,000 items (slow!) </span></span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">LargeList</span><span class="p">({</span> <span class="nx">items</span> <span class="p">})</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p">{</span><span class="nx">items</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">item</span> <span class="p">=></span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">key</span><span class="o">=</span><span class="p">{</span><span class="nx">item</span><span class="p">.</span><span class="nx">id</span><span class="p">}>{</span><span class="nx">item</span><span class="p">.</span><span class="nx">name</span><span class="p">}</</span><span class="nt">div</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p">))}</span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><h3 id="solution-react-window">Solution: react-window</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">// ✅ Good: Only renders visible items </span></span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">FixedSizeList</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">'react-window'</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">LargeList</span><span class="p">({</span> <span class="nx">items</span> <span class="p">})</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">Row</span> <span class="o">=</span> <span class="p">({</span> <span class="nx">index</span><span class="p">,</span> <span class="nx">style</span> <span class="p">})</span> <span class="p">=></span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="p">{</span><span class="nx">style</span><span class="p">}>{</span><span class="nx">items</span><span class="p">[</span><span class="nx">index</span><span class="p">].</span><span class="nx">name</span><span class="p">}</</span><span class="nt">div</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">FixedSizeList</span> </span></span><span class="line"><span class="cl"> <span class="na">height</span><span class="o">=</span><span class="p">{</span><span class="mi">600</span><span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="na">itemCount</span><span class="o">=</span><span class="p">{</span><span class="nx">items</span><span class="p">.</span><span class="nx">length</span><span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="na">itemSize</span><span class="o">=</span><span class="p">{</span><span class="mi">50</span><span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="na">width</span><span class="o">=</span><span class="s">"100%"</span> </span></span><span class="line"><span class="cl"> <span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p">{</span><span class="nx">Row</span><span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">FixedSizeList</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><p><strong>Result</strong>: 10,000 items render in <50ms instead of 2000ms!</p> <h2 id="5-code-splitting--lazy-loading">5. Code Splitting & Lazy Loading</h2> <h3 id="problem-large-bundle-size">Problem: Large Bundle Size</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">// ❌ Bad: Everything loads upfront </span></span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">AdminPanel</span> <span class="nx">from</span> <span class="s1">'./AdminPanel'</span> <span class="c1">// 500KB! </span></span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">UserDashboard</span> <span class="nx">from</span> <span class="s1">'./UserDashboard'</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">isAdmin</span> <span class="o">?</span> <span class="p"><</span><span class="nt">AdminPanel</span> <span class="p">/></span> <span class="o">:</span> <span class="p"><</span><span class="nt">UserDashboard</span> <span class="p">/></span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><h3 id="solution-reactlazy">Solution: React.lazy</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">// ✅ Good: Load components on demand </span></span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">AdminPanel</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">lazy</span><span class="p">(()</span> <span class="p">=></span> <span class="kr">import</span><span class="p">(</span><span class="s1">'./AdminPanel'</span><span class="p">))</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">UserDashboard</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">lazy</span><span class="p">(()</span> <span class="p">=></span> <span class="kr">import</span><span class="p">(</span><span class="s1">'./UserDashboard'</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">Suspense</span> <span class="na">fallback</span><span class="o">=</span><span class="p">{<</span><span class="nt">Loading</span> <span class="p">/>}></span> </span></span><span class="line"><span class="cl"> <span class="p">{</span><span class="nx">isAdmin</span> <span class="o">?</span> <span class="p"><</span><span class="nt">AdminPanel</span> <span class="p">/></span> <span class="o">:</span> <span class="p"><</span><span class="nt">UserDashboard</span> <span class="p">/>}</span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">Suspense</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><p><strong>Result</strong>: Initial bundle: 150KB instead of 650KB!</p> <h2 id="6-optimize-context-usage">6. Optimize Context Usage</h2> <h3 id="problem-context-causes-mass-re-renders">Problem: Context Causes Mass Re-renders</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">// ❌ Bad: Every consumer re-renders on any state change </span></span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">AppContext</span> <span class="o">=</span> <span class="nx">createContext</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">AppProvider</span><span class="p">({</span> <span class="nx">children</span> <span class="p">})</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">[</span><span class="nx">user</span><span class="p">,</span> <span class="nx">setUser</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="kc">null</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">[</span><span class="nx">theme</span><span class="p">,</span> <span class="nx">setTheme</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="s1">'light'</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">[</span><span class="nx">notifications</span><span class="p">,</span> <span class="nx">setNotifications</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">([])</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">AppContext.Provider</span> <span class="na">value</span><span class="o">=</span><span class="p">{{</span> <span class="nx">user</span><span class="p">,</span> <span class="nx">theme</span><span class="p">,</span> <span class="nx">notifications</span><span class="p">,</span> <span class="nx">setUser</span><span class="p">,</span> <span class="nx">setTheme</span> <span class="p">}}></span> </span></span><span class="line"><span class="cl"> <span class="p">{</span><span class="nx">children</span><span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">AppContext.Provider</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><h3 id="solution-split-contexts">Solution: Split Contexts</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">// ✅ Good: Separate contexts for different concerns </span></span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">UserContext</span> <span class="o">=</span> <span class="nx">createContext</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">ThemeContext</span> <span class="o">=</span> <span class="nx">createContext</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">NotificationContext</span> <span class="o">=</span> <span class="nx">createContext</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">AppProvider</span><span class="p">({</span> <span class="nx">children</span> <span class="p">})</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">[</span><span class="nx">user</span><span class="p">,</span> <span class="nx">setUser</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="kc">null</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">[</span><span class="nx">theme</span><span class="p">,</span> <span class="nx">setTheme</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="s1">'light'</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">[</span><span class="nx">notifications</span><span class="p">,</span> <span class="nx">setNotifications</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">([])</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">UserContext.Provider</span> <span class="na">value</span><span class="o">=</span><span class="p">{{</span> <span class="nx">user</span><span class="p">,</span> <span class="nx">setUser</span> <span class="p">}}></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">ThemeContext.Provider</span> <span class="na">value</span><span class="o">=</span><span class="p">{{</span> <span class="nx">theme</span><span class="p">,</span> <span class="nx">setTheme</span> <span class="p">}}></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">NotificationContext.Provider</span> <span class="na">value</span><span class="o">=</span><span class="p">{{</span> <span class="nx">notifications</span> <span class="p">}}></span> </span></span><span class="line"><span class="cl"> <span class="p">{</span><span class="nx">children</span><span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">NotificationContext.Provider</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">ThemeContext.Provider</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">UserContext.Provider</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><p><strong>Result</strong>: Components only re-render when their specific context changes!</p> <h2 id="7-debounce-expensive-operations">7. Debounce Expensive Operations</h2> <h3 id="problem-search-triggers-on-every-keystroke">Problem: Search Triggers on Every Keystroke</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">// ❌ Bad: API call on every keystroke </span></span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">SearchBox</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">[</span><span class="nx">query</span><span class="p">,</span> <span class="nx">setQuery</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="s1">''</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">useEffect</span><span class="p">(()</span> <span class="p">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">searchAPI</span><span class="p">(</span><span class="nx">query</span><span class="p">)</span> <span class="c1">// Called 10+ times as user types "javascript"! </span></span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="p">[</span><span class="nx">query</span><span class="p">])</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p"><</span><span class="nt">input</span> <span class="na">value</span><span class="o">=</span><span class="p">{</span><span class="nx">query</span><span class="p">}</span> <span class="na">onChange</span><span class="o">=</span><span class="p">{</span><span class="nx">e</span> <span class="p">=></span> <span class="nx">setQuery</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">)}</span> <span class="p">/></span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><h3 id="solution-custom-debounce-hook">Solution: Custom Debounce Hook</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">// ✅ Good: API call only after user stops typing </span></span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">useDebounce</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">delay</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">[</span><span class="nx">debouncedValue</span><span class="p">,</span> <span class="nx">setDebouncedValue</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">useEffect</span><span class="p">(()</span> <span class="p">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">handler</span> <span class="o">=</span> <span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=></span> <span class="nx">setDebouncedValue</span><span class="p">(</span><span class="nx">value</span><span class="p">),</span> <span class="nx">delay</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">()</span> <span class="p">=></span> <span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">handler</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="p">[</span><span class="nx">value</span><span class="p">,</span> <span class="nx">delay</span><span class="p">])</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">debouncedValue</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">SearchBox</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">[</span><span class="nx">query</span><span class="p">,</span> <span class="nx">setQuery</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="s1">''</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">debouncedQuery</span> <span class="o">=</span> <span class="nx">useDebounce</span><span class="p">(</span><span class="nx">query</span><span class="p">,</span> <span class="mi">300</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">useEffect</span><span class="p">(()</span> <span class="p">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">debouncedQuery</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">searchAPI</span><span class="p">(</span><span class="nx">debouncedQuery</span><span class="p">)</span> <span class="c1">// Called once after 300ms pause! </span></span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="p">[</span><span class="nx">debouncedQuery</span><span class="p">])</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p"><</span><span class="nt">input</span> <span class="na">value</span><span class="o">=</span><span class="p">{</span><span class="nx">query</span><span class="p">}</span> <span class="na">onChange</span><span class="o">=</span><span class="p">{</span><span class="nx">e</span> <span class="p">=></span> <span class="nx">setQuery</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">)}</span> <span class="p">/></span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><h2 id="8-key-props-matter">8. Key Props Matter</h2> <h3 id="problem-poor-key-choices">Problem: Poor Key Choices</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">// ❌ Bad: Using index as key causes issues </span></span></span><span class="line"><span class="cl"><span class="p">{</span><span class="nx">items</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">item</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="p">=></span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">key</span><span class="o">=</span><span class="p">{</span><span class="nx">index</span><span class="p">}>{</span><span class="nx">item</span><span class="p">.</span><span class="nx">name</span><span class="p">}</</span><span class="nt">div</span><span class="p">></span> </span></span><span class="line"><span class="cl"><span class="p">))}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// When items reorder, React thinks they're different components! </span></span></span></code></pre></div><h3 id="solution-stable-unique-keys">Solution: Stable, Unique Keys</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">// ✅ Good: Use stable IDs </span></span></span><span class="line"><span class="cl"><span class="p">{</span><span class="nx">items</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">item</span> <span class="p">=></span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">key</span><span class="o">=</span><span class="p">{</span><span class="nx">item</span><span class="p">.</span><span class="nx">id</span><span class="p">}>{</span><span class="nx">item</span><span class="p">.</span><span class="nx">name</span><span class="p">}</</span><span class="nt">div</span><span class="p">></span> </span></span><span class="line"><span class="cl"><span class="p">))}</span> </span></span></code></pre></div><h2 id="real-world-example-optimizing-a-dashboard">Real-World Example: Optimizing a Dashboard</h2> <p><strong>Before</strong>: Dashboard with 20 widgets, each fetching data, all re-rendering on any state change.</p> <p><strong>After optimization</strong>:</p> <ol> <li>Split into separate contexts for user, theme, data</li> <li>Memoized individual widgets with React.memo</li> <li>Used useMemo for data transformations</li> <li>Lazy loaded heavy charts</li> <li>Debounced filter inputs</li> </ol> <p><strong>Result</strong>:</p> <ul> <li>Initial render: 3000ms → 800ms</li> <li>Interactions: 200ms → 50ms</li> <li>Bundle size: 800KB → 250KB (initial) + 550KB (lazy)</li> </ul> <h2 id="profiling-workflow">Profiling Workflow</h2> <ol> <li> <p><strong>React DevTools Profiler</strong></p> <ul> <li>Record interaction</li> <li>Identify components taking longest</li> <li>Check why they rendered (props change? parent render?)</li> </ul> </li> <li> <p><strong>Chrome DevTools Performance</strong></p> <ul> <li>Record performance</li> <li>Look for long tasks (>50ms)</li> <li>Check FPS during animations</li> </ul> </li> <li> <p><strong>Lighthouse</strong></p> <ul> <li>Run audit</li> <li>Focus on “Time to Interactive”</li> <li>Check bundle sizes</li> </ul> </li> </ol> <h2 id="common-pitfalls">Common Pitfalls</h2> <p>❌ <strong>Don’t</strong> optimize prematurely<br> ✅ <strong>Do</strong> measure first, optimize bottlenecks</p> <p>❌ <strong>Don’t</strong> memo everything<br> ✅ <strong>Do</strong> memo expensive components</p> <p>❌ <strong>Don’t</strong> use useMemo for simple calculations<br> ✅ <strong>Do</strong> use for actual performance issues</p> <p>❌ <strong>Don’t</strong> forget dependency arrays<br> ✅ <strong>Do</strong> include all dependencies (or use ESLint plugin)</p> <h2 id="performance-checklist">Performance Checklist</h2> <ul> <li><input disabled="" type="checkbox"> Use React DevTools Profiler to identify issues</li> <li><input disabled="" type="checkbox"> Memoize expensive child components</li> <li><input disabled="" type="checkbox"> Use useMemo for heavy calculations</li> <li><input disabled="" type="checkbox"> Use useCallback for callbacks to memoized children</li> <li><input disabled="" type="checkbox"> Implement code splitting for large components</li> <li><input disabled="" type="checkbox"> Use virtual lists for large datasets</li> <li><input disabled="" type="checkbox"> Debounce expensive operations (search, API calls)</li> <li><input disabled="" type="checkbox"> Use proper key props for lists</li> <li><input disabled="" type="checkbox"> Split contexts to minimize re-renders</li> <li><input disabled="" type="checkbox"> Optimize bundle size (tree shaking, minification)</li> </ul> <h2 id="tools--resources">Tools & Resources</h2> <ul> <li> </li> <li> </li> <li> </li> <li> </li> </ul> <h2 id="conclusion">Conclusion</h2> <p>Performance optimization is about:</p> <ol> <li><strong>Measuring</strong> before optimizing</li> <li><strong>Identifying</strong> actual bottlenecks</li> <li><strong>Applying</strong> targeted fixes</li> <li><strong>Verifying</strong> improvements</li> </ol> <p>Don’t optimize blindly—profile, fix, measure, repeat!</p> <hr> <p><strong>Want to dive deeper?</strong> Check out my .</p> <p>Questions? Reach out on !</p> </article> <article> <h1>E-Commerce Platform</h1> <p>Fri, 15 Nov 2024 00:00:00 +0000</p> <p>A modern, scalable e-commerce platform built from scratch with performance and user experience as top priorities.</p> <h2 id="overview">Overview</h2> <p>Built a complete e-commerce solution for a mid-sized retail company looking to expand online. The platform handles everything from product catalog management to payment processing and order fulfillment.</p> <h2 id="key-features">Key Features</h2> <h3 id="customer-facing">Customer-Facing</h3> <ul> <li><strong>Product Catalog</strong> - Dynamic filtering, sorting, and search with instant results</li> <li><strong>Shopping Cart</strong> - Real-time inventory checking and price calculations</li> <li><strong>Checkout</strong> - Secure payment processing via Stripe with Apple Pay/Google Pay support</li> <li><strong>Order Tracking</strong> - Real-time order status updates with email notifications</li> <li><strong>User Accounts</strong> - Profile management, order history, and saved addresses</li> </ul> <h3 id="admin-dashboard">Admin Dashboard</h3> <ul> <li><strong>Inventory Management</strong> - Real-time stock tracking and low-stock alerts</li> <li><strong>Order Management</strong> - Bulk order processing and fulfillment workflow</li> <li><strong>Analytics</strong> - Sales dashboards, customer insights, and revenue reporting</li> <li><strong>Product Management</strong> - Easy product creation with image uploads and variants</li> </ul> <h2 id="technical-highlights">Technical Highlights</h2> <h3 id="performance-optimization">Performance Optimization</h3> <ul> <li>Implemented Redis caching reducing database queries by 70%</li> <li>Optimized images with WebP format and lazy loading</li> <li>Server-side rendering for critical pages improving SEO and load times</li> <li>CDN integration for global content delivery</li> </ul> <h3 id="scalability">Scalability</h3> <ul> <li>Microservices architecture allowing independent scaling</li> <li>Horizontal scaling with load balancing</li> <li>Database read replicas for improved query performance</li> <li>Message queues for async processing (order emails, inventory updates)</li> </ul> <h3 id="security">Security</h3> <ul> <li>JWT authentication with refresh tokens</li> <li>Rate limiting to prevent abuse</li> <li>Input validation and sanitization</li> <li>PCI-compliant payment processing via Stripe</li> </ul> <h2 id="architecture">Architecture</h2> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">┌─────────────┐ ┌──────────────┐ ┌─────────────┐ </span></span><span class="line"><span class="cl">│ React SPA │────▶│ REST API │────▶│ PostgreSQL │ </span></span><span class="line"><span class="cl">└─────────────┘ │ (Express) │ └─────────────┘ </span></span><span class="line"><span class="cl"> └──────┬───────┘ </span></span><span class="line"><span class="cl"> │ </span></span><span class="line"><span class="cl"> ┌──────▼───────┐ </span></span><span class="line"><span class="cl"> │ Redis │ </span></span><span class="line"><span class="cl"> │ (Cache) │ </span></span><span class="line"><span class="cl"> └──────────────┘ </span></span></code></pre></div><h2 id="challenges--solutions">Challenges & Solutions</h2> <h3 id="challenge-1-inventory-sync">Challenge 1: Inventory Sync</h3> <p><strong>Problem</strong>: Multiple users buying same product simultaneously causing overselling</p> <p><strong>Solution</strong>: Implemented optimistic locking with Redis to ensure inventory accuracy during concurrent purchases</p> <h3 id="challenge-2-payment-processing">Challenge 2: Payment Processing</h3> <p><strong>Problem</strong>: Handling payment failures gracefully while maintaining order integrity</p> <p><strong>Solution</strong>: Built robust state machine for order processing with automatic retry logic and customer notifications</p> <h3 id="challenge-3-performance-at-scale">Challenge 3: Performance at Scale</h3> <p><strong>Problem</strong>: Slow page loads during traffic spikes</p> <p><strong>Solution</strong>: Implemented multi-layer caching strategy (CDN, Redis, in-memory) and database query optimization</p> <h2 id="results">Results</h2> <ul> <li><strong>Performance</strong>: 60% faster page load times compared to previous platform</li> <li><strong>Conversion</strong>: 25% increase in conversion rate due to improved UX</li> <li><strong>Uptime</strong>: 99.9% uptime over 6 months in production</li> <li><strong>Scale</strong>: Successfully handled Black Friday with 10k concurrent users</li> <li><strong>Revenue</strong>: Processing over $50k in monthly transactions</li> </ul> <h2 id="tech-stack-details">Tech Stack Details</h2> <p><strong>Frontend</strong></p> <ul> <li>React 18 with TypeScript</li> <li>Tailwind CSS for styling</li> <li>React Query for data fetching</li> <li>React Hook Form for forms</li> </ul> <p><strong>Backend</strong></p> <ul> <li>Node.js with Express</li> <li>PostgreSQL with Prisma ORM</li> <li>Redis for caching and sessions</li> <li>Bull for job queues</li> </ul> <p><strong>Infrastructure</strong></p> <ul> <li>Docker containers</li> <li>AWS EC2 for hosting</li> <li>AWS S3 for image storage</li> <li>Cloudflare CDN</li> <li>GitHub Actions for CI/CD</li> </ul> <p><strong>Payment & Services</strong></p> <ul> <li>Stripe for payments</li> <li>SendGrid for emails</li> <li>Sentry for error tracking</li> </ul> <h2 id="future-improvements">Future Improvements</h2> <ul> <li><input disabled="" type="checkbox"> Mobile app (React Native)</li> <li><input disabled="" type="checkbox"> Multi-language support</li> <li><input disabled="" type="checkbox"> Wishlist and product recommendations</li> <li><input disabled="" type="checkbox"> Live chat support</li> <li><input disabled="" type="checkbox"> Advanced analytics dashboard</li> </ul> <h2 id="screenshots">Screenshots</h2> <p><em>(Screenshots would go here in production)</em></p> <h2 id="lessons-learned">Lessons Learned</h2> <ol> <li><strong>Start with Performance</strong>: Built with performance in mind from day one rather than optimizing later</li> <li><strong>Testing Matters</strong>: Comprehensive test suite caught critical bugs before production</li> <li><strong>Monitor Everything</strong>: Proper logging and monitoring essential for maintaining uptime</li> <li><strong>User Feedback</strong>: Regular user testing revealed UX issues we wouldn’t have found otherwise</li> </ol> <hr> <p><strong>Project Status</strong>: ✅ Live in Production<br> <strong>GitHub</strong>: <br> <strong>Demo</strong>: </p> </article> <article> <h1>Docker Deployment Guide: From Development to Production</h1> <p>Tue, 15 Oct 2024 00:00:00 +0000</p> <p>Docker simplifies deployment by packaging your application with all dependencies. This guide covers containerizing apps, optimizing images, and production deployment.</p> <h2 id="why-docker">Why Docker?</h2> <p><strong>Problems Docker solves</strong>:</p> <ul> <li>❌ “Works on my machine” syndrome</li> <li>❌ Complex dependency management</li> <li>❌ Environment inconsistencies</li> <li>❌ Difficult scaling</li> </ul> <p><strong>Benefits</strong>:</p> <ul> <li>✅ Consistent environments (dev = prod)</li> <li>✅ Easy scaling</li> <li>✅ Simplified deployment</li> <li>✅ Isolation and security</li> </ul> <h2 id="basic-dockerfile">Basic Dockerfile</h2> <p>For a Node.js application:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-dockerfile" data-lang="dockerfile"><span class="line"><span class="cl"><span class="c"># Use official Node image</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">FROM</span><span class="w"> </span><span class="s">node:18-alpine</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Set working directory</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">WORKDIR</span><span class="w"> </span><span class="s">/app</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Copy package files</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">COPY</span> package*.json ./<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Install dependencies</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">RUN</span> npm ci --only<span class="o">=</span>production<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Copy application code</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">COPY</span> . .<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Expose port</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">EXPOSE</span><span class="w"> </span><span class="s">3000</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Start application</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">CMD</span> <span class="p">[</span><span class="s2">"node"</span><span class="p">,</span> <span class="s2">"server.js"</span><span class="p">]</span><span class="err"> </span></span></span></code></pre></div><p>Build and run:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">docker build -t my-app . </span></span><span class="line"><span class="cl">docker run -p 3000:3000 my-app </span></span></code></pre></div><h2 id="multi-stage-builds-optimization">Multi-Stage Builds (Optimization)</h2> <p>Reduce image size with multi-stage builds:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-dockerfile" data-lang="dockerfile"><span class="line"><span class="cl"><span class="c"># Stage 1: Build</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">FROM</span><span class="w"> </span><span class="s">node:18-alpine</span><span class="w"> </span><span class="k">AS</span><span class="w"> </span><span class="s">builder</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">WORKDIR</span><span class="w"> </span><span class="s">/app</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">COPY</span> package*.json ./<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">RUN</span> npm ci<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">COPY</span> . .<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">RUN</span> npm run build<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Stage 2: Production</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">FROM</span><span class="w"> </span><span class="s">node:18-alpine</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">WORKDIR</span><span class="w"> </span><span class="s">/app</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Copy only necessary files from builder</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">COPY</span> --from<span class="o">=</span>builder /app/dist ./dist<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">COPY</span> --from<span class="o">=</span>builder /app/node_modules ./node_modules<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">COPY</span> package*.json ./<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">EXPOSE</span><span class="w"> </span><span class="s">3000</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">CMD</span> <span class="p">[</span><span class="s2">"node"</span><span class="p">,</span> <span class="s2">"dist/server.js"</span><span class="p">]</span><span class="err"> </span></span></span></code></pre></div><p><strong>Result</strong>: Image size reduced from 800MB → 150MB!</p> <h2 id="docker-compose-for-local-development">Docker Compose for Local Development</h2> <p><code>docker-compose.yml</code>:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">version</span><span class="p">:</span><span class="w"> </span><span class="s1">'3.8'</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">services</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">app</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">build</span><span class="p">:</span><span class="w"> </span><span class="l">.</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">ports</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="s2">"3000:3000"</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">environment</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">NODE_ENV=development</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">DATABASE_URL=postgresql://user:pass@db:5432/mydb</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">volumes</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">.:/app</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">/app/node_modules</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">depends_on</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">db</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">redis</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">db</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">image</span><span class="p">:</span><span class="w"> </span><span class="l">postgres:15-alpine</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">environment</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">POSTGRES_USER=user</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">POSTGRES_PASSWORD=pass</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">POSTGRES_DB=mydb</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">volumes</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">postgres_data:/var/lib/postgresql/data</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">ports</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="s2">"5432:5432"</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">redis</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">image</span><span class="p">:</span><span class="w"> </span><span class="l">redis:7-alpine</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">ports</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="s2">"6379:6379"</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">volumes</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">postgres_data</span><span class="p">:</span><span class="w"> </span></span></span></code></pre></div><p>Start everything:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">docker-compose up -d </span></span></code></pre></div><h2 id="environment-variables">Environment Variables</h2> <p>Never hardcode secrets! Use <code>.env</code> file:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-env" data-lang="env"><span class="line"><span class="cl"><span class="c1"># .env (add to .gitignore!)</span> </span></span><span class="line"><span class="cl"><span class="nv">DATABASE_URL</span><span class="o">=</span>postgresql://user:pass@localhost:5432/mydb </span></span><span class="line"><span class="cl"><span class="nv">JWT_SECRET</span><span class="o">=</span>your-secret-key </span></span><span class="line"><span class="cl"><span class="nv">API_KEY</span><span class="o">=</span>your-api-key </span></span></code></pre></div><p>Reference in docker-compose:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">services</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">app</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">env_file</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">.env</span><span class="w"> </span></span></span></code></pre></div><h2 id="production-dockerfile">Production Dockerfile</h2> <p>Optimized for production:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-dockerfile" data-lang="dockerfile"><span class="line"><span class="cl"><span class="k">FROM</span><span class="w"> </span><span class="s">node:18-alpine</span><span class="w"> </span><span class="k">AS</span><span class="w"> </span><span class="s">builder</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">WORKDIR</span><span class="w"> </span><span class="s">/app</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Copy package files</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">COPY</span> package*.json ./<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Install all dependencies (including devDependencies)</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">RUN</span> npm ci<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Copy source</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">COPY</span> . .<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Build application</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">RUN</span> npm run build<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Remove devDependencies</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">RUN</span> npm prune --production<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Production stage</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">FROM</span><span class="w"> </span><span class="s">node:18-alpine</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Add non-root user</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">RUN</span> addgroup -g <span class="m">1001</span> -S nodejs <span class="o">&&</span> <span class="se">\ </span></span></span><span class="line"><span class="cl"> adduser -S nodejs -u <span class="m">1001</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">WORKDIR</span><span class="w"> </span><span class="s">/app</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Copy built app from builder</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">COPY</span> --from<span class="o">=</span>builder --chown<span class="o">=</span>nodejs:nodejs /app/dist ./dist<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">COPY</span> --from<span class="o">=</span>builder --chown<span class="o">=</span>nodejs:nodejs /app/node_modules ./node_modules<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">COPY</span> --from<span class="o">=</span>builder --chown<span class="o">=</span>nodejs:nodejs /app/package*.json ./<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Use non-root user</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">USER</span><span class="w"> </span><span class="s">nodejs</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Health check</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">HEALTHCHECK</span> --interval<span class="o">=</span>30s --timeout<span class="o">=</span>3s --start-period<span class="o">=</span>5s --retries<span class="o">=</span><span class="m">3</span> <span class="se">\ </span></span></span><span class="line"><span class="cl"> CMD node healthcheck.js<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">EXPOSE</span><span class="w"> </span><span class="s">3000</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">CMD</span> <span class="p">[</span><span class="s2">"node"</span><span class="p">,</span> <span class="s2">"dist/server.js"</span><span class="p">]</span><span class="err"> </span></span></span></code></pre></div><h2 id="image-optimization-tips">Image Optimization Tips</h2> <h3 id="1-use-dockerignore">1. Use .dockerignore</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">node_modules </span></span><span class="line"><span class="cl">npm-debug.log </span></span><span class="line"><span class="cl">.git </span></span><span class="line"><span class="cl">.env </span></span><span class="line"><span class="cl">.DS_Store </span></span><span class="line"><span class="cl">*.md </span></span><span class="line"><span class="cl">.vscode </span></span><span class="line"><span class="cl">coverage </span></span><span class="line"><span class="cl">.github </span></span></code></pre></div><h3 id="2-layer-caching">2. Layer Caching</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-dockerfile" data-lang="dockerfile"><span class="line"><span class="cl"><span class="c"># ❌ Bad: Changes to code invalidate ALL layers</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">COPY</span> . .<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">RUN</span> npm ci<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># ✅ Good: Package changes don't rebuild code</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">COPY</span> package*.json ./<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">RUN</span> npm ci<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">COPY</span> . .<span class="err"> </span></span></span></code></pre></div><h3 id="3-use-alpine-images">3. Use Alpine Images</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-dockerfile" data-lang="dockerfile"><span class="line"><span class="cl"><span class="c"># Large: node:18 (900MB)</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">FROM</span><span class="w"> </span><span class="s">node:18</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Small: node:18-alpine (150MB)</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">FROM</span><span class="w"> </span><span class="s">node:18-alpine</span><span class="err"> </span></span></span></code></pre></div><h3 id="4-combine-run-commands">4. Combine RUN Commands</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-dockerfile" data-lang="dockerfile"><span class="line"><span class="cl"><span class="c"># ❌ Bad: Multiple layers</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">RUN</span> apt-get update<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">RUN</span> apt-get install -y curl<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">RUN</span> apt-get clean<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># ✅ Good: Single layer</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">RUN</span> apt-get update <span class="o">&&</span> <span class="se">\ </span></span></span><span class="line"><span class="cl"> apt-get install -y curl <span class="o">&&</span> <span class="se">\ </span></span></span><span class="line"><span class="cl"> apt-get clean <span class="o">&&</span> <span class="se">\ </span></span></span><span class="line"><span class="cl"> rm -rf /var/lib/apt/lists/*<span class="err"> </span></span></span></code></pre></div><h2 id="deploying-to-aws-ecs">Deploying to AWS ECS</h2> <h3 id="1-build-and-push-to-ecr">1. Build and Push to ECR</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="c1"># Authenticate Docker to ECR</span> </span></span><span class="line"><span class="cl">aws ecr get-login-password --region us-east-1 <span class="p">|</span> <span class="se">\ </span></span></span><span class="line"><span class="cl"> docker login --username AWS --password-stdin 123456789.dkr.ecr.us-east-1.amazonaws.com </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1"># Build image</span> </span></span><span class="line"><span class="cl">docker build -t my-app . </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1"># Tag image</span> </span></span><span class="line"><span class="cl">docker tag my-app:latest 123456789.dkr.ecr.us-east-1.amazonaws.com/my-app:latest </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1"># Push to ECR</span> </span></span><span class="line"><span class="cl">docker push 123456789.dkr.ecr.us-east-1.amazonaws.com/my-app:latest </span></span></code></pre></div><h3 id="2-ecs-task-definition">2. ECS Task Definition</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">"family"</span><span class="p">:</span> <span class="s2">"my-app"</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"networkMode"</span><span class="p">:</span> <span class="s2">"awsvpc"</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"requiresCompatibilities"</span><span class="p">:</span> <span class="p">[</span><span class="s2">"FARGATE"</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nt">"cpu"</span><span class="p">:</span> <span class="s2">"256"</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"memory"</span><span class="p">:</span> <span class="s2">"512"</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"containerDefinitions"</span><span class="p">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">"name"</span><span class="p">:</span> <span class="s2">"my-app"</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"image"</span><span class="p">:</span> <span class="s2">"123456789.dkr.ecr.us-east-1.amazonaws.com/my-app:latest"</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"portMappings"</span><span class="p">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">"containerPort"</span><span class="p">:</span> <span class="mi">3000</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"protocol"</span><span class="p">:</span> <span class="s2">"tcp"</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nt">"environment"</span><span class="p">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">"name"</span><span class="p">:</span> <span class="s2">"NODE_ENV"</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"value"</span><span class="p">:</span> <span class="s2">"production"</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nt">"secrets"</span><span class="p">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">"name"</span><span class="p">:</span> <span class="s2">"DATABASE_URL"</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"valueFrom"</span><span class="p">:</span> <span class="s2">"arn:aws:secretsmanager:..."</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nt">"logConfiguration"</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">"logDriver"</span><span class="p">:</span> <span class="s2">"awslogs"</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"options"</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">"awslogs-group"</span><span class="p">:</span> <span class="s2">"/ecs/my-app"</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"awslogs-region"</span><span class="p">:</span> <span class="s2">"us-east-1"</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"awslogs-stream-prefix"</span><span class="p">:</span> <span class="s2">"ecs"</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><h2 id="docker-security-best-practices">Docker Security Best Practices</h2> <h3 id="1-use-non-root-user">1. Use Non-Root User</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-dockerfile" data-lang="dockerfile"><span class="line"><span class="cl"><span class="c"># Add user</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">RUN</span> addgroup -g <span class="m">1001</span> -S nodejs <span class="o">&&</span> <span class="se">\ </span></span></span><span class="line"><span class="cl"> adduser -S nodejs -u <span class="m">1001</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Switch to user</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">USER</span><span class="w"> </span><span class="s">nodejs</span><span class="err"> </span></span></span></code></pre></div><h3 id="2-scan-for-vulnerabilities">2. Scan for Vulnerabilities</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="c1"># Using Trivy</span> </span></span><span class="line"><span class="cl">docker run --rm -v /var/run/docker.sock:/var/run/docker.sock <span class="se">\ </span></span></span><span class="line"><span class="cl"> aquasec/trivy image my-app:latest </span></span></code></pre></div><h3 id="3-keep-base-images-updated">3. Keep Base Images Updated</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-dockerfile" data-lang="dockerfile"><span class="line"><span class="cl"><span class="c"># ✅ Pin specific version, update regularly</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">FROM</span><span class="w"> </span><span class="s">node:18.19.0-alpine</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># ❌ Avoid 'latest' tag</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">FROM</span><span class="w"> </span><span class="s">node:latest</span><span class="err"> </span></span></span></code></pre></div><h3 id="4-read-only-filesystem">4. Read-Only Filesystem</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">services</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">app</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">read_only</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">tmpfs</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">/tmp</span><span class="w"> </span></span></span></code></pre></div><h2 id="health-checks">Health Checks</h2> <p>Simple health check endpoint:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// healthcheck.js </span></span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">http</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'http'</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">options</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">host</span><span class="o">:</span> <span class="s1">'localhost'</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">port</span><span class="o">:</span> <span class="mi">3000</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">path</span><span class="o">:</span> <span class="s1">'/health'</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">timeout</span><span class="o">:</span> <span class="mi">2000</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">request</span> <span class="o">=</span> <span class="nx">http</span><span class="p">.</span><span class="nx">request</span><span class="p">(</span><span class="nx">options</span><span class="p">,</span> <span class="p">(</span><span class="nx">res</span><span class="p">)</span> <span class="p">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">res</span><span class="p">.</span><span class="nx">statusCode</span> <span class="o">===</span> <span class="mi">200</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">process</span><span class="p">.</span><span class="nx">exit</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">process</span><span class="p">.</span><span class="nx">exit</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">request</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'error'</span><span class="p">,</span> <span class="p">()</span> <span class="p">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">process</span><span class="p">.</span><span class="nx">exit</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">request</span><span class="p">.</span><span class="nx">end</span><span class="p">()</span> </span></span></code></pre></div><h2 id="monitoring--logging">Monitoring & Logging</h2> <h3 id="container-logs">Container Logs</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="c1"># View logs</span> </span></span><span class="line"><span class="cl">docker logs my-app </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1"># Follow logs</span> </span></span><span class="line"><span class="cl">docker logs -f my-app </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1"># Last 100 lines</span> </span></span><span class="line"><span class="cl">docker logs --tail <span class="m">100</span> my-app </span></span></code></pre></div><h3 id="docker-stats">Docker Stats</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="c1"># View resource usage</span> </span></span><span class="line"><span class="cl">docker stats </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1"># Specific container</span> </span></span><span class="line"><span class="cl">docker stats my-app </span></span></code></pre></div><h2 id="common-issues--solutions">Common Issues & Solutions</h2> <h3 id="issue-image-too-large">Issue: Image Too Large</h3> <p><strong>Solution</strong>: Multi-stage builds, Alpine images, .dockerignore</p> <h3 id="issue-slow-builds">Issue: Slow Builds</h3> <p><strong>Solution</strong>: Optimize layer caching, use BuildKit</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="nv">DOCKER_BUILDKIT</span><span class="o">=</span><span class="m">1</span> docker build -t my-app . </span></span></code></pre></div><h3 id="issue-container-wont-start">Issue: Container Won’t Start</h3> <p><strong>Solution</strong>: Check logs, verify CMD/ENTRYPOINT</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">docker logs container-id </span></span><span class="line"><span class="cl">docker inspect container-id </span></span></code></pre></div><h2 id="cicd-pipeline-example-github-actions">CI/CD Pipeline Example (GitHub Actions)</h2> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">Deploy</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">on</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">push</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">branches</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="l">main]</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">jobs</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">deploy</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">runs-on</span><span class="p">:</span><span class="w"> </span><span class="l">ubuntu-latest</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">steps</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">uses</span><span class="p">:</span><span class="w"> </span><span class="l">actions/checkout@v3</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">Configure AWS credentials</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">uses</span><span class="p">:</span><span class="w"> </span><span class="l">aws-actions/configure-aws-credentials@v2</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">with</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">aws-access-key-id</span><span class="p">:</span><span class="w"> </span><span class="l">${{ secrets.AWS_ACCESS_KEY_ID }}</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">aws-secret-access-key</span><span class="p">:</span><span class="w"> </span><span class="l">${{ secrets.AWS_SECRET_ACCESS_KEY }}</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">aws-region</span><span class="p">:</span><span class="w"> </span><span class="l">us-east-1</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">Login to Amazon ECR</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">id</span><span class="p">:</span><span class="w"> </span><span class="l">login-ecr</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">uses</span><span class="p">:</span><span class="w"> </span><span class="l">aws-actions/amazon-ecr-login@v1</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">Build and push image</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">env</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">ECR_REGISTRY</span><span class="p">:</span><span class="w"> </span><span class="l">${{ steps.login-ecr.outputs.registry }}</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">ECR_REPOSITORY</span><span class="p">:</span><span class="w"> </span><span class="l">my-app</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">IMAGE_TAG</span><span class="p">:</span><span class="w"> </span><span class="l">${{ github.sha }}</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">run</span><span class="p">:</span><span class="w"> </span><span class="p">|</span><span class="sd"> </span></span></span><span class="line"><span class="cl"><span class="sd"> docker build -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG . </span></span></span><span class="line"><span class="cl"><span class="sd"> docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">Update ECS service</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">run</span><span class="p">:</span><span class="w"> </span><span class="p">|</span><span class="sd"> </span></span></span><span class="line"><span class="cl"><span class="sd"> aws ecs update-service --cluster my-cluster \ </span></span></span><span class="line"><span class="cl"><span class="sd"> --service my-app --force-new-deployment</span><span class="w"> </span></span></span></code></pre></div><h2 id="best-practices-checklist">Best Practices Checklist</h2> <ul> <li><input disabled="" type="checkbox"> Use multi-stage builds</li> <li><input disabled="" type="checkbox"> Use .dockerignore</li> <li><input disabled="" type="checkbox"> Run as non-root user</li> <li><input disabled="" type="checkbox"> Pin base image versions</li> <li><input disabled="" type="checkbox"> Scan for vulnerabilities</li> <li><input disabled="" type="checkbox"> Implement health checks</li> <li><input disabled="" type="checkbox"> Use environment variables for config</li> <li><input disabled="" type="checkbox"> Keep images small (<500MB)</li> <li><input disabled="" type="checkbox"> Tag images properly (not just ’latest')</li> <li><input disabled="" type="checkbox"> Set up logging and monitoring</li> </ul> <h2 id="resources">Resources</h2> <ul> <li> </li> <li> </li> <li> </li> <li> </li> </ul> <h2 id="conclusion">Conclusion</h2> <p>Docker streamlines deployment by:</p> <ol> <li>Creating consistent environments</li> <li>Simplifying dependency management</li> <li>Enabling easy scaling</li> <li>Improving security through isolation</li> </ol> <p>Start small, optimize incrementally, and always test in staging before production!</p> <hr> <p><strong>Example repo</strong>: </p> <p>Questions? Reach out on !</p> </article> <article> <h1>TaskFlow - Project Management Tool</h1> <p>Fri, 20 Sep 2024 00:00:00 +0000</p> <p>A modern, intuitive task management tool built for remote teams. Features real-time collaboration, customizable workflows, and beautiful UI.</p> <h2 id="overview">Overview</h2> <p>TaskFlow was born out of frustration with existing project management tools being either too complex or lacking essential features. I built a solution that’s powerful yet simple to use.</p> <h2 id="key-features">Key Features</h2> <h3 id="core-functionality">Core Functionality</h3> <ul> <li><strong>Kanban Boards</strong> - Drag-and-drop interface for visual task management</li> <li><strong>Real-Time Sync</strong> - See changes instantly as team members update tasks</li> <li><strong>Multiple Views</strong> - Switch between Kanban, List, and Calendar views</li> <li><strong>Task Details</strong> - Rich descriptions, attachments, comments, and checklists</li> <li><strong>Labels & Filters</strong> - Organize and find tasks quickly</li> </ul> <h3 id="collaboration">Collaboration</h3> <ul> <li><strong>Team Workspaces</strong> - Separate spaces for different projects/teams</li> <li><strong>@Mentions</strong> - Tag team members in comments for notifications</li> <li><strong>Activity Feed</strong> - Track all changes and updates</li> <li><strong>Permissions</strong> - Role-based access control (admin, member, viewer)</li> </ul> <h3 id="productivity">Productivity</h3> <ul> <li><strong>Keyboard Shortcuts</strong> - Power user features for faster navigation</li> <li><strong>Templates</strong> - Reusable board templates for common workflows</li> <li><strong>Due Dates & Reminders</strong> - Never miss a deadline</li> <li><strong>Time Tracking</strong> - Built-in timer for task duration tracking</li> </ul> <h2 id="technical-implementation">Technical Implementation</h2> <h3 id="real-time-features">Real-Time Features</h3> <p>Used WebSockets (Socket.io) for instant updates across all connected clients. Implemented optimistic UI updates for snappy user experience even before server confirmation.</p> <h3 id="drag--drop">Drag & Drop</h3> <p>Built custom drag-and-drop using react-beautiful-dnd with smooth animations and mobile touch support.</p> <h3 id="performance">Performance</h3> <ul> <li>Implemented virtual scrolling for boards with 1000+ tasks</li> <li>Optimized database queries with proper indexing</li> <li>Used Redis for session storage and caching</li> <li>Image optimization with Next.js Image component</li> </ul> <h3 id="authentication">Authentication</h3> <ul> <li>Secure auth with NextAuth.js</li> <li>Support for email/password and OAuth (Google, GitHub)</li> <li>JWT tokens with automatic refresh</li> </ul> <h2 id="architecture">Architecture</h2> <p>Built as a modern monolith with Next.js API routes:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">┌─────────────┐ ┌──────────────┐ ┌─────────────┐ </span></span><span class="line"><span class="cl">│ Next.js │────▶│ API Routes │────▶│ PostgreSQL │ </span></span><span class="line"><span class="cl">│ (React) │ │ (REST/WS) │ │ + Prisma │ </span></span><span class="line"><span class="cl">└─────────────┘ └──────────────┘ └─────────────┘ </span></span><span class="line"><span class="cl"> │ │ </span></span><span class="line"><span class="cl"> │ ┌──────▼───────┐ </span></span><span class="line"><span class="cl"> └────────────▶│ Socket.io │ </span></span><span class="line"><span class="cl"> │ (Real-Time) │ </span></span><span class="line"><span class="cl"> └──────────────┘ </span></span></code></pre></div><h2 id="challenges-solved">Challenges Solved</h2> <h3 id="real-time-conflicts">Real-Time Conflicts</h3> <p><strong>Problem</strong>: Multiple users editing same task simultaneously</p> <p><strong>Solution</strong>: Implemented operational transformation (OT) for conflict resolution and last-write-wins strategy with conflict notifications</p> <h3 id="mobile-performance">Mobile Performance</h3> <p><strong>Problem</strong>: Drag-and-drop laggy on mobile devices</p> <p><strong>Solution</strong>: Optimized touch handlers and reduced re-renders using React.memo and useMemo</p> <h3 id="scale">Scale</h3> <p><strong>Problem</strong>: Growing user base causing performance issues</p> <p><strong>Solution</strong>: Added Redis caching layer and optimized database queries, reducing response time by 65%</p> <h2 id="results">Results</h2> <ul> <li>📈 <strong>Users</strong>: 2000+ active users within 3 months</li> <li>⭐ <strong>Product Hunt</strong>: Featured and received 200+ upvotes</li> <li>🚀 <strong>Performance</strong>: Sub-100ms API response times</li> <li>💯 <strong>Uptime</strong>: 99.8% uptime since launch</li> <li>📱 <strong>Mobile</strong>: 40% of traffic from mobile devices</li> </ul> <h2 id="tech-stack">Tech Stack</h2> <p><strong>Frontend</strong></p> <ul> <li>Next.js 14 (App Router)</li> <li>TypeScript</li> <li>Tailwind CSS</li> <li>Framer Motion (animations)</li> <li>React Beautiful DnD</li> </ul> <p><strong>Backend</strong></p> <ul> <li>Next.js API Routes</li> <li>Prisma ORM</li> <li>PostgreSQL</li> <li>Socket.io for WebSockets</li> <li>NextAuth.js for authentication</li> </ul> <p><strong>Infrastructure</strong></p> <ul> <li>Vercel for hosting</li> <li>Supabase for PostgreSQL</li> <li>Redis Cloud for caching</li> <li>AWS S3 for file storage</li> </ul> <h2 id="user-feedback">User Feedback</h2> <blockquote class="border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6"> <p>“Finally, a task manager that doesn’t get in my way. The real-time updates are magical!” - Sarah K., Product Manager</p> </blockquote> <blockquote class="border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6"> <p>“We switched from Trello and haven’t looked back. TaskFlow is faster and more intuitive.” - Mike R., Engineering Lead</p> </blockquote> <h2 id="open-source">Open Source</h2> <p>TaskFlow is open source! Contributions welcome.</p> <p><strong>License</strong>: MIT<br> <strong>GitHub</strong>: <br> <strong>Demo</strong>: </p> <h2 id="whats-next">What’s Next</h2> <p>Currently working on:</p> <ul> <li><input disabled="" type="checkbox"> Mobile apps (iOS & Android)</li> <li><input disabled="" type="checkbox"> Gantt chart view</li> <li><input disabled="" type="checkbox"> Advanced reporting and analytics</li> <li><input disabled="" type="checkbox"> API for third-party integrations</li> <li><input disabled="" type="checkbox"> Offline mode support</li> </ul> <hr> <p><strong>Status</strong>: ✅ Live & Actively Maintained<br> <strong>Try it</strong>: </p> </article> <article> <h1>WeatherNow - Real-Time Weather App</h1> <p>Mon, 10 Jun 2024 00:00:00 +0000</p> <p>A fast, beautiful weather application that provides real-time weather data, forecasts, and interactive maps. Built as a Progressive Web App with offline support.</p> <h2 id="overview">Overview</h2> <p>WeatherNow started as a weekend project to learn PWA development. It evolved into a fully-featured weather app used by thousands of people daily.</p> <h2 id="features">Features</h2> <h3 id="weather-data">Weather Data</h3> <ul> <li><strong>Current Conditions</strong> - Real-time weather for any location</li> <li><strong>7-Day Forecast</strong> - Detailed daily forecasts with hourly breakdown</li> <li><strong>Weather Alerts</strong> - Severe weather notifications</li> <li><strong>Historical Data</strong> - Past weather data and trends</li> </ul> <h3 id="user-experience">User Experience</h3> <ul> <li><strong>Location Detection</strong> - Automatic location based on GPS or IP</li> <li><strong>Search</strong> - Find weather for any city worldwide</li> <li><strong>Favorites</strong> - Save frequently checked locations</li> <li><strong>Units</strong> - Toggle between metric and imperial</li> <li><strong>Dark Mode</strong> - Automatic or manual theme switching</li> </ul> <h3 id="progressive-web-app">Progressive Web App</h3> <ul> <li><strong>Offline Support</strong> - Access cached data without internet</li> <li><strong>Install</strong> - Add to home screen like a native app</li> <li><strong>Fast</strong> - Optimized for performance (Lighthouse 100)</li> <li><strong>Responsive</strong> - Perfect on any device</li> </ul> <h2 id="technical-highlights">Technical Highlights</h2> <h3 id="performance">Performance</h3> <ul> <li>Achieved <strong>100/100 Lighthouse score</strong> across all categories</li> <li>Implemented service workers for offline functionality</li> <li>Optimized bundle size: < 150KB gzipped</li> <li>Lazy loading for images and components</li> <li>Prefetching for instant navigation</li> </ul> <h3 id="data-management">Data Management</h3> <ul> <li>Smart caching strategy with stale-while-revalidate</li> <li>Background sync for updated forecasts</li> <li>Efficient API usage with request batching</li> <li>Local storage for user preferences</li> </ul> <h3 id="uiux">UI/UX</h3> <ul> <li>Smooth animations with Framer Motion</li> <li>Interactive weather map with Mapbox</li> <li>Weather icons that match current conditions</li> <li>Accessible (WCAG AA compliant)</li> </ul> <h2 id="api-integration">API Integration</h2> <p>Integrated multiple weather APIs for comprehensive data:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="c1">// Example: Fetching weather data </span></span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">fetchWeather</span> <span class="o">=</span> <span class="kr">async</span> <span class="p">(</span><span class="nx">lat</span>: <span class="kt">number</span><span class="p">,</span> <span class="nx">lon</span>: <span class="kt">number</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="sb">`https://api.openweathermap.org/data/2.5/weather?lat=</span><span class="si">${</span><span class="nx">lat</span><span class="si">}</span><span class="sb">&lon=</span><span class="si">${</span><span class="nx">lon</span><span class="si">}</span><span class="sb">&appid=</span><span class="si">${</span><span class="nx">API_KEY</span><span class="si">}</span><span class="sb">`</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><h2 id="architecture">Architecture</h2> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">┌─────────────┐ ┌──────────────┐ </span></span><span class="line"><span class="cl">│ React App │────▶│ OpenWeather │ </span></span><span class="line"><span class="cl">│ (Vite) │ │ API │ </span></span><span class="line"><span class="cl">└──────┬──────┘ └──────────────┘ </span></span><span class="line"><span class="cl"> │ </span></span><span class="line"><span class="cl"> │ ┌──────────────┐ </span></span><span class="line"><span class="cl"> └───────────▶│ Mapbox │ </span></span><span class="line"><span class="cl"> │ API │ </span></span><span class="line"><span class="cl"> └──────────────┘ </span></span></code></pre></div><h2 id="challenges">Challenges</h2> <h3 id="challenge-api-rate-limits">Challenge: API Rate Limits</h3> <p><strong>Solution</strong>: Implemented intelligent caching and request batching to stay within free tier limits while maintaining data freshness</p> <h3 id="challenge-offline-experience">Challenge: Offline Experience</h3> <p><strong>Solution</strong>: Service workers with cache-first strategy for UI, network-first for data with graceful fallbacks</p> <h3 id="challenge-performance-on-slow-networks">Challenge: Performance on Slow Networks</h3> <p><strong>Solution</strong>: Image optimization, code splitting, and Progressive rendering for instant perceived performance</p> <h2 id="results">Results</h2> <ul> <li>📈 <strong>Users</strong>: 5000+ monthly active users</li> <li>⚡ <strong>Performance</strong>: 100 Lighthouse score</li> <li>📱 <strong>PWA</strong>: 40% of users installed as app</li> <li>🌍 <strong>Global</strong>: Users from 50+ countries</li> <li>⭐ <strong>Rating</strong>: 4.8/5 average user rating</li> </ul> <h2 id="tech-stack">Tech Stack</h2> <p><strong>Frontend</strong></p> <ul> <li>React 18</li> <li>TypeScript</li> <li>Tailwind CSS</li> <li>Framer Motion</li> <li>Vite (build tool)</li> </ul> <p><strong>APIs</strong></p> <ul> <li>OpenWeather API</li> <li>Mapbox GL JS</li> <li>IP Geolocation API</li> </ul> <p><strong>Tools</strong></p> <ul> <li>Workbox (PWA)</li> <li>React Query (data fetching)</li> <li>Zustand (state management)</li> </ul> <p><strong>Hosting</strong></p> <ul> <li>Netlify</li> <li>Cloudflare CDN</li> </ul> <h2 id="open-source">Open Source</h2> <p>This project is open source and welcomes contributions!</p> <p><strong>License</strong>: MIT<br> <strong>GitHub</strong>: </p> <h2 id="lessons-learned">Lessons Learned</h2> <ol> <li><strong>PWAs are powerful</strong>: Service workers enable app-like experiences on the web</li> <li><strong>Performance matters</strong>: Users notice and appreciate fast apps</li> <li><strong>Caching strategy</strong>: Critical for offline support and API cost management</li> <li><strong>Simplicity wins</strong>: Started with core features, added more based on user feedback</li> </ol> <h2 id="future-plans">Future Plans</h2> <ul> <li><input disabled="" type="checkbox"> Weather widgets for websites</li> <li><input disabled="" type="checkbox"> Social features (share weather conditions)</li> <li><input disabled="" type="checkbox"> Weather photography integration</li> <li><input disabled="" type="checkbox"> Apple Watch & Android Wear apps</li> <li><input disabled="" type="checkbox"> Premium features (ad-free, extended forecasts)</li> </ul> <hr> <p><strong>Status</strong>: ✅ Live & Maintained<br> <strong>Try it</strong>: <br> <strong>GitHub</strong>: </p> </article> </main></body></html>