Skip to main content


The Marblism front-end is built using a beautiful design system called Ant Design. This includes a full library of pre-built components that you can easily drop into your application, containing everything from card and tables to self-validating forms, modals and notification.

Building your interface is as simple as creating a new view and adding pre-built components. The following sections will give you an overview of how React is set up within Marblism.

Your front-end is built in TypeScript.

File structure

/app → the pages of your app
/designSystem → the theme/style of your app
/layouts → the topbar/leftbar present in all your pages
/domain → the data models and calls to the API
/store → the global state of your app

Environment Variables

WEB_PORT8099Application port
NEXT_PUBLIC_API_BASE_URLhttp://localhost:3099Server url


That's where you will be spending most of your time coding the different pages of your application.

The folder organization within the app automatically mirrors the URL structure used to navigate to the page.

To learn more about how the Router works, check out the Next JS Routing article.


Design System

Marblism uses Ant Design as a design system library.


That's where the data models and the API interactions with the back-end live.


For each entity, you've got a .api.ts and .model.ts file. All the API and model files have already been generated for you.


export namespace TweetApi {

export function findMany(
queryOptions?: ApiHelper.QueryOptions<Tweet>
): Promise<Tweet[]> {

const buildOptions = ApiHelper.buildQueryOptions(queryOptions)

return HttpService.get(`/v1/tweets${buildOptions}`)


So if I wanted to fetch all the tweets in my app I would simply do:

import { Api, Model } from '@web/domain'

const tweets = await Api.Tweet.findMany()


Store allows you to make data available throughout your app (for example information associated to the current user logged in)

Read the Store tutorial to learn how to use it.