DEV Community

Cover image for Chilibase fullstack framework
Michal Rakus
Michal Rakus

Posted on

Chilibase fullstack framework

I got tired of hand-building the same CRUD admin screens for every client project, so I built Chilibase — an open source, model-driven fullstack framework. Define your entity once (TypeORM), and you get filtering, sorting, paging, nested associations, exports, and forms on the frontend (React + PrimeReact) without writing boilerplate for any of it.

Example of lazy table for entity Car:

import {
    Column,
    LazyDataTable,
    type SearchBrowseProps
} from "@chilibase/frontend/lazy-data-table";
import {CarForm} from "./CarForm";

export const CarBrowse = (props: SearchBrowseProps) => {

    return (
        <div>
            <LazyDataTable entity="Car" label="Cars" rows={30} sortField="id"                             
                           EditForm={CarForm} removeRow={true}
                           searchBrowseParams={props.searchBrowseParams}>
                <Column field="id" header="ID" width="5rem"/>
                <Column field="vin" header="Vin" width="7rem"/>
                <Column field="year" header="Year"/>
                <Column field="brandString" header="Brand string" width="8rem"/>
                <Column field="brandAssoc.brand" header="Brand assoc" dropdownInFilter={true} width="8rem"/>
                <Column field="color" header="Color" width="7rem"/>
                <Column field="price" header="Price"/>
                <Column field="carDate" header="Car Date"/>
                <Column field="carDatetime" header="Car Datetime"/>
                <Column field="carBoolean" header="Car Boolean"/>
            </LazyDataTable>
        </div>
    );
}
Enter fullscreen mode Exit fullscreen mode

screenshot of the code snippet above:

Screenshot of Car table

It's a plain npm package, not a hosted platform — you own the code, deploy it anywhere.

Repo (with live demo app):

GitHub logo chilibase / chilibase

Fullstack framework for creating model driven apps. Uses react (primereact), nestjs, typeorm, postgres DB. Platform: javascript/typescript. Similar to low coding frameworks.

Chilibase

Fullstack framework for creating model driven apps.
Uses react (primereact), vite, nestjs, typeorm, postgres DB. Platform: javascript/typescript.
Similar to low coding frameworks.

See live demo at https://car-demo.michalrakus.sk
Username: x_test_user@yahoo.com
Password: fd4eg4DN45ggd

Source code of car demo app: https://github.com/chilibase/car-demo
(Source code is also available via links in demo.)

The framework is suitable for low-budget projects, all used libraries are open source.
The projects created in this framework are running on Linux VPS using Docker, for deployment is used GitHub Actions. VPS is hosted on hetzner.com.
If there is interest, I can create the documentation about deployment/infrastructure.

Contact: michalrakus@gmail.com

Install

Prerequisites

Install postgres DB
Install pnpm (e.g. using command: npm install -g pnpm@11.4.0)

Create new chilibase project using create script create-chilibase and follow the instructions in the console.

pnpx create-chilibase@0.3.0 <app-name> <db-name> <db-schema-name>

Features

User authentication types

  • auth0.com (enables authentication via social networks like Google, Facebook, ...)
  • MS Entra ID…

Looking for feedback, especially from anyone who's built similar admin/CRUD tooling before — and open to contributors if the idea resonates.

Top comments (0)