Create a full stack web app in 5 minutes
Tags: beginners, webdev, productivity
Published: 2022-08-15 13:54:00

Today we released version 1.0 of [Aista Magic Cloud](https://aista.com). This is the first publicly available release of our services. With Aista you can create a full stack web application in 5 minutes. Try an app [here](https://sakila.aista.com) if you wish, or create your own app below.

* [Create your own full stack web app in 5 minutes](https://hub.aista.com)

Below is a screenshot of an app that was created in 5 minutes.

![A full stack Angular app created in 5 minutes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2axoo2eylhyf5esyfu28.jpg)

## How it works

First you have to create a _"cloudlet"_. A cloudlet is kind of like your own private backend VPS, except it comes with Magic Cloud pre installed. Magic is a software development automation tool that literally _does your job by automatically creating your code_, resulting in a CRUD web API, and a complete Angular frontend.

When you have created your Magic cloudlet, you have to use Magic to wrap your database. This process reads meta data from your database, and then automatically generates a Hyperlambda web API wrapping your database with all CRUD operations. The web API supports the following;

* Paging
* Filtering
* Sorting
* Foreign keys (lookup fields)
* Types
* Etc, etc, etc

Basically everything you need from a web API to create a frontend. Below is a screenshot of the process.

![Automagically create a CRUD API](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w12kc1imuojih15zbqg0.png)

You can configure the CRUD generator any ways you see fit, but the default settings should be good enough to get you started. You can also modify the resulting Hyperlambda afterwards.

### SQL Studio

If you don't have your own database, you can design a new database using SQL Studio. SQL Studio allows you to visually design your database with zero SQL knowledge. You can also connect to an existing database using the _"Configuration"_ menu, or download a plugin database. Below is a screenshot of SQL Studio.

![Visually designing your database using SQL Studio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xncpc2ncv6kjmguvfx11.jpg)

When you have created your web API, you need to generate your frontend. This is also done from the CRUD Generator menu, except you'll need to choose the _"frontend"_ tab. Below is a screenshot.

![Generate a CRUD datagrid frontend](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sx7hs3r1isyej26r2rjj.jpg)

As you are generating your frontend, you can choose colours, which components to include, etc. However, the resulting code is perfectly valid Angular code, and can also be modified by Angular developers to meet your personal requirements.

### Deploy your Angular frontend

When you have generated your frontend, you'll need to deploy it. This is done from [Aista hub](https://hub.aista.com) by creating an Angular cloudlet. Below is a screenshot.

![Deploy your Angular cloudlet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oyag2srq8stttychqimy.jpg)

The entire process takes about 5 minutes, at which point you end up with a full stack web app. You can watch me go through the whole process in the video below.

{% embed https://www.youtube.com/watch?v=yLLn6U717Wg %}

To get started go to the below link.

* [Create a full stack web app in 5 minutes](https://aista.com)