Client Architecture

Client Side in this template is built using Material UI.

Theming

I love how easy is to modify theme and differnet components just from a single file. You can modify client/theme/index.ts as per your theme. The regular Mui way.

But I prefer to keep a differnet file for colors. client/theme/colors.ts is useful for importing colors in files like _document.ts to set the theme color in a <meta> tag.

Components

Its good to create custom components on top of Mui and Next.

There are Link , Image and Input.

I would soon also add more helpers components. But there is also

  • AuthRequired Makes sure to render children when user is authenticated else show login link. Read more about authentication here.
  • ErrorBoundary This takes care to show a Error Message when a component crashes and avoid entire application being crashed.
  • ErrorMessage Handy component to show a display Error Message defaulted to classic "Something Went Wrong".
  • ApplicationWrapper - You can wrap all your ThemeProviders, Context Providers, and other Global Configs here.
  • SideBySideContent which can allow responsive left and right content pattern.

Toaster

I liked the simple to use API of react-hot-toast for notifications.

These are handy in lot of situations. We can just call functions these way and have the notification on screen right away.

toast.loading('Deleting...')
toast.success('Successflly created post!')
toast.error('Not Allowed!')

Client Side error handling makes use of this in some way. Read Below.

Error handling

There is client/errors file where you can defined your own custom errors. And throw them from client side. Similar to server approach, its better to extend each custom error with ClientSideError.

For Example,

if (res.status != 200) {
  throw new ClientSideError('Something went wrong. Please try again.')
}

So this will also show a toast notification with the error message. Can be different for different types of error. But you can turn off these features if you want.

Optionally, this will also allow you to log specific type of error for analytics etc.

And lastly you can wrap certain components with ErrorBoundary.tsx to avoid entire application being crashed. You can also log some unknown errors to database and comeback to fix them.

Data Fetching

We have kept a data access layer client side too. client/data this contains all the data fetching functions. Usually, it just does fetch calls. Its better this way because you can then replace the data accessing methods with any other like Firebase Client SDKs, etc.

And if requests fail it throw instanceof ClientSideError. Which show toast notification automatically.

Similarly, you can create custom hooks for reading Realtime data and use in components. And i recommend not do any data fetching implementation in component files.

Tip: For reading data from API and use in React Components, I highly recommend using SWR. I love this library. This isn't included in this template yet. But there is some plan to add it soon.

Similary, don't directly call useSWR in any component files. Make custom hooks as usePosts etc.