Launch your full-stack NextJS App

When you generate an app on Marblism, your entire front-end and back-end is already fully functional and customised to your project data model. We create all the pages and the endpoints you need.

Let's walk you through the main concept and how to get comfortable with your app.

Tech Stack

the Tech stack is largely inspired from the popular T3 Stack

Typescript	Language
NextJS	React framework
Ant Design	Design system
Next Auth	Authentication
Prisma	Database ORM
tRPC	Call directly your back-end from the front-end
PostgreSQL	Relational database
Zenstack	Permissions/Roles/Multi-tenancy made easy

File structure

/models          → your data model is here, update it will regenerate your back-end
/src
  /app           → the pages in the front-end
  /core          → database migration, CORS, cookie
  /designSystem  → customize the navbar and the theme
  /server        → your customised back-end, add new endpoints here
  /.marblism     → all your endpoints auto generated, do not touch this

Auto-generated CRUDs

Your data model /models is the source of truth of your app. When you change your data model, all your CRUDs endpoints are automatically re-generated and can be used directly in your code.

For example, if you add the file /models/document.zmodel:

model Document {
    id        String    @id @default(uuid())
    name      String
    url       String
}

It will generate automatically the associated CRUDs in your backend:

Api.document.findMany
Api.document.findFirst
Api.document.create
Api.document.update
Api.document.delete
Api.document.createMany
Api.document.updateMany
Api.document.deleteMany

You can then immediately use it in your code (you will be prompted to restart your app to re-generate your backend):

const { mutateAsync: createDocument isLoading } = Api.document.create.useMutation()

...

await createDocument({
  data: {
    name: 'My first document',
    url: 'https://myurl.com/document.pdf',
  },
})

Your data moel is also the source of truth for all your access control/roles/permission system, read more about it here.

Custom endpoints

Do you need more than CRUDs endpoints? Follow this quick tutorial.

Design System

The NextJS front-end uses a 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.

Learn about how to customize the theme here.

NextJS App Folder

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.

In this example the tweets page is accessible if you type 'https://yoururl.com/tweets'

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

To add a page accessible only for logged-in users, add it under the (authenticated) folder, to make a page accessible to anyone, add it under the (non-authenticated) folder.