Sefism is free for learners. We are here to help you grow, one step at a time.Join for free
Sefism.

Project structure · Frontend

React Router (framework mode, formerly Remix) project structure

Opens with credits

A server-rendered React app built with React Router in framework mode, the direct successor to Remix. Every URL maps to a route module that loads its own data in a loader, handles its own forms in an action and renders with the result; app/routes.ts wires the URLs together. The example is a task tracker for small teams, with sessions, PostgreSQL through Drizzle, middleware for auth and a Docker deploy.

Curated by Tauseef FayyazIntermediate131 files and foldersReact Router 8.4, React 19.3, Vite 8.3Checked October 2026
Explore the filesPick any file to see what it is, why it exists and when you add it.

How it grows

Each stage opens the explorer there

  1. 1Day 1What the scaffold and your first hour give you30 files and folders
  2. 2GrowingWhat a real app with features and tests adds+58 files and folders
  3. ProductionWhat running it for real users adds+25 files and foldersOpens with credits
  4. ExpertWhat a team needs to keep it healthy for years+18 files and foldersOpens with credits

How it is organised

  • `app/routes.ts` is the map of the app: every URL is listed there and points at one route module. The folder layout under `app/routes` is yours to choose; group by area so it reads like the navigation.
  • A route module owns its data: `loader` for reads, `action` for writes, the default export for UI. Data flows in through `loaderData` and `actionData`, typed by the generated `./+types/<route>` file.
  • Mutations are forms. A `<Form method="post">` or a `useFetcher()` posts to an action; after it finishes, React Router revalidates the loaders on the page, so you rarely manage a client cache by hand.
  • Progressive enhancement by default: forms work before JavaScript loads. Keep it that way unless you have a reason not to.
  • Server-only code lives in `app/.server/`. The build fails if browser code imports from it, which keeps secrets and the database client out of the bundle.
  • Auth runs as middleware on a layout route, so every nested route is protected without repeating a check. Ownership checks live in the `.server` query functions, not in components.
  • Route modules stay thin: parse the request, call a `.server` function, return data or a redirect. Business rules and SQL live in `.server`, where they can be unit tested without rendering anything.
  • Tests grow in layers: query functions and route components with Vitest and `createRoutesStub` at Growing, real database tests and Playwright journeys at Production, accessibility, visual and load tests at Expert.

At the top of the project

Open one in the explorer for the full story

Learn more on Sefism

Roadmaps, cheat sheets and projects that go with React Router (framework mode, formerly Remix).

See 11 more
Checked against 17 official sources, October 2026. If something has changed, the docs win.Show sources

Best practices and checklists for this stack

Picked from the other libraries by shared topics.

Best practices

See all

Checklists

See all
Work with me

Stuck on something specific?

Writing only gets you so far. If you want an answer to your situation rather than the general case, book a session and we will work through it together. Sessions are free for approved Sefism members, and a few slots open each week.

  • 1:1 Mentorship
  • Fresh Graduate Mentorship
  • Career Guidance
Book a free sessionSee all services

Brand deals, promos and partnerships: tauseeffayyaz@gmail.com