标签：#react

Every few months, a post goes viral: "Please stop using [perfectly good tool]." This time it's lucide-react. And honestly? The take is lazy What's the actual problem? Nothing. The library is actively maintained, tree-shakable, TypeScript-friendly, and has 1000+ consistent icons. A new icon library dropped? Cool. That doesn't make this one broken. Tools don't expire — context does Before switching anything in production, ask: Is it maintained? ✅ Does it solve my problem? ✅ Is my team comfortable with it? ✅ Then keep using it. Real usage — still clean in 2026 import { Search , Bell , User } from ' lucide-react ' ; export default function Navbar () { return ( < nav > < Search size = { 20 } /> < Bell size = { 20 } strokeWidth = { 1.5 } /> < User size = { 20 } color = "#6366f1" /> </ nav > ); } Tree-shaking works perfectly — only Search, Bell, and User are bundled. Not the entire library. When you should switch Unpatched security vulnerability Repo abandoned for 2+ years Bundle size issue you've actually measured If none of these apply, you're switching for hype, not logic. The real issue "Please stop using X" posts get engagement. Developers see them, second-guess stable choices, and waste hours migrating things that weren't broken. Don't let LinkedIn trends drive your architecture. Build products. Not migrations.

Tags: react , webdev , onnx , audio Introduction Music generation, vocal separation, and intelligent arrangement have traditionally been server-side tasks requiring complex pipelines and expensive GPU clusters. But what if we could bring the entire interactive music-creation experience—both real-time preview , offline export , prompt-based AI music generation , and local Karaoke processing —directly into the browser? In this post, I'll share how I built AI Groove Pad , a client-side React and Tone.js application featuring: A Prompt-to-Music AI Agent: Enter any prompt (e.g., "Create an energetic Tamil Kuthu beat with a driving bassline and a Nadaswaram melody" ), and the agent composes and adds the tracks directly to the arrangement. A Client-Side Karaoke Separator: Runs a local neural network with 84% accuracy using ONNX Runtime Web to separate vocals and accompaniment locally. 3. High-Performance Audio Engine: Tone.js scheduling, synth fallbacks, and real-time playback. The Tech Stack Frontend UI: React + TypeScript + Tailwind CSS for a premium, glassmorphic dark-mode interface. Audio Engine: Tone.js v15 (built on top of the Web Audio API) for sample playback, precise timing scheduling, and synthesis. Client-Side AI: ONNX Runtime Web ( onnxruntime-web ) executing a local neural network with 84% accuracy for vocal/accompaniment separation (Karaoke mode). AI Music Agent: A natural language agent interface that takes user prompts to compose midi sequences, beats, harmony, and arrangements in real-time. * Offline Rendering: OfflineAudioContext for high-speed, non-realtime rendering of arrangements straight to .wav files. 🤖 The Prompt-to-Music AI Agent With AI Groove Pad , users don't need to be music theory experts. They simply write what they want to hear. The AI Agent interprets the prompt and generates a multi-track composition containing: Groove & Beats: Automatically maps drum samples and rhythmic patterns (e.g. Parai drum, Pambai hits for Kuthu). Melody & Harmony

Modern teams expect software to update instantly. Nobody wants to refresh a page every few seconds to see whether a task has moved from "In Progress" to "Done." Applications like Trello, Jira, and Linear have trained users to expect real-time collaboration. In this tutorial, we'll build a simplified real-time Kanban board using React, TypeScript, and WebSockets. Along the way, we'll cover project structure, state management, optimistic UI updates, and handling concurrent changes from multiple users. What We're Building Our application will support: Creating tasks Drag-and-drop task movement Real-time synchronization between users Optimistic updates Type-safe frontend architecture Tech Stack Frontend React TypeScript Vite React DnD Zustand Backend Node.js Express Socket.IO Database PostgreSQL Why WebSockets Instead of Polling? Many developers start with polling: setInterval (() => { fetch ( " /tasks " ); }, 5000 ); This works, but it's inefficient. Problems include: Unnecessary network requests Delayed updates Increased server load Poor user experience WebSockets maintain a persistent connection between client and server. Instead of asking: "Any updates yet?" the server simply says: "Here's an update." The result is lower latency and fewer network requests. Project Structure A scalable React project should avoid putting everything into a single components folder. Here's a structure that works well: src/ ├── api/ ├── components/ ├── features/ │ ├── board/ │ ├── columns/ │ └── tasks/ ├── hooks/ ├── store/ ├── services/ ├── types/ └── utils/ This feature-based organization scales much better than organizing solely by file type. Setting Up React Create the project: npm create vite@latest kanban-board cd kanban-board npm install Install dependencies: npm install zustand socket.io-client react-dnd react-dnd-html5-backend Defining Task Types Type safety becomes increasingly valuable as applications grow. export interface Task { id : string ; title : string ; description : s

If you’ve been learning React for a while, you’ve probably come across hooks that help optimize your application such as useMemo() and useCallback() and might have wondered: "Do I really need these hooks?", "Where are they useful?" etc. In React 19, the React Compiler was introduced and it's work is to help you optimize your application automatically. This raises a question where if React can automatically optimize an application, why should I bother learning how to optimize my app manually with hooks like useMemo() ?. Let me break down why you would still need to do manual optimization and what the React Compiler was created to solve in a simple, beginner friendly way. What Is the React Compiler? The React Compiler is a new optimization tool developed by the React Team. It's goal is simple: Automatically make your React app faster without you writing extra optimization code. Traditionally, React re-renders a component each time the state changes. This is usually fine, but if you have a component that does a lot of work, this can make your app very slow during re-renders. The React Compiler steps in to: Detect unnecessary re-calculations Memoize values and functions automatically Prevent avoidable re-renders So instead of you writing: const filteredItems = useMemo (() => filterItems ( items ), [ items ]); The compiler handles it for you behind the scenes. Why is this such a big deal? This changes how we write code in React, it helps us avoid over-optimizing our code when it might not need any optimization. Most developers that learn about useCallback() or useMemo() tend to overuse them (guilty party here 😅), resulting in the application behaving much slower instead of faster, hence the need for the React compiler as it optimizes the code where necessary. The React Compiler also provides the following benefits: 1. Less boilerplate code You don’t have to wrap your optimization logic in useMemo() or useCallback() . 2. Fewer mistakes Manual memoization is easy to get wr

You've built todo apps, counters, and forms. But can you handle a grid of 50 cells that reference each other through formulas? This challenge pushes your state management skills into real spreadsheet territory — formula evaluation, two-way cell bindings, and an interface that juggles editing, selection, and keyboard shortcuts all at once. 🔥 Start the Challenge Now 🧩 Overview Build a spreadsheet with real-time formula evaluation. You'll wire up a 10-row × 5-column grid where cells support basic values and Excel-style formulas (like =A1+B2), column and row selection, and a formula bar that mirrors what you're typing. ✅ Requirements Render a spreadsheet with column headers A through E and rows 1 through 10 Each cell uses an <output> element for the computed value and an <input> overlaid for editing Click a cell to edit; press Enter or blur to commit the change Formulas starting with = must be evaluated: Arithmetic: =1+1 → 2 Cell references: A1= 5 and B1= =A1+3 → 8 Click a column header to select/deselect that column Click a row number to select/deselect that row Selecting a column deselects any row and vice-versa Backspace clears the selected column or row Click outside the table deselects everything A formula bar ( fx ) mirrors the editing cell's value Cells must start empty — no default values 💡 Notes Use useState for cells, selected column, and selected row. No need for useReducer here. Each cell uses two overlapping layers: a visible <output> for the computed value and an invisible <input> for the raw formula. Toggle with opacity-0 / opacity-100 so the input stays mounted. Evaluate formulas with eval : generate JS const declarations from all cell values, wrap them in an IIFE, and evaluate. Recompute every cell on any change — cells can reference each other. 🧪 Tests renders the app title renders the spreadsheet with column headers A-E and rows 1-10 renders cells with initial empty values allows editing a cell and displays the new computed value evaluates a simple fo

Originally published on clintech.me If you've integrated Google Maps into a React app and seen Autocomplete randomly stop working, Directions silently fail, or the API throw google is not defined on second render — you've hit the duplicate loading bug. Here's exactly what caused it in my case and how I fixed it. The setup that broke things While building delivery address flows at POLOM — a production e-commerce platform — I integrated Google Places Autocomplete across 20+ screens. I had the Maps JavaScript API loading in two places: A provider.tsx for global script loading across the app A useLoadGoogleMaps hook inside a shared component This caused race conditions. The Autocomplete and Directions APIs were initialising before the script fully resolved in some renders, silently failing in others. The failure wasn't consistent, which made it harder to catch. The fix Step 1 — Remove the global load Delete the script tag or next/script call in provider.tsx . There should be exactly one place the Maps API loads. Step 2 — Centralise in a hook Move all loading logic into a single useLoadGoogleMaps hook using dynamic loading. If you're on Next.js, next/script with strategy="afterInteractive" inside the hook is the right approach. Step 3 — Guard before initialising if ( ! window . google ?. maps ) return ; Check that the API is fully available before attempting to attach Autocomplete or Directions . Don't assume the script load event means every namespace is ready. Step 4 — Scope your ref correctly Bind the autocomplete instance to inputRef.current explicitly. If the component remounts, re-initialise the binding — don't assume the previous instance is still attached. The result One load, one source of truth, no race conditions. Autocomplete and Directions worked consistently across all 20+ screens without reinitialising on every render. Security — the step most developers skip Restrict your API key at the Google Cloud Console level: HTTP referrers: whitelist your domain onl

A complete walkthrough of publishing Cartlify — a React e-commerce UI kit — to npm for the first time. The Milestone Yesterday I published Cartlify to npm. npm install cartlify It sounds simple. But getting to that one line took more decisions, more configuration, and more trial and error than I expected. This article covers everything — from setting up the build config to the actual publish command — so you don't have to figure it out the hard way. What Is Cartlify? Cartlify is a production-ready React + TypeScript + Tailwind CSS component library focused on e-commerce UI. 4 components that every e-commerce project needs: ProductCard — 3 layout variants, image gallery, wishlist, sale badges, skeleton loading CartDrawer — animated slide-in, focus trap, ESC dismiss, quantity stepper CheckoutStepper — horizontal/vertical, animated connectors, keyboard navigation PageLoader — 4 animation styles, 3 position modes Plus 3 utility hooks, 11 tree-shakeable icons, 40+ CSS design tokens, full dark mode, and 141 Jest + React Testing Library tests. Built so freelance developers and indie makers can skip the painful e-commerce UI layer and ship faster. Why Publish to npm? Before npm, Cartlify was only available on Gumroad as a paid download. That's fine — but npm adds something Gumroad can't: Developer sees Cartlify → runs npm install cartlify → evaluates the compiled output → trusts the quality → buys the full source on Gumroad npm is a credibility and discovery channel — not just a distribution method. A package on npm signals that something is real, maintained, and production-ready. Also: npmjs.com gets millions of developer searches every month. That's free traffic you can't get from Gumroad alone. The Build Setup — tsup The most important decision before publishing is how you bundle your library. I chose tsup — a zero-config TypeScript bundler built on esbuild. Here's why: Tool Config needed Speed Output Rollup Lots Medium ESM + CJS Webpack Heavy Slow CJS only Vite lib mode

This is an updated rewrite of my 2021 article on protected routes . A lot has changed in the React ecosystem since then. React Router moved from v5 to v7, class components have faded out, and the patterns we use for authentication state have matured. This version reflects how protected routes are built in modern React applications. Almost every web application requires some form of authentication to prevent unauthorized users from accessing parts of the application meant for signed-in users only. In this tutorial, I'll show how to set up an authentication flow and protect routes from unauthorized access using modern React patterns: function components, hooks, React Router v6+, and the Context API. First things first Install the dependency: npm i react-router-dom That's it. React Router v6 and above ships as a single package, so you no longer need to install react-router and react-router-dom separately. It is worthy of note that we will not be using Redux for authentication state in this version. For something as simple as "is the user logged in?", React's built-in Context API is the standard approach today. Redux still has its place, but it is overkill here. The Auth Context Instead of writing to localStorage directly from components and reading it in random places, we centralize authentication state in a context. This gives us a single source of truth and a clean useAuth() hook we can call anywhere in the app. Create ./src/auth/AuthContext.jsx : import { createContext , useContext , useState } from " react " ; const AuthContext = createContext ( null ); export function AuthProvider ({ children }) { const [ user , setUser ] = useState (() => { // Rehydrate on page refresh const saved = localStorage . getItem ( " user " ); return saved ? JSON . parse ( saved ) : null ; }); const login = async ( username , password ) => { // In a real app, this is an API call to your backend. // We simulate it here with hardcoded credentials. if ( username . toLowerCase () === " admin

TL;DR: Create React App builds bake environment variables at build time. ConfigMaps let you inject runtime configs into your container. Here’s how to bridge them so the same Docker image works across dev, staging, and production. The Problem You’ve built a React app with Create React App (CRA), Vite, or Next.js. You use .env files: js // api.js const API_URL = process.env.REACT_APP_API_URL; You build your Docker image: dockerfile FROM node:18 AS builder COPY . . RUN npm run build # REACT_APP_API_URL gets baked here FROM nginx:alpine COPY --from=builder /build /usr/share/nginx/html Then you deploy to Kubernetes. But now you want different API URLs for staging vs production. You could rebuild the image for each environment (bad – slow, wasteful). Or you could use a ConfigMap to inject values at runtime. ConfigMap to the Rescue A ConfigMap stores key-value pairs. Kubernetes can mount it as a file inside your pod. But React runs in the browser, not in the container’s filesystem. So how does the browser read a file from a ConfigMap? Simple: You serve a dynamic env-config.js file from your web server. Step-by-Step Solution Create a ConfigMap with your environment variables yaml # configmap.yaml apiVersion: v1 kind: ConfigMap metadata: name: react-env-config data: env-config.js: | window.__env = { REACT_APP_API_URL: " https://api.production.com ", REACT_APP_FEATURE_FLAG: "true" }; Apply it: bash kubectl apply -f configmap.yaml Modify your React app to read from window.__env Instead of reading process.env directly, use a runtime config: js // config.js export function getEnvVar(name) { // Runtime injection from window. env (provided by ConfigMap) if (window. env && window. env[name] !== undefined) { return window. env[name]; } // Fallback to build-time env vars (for local dev) return process.env[name]; } Use it in your components: js // api.js import { getEnvVar } from './config'; const API_URL = getEnvVar('REACT_APP_API_URL'); Serve the ConfigMap file via your web server U

Prologue A while ago, I decided to develop a fully accessible main navigation component in React and write a series of articles documenting the steps it took to create a non-trivial accessible component. In my last development article , I covered using an array of navigation objects to determine conditions and shift focus between components. This article covers Tab Key navigation. Note : This article is one of a series demonstrating building a React navigational component from scratch while considering accessibility through the process. The articles are accompanied by a GitHub repository with releases tied to one or more articles; each builds on the previous one until a fully implemented navigation component is complete. Each release and its associated tag contain fully runnable code for the article. The code discussed in this article is available in the release. and may be downloaded at release 0.7.0 . Links in the article will take you to the proper file in the tagged GitHub Repository. Because the code for this release is scattered across the useNavigation hook, line numbers are added to make it easier to locate in the linked GitHub file. Line numbers are also provided for those who would like to follow along with a downloaded copy. While code examples are written in JavaScript for brevity, all actual code is written in Typescript and targets React 19.x, all while using vanilla CSS. Examples use Next.js v16.x, which is not required to run the navigation component. You can view the requirements for the Tab Handling Keyboard Release along with previous requirements. Content Links Introduction Acceptance Criteria Tab Key Handling Link Button Shift+ Tab Key Handling Link Button Introduction As I've mentioned in earlier articles, keyboard handling has two disparate audiences: those who can see the screen and those who rely on a screen reader. The arrow, home and end keys, for the most part, rely on a user knowing where they are and being able to discern where they wan

A production-minded walkthrough with a live Next.js demo — JSON.parse() vs partial-json + Zod for real-time AI dashboards. canonical: https://gauravthorat-portfolio.vercel.app/blog/react-llm-stream-json-parser

From Scratch: How to Integrate Reasonix CLI into the HagiCode System This article shares the complete technical practice of integrating Reasonix CLI as a first-class Agent Provider into the HagiCode system, covering three-layer architecture design, key technical decisions, and frontend and backend implementation details. Background Reasonix CLI, as it happens, is a pretty interesting thing. It's an AI code assistant tool based on ACP (Agent Communication Protocol), providing powerful streaming and session management capabilities. Actually, in the HagiCode.Libs layer, we've already completed its underlying implementation. It's just that these components are still in an isolated state, like beautiful pearls that haven't been strung into a necklace. Users cannot use it through Hero profession selection, session execution paths, or monitoring panels, which is somewhat regrettable. The problem we face is: how to elevate Reasonix to the same level as Codex, Hermes, and other first-class Agent Providers, implementing complete backend routing and frontend display? This isn't simply a matter of registering an enum value. It requires building a complete chain from low-level abstraction to user interface. It's like building a house—you can't just lay a foundation and call it done. You have to build the walls and put up the roof. The challenge of this integration lies in the fact that Reasonix, as a local CLI tool, has its own personality and temperament. For example, it doesn't need a connection string—all parameters are configured by the user at runtime; it might not even be installed, requiring graceful degradation; it's compatible with anthropic series models, but also has its own ACP-specific parameters like effort, budget, and so on. It's like a person with their own unique way of handling things—you can't force it. After careful architectural design and multiple rounds of discussion, we finally adopted a clear three-layer architecture solution, successfully integrating R

We've all been there. Your first encounter with authorization looks something like this: if ( user . role === " ADMIN " ) { // allow access } It works. It's simple. It ships fast. And then, three months later, your application has grown, requirements have shifted, and you're staring at a codebase where authorization logic is scattered everywhere—APIs, services, UI components—like a puzzle that nobody remembers how to solve. The truth is: this approach doesn't scale. Not because it's inherently flawed, but because it conflates two very different concepts that should never be mixed. The Core Mistake: Confusing Identity with Capability Here's the problem we're actually trying to solve. As your application grows, you inevitably end up writing code like this: if ( user . role === " BRANCH_MANAGER " || user . role === " SYSTEM_ADMIN " ) { // allow access } Then a stakeholder asks: Can we create a hybrid role? Or: We need Auditors who can export reports but not edit records. And suddenly your role logic explodes into an unmaintainable mess. The fix isn't adding more conditions. The fix is understanding that roles and permissions answer fundamentally different questions. Roles Define Identity Roles are categories of users. Examples: SYSTEM_ADMIN CLIENT BRANCH_MANAGER AUDITOR Roles answer: Who is this user? They establish high-level authorization boundaries. Examples: Staff Portal vs Customer Portal Internal Admin Area vs Public Application Employee Features vs Client Features Think of roles as identity labels . Permissions Define Capability Permissions represent atomic actions. Examples: LOAN_APPROVE USER_DELETE REPORT_EXPORT ACCOUNT_EDIT Permissions answer: What can this user actually do? Your application should not constantly ask: What role are you? Instead, it should ask: Do you have permission to perform this action? Because: Users have Roles Roles contain Permissions Code checks Permissions That distinction changes everything. Always Decouple Identity from Capability T

Introduction People keep telling me TanStack Start is kind of a big deal, and I wanted to...

Clean Architecture on the Frontend: Beyond Smart and Dumb Components djblackett djblackett djblackett Follow Jun 7 Clean Architecture on the Frontend: Beyond Smart and Dumb Components # react # frontend # architecture # typescript Comments Add Comment 14 min read

This is a submission for the GitHub Finish-Up-A-Thon Challenge What I Built CampusBeat 2.0 — a React Native campus super-app for students across 17 colleges in Odisha, India. It started in 2023 as a simple notice board aggregator: scrape college websites so students didn't have to visit them. It worked. Students used it. Then life happened, and it sat untouched on GitHub for three years. This challenge gave me the push to finally open that repo again. What I found was equal parts embarrassing and educational. What it is now: 📰 Real-time notices for 17 colleges — ITER, KIIT, NIT Rourkela, IIT, and more 🎨 Complete UI overhaul — warm cream × charcoal × coral editorial design 🃏 3D tiltable campus identity card you can share with friends 🔖 Bookmarks — save any notice, grouped by college 💬 Real-time campus chat rooms powered by Socket.io 🛒 Campus marketplace — buy/sell within your college 🔔 Push notifications via Firebase Demo The original app from July 2023: LinkedIn post CampusBeat 2.0 — running on device: Onboarding screen - with beautiful animation Onboarding.mp4 - Google Drive drive.google.com Login screen — editorial serif heading, Lottie animation, warm ink hero Register screen — custom college picker bottom sheet with live search Home screen — quote card, college notice feed, floating tab bar Profile screen — 3D tiltable campus card with holographic shimmer Share modal — drag to rotate the card, share natively News Explorer — college chips, notice type tabs, live banner Marketplace — buy and sell within your college Bookmark - your persistent news bookmark.mp4 - Google Drive drive.google.com Chat screen - live interaction within colleges chat.mp4 - Google Drive drive.google.com The Comeback Story What I found after 3 years Opening an old repo is humbling. Here is what I walked into. The dead API. The home screen showed a daily quote — except quotable.io had shut down. Every user was silently seeing the hardcoded fallback for three years: "Villains are not bad, the

Forms are everywhere in mobile apps - authentication flows, data entry, support requests, onboarding... If your app has a login screen, a form is likely the first thing a new user interacts with. That makes accessibility here not just a nice-to-have, but a first impression. The problem is that forms are consistently one of the most broken areas for assistive technology users. Missing labels, keyboard traps, silent validation errors, focus going nowhere after submission - these are issues that make an app unusable for a significant portion of your users. This guide is a complete reference for building forms that work for everyone in React Native, whether users are navigating with their fingers, an external keyboard, a screen reader or voice input. Code examples throughout show both what to do and why . A fully working demo repo is available to fork and test on a real device - check it out at rn-accessible-form-demo . Labels Every form field needs a label, whether a text input, checkbox or radio/submit buttons. No exceptions. Don't rely on placeholders Placeholder text disappears the moment a user starts typing. Screen readers will read it initially, but once it's gone, there's no way for them to recall what the field was for without clearing their input. Placeholders are useful as hints, not as labels. Use a visual label + accessibilityLabel To avoid screen readers announcing the same information twice (once for the visual label, once for the input), hide the visual label from assistive technology and put the full label on the input itself. < Text importantForAccessibility = "no" accessibilityElementsHidden > Email address* </ Text > < TextInput accessibilityLabel = "Email address, required" /> importantForAccessibility="no" handles Android, and accessibilityElementsHidden handles iOS. Together they tell assistive technology to skip the visual label entirely - the accessibilityLabel on the TextInput is the single source of truth for screen readers. Required fields De

Section 1: Getting Started with Cypress 1. Installing and Setting Up Cypress Prerequisites Before installing Cypress, ensure you have Node.js installed on your machine. Cypress requires Node.js 18.x or 20.x and above. You should also have an existing React project or create a new one. Check your Node.js version by running this command in your terminal: node --version # Should output v18.x.x or higher Creating a React Project (Optional) If you don't have an existing React project, create one using Vite which is the recommended approach for new React projects: npm create vite@latest my-react-app -- --template react cd my-react-app npm install Installing Cypress Navigate to your React project directory and install Cypress as a development dependency. Cypress is a fairly large package, so the installation might take a minute or two: npm install cypress --save-dev # Or using yarn yarn add cypress --dev Opening Cypress for the First Time After installation, open Cypress for the first time. This will create the initial folder structure and configuration files: npx cypress open When Cypress opens for the first time, you'll see a welcome screen where you can choose between E2E Testing and Component Testing. Select E2E Testing to get started with end-to-end tests. Cypress will then prompt you to choose a browser. You can select Chrome, Firefox, Edge, or Electron. Choose your preferred browser and click Start E2E Testing in [Browser] . Adding NPM Scripts Add convenient scripts to your package.json for running Cypress tests: { "scripts" : { "dev" : "vite" , "build" : "vite build" , "cy:open" : "cypress open" , "cy:run" : "cypress run" , "test:e2e" : "start-server-and-test dev http://localhost:5173 cy:run" } } Tip: Use npm run cy:open for interactive development with the Cypress Test Runner. Use npm run cy:run for headless execution in CI/CD pipelines. 2. Understanding Cypress Project Structure Project Directory Overview After initializing Cypress, you'll notice several new fold

This is the third and final part of my first React project for the Frontend Mentor's Digital Bank Landing Page Challenge . I'm excited to say that I finally finished it. Live Demo: https://bank-landing-page-react-gmtz.vercel.app/ Github Repo: https://github.com/ayra-baet/bank-landing-page-react Learning Component Reusability Beyond Small Elements At first, I thought this final part would mostly involve finishing the Articles and Footer. But while building, I realized something more important: React's reusability isn't limited to small UI elements like buttons or cards; entire sections can be reusable too. Earlier in this project, I reused a single Button component across the header, hero, and footer. This time, I noticed that the Features and Articles sections shared almost the same structure: both had an h2 heading both used a grid layout both wrapped child components The only real difference was that the Features section included a description paragraph. That immediately felt like a perfect use case for a reusable component with conditional rendering. So I created a reusable Section component: function Section ({ backgroundColor , title , description , children }) { return ( < section className = { backgroundColor } aria-labelledby = { ` ${ title } -heading` } > < div className = "container section__container" > < div className = "section__header" > < h2 id = { ` ${ title } -heading` } > { title } </ h2 > { description && < p > { description } </ p > } </ div > < div className = "section__grid" > { children } </ div > </ div > </ section > ); } Then I reused it inside my LandingPage component: function LandingPage () { return ( <> { /* other LandingPage JSX */ } < section id = "features" > < Section backgroundColor = "section--gray-100" title = "Why choose Digitalbank?" description = "We leverage Open Banking to turn your bank account into your financial hub. Control your finances like never before." > < Features /> </ Section > </ section > < section id = "articl

Why I stopped reading "❌ Old vs ✅ New" posts I used to scroll past them. Then I started ignoring them. Now? I don't read them at all. Not because they're "wrong". But because they're incomplete . The problem with "❌ Old vs ✅ New" These posts make everything look easy: One error One fix One clean "New Way" Three bullet points Save the post Done. Right? No. What these posts don't show you 🔹 The 200 failed deployments before that one working fix 🔹 The 300+ errors you solve along the way — not just one 🔹 The Vercel pipelines that break for no documented reason 🔹 The "New Way" that also fails in production 🔹 The gap between documentation and reality What happens in production That clean "New Way" code snippet? It might work on your local machine. But in production, with real traffic, real data, real edge cases? It can fail. Hard. And no three-line post prepares you for that. Why I stopped reading Because these posts teach me solutions to problems I don't have yet . But they don't teach me how to think when nothing works. They don't teach me: How to read error logs properly How to trace a pipeline failure across services How to stay consistent after multiple failed deploys How to know when the "New Way" is actually worse What actually helped me Not templates. Not shortcuts. Real experience: 200+ failed deployments 300+ errors solved (one by one) Broken pipelines fixed by understanding, not copy-paste Production live — not a "demo" or a "tutorial" This is not a "❌ vs ✅" post I'm not giving you a "Here's the fix". Because the real fix isn't three lines of code. It's patience. It's persistence. It's failing and getting back up. And no post can save that to your bookmarks. 👇 Have you ever followed a "New Way" post and had it fail in production?