Concepts

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

/src
  /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

Key	Default	Description
WEB_PORT	8099	Application port
NEXT_PUBLIC_API_BASE_URL	http://localhost:3099	Server url

App

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.

/app
  /(authenticated)
    /home
      page.tsx
    /tweets
      /[id]
        page.tsx
    /profile
      page.tsx
  /(non-authenticated)
    /login
      page.tsx
    /register
      page.tsx

Design System

Marblism uses Ant Design as a design system library.

Domain

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

/domain
  /authentication
  /user
  /tweet
    tweet.api.ts
    tweet.model.ts

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.

tweet.api.ts

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

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.