GritGrit
GitHub

apps/web + apps/admin + apps/api

Three apps, one monorepo.

8 mineasy

Tour all three apps. We already covered apps/api in the Go API course; this lesson focuses on apps/web and apps/admin ā€” what's the same, what's different.

apps/web ā€” the public Next.js site

apps/web/
apps/web/
ā”œā”€ā”€ app/
ā”‚   ā”œā”€ā”€ (marketing)/         public pages ā€” landing, pricing, blog
ā”‚   ā”‚   ā”œā”€ā”€ page.tsx
ā”‚   ā”‚   ā”œā”€ā”€ pricing/page.tsx
ā”‚   ā”‚   ā””ā”€ā”€ layout.tsx       header + footer
ā”‚   ā”œā”€ā”€ (auth)/              login, signup, forgot-password
ā”‚   ā”œā”€ā”€ (app)/               logged-in pages ā€” dashboard, settings
ā”‚   ā”‚   ā”œā”€ā”€ dashboard/page.tsx
ā”‚   ā”‚   ā””ā”€ā”€ layout.tsx       sidebar + topbar
ā”‚   ā”œā”€ā”€ api/                 Next.js route handlers (mostly empty)
ā”‚   ā””ā”€ā”€ layout.tsx           root layout ā€” theme, providers
ā”œā”€ā”€ components/              reusable React components
ā”œā”€ā”€ hooks/                   useUsers, useCurrentUser, ā€¦
ā”œā”€ā”€ lib/                     api client, auth helpers, utils
ā””ā”€ā”€ public/                  static assets

Three route groups: (marketing), (auth), (app). Each has its own layout. The parens don't appear in URLs.

apps/admin ā€” the staff panel

apps/admin/
apps/admin/
ā”œā”€ā”€ app/
ā”‚   ā”œā”€ā”€ (auth)/login/page.tsx
ā”‚   ā”œā”€ā”€ dashboard/page.tsx
ā”‚   ā”œā”€ā”€ resources/
ā”‚   ā”‚   ā”œā”€ā”€ users/page.tsx       defineResource() ā€” generates CRUD
ā”‚   ā”‚   ā””ā”€ā”€ products/page.tsx
ā”‚   ā””ā”€ā”€ layout.tsx               admin shell ā€” sidebar, top nav
ā”œā”€ā”€ components/
ā”‚   ā”œā”€ā”€ admin/                   DataTable, FormBuilder, etc.
ā”‚   ā””ā”€ā”€ ui/                      shadcn primitives
ā”œā”€ā”€ hooks/
ā””ā”€ā”€ lib/

The killer file is app/resources/x/page.tsx ā€” we cover defineResource() in chapter 4. Almost every admin page is one of these.

What's the same across both apps

  • Both use Next.js 14 App Router (no Pages Router)
  • Both import types from @workspace/shared
  • Both use React Query for data
  • Both use shadcn/ui + Tailwind CSS

What differs

  • Auth scope ā€” web cookies are scoped to customer-token; admin to staff-token. One can't accidentally log into the other.
  • Layout ā€” web is marketing-shaped (header / hero / footer); admin is dashboard-shaped (sidebar / topbar).
  • Robots ā€” admin has noindex,nofollow on every page.
The shared API client trick: both apps import the same lib/api.ts shape but configure it with different cookie names. We'll see this in chapter 3.

Quick check

A teammate suggests deleting apps/admin and gating admin URLs inside apps/web by role. Trade-off check ā€” what's the biggest downside?

Try it

In your scaffolded project, open both apps/web/app/layout.tsx and apps/admin/app/layout.tsx. In notes.md, write:

  • What providers does each app wrap children in?
  • What's in each app's root metadata (title, OG, etc.)?
  • What one component or import is DIFFERENT between them?

What's next

Last lesson of the chapter ā€” packages/shared, the glue between the three apps.

Spot a typo? Have an idea?

Help us improve this lesson. One click opens a GitHub issue with the lesson URL pre-filled ā€” suggest clearer wording, report a bug, or request more depth. The course keeps improving thanks to learners like you.

Suggest an improvement on GitHub
Previous lessonNext lesson