Choose Codex for Quick Development, Claude Code for Complex Architecture

Are you tired of brittle unit tests that break every time you refactor your internal logic? I recently found myself in a classic software craftsmanship debate with a colleague: Should we keep our production APIs completely pristine and mock all internal dependencies? Or is it okay to expose state changes (like C# events and delegates) for the sake of testability? Many developers argue that adding events just for testing is "API pollution." But if you are building an SDK or a complex domain core, relying heavily on mocks traps you in fragile, interaction-based testing. You end up testing the specific internal gears and levers instead of the actual business outcomes. In my latest article, I explore why injecting events isn't a "testing hack"—it is a fundamental architectural best practice known as Domain-Oriented Observability. By treating business-relevant lifecycle changes as first-class citizens (leveraging the classic Observer Pattern), we can achieve: ✅ Lightning-fast, mock-free, state-based verification. ✅ Tests that actually survive internal refactoring. ✅ A highly extensible public API that gives your users genuine orchestration, audit, and UX hooks. Check out the full article where I break down the trap of over-mocking Link in the comments! 👇 Let me know where you stand: Are you Team Mock or Team Event? #UnitTesting #SoftwareArchitecture #Observability #SoftwareCraftsmanship #DesignPatterns

🧱 𝗖𝗹𝗮𝘂𝗱𝗲 𝗖𝗼𝗱𝗲 𝗶𝘀 𝗯𝘂𝗶𝗹𝘁 𝗶𝗻 𝟰 𝗹𝗮𝘆𝗲𝗿𝘀. 𝗠𝗼𝘀𝘁 𝗱𝗲𝘃𝘀 𝗼𝗻𝗹𝘆 𝘁𝗼𝘂𝗰𝗵 𝘁𝗵𝗲 𝗳𝗶𝗿𝘀𝘁 𝗼𝗻𝗲. 🤔 ⠀ Then they wonder why the output doesn't feel any different from a basic chat prompt. ⠀ The model isn't the problem. The missing layers are. ⠀ Here's what each layer actually does — and why all four matter: ⠀ 🧠 𝗟𝗮𝘆𝗲𝗿 𝟭 — 𝗠𝗲𝗺𝗼𝗿𝘆 (𝗖𝗟𝗔𝗨𝗗𝗘.𝗺𝗱) ⠀ A single file that gets loaded into every session before Claude touches anything. Your tech stack, your architecture decisions, your team conventions — all of it persists automatically. Without this, Claude treats every new session like day one on the job, starting from zero every single time. ⠀ ⚡ 𝗟𝗮𝘆𝗲𝗿 𝟮 — 𝗦𝗸𝗶𝗹𝗹𝘀 ⠀ Markdown-based workflows that Claude activates on its own based on what task it detects. Writing tests? The testing skill loads. Deploying? The deploy workflow kicks in. No slash commands, no prompting. The right context arrives exactly when it's needed — and stays out of the way when it's not. ⠀ 🔒 𝗟𝗮𝘆𝗲𝗿 𝟯 — 𝗛𝗼𝗼𝗸𝘀 ⠀ Scripts that intercept Claude's actions before and after they execute. This is the critical distinction most people miss: ⠀ → CLAUDE.md instructions get treated as context. Claude may or may not follow them. → Hooks are deterministic. They either block an action or they don't. No exceptions. ⠀ That's the difference between "Claude usually does it right" and "Claude always does it right." ⠀ 🤖 𝗟𝗮𝘆𝗲𝗿 𝟰 — 𝗔𝗴𝗲𝗻𝘁𝘀 ⠀ Specialised subagents that each get their own isolated context window. One handles code review. One runs security checks. One executes tests. Each one scoped to its job, none of them polluting your main session with intermediate noise. Your conversation stays clean. Only the final answers come back. ⠀ 💡 The output quality gap between most teams and the best teams isn't the model they're using. It's how many of these layers they've actually configured. ⠀ 🚀 𝗪𝗵𝗲𝗿𝗲 𝘁𝗼 𝘀𝘁𝗮𝗿𝘁: run /init on day one. It bootstraps your CLAUDE.md from your actual project. Add skills, wire up hooks, define agents as the complexity grows. The compounding effect kicks in from the very first session. ⠀ 👇 𝗪𝗵𝗶𝗰𝗵 𝗹𝗮𝘆𝗲𝗿 𝗮𝗿𝗲 𝘆𝗼𝘂 𝗺𝗶𝘀𝘀𝗶𝗻𝗴 𝗿𝗶𝗴𝗵𝘁 𝗻𝗼𝘄 — 𝗮𝗻𝗱 𝘄𝗵𝗮𝘁'𝘀 𝗯𝗲𝗲𝗻 𝗵𝗼𝗹𝗱𝗶𝗻𝗴 𝘆𝗼𝘂 𝗯𝗮𝗰𝗸 𝗳𝗿𝗼𝗺 𝘀𝗲𝘁𝘁𝗶𝗻𝗴 𝗶𝘁 𝘂𝗽? ⠀ #MohammadKShah #ClaudeCode #AIEngineering #AgenticAI #DeveloperProductivity #SoftwareEngineering #DeveloperTools #AIWorkflows ⠀ ♻️ 𝗥𝗲𝗽𝗼𝘀𝘁 to help your network unlock the full potential of Claude Code ➕ 𝗙𝗼𝗹𝗹𝗼𝘄 Mohammad Karimulla, PMP® for practical AI engineering insights

Your micro-frontend architecture is holding you back. Here's how to break free. We were building a large-scale application with multiple teams working on different parts of the frontend. Our monolithic approach was causing integration nightmares and slowing down our deployment process. We needed a way to decouple our frontend modules, allowing teams to work independently and deploy updates without affecting the entire application. The impact was significant: slow builds, complex dependencies, and frequent integration issues. We implemented Module Federation in Webpack 5, a powerful feature that allows multiple instances of Webpack to share code at runtime. This enables us to break our monolith into smaller, independently deployable micro-frontends. Module Federation works by exposing modules from one bundle and consuming them in another. It uses a host container to load remote modules dynamically, creating a network of interconnected applications. This approach is better because it promotes decentralized development, reduces build times, and simplifies dependency management. Each team can now work on their own module, deploy it independently, and have it automatically integrated into the main application through Module Federation. 💡 Key Takeaway: By adopting Module Federation, we achieved true decoupling of our frontend modules. Teams can now work independently, deploy updates without affecting others, and integrate seamlessly through a shared container. This approach has significantly improved our development velocity and reduced integration issues. Have you tried Module Federation in your projects? What challenges have you faced or overcome? #Coding #Developer #WebDevelopment #SoftwareEngineering #Tech #Programming

Most developers waste hours and credits fighting Claude Code because they skip the four patterns that actually matter. 💸 The gap between "Claude Code is frustrating" and "Claude Code transformed my workflow" isn't a technical skill. It's knowing four specific practices that productive users apply from day one. What fails: ❌ Use default mode, let Claude modify files immediately ❌ Write paragraphs explaining what's broken ❌ Configure tools and credentials mid-project ❌ Use one connector and hope it works What works: ✅ Start every session in Plan Mode (Shift+Tab twice) ✅ Paste screenshots instead of typing explanations ✅ Build Skills and add API keys before coding starts ✅ Add 10+ connectors for multiple solution paths Results from teams doing this: 📊 40% reduction in code review time 📊 25% efficiency gains on refactoring 📊 Token costs down through targeted sessions 📊 Debugging cycles: 3-4 rounds → 1 round with screenshots Plan Mode alone changes everything. Claude researches read-only, asks clarifying questions, generates a plan, and waits for approval. No wasted tokens on wrong implementations. Screenshots eliminate ambiguity. Error messages, UI bugs, and architecture sketches—visual context resolves issues in one iteration instead of four back-and-forth clarifications. Complete breakdown with setup instructions, Skill creation guide, and connector configuration 👇 https://lnkd.in/eAV3Gvid What's your biggest Claude Code challenge? 💬 #ClaudeCode #AIAssisted #DeveloperTools #ProductivityHacks #CodingEfficiency #We41

After working on multiple features, a few patterns keep showing up in real projects. Things that usually signal trouble early: • Requirements that sound clear but keep changing mid-implementation   • APIs that return slightly different data every time   • UI logic that keeps growing because we’re compensating for something deeper None of these look serious at the beginning. But over time they turn into the parts of the system that are hardest to maintain. Sometimes the biggest engineering work isn’t writing code — it’s noticing these patterns early. What’s one early warning sign you’ve learned to watch for in a project? #SoftwareEngineering #FrontendDeveloper #WebDevelopment #DeveloperLife

𝗗𝗮𝘆 𝟮𝟰 - 𝗦𝘁𝗿𝘂𝗰𝘁𝘂𝗿𝗲 𝗳𝗼𝗿 𝗯𝗶𝗴 𝗽𝗿𝗼𝗷𝗲𝗰𝘁𝘀 𝘔𝘢𝘬𝘪𝘯𝘨 𝘰𝘶𝘳 𝘤𝘰𝘥𝘦 𝘮𝘢𝘪𝘯𝘵𝘢𝘪𝘯𝘢𝘣𝘭𝘦 Since I started this challenge, I started, built, tested, and tweaked several projects and approaches. But I eventually came to this realization: The more my scene packs things the more I struggle to add new effects and play with values to find the perfect combo. Today I'll share what I learned about code structure for threejs projects so they don't look like mazes. 1️⃣ 𝗗𝗼𝗻'𝘁 𝗽𝗮𝗰𝗸 𝗲𝘃𝗲𝗿𝘆𝘁𝗵𝗶𝗻𝗴 𝗶𝗻𝘁𝗼 𝗼𝗻𝗲 𝗳𝗶𝗹𝗲 From day till now, every little scene, every little experiment, every demo video you saw was made from one file. Depending on complex or realistic I wanted something to look, that one file grew bigger than expected to the point I had to search for keywords, and scroll heavily. From camera to light, shadows, to debug UI, all of what composed an experience was fighting for attention, structure and clarity. We'll the obvious solution is to split this file, into tiny ones that calls each other when needed. This adds hierarchy and order to the codebase, simplify access to elements of the scene, make the project maintainable and open for collaboration. 2️⃣ 𝗘𝘅𝗮𝗺𝗽𝗹𝗲 𝗼𝗳 𝘀𝘁𝗿𝘂𝗰𝘁𝘂𝗿𝗲 Before diving into it, I would say, I wouldn't use it for simple projects that are easier to implement. For a little cube of particles rotating I would simply do it all in one file and it's simpler that way. But for bigger projects where there are animations, multiple objects, textures, materials, imported models and so on, this definitely comes handy. Here's the big picture (main folders + content): - 𝗖𝗼𝗿𝗲 -> renderer, camera, loop. It includes the scene, camera, render, etc... - 𝗪𝗼𝗿𝗹𝗱 -> scene composition. here we have environment, light, ... - 𝗦𝘆𝘀𝘁𝗲𝗺 -> reusable behaviors. It's for controls, physics, post-processing, ... - 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀 -> objects in the scene. Cars, people, building sit here. - 𝗨𝘁𝗶𝗹𝘀 -> helpers. Place for debug UI, event emitter, and other utilities. With this structure adding a 3D avatar of yourself becomes easy, the project is self-explanatory, and each part sits in a dedicated place making it easier to find things. 3️⃣ 𝗧𝗵𝗲𝗿𝗲'𝘀 𝗻𝗼 𝗴𝗼𝗹𝗱𝗲𝗻 𝗿𝘂𝗹𝗲 It's easy to fall in love with a particular structure but what really matters is clarity. Not using the core folder, or naming the world folder universe doesn't break an experience. There are rule that supersede code structure like variable name, proper indentation and commenting. Use those already make your work look like a love letter to the next developer. I quoted Addy Osmani here 😅 . That's it for today, see you tomorrow! #quittingisnotanoption #100daysofthreejs #tchakap

𝗢𝗻𝗲 𝘁𝗵𝗶𝗻𝗴 𝗜 𝗲𝗻𝗷𝗼𝘆 𝗮𝗯𝗼𝘂𝘁 𝗯𝘂𝗶𝗹𝗱𝗶𝗻𝗴 𝘀𝗼𝗳𝘁𝘄𝗮𝗿𝗲 𝗶𝘀 𝘁𝗵𝗮𝘁 𝘀𝗺𝗮𝗹𝗹 𝗶𝗺𝗽𝗿𝗼𝘃𝗲𝗺𝗲𝗻𝘁𝘀 𝗰𝗮𝗻 𝗺𝗮𝗸𝗲 𝗮 𝘀𝘂𝗿𝗽𝗿𝗶𝘀𝗶𝗻𝗴𝗹𝘆 𝗯𝗶𝗴 𝗱𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝗰𝗲. Recently, while working on a backend feature, I noticed that everything technically worked but something about the flow felt heavier than it needed to be. The API was doing more work than necessary. Some data was being fetched that the client didn’t even use. Nothing was “broken”, but it wasn’t as efficient as it could be. So I spent some time simplifying it. Reduced a couple of queries, adjusted the response structure, and cleaned up some logic that had grown a bit messy during development. The result wasn’t a huge architectural change. Just a simpler, cleaner version of the same feature. But the response time improved, the code became easier to read, and future changes will be much easier to make. Moments like that remind me that good engineering is often about small thoughtful improvements, not dramatic rewrites. Curious how others approach this do you usually refactor along the way, or leave improvements for later? #softwareengineering #backenddevelopment #programming #webdevelopment #cleanarchitecture #devlife

What actually separates average AI-assisted coding from elite-level “vibe coding” isn’t the model — it’s the structure of your repository. Claude (and every frontier model) was literally trained on gold-standard software engineering practices. Yet most developers still treat it like a fancy autocomplete and end up with chaotic, unmaintainable codebases. Here’s the exact 4-step framework I follow every single time I start a new project with Claude. This is how you turn vibe coding into production-grade engineering: Product Requirements Document (PRD) first Spend serious time writing an extremely detailed PRD before touching any code. The more descriptive, the better Claude performs. Include user stories, edge cases, performance requirements, accessibility needs — everything. This becomes your single source of truth. Repository & Directory Architecture Decide upfront: Monorepo (Turborepo/Nx) Single repo Or fully separated frontend + backend I almost always go monorepo now — it keeps everything in sync and makes Claude’s context window infinitely more powerful. Locked-in Tech Stack My default stack for speed + quality: Next.js 15 (App Router) Shadcn/UI + Tailwind CSS Lucide icons Clerk for authentication BiomeJS (lightning-fast linting & formatting) pnpm or Bun as package manager I copy-paste this exact setup every time so Claude starts from a clean, opinionated foundation. Frontend Foundation – Semantic & Token-Based Before building any pages or features, implement: Full semantic token system (CSS variables + Tailwind) Light + Dark mode support from day one Atomic + Molecular component library (following atomic design principles) Only after this foundation is rock-solid do I let Claude start building actual features. This workflow consistently produces code that feels like it was written by a senior engineer who’s been on the project for six months — in a fraction of the time. If you’re tired of messy AI-generated code and want to actually ship clean, scalable products, save this post and try the framework on your next project. Who else is “vibe coding” with Claude but still prioritizes structure? Drop your go-to stack or first-step ritual in the comments 👇 #SoftwareEngineering #NextJS #ClaudeAI #DeveloperProductivity #WebDevelopment

Day 38/120: Portfolio Architecture, Team Dev, & Reconstructing Trees. 🏗️🌳 With Sentinel EWS officially deployed to production, the mission parameters are expanding. Building complex, AI-integrated geospatial systems is great, but if you can't present them properly to the market, they lose their leverage. Today was about presentation, teamwork, and algorithms. 1️⃣ Frontend Architecture: The Engineering Portfolio A standard template is not going to cut it anymore. The Blueprint: I started architecting a completely new personal portfolio. The goal isn't just to list projects; it's to build an interactive showcase that properly explains the WebSocket bridges in NexusIDE and the Zero-Signal offline engines in Sentinel. If you want a top-tier role, your portfolio needs to be a top-tier project itself. 2️⃣ Real-World Dev: College Club Architecture Transitioned some of my deep-work hours into a collaborative college club project. Applying the strict Git hygiene, ESLint rules, and component-driven architecture I’ve built over the last 37 days into a team environment. Writing code is one skill; writing code that a team can build upon is another. 3️⃣ DSA: Advanced Tree Reconstruction ✅ Construct Binary Tree from Preorder and Inorder Traversal (LeetCode 105): The Challenge: Rebuilding an entire tree structure from just two flat traversal arrays. The Logic: I engineered a recursive build function. By pre-mapping the indices of the inorder array into a pos map, I achieved O(1) lookups to instantly find the root and determine the boundaries of the left and right subtrees. The Result: Highly optimized execution with a 3ms runtime, beating 74.5% of C++ users. The Lesson: Writing the code is only half the job. Selling the architecture is the other half. The 5 AM protocol continues. #120DaysOfCode #Nextjs #FrontendEngineering #Portfolio #SoftwareEngineering #ReactJS #LeetCode #Cpp #SystemDesign

Three weeks ago I hit a wall with Claude Code. Not capability. Context. Every session started from scratch. No memory of yesterday's architecture decisions. No recollection of rejected approaches. No awareness of the project's design system. I was spending 15 minutes every session re-teaching Claude things it already knew. So I hunted for repos that solve this. Not proof-of-concepts. Production-grade tools. I found 9 that changed everything ↓ 𝟭. 𝗖𝗹𝗮𝘂𝗱𝗲 𝗠𝗲𝗺 — Persistent memory across sessions ↳ Captures, compresses, and injects relevant context automatically. 𝟮. 𝗦𝘂𝗽𝗲𝗿𝗽𝗼𝘄𝗲𝗿𝘀 — Agentic skills framework ↳ TDD, micro-task planning, Socratic brainstorming. 42K+ stars. 𝟯. 𝗚𝗦𝗗 (𝗚𝗲𝘁 𝗦𝗵𝗶𝘁 𝗗𝗼𝗻𝗲) — Spec-driven autonomous development ↳ Fresh context per task. Atomic commits. Overnight feature builds. 𝟰. 𝗨𝗜 𝗨𝗫 𝗣𝗿𝗼 𝗠𝗮𝘅 — Design system generator ↳ 50+ styles, 161 color palettes, 57 font pairings. 𝟱. 𝗻𝟴𝗻-𝗠𝗖𝗣 — Workflow automation from terminal ↳ 1,239 nodes. Natural language → deployable workflows. 𝟲. 𝗢𝗯𝘀𝗶𝗱𝗶𝗮𝗻 𝗦𝗸𝗶𝗹𝗹𝘀 — Knowledge base as dev resource ↳ Claude reads AND writes to your vault. 𝟳. 𝗟𝗶𝗴𝗵𝘁𝗥𝗔𝗚 — Knowledge graphs for codebases ↳ Relationships across 400+ files. Structural understanding. 𝟴. 𝗘𝘃𝗲𝗿𝘆𝘁𝗵𝗶𝗻𝗴 𝗖𝗹𝗮𝘂𝗱𝗲 𝗖𝗼𝗱𝗲 — The kitchen sink ↳ 10 language agents, 1,282 tests, 98% coverage. 𝟵. 𝗔𝘄𝗲𝘀𝗼𝗺𝗲 𝗖𝗹𝗮𝘂𝗱𝗲 𝗖𝗼𝗱𝗲 — Community-curated index ↳ 28,500+ stars. The discovery engine. 𝗧𝗵𝗲 𝗥𝗲𝘀𝘂𝗹𝘁𝘀: → Session startup: 15 min → 2 min → Shipped full auth system in one overnight run → UI prototypes clients actually approved → 5-8x faster on specific bottlenecks The full breakdown with installation commands, stacking order, and what to avoid is in the blog post. Which repo would YOU try first? 👇 👇 𝐋𝐢𝐧𝐤 𝐢𝐧 𝐭𝐡𝐞 𝐜𝐨𝐦𝐦𝐞𝐧𝐭𝐬! ♻️ Repost to help a developer supercharge their Claude Code . . . #ClaudeCode #GitHub #AI #DeveloperProductivity #DevTools #Anthropic #BuildInPublic #OpenSource