# WebAppPage

When a user logs into your product, they access to your web app.

By default, Shipped redirects the users to the `/dashboard` page.

The dashboard page is an example of web app page with the sidebar (that's responsive and hides on mobile).

<figure><img src="/files/r8imlFNuywK6CRVBqa5M" alt=""><figcaption><p>Default /dashboard page</p></figcaption></figure>

If you want to reuse this template for all the pages of your web app, it's strongly recommended to re-use the `<WebAppPage />` component.

The `<WebAppPage />` component is a template component that includes:

* the sidebar&#x20;
* the content to be replaced with your React components, according to the current route

## How to add a new web app route

Let's say you want to add a settings page, to let the users set their preferences.

The route you want is `/settings`, to get it you need to:

* Create the route `settings` into `Routes` at `src/data/routes.ts`

{% code title="src/data/routes.ts" %}

```typescript
export enum Routes {
  /* ... */
  settings = "/settings",
  /* ... */
}
```

{% endcode %}

* Create the file `src/app/settings/page.tsx`
* Paste this content (notice `currentPage` set to `Routes.settings`):

{% code title="src/app/settings/page.tsx" %}

```tsx
import { WebAppPage } from "@/components/templates/WebAppPage/WebAppPage";
import { Routes } from "@/data/routes";

const SettingsPage = () => {
  return <WebAppPage currentPage={Routes.settings} />;
};

export default SettingsPage;

```

{% endcode %}

* Update the component `<WebAppPage />`, scroll down where the routes are handled and add your custom content

{% code title="src/components/templates/WebAppPage/WebAppPage.tsx" %}

```tsx
{currentPage === Routes.dashboard && (
  <Center w="100%" flexDir="column">
    <Heading>Welcome</Heading>
  </Center>
)}
{/* Add the route components here */}
```

{% endcode %}

For instance add this code (notice that UserSettings is not provided by Shipped, it is used as an example here):

```tsx
{currentPage === Routes.settings && (
  <UserSettings />
)}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.shipped.club/components/webapppage.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.