标签：#webdev

How I moved from a traditional web application mindset to exploring local-first architecture I wanted to build a simple software tool for my personal use. Nothing complicated. Something in the category of tools people build for themselves: A personal expense tracker A budgeting application A private knowledge management tool A personal organization system The important characteristic was this: The data belonged to one person. It was not a social application. It was not a collaboration platform. It did not need users interacting with each other. There was no requirement for: Public profiles Sharing updates Real-time collaboration Social features It was simply a tool that helped one person manage their own information. When I started thinking about building it, my first instinct was the most natural one for me. I am a web application developer. My comfort zone is building web applications. So my first thought was: "Why not build a Ruby on Rails application?" Something like: User | Web Application | Ruby on Rails API | PostgreSQL Database This is an architecture I have worked with many times. The workflow is familiar: Create models Build controllers Add authentication Store data in a database Deploy the application Access it from anywhere This is a proven architecture. For many products, this is exactly the right approach. But while thinking about this project, I asked myself a different question: Am I choosing this architecture because the problem requires it, or because it is the architecture I already know? That question changed the direction completely. Understanding The Actual Problem Before choosing technology, I wanted to understand the nature of the problem. What kind of application was I actually building? There is a big difference between building: A social network A marketplace A collaboration platform A communication application versus building: A personal tool A private utility A single-user productivity application In the first category, the server is the

The fourth call of the week Catherine calls from the Maisons-Laffitte site on a Tuesday afternoon in early May. "It's broken, but it's a quick fix." That's her line — I know it, and she's usually right. She describes it in three sentences: the newsletter export for the enrolled-students segment comes back with ninety-two names, the planning view shows ninety-two active courses, but the counter page shows eighty-nine. Three enrolled students missing. She'd checked the database directly — they're all there. "Why three steps for that?" She's not asking for my benefit. She's asking for herself. Except this time, hanging up, I realize it's the fourth time this week I've hung up thinking the same thing. Four Supabase incidents, four fixes, four closed tickets. And not a single exception raised by the database. I reopen the three previous ones and lay all four side by side on screen. This isn't four bugs. It's one failure mode, declinated four times. The first three Episode 1 was about the default GRANT s Supabase places on functions and policies. A SQL function created without an explicit REVOKE inherits anon access that nobody wrote in the migration, and that nobody caught in review because the diff doesn't show it. The function works. It's just callable from outside. [CANONICAL URL EPISODE 1: to fill in after publication of #48 — "3 Supabase security incidents, one shared root cause: SECURITY DEFINER inherits EXECUTE TO PUBLIC"] Episode 2, an ON DELETE SET NULL cascade coupled with a CHECK NOT NULL on the target column. The parent DELETE attempts the SET NULL , the CHECK rejects it, and the transaction surfaces an error we read as a deletion failure — while it actually masks a consistency assumption we'd held for three months. The query fails loudly, which is more charitable than the other three cases, but the diagnosis heads in the wrong direction because nobody had declared that the two constraints lived in tension. [CANONICAL URL EPISODE 2: to fill in after publicati

The request was eight words Monday morning. I open the outgoing email queue: six hundred and forty-seven drafts waiting, six hundred and seventy-two sent. Nobody clicks Send . First-contact emails are prepared by a pipeline and they sleep, because the last step assumes a human. That human, I had stopped believing she would have the time. I state the decision: automate sending . The response comes in seconds. Three levels of automation. Four channels. Three risk thresholds. All correct, all fit for a half-day architecture workshop. I had not asked for a workshop. Pauline walks behind me, glances at the screen, says nothing. Three timed reframes First reframe , brief: too strange, let's simplify . The agent drops two axes, keeps four residual layers, progressive warm-up over three weeks, deterministic anti-replay hash, configuration table in the database, manual Phase 1 followed by an automated Phase 2 to validate after two weeks of measurement. The target stays the same, that an email leaves without a human click. The path has grown accordingly. Second reframe , drier: simple, three safeguards, a kill-switch, we do this in one day . The agent re-architects, accepts the one-day target, keeps the three safeguards. But slips in three prostheses it calls industry standard : real-time dashboard, exponential retry, structured audit log in a new table. Each justifiable in isolation. None of them requested. Third reframe , shorter still: I don't understand why you're adding this . An opening line almost embarrassed, which I had never read from it before: "you're right, I'm over-engineering without necessity." And the version that should have arrived on the first round. A function that takes the draft record, checks three conditions, calls the send engine, returns. // lib/email-outbox.ts — generateFirstContactDraft (commit 3756e63) if ( ! EMAIL_REGEX . test ( input . email )) { return { success : false , error : ' email_invalide ' } } if ( BLACKLIST_EMAILS . has ( input . ema

When people picture "coding," they picture fast typing and features coming to life. Nobody pictures the real majority of the job: staring at a stack trace or lets say a particular project trying to figure out why something that should work, isn't. Here's what nobody tells you starting out — getting good at debugging has almost nothing to do with how well you write code, and everything to do with how well you read. The real difference between beginners and experienced devs isn't complex knowledge — it's that experienced devs read carefully and form a hypothesis before touching anything. Beginners (me included) tend to skip straight to changing code and hoping. It feels faster. It rarely is. One thing i'd like to advise other fellow beginner devs is ....Slow down, read the error properly, and follow the stack trace to where it actually starts — not where it ends up. What's a bug that taught you this the hard way?

This post contains Railway referral links. If you sign up through one I get a bit of credit. I build Old Light , a real-time strategy game that runs in the browser. Claim stars, grow an economy, send fleets, all while other players and NPC empires do the same. The second a build finishes or a fleet lands, the server pushes it to every connected client over a WebSocket. That last part, a long-lived server holding an open socket, rules out most of the usual hosts. Here's what it ruled in. Why not Vercel or Netlify Serverless shines when your backend is stateless functions. It's the wrong shape the moment you need a socket that stays open: socket.io wants one process that lives for the whole session, and serverless boots per request and then freezes. You can bolt on a managed WebSocket service, but that's a second system to run and pay for. Railway runs your service as a normal long-lived process, so socket.io just connects. Fly.io does this too with more knobs to turn. I wanted to ship, so Railway won. Monorepo, two services Old Light is an npm workspaces monorepo: a shared types package, an Express plus TypeORM plus socket.io API, and a Vite web app served by a small Express server. On Railway that's two services on the same repo, each with its own root directory and build command, shared built first. They deploy as separate origins, so the web app reads the API's URL from VITE_API_URL . Vite bakes that in at build time, so it's a build variable, not a runtime one. Postgres is a plugin that injects DATABASE_URL , and production runs migrations rather than synchronize . WebSockets need nothing special until you run more than one instance, at which point you'd add a Redis socket.io adapter. I haven't left a single box yet. A healthcheck that stops version skew Two services don't go live at the same instant. Push a commit that touches both, the web finishes first, and for a minute your new frontend is calling API routes that don't exist yet. It 404s, then heals itself o

There's a project on every developer's machine that has Sass installed for one reason: &:hover {} . Not @mixin . Not @each . Just the nesting. The variables long since became --custom-properties . The only thing still justifying node_modules/sass is the ability to write child selectors inside parent rules. CSS added that natively in 2023. It shipped in Chrome 112, Firefox 117, and Safari 16.5 — every major browser released in the last two years. The compiler is not earning its spot anymore. What you've been writing in Sass The classic pattern — component styles scoped to a block, with states and modifiers nested inside: .card { padding : 1 .5rem ; border-radius : 0 .5rem ; background : var ( -- surface ); & :hover { background : var ( -- surface-hover ); } & __title { font-size : 1 .125rem ; font-weight : 600 ; } & --featured { border : 2px solid var ( -- accent ); } } The output is flat, specificity-controlled CSS. The source is organized by component. That's the trade Sass nesting has always offered — and native CSS now offers the same deal. The same thing in native CSS .card { padding : 1.5rem ; border-radius : 0.5rem ; background : var ( --surface ); &:hover { background : var ( --surface-hover ); } & .card__title { font-size : 1.125rem ; font-weight : 600 ; } & .card--featured { border : 2px solid var ( --accent ); } } Two differences are worth noticing. First: pseudo-classes work exactly as in Sass — &:hover resolves to .card:hover with no extra syntax. Second: descendant selectors require an explicit & followed by a space. & .card__title becomes .card .card__title . This is where native nesting differs from BEM's __ / -- convention: in native CSS, & is a selector reference , not a string concatenation operator. If you're using BEM naming heavily, &__foo becomes & .block__foo . The compiled output is identical; the source is slightly more explicit about what's happening. Media queries nested inside their rules This is the feature that earns native nesting a pe

I believe Angular upgrades have become much smoother these days. Most of the time, a simple ng update is enough to move to the latest version. Instead, I spent hours chasing errors that looked completely unrelated to the real problem 😭 After upgrading the project to Angular 21, I started seeing errors like these: Cannot find module '@angular/material/chips' Cannot find module '@angular/material/dialog' Then another one appeared: Error: The current version of "@angular/build" supports Angular ^19... but detected Angular version 21.x instead. At first, it looked like Angular Material wasn't installed correctly but i think the actual issue was a version mismatch inside the project. Some packages had already been upgraded to Angular 21: @angular/core @angular/common @angular/material But the build system was still using: @angular-devkit/build-angular@19 Since Angular's build tools are tightly coupled with the framework version, the compiler started producing misleading errors. The build pipeline was the problem. The Commands That Helped I used these commands: npm ls @angular-devkit/build-angular npm explain @angular-devkit/build-angular They showed that my project was still resolving Angular 19's build package. That was the clue I needed and than I verified that every Angular package was using the same major version. Then I cleaned the project completely: rm -rf node_modules rm package-lock.json npm cache clean --force npm install It takes time usually.(and I did it several times cause Im failed 😃) Finally, I confirmed that all Angular packages were aligned before building again.

Eleven exhibits, last time. A career that kept refusing to fit inside a single box — trainer,...

AI is becoming a powerful part of modern software development. But I've realized that getting high-quality code isn't just about writing better prompts—it's about giving AI the right guidance. That's where Modern Web Guidance caught my attention. Instead of generating code that simply works, it encourages AI to produce HTML, CSS, and JavaScript that follow modern web standards. The result is code that is: More accessible Easier to maintain Better performing Closer to production-ready quality As a Front-End Engineer, I think this is an important shift. Rather than treating AI as a code generator, we can treat it as a development partner that follows the same engineering standards we do. This means fewer outdated patterns, better semantic HTML, improved accessibility, and cleaner architecture from the beginning. I'm planning to integrate Modern Web Guidance into my daily workflow for: Building accessible UI components Writing semantic HTML Creating maintainable CSS Improving JavaScript quality Reducing unnecessary refactoring after AI-generated code I'm curious to see how much it improves both code quality and development speed in real-world projects. If you've already tried Modern Web Guidance, I'd love to hear: What has been your experience? Has it improved the quality of AI-generated code? Any tips or best practices you've discovered? The future of AI-assisted development isn't just about generating more code—it's about generating better code. Happy coding! 🚀 Learn more: https://developer.chrome.com/docs/modern-web-guidance

Introduction Fintech engineers building backtesting engines, live quote dashboards, and algorithmic trading pipelines repeatedly face consistent pain points with market data APIs: limited granularity on free tiers, disjoint real-time and historical endpoints, inconsistent protocol support, and fragmented cross-asset coverage. This neutral technical breakdown compares three widely adopted market data providers, evaluating native functionality and end-to-end integration patterns to streamline API vendor selection for backend and quant teams. Core Evaluation Criteria Data Granularity & Historical Depth: Support for tick, intraday, and daily bars plus long-term archived records across equities and FX Protocol Compatibility: Native REST batch query and WebSocket real-time streaming implementation Developer Operational Overhead: Rate limits, documentation completeness, and production integration complexity Comparative Overview Provider Value Propositions AllTick: All-in-one multi-asset market data API built for quant developers, delivering unified tick/intraday/daily historical archives and dual REST/WebSocket access with balanced pricing for individual builders and small teams. Bloomberg: Institutional-grade terminal API offering comprehensive cross-market depth, alternative datasets, and proprietary analytics; targeted exclusively at enterprise investment teams with high entry integration overhead and subscription costs. Alpha Vantage: Lightweight free-first REST API ideal for early-stage prototyping and educational use, lacking native real-time streaming and deep tick-level historical archives. Feature Comparison Matrix Metric AllTick Bloomberg Alpha Vantage Free Tier Rate Limits 100 requests/min, full tick granularity access No permanent free tier; limited trial enterprise access only 5 requests/min, restricted to daily/intraday bars Live Latency Average 170ms native WebSocket push Sub-10ms dedicated institutional line feeds Polling-only, minute-scale delayed refresh

On July 8, 2026 I looked up a barcode that does not exist. Eight zeros. I sent them to Open Food Facts, the largest open nutrition database on the web, and it answered HTTP 200. Green light. Then I read the body: "status":0 , "status_verbose":"no code or invalid code" . A success code wrapped around a total miss. Ten seconds of trusting the status line and I would have written that empty result into a calorie tracker as if it were food. That is the whole post. The list of APIs is the easy part. The hard part is that a keyless food API hands you a clean 200 and a wrong answer, and it does it a slightly different way on almost every endpoint. A free food API here means a public nutrition, ingredient, or recipe endpoint that returns JSON with no API key, no signup, and no card. Not a CSV dump, not a partner form, not a portal from 2012. A real REST call you can paste into a terminal right now. I found eight that clear that bar, plus three worth knowing that quietly lean on a shared key. I re-verified every one with a live curl on July 8, 2026 (real HTTP code, real body, trimmed but never paraphrased). If you build calorie trackers, meal planners, grocery tools, or an AI agent that answers "how much sugar is in this," these are the lookups you reach for. Every one of them can lie to you with a 200. Here is the uncomfortable finding before the list. Keyless nutrition data in 2026 is mostly one project. Open Food Facts and its sibling databases (Pet Food, Products, Beauty, Prices) are six of the eight entries below: five distinct databases on one shared engine, with Open Food Facts itself showing up twice because it fails two different ways. Only two entries, Fruityvice and Wger, are independent, and Wger re-imports its data from Open Food Facts anyway. That concentration is not a weakness of the roundup. It is the point. Because it is one engine, the data-quality traps below are systemic, not one-offs. Learn them once and they repeat across the whole family. Let me be st

Everyone talks about the build. Nobody talks about what happens the week after, when you go to actually tell people it exists and discover every distribution channel has its own quiet gatekeeping you didn't know about until you hit it. Hacker News flagged my Show HN before it ever reached the front page. Not rejected — flagged, silently, likely because the account posting it was brand new with a self-promotional link and zero history. No warning, no explanation, just gone from /newest for anyone not specifically looking. Reddit was worse in a different way. r/webdev's AutoMod rejects any submission from an account under three months old with low karma — a hard gate, not a soft one, and it doesn't care which day you post or how you phrase it. r/SideProject let the post through technically, but Reddit's own spam filter quietly removed it minutes later, invisible to everyone except me looking at my own profile. X was just silence. Zero followers means the algorithm has no graph to push the post into. Four views, three of which were probably me refreshing. The one channel that actually worked was the one with the lowest bar to entry: writing. dev.to doesn't gate you behind account age or karma. You write something, it's live, and if it's genuinely useful, people find it — slowly, but for real. That's where actual engagement happened. The pattern underneath all of this: almost every high-leverage distribution channel is, by design, hostile to accounts with no history. That's not a bug — it's the exact mechanism that keeps those platforms usable, and it exists specifically to stop people doing exactly what I was trying to do: show up once with a link and leave. The system is working as intended. It just doesn't feel that way when you're the one hitting the wall. What's actually working, three weeks in, isn't a growth hack — it's writing things people search for, verbatim, and being patient about everything else building account history the boring way: showing up, commenti

Shared tool configurations drift when developers run local agents. Adding a new MCP server to a team setup usually fails to reach existing local configurations, leaving developers with outdated toolsets. We resolved this in our latest CLI release by introducing stateful configuration back-filling. The update merges new servers into local environments while preserving custom developer adjustments. What's new Angular stack integration : Added frontend domain detection for angular.json and @angular/* packages in the /stack-set command. The oma-frontend skill now includes angular-rules.md to enforce standalone components, OnPush change detection, and signals. API evolution patterns : Added API lifecycle patterns based on the MAP framework to oma-architecture . This includes Sajaniemi's 11 variable-role taxonomy to guide naming rules in oma-refactor . Windows scheduling updates : The schtasks adapter now maps weekly cron ranges like 1-5 or lists like 1,3,5 directly to Windows task scheduler formats. Model validation : Added vendor validation to the schedule:add command. The CLI now rejects unknown models at registration time rather than failing during execution. Keeping local environments synchronized across diverse OS targets requires strict validation. These fixes ensure configuration changes flow correctly without disrupting developer-specific settings. What's fixed MCP server synchronization : Fixed an issue where SSOT servers added to .agents/mcp.json were only copied if .mcp.json was entirely absent. The CLI now reads the source of truth on every run and merges missing entries. Test execution reliability : Restructured the project root resolution tests to mock the filesystem walk. This isolates test runs from ambient files on CI runners and avoids false failures. Market diversity flags : Corrected the --diversity-threshold flag documentation to reflect that the default threshold is not enforced unless the flag is explicitly set. Cleaning up obsolete protocols reduc

I just submitted another Chrome extension to the Chrome Web Store. I have submitted multiple extensions overtime. Mostly for my own tooling and community share or just because idea was fun. The first time took 3 attempts. The second time I got rejected in 12 hours for something completely avoidable. Here's every gotcha I hit — so you don't have to. 1. Manifest description has a 132-character hard limit Not documented prominently anywhere. You'll get a cryptic upload error: "The description field in manifest is too long." Your package.json description or wxt.config.ts description gets baked into manifest.json — check it BEFORE you zip. Fix : Count characters. 132 max. Put the detailed description in the CWS form, not the manifest. 2. Don't put a "Keywords:" line in your description I literally had: Keywords: pinterest seo, pin score, pin quality, pinterest optimizer... Rejected within 12 hours for "Keyword Spam." CWS explicitly bans keyword lists in descriptions — even if they're relevant. Your keywords should be woven naturally into prose. Fix : Write human sentences that include your keywords. "Score your Pinterest pin quality before publishing" contains 3 keywords naturally. 3. upload-artifact@v4 silently skips hidden directories If your build tool outputs to .output/ (like WXT does), GitHub Actions' upload-artifact won't find it. The glob path: .output/*.zip returns nothing because .output starts with a dot. Fix : Add include-hidden-files: true to your upload-artifact step. - uses : actions/upload-artifact@v4 with : path : .output/*.zip include-hidden-files : true 4. optional_permissions need justification too I added sidePanel as an optional permission (reserved for a future feature). CWS asked me to justify it. Optional doesn't mean invisible to reviewers. Fix : Add a justification for EVERY permission — required AND optional. Explain what it'll do and why it's optional. 5. "Support URL" is not your email address The form has separate fields: Support email : yo

Hi everyone! I recently launched IsItCrashing.com How often do you deploy a website only to discover later that: ❌ A page is returning a 404 or 500 error ❌ Images or assets aren't loading on some random pages ❌ A route is completely blank ❌ JavaScript crashes are breaking the page ❌ Customers find the problem before you do IsItCrashing.com helps you catch these issues before your users do. Simply enter your website URL, and the tool scans your site to identify: ✅ Broken pages (404/500) ✅ Broken links ✅ Missing assets ✅ Blank pages ✅ JavaScript errors ✅ Website health issues Get a clean, easy-to-read report so you can fix problems quickly and deploy with confidence. Whether you're a developer, QA engineer, agency, or website owner, IsItCrashing.com makes website testing faster and easier. try out here : 🌐 https://isitcrashing.com

Every API request needs to answer: who is this, and are they allowed? Session auth answers it by having the server remember every login. JWT answers it by making the client carry its own proof — no server memory needed. What's inside a token Header . Payload . Signature. Header and payload are just base64-encoded — readable by anyone, not encrypted. The signature is what matters: a hash of the header + payload, made with a secret key only the server knows. Change one character of the payload, the signature breaks, the server rejects it. Trust comes from the math, not from hiding the data. Client logs in with credentials Server verifies them, signs a token, sends it back Client attaches the token to every future request Server checks the signature — no database lookup Valid + not expired → request proceeds No session table anywhere. The auth state lives inside the token itself. The trade-off Can't instantly revoke a token — it's valid until it expires. Fix: short-lived access tokens + a revocable refresh token. Payload is readable, so never put sensitive data in it. Security comes from HTTPS + safe client-side storage, not secrecy. One-liner to remember it by Session auth: remember who logged in, check memory each time. JWT: remember nothing, verify the proof each time.

This is the second stage of my CodeAlpha Full Stack internship — two projects, built in a deliberate order so the patterns from the first carry forward. First was a project management tool (auth + real-time updates with Socket.io). This one is a store: products, cart, orders. Same stack — Express, Prisma, PostgreSQL, JWT — but the interesting part isn't the CRUD, it's the order-placement flow, which is the first genuinely transactional piece of logic in the whole internship. I'll walk through the schema decisions, the auth changes from project one, and then spend most of the time on the part that actually matters: making sure an order can never be created without correctly and atomically updating stock and clearing the cart. The schema model User { id String @id @default(cuid()) name String email String @unique password String role String @default("USER") createdAt DateTime @default(now()) orders Order[] cartItems CartItem[] } model Product { id String @id @default(cuid()) name String description String price Float image String? stock Int @default(0) category String createdAt DateTime @default(now()) cartItems CartItem[] orderItems OrderItem[] } model CartItem { id String @id @default(cuid()) quantity Int @default(1) user User @relation(fields: [userId], references: [id]) userId String product Product @relation(fields: [productId], references: [id]) productId String @@unique([userId, productId]) } model Order { id String @id @default(cuid()) status String @default("PENDING") total Float createdAt DateTime @default(now()) user User @relation(fields: [userId], references: [id]) userId String items OrderItem[] } model OrderItem { id String @id @default(cuid()) quantity Int price Float order Order @relation(fields: [orderId], references: [id]) orderId String product Product @relation(fields: [productId], references: [id]) productId String } Two decisions worth explaining, because they're easy to get wrong if you're building this for the first time. OrderItem.price is a

The first message ever sent across the network that became the internet was not a grand declaration. It was two letters: "LO" . Not a word anyone chose, not a slogan, just the first half of a login command that never finished because the system crashed. More than fifty years later, that accidental fragment is one of the best origin stories in computing, and it still has something to teach anyone building connected devices today. The night of 29 October 1969 At around 10:30 in the evening on 29 October 1969, a student programmer named Charley Kline sat at a computer in Leonard Kleinrock's lab at UCLA. His job was to log in to a second machine roughly 350 miles away at the Stanford Research Institute (SRI) in Menlo Park, California. The two computers were among the first nodes of ARPANET, the U.S. Defense Department research network that would eventually grow into the internet. Kline started typing the command LOGIN . To make sure the letters were arriving, he had a colleague at SRI on the phone confirming each keystroke. He typed L , and Stanford confirmed the L. He typed O , and Stanford confirmed the O. Then he typed G , and the SRI machine crashed. So the very first message transmitted over ARPANET was the truncated, unintentional "LO" . Kleinrock has enjoyed pointing out for decades that they could not have scripted anything better: the first word on the internet was "lo," as in "lo and behold." A little over an hour later, after the bug was fixed, Kline completed a full login, but the accidental version is the one history remembers. Why a crash matters more than a clean success It is tempting to treat "LO" as a cute footnote, but the crash is the useful part. ARPANET was not built to be reliable on day one. It was built to discover how to be reliable. Everything we now take for granted about networking, error handling, retransmission, acknowledgements, graceful recovery, exists because early links failed constantly and engineers had to design around failure rath

While researching API changes I noticed something — Google Maps removed DirectionsService on May 1 2026 with no soft fallback. Calls just throw runtime errors after the deadline. Most developers won't know until something breaks. So I built DepRadar — paste your package.json, it checks your exact stack against known deprecations and shows only the ones affecting you, with severity, sunset dates, and migration links. Currently tracks 13 real deprecations across: Google Maps (DirectionsService, DistanceMatrixService removed) OpenAI (Realtime API Beta sunset) AWS SDK v2 (maintenance mode) Microsoft Actionable Messages (retired) moment.js, request package And more Free → depradar.netlify.app Open source → github.com/Ahmed889-code/depradar What deprecations am I missing from your stack?

Bad nextjs folder structure does not show up on day one. It shows up at month six when three developers search for the checkout form hook and find four copies. I reorganised a client dashboard after exactly that — this guide is the tree I use now on large App Router projects, why each folder exists, mistakes from my first Next.js apps, and the 10-second findability rule . Real folder tree — production-shaped layout my-app/ ├── app/ # routes only — thin pages │ ├── (marketing)/ # route group — shared layout, no URL segment │ │ ├── layout.tsx │ │ ├── page.tsx │ │ └── pricing/page.tsx │ ├── (dashboard)/ │ │ ├── layout.tsx │ │ └── orders/page.tsx │ ├── api/ # route handlers │ │ └── webhooks/stripe/route.ts │ ├── layout.tsx # root layout │ └── globals.css ├── components/ # shared UI — buttons, cards, shell │ ├── ui/ │ └── layout/ ├── features/ # business domains — colocated logic │ ├── auth/ │ │ ├── components/ │ │ ├── hooks/ │ │ └── actions.ts │ └── orders/ │ ├── components/ │ ├── api.ts │ └── types.ts ├── lib/ # server + shared utilities │ ├── db.ts │ └── env.ts ├── hooks/ # truly global client hooks ├── types/ # global TS types ├── data/ # static data, blog posts list └── public/ Routes live in app/ . Business logic lives in features/ . Generic design system pieces live in components/ui . That separation is the whole game. Why each folder exists Folder Purpose Do not put here app/ URLs, layouts, loading.tsx Fat business logic features/ Domain modules (orders, auth) Generic Button components/ui Reusable primitives Order-specific tables lib/ DB clients, env validation React components app/api Webhooks, REST edge cases Every form POST (prefer actions) Thin pages — route files under 40 lines // app/(dashboard)/orders/page.tsx — orchestration only import { OrderTable } from "@/features/orders/components/OrderTable"; import { getOrders } from "@/features/orders/api"; export default async function OrdersPage() { const orders = await getOrders(); return ( <section> <h1>Orders