Unlocking Seamless Type Safety with tRPC and TypeScript

#One_real_production_lesson_frontend_dev_taught_me: We had a bug in production where an API was getting called twice. At first, it looked like a backend issue. But the backend logs were clean. So I started digging into the frontend 👇 The culprit? 👉 React 18 Strict Mode. In development, React intentionally runs components twice to detect side effects. But our code wasn’t written with that in mind. Here’s what we had: ❌ API call inside "useEffect" without proper safeguards ❌ No cleanup / idempotent logic ❌ Assumption: "useEffect runs only once" Result: Duplicate API calls → inconsistent data → confused users. --- ✅ Fix: - Made API calls idempotent - Added proper checks before firing requests - Avoided unnecessary side effects inside "useEffect" --- 💡 Lesson: Writing code that works is easy. Writing code that works in real-world scenarios is the real skill. React doesn’t cause bugs. Our assumptions do. --- Since then, I always ask: 👉 “What happens if this runs twice?” 👉 “Is this safe in concurrent rendering?” --- Still learning something new every day 🚀 #FrontendDevelopment #ReactJS #JavaScript #CleanCode #WebDevelopment #Debugging

When React first introduced Hooks, it completely transformed how developers write and manage components. Instead of relying heavily on class components, we can now handle state, side effects, and complex logic using simple functions. Here are a few Hooks that every React developer should master: >> useState – Manage local state in functional components. >> useEffect – Handle side effects like API calls, subscriptions, and DOM updates. >> useContext – Access global data without prop drilling. >> useRef – Persist values and directly interact with the DOM. >> useMemo & useCallback – Optimize performance by memoizing values and functions. Why Hooks matter: Cleaner and more readable code Better logic reuse through custom hooks Easier state management in functional components Improved component composition In modern React development, Hooks are not just a feature — they are the foundation of scalable and maintainable applications. If you're learning React today, mastering Hooks is a must. Which React Hook do you use the most in your projects? #React #ReactJS #WebDevelopment #FrontendDevelopment #JavaScript #Programming #SoftwareDevelopment #Reacthooks #IT #ITtalks

⚡ Is your frontend toolchain holding you back in 2026? It might be time for a serious upgrade. Christoph Nakazawa just published a fantastic deep-dive on the fastest frontend tooling stack available today — and the improvements are genuinely game-changing: 🔹 TypeScript is being rewritten in Go (tsgo) — delivering ~10x faster type checking. Yes, you read that right. 🔹 ESLint → Oxlint: A blazing-fast linter with full ESLint plugin support via a shim — no compromises on rules, massive gains on speed. 🔹 Prettier → Oxfmt: A modern formatter with built-in Tailwind CSS class sorting and import ordering, falling back to Prettier only when needed. 🔹 Vite remains the gold standard for bundling and dev server performance — and it's about to get even faster with Rolldown under the hood. 🔹 React + React Compiler keeps things fast and modern, while pnpm stays the top pick for package management. What really stands out here is that faster tooling doesn't just help developers — it also helps AI coding assistants generate better, more accurate code. Tight feedback loops + strict guardrails = fewer bugs, faster iteration, and cleaner codebases. If you're building serious frontend apps in 2026, this is a must-read 👇 https://lnkd.in/g9MiHBrE What tools are you running in your current frontend stack? Have you tried tsgo or Oxlint yet? Drop a comment below! 👇 #Frontend #WebDevelopment #TypeScript #React #JavaScript

Async JavaScript — what actually matters beyond the basics. 🚀 📌 Promises have 3 states — and they're irreversible. Once settled, a Promise can never go back to pending. That's by design. 📌 .catch covers the entire chain above it. Any error thrown anywhere flows down automatically. Not just the last step. The whole chain. 📌 fetch doesn't throw on 404 or 500. It only throws on network failure. Always check res.ok explicitly — try/catch alone won't save you here. 📌 Four combinators. Four different jobs. ✅ Promise.all → all required, fail fast ✅ Promise.allSettled → independent optionals, handle each separately ✅ Promise.race → timeout enforcement ✅ Promise.any → multiple sources, first success wins 📌 Sequential awaits are a hidden performance trap. If two calls don't depend on each other — they should run in parallel. Every unnecessary sequential await is wasted time. 📌 Retrying immediately under failure makes things worse. All instances retrying at the same moment hammer a struggling API further. Exponential backoff + jitter staggers retries — giving the API room to recover. Small decisions in async code have large consequences at scale. 💡 #JavaScript #AsyncJS #WebPerformance #FrontendEngineering #PlatformEngineering

I made an MCP server for Three.js debugging because I wanted Three.js development to feel less manual. Most Three.js debugging is some variation of inspecting the scene tree, poking at materials, checking out lights and shadows, logging transforms, reloading, and doing it all over again. So, I made threejs-devtools-mcp. It connects Claude, Cursor, and Windsurf to your live Three.js app, enabling them to inspect your scene hierarchy, materials, shaders, lights, shadows, and performance stats, as well as modify values in real time, and convert GLTF to React Three Fiber JSX. It’s all about making bugs easier to catch by enabling AI to work with the actual runtime scene state, not just source code. Supports Three.js, React Three Fiber, and Next.js. Available now on npm and the official MCP Registry. GitHub: https://lnkd.in/d3MCbSgM npm: npx threejs-devtools-mcp Would love to hear back from other Three.js developers. #threejs #webgl #mcp #devtools #3d #webdev

3 questions I ask before writing any function: 1. Can someone understand this in 30 seconds? 2. Am I solving a real problem or a hypothetical one? 3. Is there a simpler way to do the exact same thing? That's KISS in practice. It sounds obvious. But most of us (myself included) have violated all three in the same pull request. Wrote a full breakdown of the KISS Principle — with actual Node.js/Express/Prisma examples showing what over-engineered vs clean code looks like in real backend work. No theory fluff. Just code, context, and the mental shift that actually sticks. Drop a 🔥 if you've ever been burned by your own complex code! 👇 Link in first comment #javascript #nodejs #webdev #softwaredevelopment #cleancode

Full-stack TypeScript with tRPC is one of those stacks that just feels right. You define your backend procedures once, infer the types on the client automatically, and remove an entire class of API mismatch bugs. No hand-written SDKs, no duplicated types, no guessing what the server returns. Why it’s powerful: - End-to-end type safety from database to UI - Faster development with better autocomplete everywhere - Safer refactors across frontend and backend - Cleaner developer experience than traditional REST wiring - Great fit for modern apps using Next.js, React, and Prisma What I like most about tRPC is that it keeps the stack simple without giving up correctness. You move faster because your editor knows your API contract better than any docs page. TypeScript already improves confidence in large codebases. tRPC extends that confidence across the network boundary. If you’re building with TypeScript on both frontend and backend, it’s worth a serious look. #TypeScript #tRPC #FullStackDevelopment #WebDevelopment #Nextjs #React #Prisma #DeveloperExperience #SoftwareEngineering #WebDevelopment #TypeScript #Frontend #JavaScript

🚀 Day-23 — Revisiting React Fundamentals Today I revised important React.js concepts and focused on organizing things in a better way. I went through: • Folder Structure — organizing files for scalability Example: src/ ├── components/ ├── hooks/ ├── redux/ ├── pages/ • Components — reusable UI blocks Example: function Button(){ return <button>Click</button> } • Hooks — managing state & lifecycle Example: const [count, setCount] = useState(0) • Redux Toolkit — global state management Example: const counterSlice = createSlice({ name: "counter", initialState: {value: 0}, reducers: { increment: state => { state.value++ } } }) This revision helped me understand how to structure projects better and write cleaner code. Not a heavy coding day, but important for strong fundamentals. Ankur Prajapati Satwik Raj #ReactJS #FrontendDevelopment #ReduxToolkit #WebDevelopment #LearningInPublic #BuildInPublic

TypeScript saved my project last week. Not from a bug. From a bad decision I was about to make. I was refactoring an API response type. Midway through, TypeScript started screaming across 14 files. My first reaction: annoying. My second reaction: wait — these are all the places that would have broken silently in JavaScript. This is what people miss about TypeScript: It's not about catching bugs at compile time. It's about making your architecture visible. When you change a type, and 14 files complain — that's your dependency graph revealing itself. TypeScript is documentation that enforces itself. 3 TypeScript patterns I use on every NestJS + Next.js project: 1. Shared DTO types between frontend and backend → One source of truth. Zero API contract drift. 2. Discriminated unions for API response states → type Result = {status:'ok',data:T} | {status:'error',message:string} → No more checking res.data && !res.error 3. Branded types for IDs → type UserId = string & {__brand:'UserId'} → You can never pass an OrderId where a UserId is expected TypeScript is not a linter. It's a co-architect. What's your most-used TypeScript pattern? Drop it below. #TypeScript #NestJS #NextJS #BackendDevelopment #SoftwareArchitecture #FullStackEngineer #WebDevelopment #CleanCode

Day 23: The React Blueprint ⚛️🏗️ Shifting gears today from how React works to how we build with it. Day 23 was all about mastering the blueprint before we start the heavy construction. 🏗️ The 'Crack-It Kit' Checklist: Day 23 📑 🔹 JSX Logic: Beyond 'HTML in JS'—understanding how Babel transforms syntax into element trees. 🌳 🔹 The Fragment Rule: Why every component needs a single parent and how to keep the DOM clean. 🧹 🔹 Component Composability: Building the UI as a collection of isolated, reusable 'Lego' bricks. 🧱 🔹 The 'Pure' Component: Why keeping components predictable (Props in, JSX out) is the key to bug-free apps. 🎯 🔹 Vite vs. CRA: Choosing modern tooling for high-speed development. ⚡ The focus is no longer on writing scripts; it's about architecting reusable systems. One component at a time. 🚀 #ReactJS #JSX #WebDevelopment #CrackItKit #FrontendEngineering #CodingJourney #MERNStack #RajSinghDev #WanderlustProject