# 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="https://3985976695-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT3t4pDs63s3Soj1JetJw%2Fuploads%2F8TEwlHxReEOc8ALuOhCK%2Fimage.png?alt=media&#x26;token=451e52c4-26b4-46fd-8912-246a5fd7a790" 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 />
)}
```