Easily render the pages of your Micro SaaS web app.

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).

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

  • 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

export enum Routes {
  /* ... */
  settings = "/settings",
  /* ... */
  • Create the file src/app/settings/page.tsx

  • Paste this content (notice currentPage set to Routes.settings):

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

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

export default SettingsPage;
  • Update the component <WebAppPage />, scroll down where the routes are handled and add your custom content

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

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

{currentPage === Routes.settings && (
  <UserSettings />

Last updated