Map the App Router

Open app/layout.js, app/page.js, and the route folders under app/.

The shared layout.js renders the dashboard shell and navigation. page.js renders the Convert screen, while the rates, favorites, and history folders provide their own pages.

javascript

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Header />
        <div className="dashboard-content">
          {children}
        </div>
      </body>
    </html>
  );
}

Test it

Visit /, /rates, /favorites, and /history and confirm the shared navigation remains visible.

Checkpoint

You can explain which file owns the shared shell and which route owns each page.