Create an Admin Panel for your project in 5 minutes

Kottster is a free tool to help developers quickly build and deploy admin panels. In just 5 minutes, you can generate a fully functional admin panel, deploy it to the cloud, and share it with your team.

When you build apps with Kottster, they run on Remix, a web framework for creating full-stack apps using React and Node.js environment.

In this article, I'll show you how to create a Kottster app, connect it to your database, generate pages for specific tables, and host it anywhere.

Creating a project

Before you begin, make sure Node.js (v20 or higher) is installed on your machine.

To create a new project, run this command:

npx @kottster/cli new

You’ll be asked for a project name, whether you want to use JavaScript or TypeScript, and which package manager to use. After that, a new project folder will be created with everything you need to get started.

To start the app locally, open the created folder and run npm run dev:

When the app loads, you'll see the login page. Click “Create an account” to sign up on Kottster. After signing up, enter a name for your app and click “Create app”. This will create your app and log you in.

Once everything is set up, you’ll see the “Getting started” page:

Connect your database

On the Getting Started page, choose your database type, enter the connection details, and click “Connect”.

This will install the necessary packages and create a file with a data source connected to your database in your project folder.

Please notice that with your app being self-hosted, your credentials always remain private, and the Kottster tool doesn’t have access to your database.

Generate pages

After connecting your database, you'll see the “Generate pages” tab:

This page helps you quickly create pages to view or manage data from your database tables.

If you enable “Allow insert” or “Allow update”, forms for adding and updating records will be available. Enabling “Allow delete” will add the ability to delete records.

Once you've made your selections, click "Generate pages". The tool will automatically generate the page files and update the sidebar menu with new items.

How pages work

Each page in your admin panel is located in the app/routes directory. These pages are essentially Remix routes that serve as both the UI and API, and you can customize them however you like.

Each page file in the Kottster app should export a React component, <Page>, that represents the page itself. You can include any content inside this component.

When you generate a page for a specific database table, it will include the following:

• A Remix action that calls the createTableRpc function. This function controls the table's behavior and enables its features.
• A <Table> component, which is closely tied to the createTableRpc settings defined in the action.

Example of a generated page for the "users" table:

import { Page, usePage } from '@kottster/react';
import { Table } from '@kottster/react';
import { app } from '@/.server/app';
import dataSource from '@/.server/data-sources/mysql';

// Sets up table RPC settings for the "users" table
export const action = app.createTableRpc(dataSource, {
  table: 'users',               
  primaryKeyColumn: 'id',       
  select: {
    pageSize: 16,               
  },
  insert: false,                 
  update: false,                 
  delete: false,
});

// Returns the page with the table component inside
export default function UsersPage() {
  const { navItem } = usePage();

  return (
    <Page title={navItem.name}>
      <Table />
    </Page>
  );
}

You can learn more about createTableRpc and the <Table> component in our documentation. I also recommend learning more about Remix and its Fullstack Data Flow in their official documentation.

Deployment

When you're ready, you can deploy your Kottster app to make it available online. Before deploying, ensure the app is properly built and free of errors.

To do this, build your app locally by running npm run build:

If there are no errors, your app is ready to go live. Since it's self-hosted, you can deploy it anywhere you like. Learn more about deployment options here.

Deploying to Vercel for free

In this article, I'll cover one of the most popular free options: deploying a Kottster app to Vercel.

Start by signing up for an account at vercel.com if you don't already have one. Once logged in, click "New Project" and connect your repository containing the app you built.

After selecting your repository, click "Deploy". In just a few moments, your app will be live on a free Vercel domain.

Once your app is live, you can open it and log in to your account.

That's it! Your admin panel is now available online.

You can now share it with your team. To do this, click "Manage accesses" in the left sidebar of your app. This will open a page where you can set up access for other users by entering their email addresses.

Final notes

You can learn more about Kottster on our website: kottster.app

If you have any questions or need help, check out our documentation, visit our GitHub repository, or join our Discord community to ask questions and share your feedback.

Thanks for reading, and good luck with your project!