One open source project for admin panels, CRUD apps, & internal tools
Tags: showdev, news, contributorswanted, javascript
Published: 2020-08-21 13:44:38

We’ve all spent time on building internal tools which could be CRUD apps, admin panels, or complex workflows. 
These kind of internal tools are used for: 
1. Analytics and reporting
2. Customer data views for sales & support teams
3. Configuration managers for client-visible UI used by technical and non-technical people
4. Multi-step data workflows which involve multiple participants(like content moderation tools or customer KYC at fin-tech startups)

These tools often aren’t very interesting to build because of the repetitive work involved  like building UI, writing CRUD APIs, setting up authentication, & managing deployments. I decided to create Appsmith because **I couldn’t find a project which did most of the work for me and also easily customizable**.

How does Appsmith work?
1. First setup Appsmith using Docker. Read instructions here for a 2 min setup process.(https://docs.appsmith.com/quick-start#docker). Or try our [online sandbox](https://app.appsmith.com/user/signup)

2. Go to https://localhost or your machine’s public IP to see the login page. [online sandbox](https://app.appsmith.com/user/signup).

3. Create a new application and name it. 
![Create an application](https://dev-to-uploads.s3.amazonaws.com/i/iuojuixhp3eblh7b4dhe.png)

4. Connect to a database or API. Today MySQL, Mongo, Postgres, and REST apis are supported. The gif below shows me connecting to an API. 
![API creation](https://dev-to-uploads.s3.amazonaws.com/i/ebg7sosssnarwjxl9jfj.gif)

5. Go to the canvas section and choose a UI widget. Appsmith ships with 16 components like tables, different charts, map viewer, forms, etc. In the example below I’ve used a table component.
![DnD table](https://dev-to-uploads.s3.amazonaws.com/i/j0f5nzu19wmkmxmus85b.gif)

6. Modify the table property to display your query results by writing `{{queryname.data}}`. You can code in JS and use Lodash functions inside `{{ }}`.
![API-table](https://dev-to-uploads.s3.amazonaws.com/i/owe6tmq3bo4qg4c52fqo.gif)

7. Trigger an action through events like onClick, onTextchange, onSelectedrow, etc for CRUD operations.
![Event trigger](https://dev-to-uploads.s3.amazonaws.com/i/dd3gm0lyyer4brmkxx2x.gif)


8. Click deploy to see your app in a URL. (You can set up a custom domain in the setup script)
![Deploy](https://dev-to-uploads.s3.amazonaws.com/i/vl9dz1ketugmtx1qte2g.gif)

9. Invite users after assigning them a role. They can sign up via a form login or with their Google/Github accounts. Make your app publicly viewable to allow access without a login.
![Share & invite](https://dev-to-uploads.s3.amazonaws.com/i/19qyleb6gfqiyl5fqs62.gif)

So this is how you build a simple app in less than 10mins. Access an app I built on Appsmith [here](https://bit.ly/3gVPt52).

Appsmith is the first open source project to build internal tools. If you like the project, please [star our GitHub project](https://github.com/appsmithorg/appsmith).

What features should we add to Appsmith?

TL;DR: **Appsmith is an open source framework to build apps for analytics, workflows or CRUD operations.** Replace all your internal tools with one project. See [GitHub repo](https://github.com/appsmithorg/appsmith) or try an [example app here](https://bit.ly/3gVPt52).