> For the complete documentation index, see [llms.txt](https://caseytechschool.gitbook.io/app-development-using-kodular/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://caseytechschool.gitbook.io/app-development-using-kodular/build-your-first-app-on-kodular.md).

# Build your first app on Kodular

This tutorial series guide you to create and test your very first app using Kodular platform.

#### The App Idea

You are going to build a simple image hide and show app. The user interface of the app has an image and a button. If the button is labelled as `Hide` and a user clicks on the button, the app hides the image and the changes the button label as `Show` and vice versa.

:clap: <mark style="color:green;">**Prefer a video tutorial? Check it out now!**</mark> :tada:

{% embed url="<https://drive.google.com/file/d/18xa0XnbShSC7cIDeWoUXvflQfyD2w8Ga/view?usp=sharing>" %}
Kodular tutorial
{% endembed %}

**How to Create a Project in Kodular**

1. Open the Chrome browser and visit [Kodular](https://www.kodular.io/).
2. Click on the `Create Project` button.
3. Choose "Sign in with Google"

<figure><img src="https://4150609950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FagfmHwJEF69bMnbybhxL%2Fuploads%2FeszrKJJxavI3a4NfIC1b%2FScreenshot%202025-03-24%20120523.png?alt=media&amp;token=a1c451a1-f570-45b7-b6de-eb425ef10abd" alt=""><figcaption><p>Create a project</p></figcaption></figure>

* Give a project name and click `Next`&#x20;
* Click `Finish`&#x20;
* This will open the `Designer` tab to start the app building process

<figure><img src="https://4150609950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FagfmHwJEF69bMnbybhxL%2Fuploads%2FCNpWAXR63eWhS2ilVaCU%2FScreenshot%202025-03-24%20121313.png?alt=media&amp;token=f6e4f724-7d15-4afb-a9f3-0b803a4897db" alt=""><figcaption><p>App building landing page</p></figcaption></figure>

{% hint style="success" %}
The designer tab is the place where you design the user interface and the look and feel of your app.
{% endhint %}

**Designer Tab Breakdown**

* **Left Section:** Contains all the palettes. You can drag and drop a palette (or component) onto the phone view in the middle of the screen.
* **Middle Section:** Contains the live view of the design. Any palette you drag and drop will appear here. Some non-visible palettes (e.g., sound) won't display anything on the screen.
* **Second Last Column:** Features a tree view of all the palettes you have brought onto the screen.
* **Rightmost Column:** Displays the properties of the selected palette. Changes to any property (e.g., button color) will reflect on the phone view.