AI in UI Layer: Why It Belongs at the Data Layer

NestJs won't properly scale with this structure. Having tens of controllers or services in the same folder may be confusing to follow. That's why the modules structure works, you have all the components you need for that feature in the same folder. You could also separate concerns and import shared modules across the app.

🚀 I Added AI to My React App Without a Backend, API Key, or Even an npm Package 🤯 Today I experimented with Puter.js in a React app and it honestly feels like one of the fastest ways to learn AI integration in frontend projects. ⚠️ This is mainly for testing, learning, prototypes, and side projects — not something I would directly use in production yet because the free usage is limited and there can be rate limits. The best part? There is nothing to install with npm. For React, you only need to add this script once: `<script src="https://js.puter.com/v2/"></script>` or dynamically load: `https://js.puter.com/v2/` Then from React you can directly call AI. As a small test, I built a feature where the user only types: “ask client to send pending invoice and mention payment is delayed” …and AI instantly converts that into a complete professional email with subject and body ✉️ Why I think this is interesting 👇 ✅ Perfect to understand how AI can fit into existing React apps ✅ Great for quickly testing ideas before investing in a real AI backend ✅ Helps learn prompting and structured JSON responses ✅ Super useful for prototypes, demos, and hackathons Some ideas you can build in minutes: 🔥 AI email generator 🔥 Smart search filters from plain English 🔥 Error explanation from raw console errors 🔥 Ticket summarizer 🔥 Form auto-fill from one sentence For production, I would probably move to a proper backend or local model later, but for learning AI integration in React this is honestly one of the easiest tools I have tried. #reactjs #javascript #ai #puterjs #frontend #webdevelopment #reactdeveloper #codeinuse

I thought I understood React state. Then I tried to build a real AI-powered Notes app. And everything fell apart.. My components were a mess.. AI features couldn't "see" which note was selected. The sidebar didn't know what the editor was doing. It felt like I was coding… but I was just guessing. That's when I stopped and asked the real question: "𝐖𝐡𝐞𝐫𝐞 𝐬𝐡𝐨𝐮𝐥𝐝 𝐝𝐚𝐭𝐚 𝐚𝐜𝐭𝐮𝐚𝐥𝐥𝐲 𝐥𝐢𝐯𝐞?" Here's what I was getting wrong: I was storing state 𝐢𝐧𝐬𝐢𝐝𝐞 components that needed it. But the problem is multiple components needed the 𝐬𝐚𝐦𝐞 data. • The AI panel needs to know which note is selected • The sidebar needs to highlight the active note • The editor needs to read AND update the same note They're in completely different parts of the tree. Local state couldn't reach any of them. Then it clicked. The note wasn't a component's concern. It was the 𝐚𝐩𝐩'𝐬 concern. That's exactly what React Context solves. Instead of passing props 4 levels deep (prop drilling)… You create one global "source of truth" that any component can tap into. 𝒋𝒔𝒙 // 𝑨𝒏𝒚 𝒄𝒐𝒎𝒑𝒐𝒏𝒆𝒏𝒕. 𝑨𝒏𝒚𝒘𝒉𝒆𝒓𝒆 𝒊𝒏 𝒕𝒉𝒆 𝒕𝒓𝒆𝒆. 𝒄𝒐𝒏𝒔𝒕 { 𝒔𝒆𝒍𝒆𝒄𝒕𝒆𝒅𝑵𝒐𝒕𝒆, 𝒖𝒑𝒅𝒂𝒕𝒆𝑵𝒐𝒕𝒆 } = 𝒖𝒔𝒆𝑵𝒐𝒕𝒆𝒔() Three lines of setup. Zero prop drilling. Every component instantly in sync. But here's the part nobody talks about: Context isn't just a React trick. It's a thinking decision. • What data belongs to one component? → local state • What data belongs to the whole app? → context • What data belongs to the server? → service layer Getting this wrong doesn't just create bugs. It creates code you're afraid to touch. The developers who grow fastest aren't the ones who know the most APIs. They're the ones who pause and ask: "Where does this actually belong?" Before writing a single line. Now I follow a simple rule: 👉 If more than one component needs it, it doesn't belong to any of them. Still building this app in public. Still making architectural mistakes. But each one is teaching me something tutorials never could. What's a React concept that only made sense when you broke something trying to use it? #BuildInPublic #ReactJS #WebDevelopment #AIEngineering #JavaScript #SoftwareEngineering

How I structure every NestJS + Next.js project from day one Most full-stack projects fail not because of bad code, but bad architecture decisions made on day one. After 5+ years building scalable web apps for startups and enterprise teams, here is the folder structure I use on every NestJS + Next.js project: Backend (NestJS): modules/ common/ config/ database/ ai/ → LLM service layer (isolated) → feature-based, never by file type → guards, interceptors, decorators → env validation with Zod → TypeORM entities + migrations Frontend (Next.js App Router): → co-located components + hooks → routes only, no logic app/ features/ lib/ services/ store/ → shared utilities → API calls (typed, never raw fetch) → Zustand or Redux Toolkit 3 rules I never break: → No business logic in controllers → No API calls in components → Al/LLM layer always isolated behind a service interface This separation saved a client 3 weeks of refactoring when we swapped GPT-4 for a self-hosted model mid-project. What does your project structure look like? Drop it below - I'll give honest feedback. #FullStackDevelopment #NestJS #NextJS #TypeScript #SoftwareArchitecture #next #frontend #softwareEngineer

Ever get stuck on a LeetCode problem and wish you had a mentor sitting right next to you? Over the last few days, I’ve been building a solution for exactly that. I’m incredibly excited to share my latest project: The LeetCode AI Helper! 🚀 Instead of constantly switching tabs to ask for hints and solution which is btw is so annoying (atleast for me 😣 ) , I engineered a custom Chrome Extension that injects a context-aware AI tutor directly into the LeetCode environment. ✨ Core Features: 1. Context-Aware DOM Scraping: The extension automatically reads the active problem description from the page so the AI knows exactly what you are working on—no copy-pasting required. 2. Native Code Highlighting: I implemented a custom Markdown parser so whenever the AI writes code, it formats with a VS Code Dark theme using react-syntax-highlighter. 3. Bring-Your-Own-Key Architecture: User API keys are securely saved locally via Chrome’s storage API to ensure total privacy. 🛠️ The Tech Stack: React, Vite, Google Gemini API, and Chrome Extensions API V3. 💡 My Technical Learnings: 1. Building an extension in React is a completely different beast than building a standard web app! Some of my favorite challenges included: The "Invisible Glass Shield" Bug: Figuring out how to inject a React root over an existing website without intercepting the user's mouse clicks (pointer-events manipulation was key here!). Sometimes wrapper can be the pain instead of being a convenience 🙂 2. Dynamic Viewport Layouts: Managing complex CSS Flexbox rules to ensure the chat UI dynamically resizes and handles text-wrapping without breaking LeetCode's native layout. State Management in Extensions: Learning how the DOM interacts with floating React components. 3. The extension will be officially launching on the Chrome Web Store soon, but for now, the source code is completely open-source! You can check out the GitHub repository and try it out locally here: [https://lnkd.in/gHRt9cqQ] Let me know what you think, or if you have any feature suggestions! #React #FrontendDevelopment #ChromeExtension #WebDevelopment #JavaScript #GoogleGemini #SoftwareEngineering #LeetCode

🚨 𝗪𝗲𝗯 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝘁 𝗶𝗻 2026 𝗶𝘀 𝗡𝗢𝗧 𝘄𝗵𝗮𝘁 𝗶𝘁 𝘄𝗮𝘀 2 𝘆𝗲𝗮𝗿𝘀 𝗮𝗴𝗼. Here’s what’s quietly changing everything: → AI writes your scaffold. You architect the vision. → Server-first is the new default , less JS on the client = faster, safer apps → Meta-frameworks (Next.js, Nuxt) are becoming the entire stack , routing, caching, APIs, all in one → PWAs are replacing native apps , one codebase, up to 60–70% less cost → Edge computing is eliminating loading delays ,data is processed closer to the user → TypeScript is no longer optional , plain JavaScript in production is becoming legacy 𝐓𝐡𝐞 𝐝𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫𝐬 𝐰𝐢𝐧𝐧𝐢𝐧𝐠 𝐭𝐨𝐝𝐚𝐲 𝐚𝐫𝐞𝐧’𝐭 𝐭𝐡𝐞 𝐨𝐧𝐞𝐬 𝐰𝐫𝐢𝐭𝐢𝐧𝐠 𝐦𝐨𝐫𝐞 𝐜𝐨𝐝𝐞… 𝐓𝐡𝐞𝐲’𝐫𝐞 𝐭𝐡𝐞 𝐨𝐧𝐞𝐬 𝐰𝐡𝐨 𝐮𝐧𝐝𝐞𝐫𝐬𝐭𝐚𝐧𝐝 𝐰𝐡𝐚𝐭 𝐭𝐨 𝐛𝐮𝐢𝐥𝐝 𝐚𝐧𝐝 𝐰𝐡𝐲 𝐢𝐭 𝐦𝐚𝐭𝐭𝐞𝐫𝐬.  𝑻𝒉𝒆 𝒕𝒐𝒐𝒍𝒔 𝒉𝒂𝒗𝒆 𝒆𝒗𝒐𝒍𝒗𝒆𝒅. Now the mindset has to follow. 👉 𝑨𝒓𝒆 𝒚𝒐𝒖 𝒌𝒆𝒆𝒑𝒊𝒏𝒈 𝒖𝒑 — 𝒐𝒓 𝒄𝒂𝒕𝒄𝒉𝒊𝒏𝒈 𝒖𝒑? #WebDevelopment #Frontend #TechTrends #JavaScript #AI #Developer

🚀 Built GEN UI — an AI-powered frontend generator A simple prompt → a complete React application with structured files, editor, and live preview. 🔗 Live Demo: https://lnkd.in/dsCDKrNG 💻 GitHub: https://lnkd.in/diH_BtjQ 💡 Highlights: • Generates full multi-file frontend projects. • Clean project structure with components. • Integrated editor with real-time preview. • AI-based error correction. • Downloadable code • Live shareable link ⚙️ Tech Stack: Next.js • Motion • LangChain • Zustand Fireworks AI (Kimi K2.5) —UI generation Groq (Kimi 2 Instruct) — error fixing CodeSandbox — runtime & preview Focused on building practical AI tools that improve developer productivity and simplify app creation. Open to feedback and opportunities to collaborate. #AI #GenAI #NextJS #WebDevelopment #JavaScript

𝗕𝗨𝗜𝗟𝗗𝗜𝗡𝗚 𝗔 𝗙𝗥𝗢𝗡𝗧𝗘𝗡𝗗 𝗧𝗛𝗔𝗧 𝗠𝗔𝗞𝗘𝗦 𝗔𝗜 𝗗𝗘𝗖𝗜𝗦𝗜𝗢𝗡𝗦 𝗨𝗡𝗗𝗘𝗥𝗦𝗧𝗔𝗡𝗗𝗔𝗕𝗟𝗘 We built a frontend that helps you understand AI decisions. You get to see: - Customer Timeline View - AI Reasoning Trace - Comparison Dashboard We used real-time interaction and design principles to make it work. The hard parts were making it simple and easy to use. Our stack includes Next.js, Tailwind CSS, WebSockets, React, and FastAPI. Source: https://lnkd.in/gFjt-fcK

🚀 Just shipped something I'm really excited about — an AI-powered Print-on-Demand platform built from scratch. Here's what it does: → Describe your design idea in plain English → AI rewrites it into a precise image generation prompt (Claude) → Recraft V4 generates the artwork → Background is automatically removed → You place it on a T-shirt or Hoodie mockup with a live preview → Set your price, publish your listing, and start selling The full stack: ⚙️ Backend — Express.js + TypeScript, MongoDB, Cloudinary for image processing, Stripe for payments, Better Auth for auth 🎨 Frontend — React 19 + TypeScript, Fabric.js canvas editor, TanStack Query, Tailwind CSS 🤖 AI — Anthropic Claude for prompt engineering, Recraft V4 for image generation, Remove.bg for background removal Every mockup is dynamically composited on Cloudinary — the artwork is overlaid onto the product at exactly the right position and scale, per color variant, at request time. Still a lot to build — order fulfillment, analytics, seller dashboard — but the core loop works end to end. Source Code: https://lnkd.in/gr88WNUf Happy to answer questions for anyone building something similar. 👇 #buildinpublic #indiehacker #typescript #reactjs #nodejs #aitools #printOnDemand #sideproject

A month ago, Błażej Kustra shipped 3 open-source React Native libraries in a single week – each one built with its own Claude Code agent running in parallel. 😳 And he learned a few things along the way: 👉 AI agents aren’t just good for simple CRUD apps. They can handle hard engineering problems like experimental threading, undocumented APIs, and bleeding-edge React Native Screens features. 👉 It’s not always the best idea to scale to multiple agents right away. Start with one, and when you notice you’re mostly waiting for it to finish, add another. 👉 Git worktrees turn out to be the cleanest way to run multiple agents on the same codebase. 👉 Seemingly small setup choices can make a big difference: start from a proven template, use a dedicated terminal (not VSCode's), and minimize permission prompts to avoid constant context switching. Want more insights? Read our article and be sure to check out the libraries 👇