1. Frontend
  2. Fake API (Sandbox)

If you don’t have a backend running, you can set up the ...APP_SERVICE .env variable to sandbox.

.env.development
# Options: api, sandbox
VITE_REACT_APP_SERVICE=sandbox
...

This will let you design interfaces without an API, loading sample data.

So instead of calling AuthenticationService

services/api/core/users/AuthenticationService.ts
...
export class AuthenticationService extends ApiService implements IAuthenticationService {
  constructor() {
    super("Authentication");
  }
  login(payload: UserLoginRequest): Promise<UserLoggedResponse> {
    return new Promise((resolve, reject) => {
      super
        .post(payload, "Login")
        .then((response: UserLoggedResponse) => {
          store.dispatch(login(response));
          resolve(response);
        })
        .catch((error) => {
          reject(error);
        });
    });
  }
  ...

it will call FakeAuthenticationService.

services/api/core/users/FakeAuthenticationService.ts
...
const fakeUserService = new FakeUserService();
const fakeWorkspaceService = new FakeWorkspaceService();
const fakeTenantService = new FakeTenantService();

const defaultWorkspace = fakeWorkspaceService.workspaces[0];
defaultWorkspace.tenant = fakeTenantService.tenants[0];

const userLoggedResponse: UserLoggedResponse = {
  user: fakeUserService.users[0],
  token: "",
  defaultWorkspace,
};

export class FakeAuthenticationService implements IAuthenticationService {
  login(_payload: UserLoginRequest): Promise<UserLoggedResponse> {
    return new Promise((resolve, _reject) => {
      setTimeout(() => {
        resolve(userLoggedResponse);
      }, 500);
    });
  }
  ...

This is because the services/index.ts file listens to the _APP_SERVICE environment variable.

services/index.ts
import { IAuthenticationService } from "@/services/api/core/users/IAuthenticationService";
import { AuthenticationService } from "@/services/api/core/users/AuthenticationService";
import { FakeAuthenticationService } from "@/services/api/core/users/FakeAuthenticationService";
...
class Services {
  authentication: IAuthenticationService;
  ...
  constructor() {
    if (import.meta.env.VITE_REACT_APP_SERVICE === "sandbox") {
      this.authentication = new FakeAuthenticationService();
    } else {
      this.authentication = new AuthenticationService();
      ...