Try the Live Demo

Some quick notes about the demo:

  • The demo data will reset every hour
  • The demo application is running in a low service tier and may take a few seconds to spin up.
  • In a real deployment, subdomains can be used to resolve tenants. In the demo, tenants are switched at login with the tenant selection.
  • To see data isolation in action, try logging in as different tenant users.
  • Only the root tenant can access the tenant management area.
  • Only admin level users can access the user administration area.
  • Every tenant has a default admin: admin@email.com
  • The password for all users: Password123!

Thank you for your interest. You can also send a message to learn more about the boilerplate.

asp nano

Please allow 10-15 seconds for the app to boot from a cold start. Try the live demo with the links below:

React Client

App Guide

The app folder is where most of the UI logic resides.

The app folder contains the following subfolders:

  • Api – interaction with server, Axios
  • Models – data definitions
  • StoresMobX stores, centralized state and logic
  • Hooks – transient state data and functions
  • Utils – helper functions

Api

The api folder contains one typescript file, agent.ts, which is the main touchpoint with the server. At the base level, all requests are handled within this ts file.

Axios is a library for interacting with http requests. One of the benefits of using Axios is being able to intercept requests and responses to preform logic. In this case, the base URL for api requests is retrieved from values set in the top-level environment files, .env.development and .env.production, and will be different depending on the app environment.

The react app will run in development mode by default. Creating static files with the npm run build command will run the application in production mode. These static files should be placed in the wwwroot folder of the .Net Web Api project.

Axios response interceptors are used to run a sleep command per each response when in development mode to produce an artificial server response delay. Interceptors are also used to emit toast notification if the server returns an error code.

Each api controller on the server will have a corresponding group of methods defined on the client in agent.ts. While the methods per each model may be specific, all methods derive from the Axios base requests type, with the following 4 methods: get, post, put, del.

The app has method groups for Tenents, Users, Venues, and Account.

Models

The models folder contains models for the data used in the application:

  • auth – login, token requests, forgot and reset password
  • currentUser – the logged in user
  • user – an app user, user management
  • tenant – a tenant user, tenant management
  • venue – sample business entity
  • roles – enumerated list of roles
  • responseWrappers – single and paginated results
  • searchParams – used by server-paginated table requests

Stores

The stores folder contains the MobX data stores. From the MobX documentation, ‘The main responsibility of stores is to move logic and state out of your components into a standalone testable unit that can be used in both frontend and backend JavaScript.’

The data stores contain the stateful app data, and methods per each model type. The base MobX store in the client app is store.ts. The following stores are also found in the app:

  • commonStore – general utility store with token, app settings, etc.
  • appUserStore – list of app users, user management
  • currentUserStore– the logged in user, edit profile, preferences
  • tenentStore – list of tenant users, tenant management
  • venueStore – list of venues, pagination meta, venue management,

Hooks

There is one hook in the application, usePaginationMetaData which is used by the tables to handle state and pagination. Since MobX stores are like singleton objects, sometimes it can be necessary to use hooks for cases where transient style objects are needed.

Utils

The utilities folder contains generic helper functions.