# UI Developer Guide

After the backend development and deployment of DIGIT, as per the steps detailed in the [Backend Developer Guide](/platform/guides/developer-guide/backend-developer-guide.md), it is time to start building the UI screens. For illustration purposes, we will build the citizen and employee screens for the Sample module.

This guide offers a systematic view of creating the application screens on DIGIT.

**Developer code:** Download the UI code from the link here [Sample-Registration](https://github.com/egovernments/DIGIT-Frontend/tree/sample).

## **Key UI Fundamentals**

DIGIT UI basics to browse through before initiating the frontend development.

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>DIGIT UI Architecture</strong></mark></td><td>Learn all about the architecture and key features of the DIGIT UI</td><td></td><td><a href="/pages/4DgE2V4qec1XLJS1kEon">/pages/4DgE2V4qec1XLJS1kEon</a></td></tr><tr><td><mark style="color:blue;"><strong>DIGIT Design System</strong></mark></td><td>Explore and apply the DIGIT design system - the foundation layers of the UI design, atoms, molecules and organisms.</td><td></td><td><a href="/pages/Olj6UOy58bvQxpwTrwzn">/pages/Olj6UOy58bvQxpwTrwzn</a></td></tr><tr><td><mark style="color:blue;"><strong>DIGIT UI Predefined Screens</strong></mark></td><td>Find the details of the DIGIT predefined screens.</td><td></td><td><a href="/pages/nmuciULVDtuGKJvNGmc4">/pages/nmuciULVDtuGKJvNGmc4</a></td></tr><tr><td>Find the technical resources and knowledge required to develop a user interface on DIGIT</td><td></td><td></td><td></td></tr></tbody></table>

## **UI Development Steps**

Follow the cards below to build and deploy the DIGIT UI.

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>UI Configuration</strong></mark></td><td>DIGIT UI configuration required to enable it in any environment</td><td></td><td><a href="/pages/AP67vkqRaCvQIBWMUHVX">/pages/AP67vkqRaCvQIBWMUHVX</a></td></tr><tr><td><mark style="color:blue;"><strong>Local Development Setup</strong></mark></td><td>Set up the UI development environment locally</td><td></td><td><a href="/pages/tXkbW9Y8oAwe1sHFmdDw">/pages/tXkbW9Y8oAwe1sHFmdDw</a></td></tr><tr><td><mark style="color:blue;"><strong>Run Front End App</strong></mark></td><td>Run the front end application locally</td><td></td><td><a href="/pages/Z7ScxOpA235znsF118Bz">/pages/Z7ScxOpA235znsF118Bz</a></td></tr><tr><td><mark style="color:blue;"><strong>Build &#x26; Deploy</strong></mark></td><td>Deploy the DIGIT-UI module</td><td></td><td><a href="/pages/Ecv5hN942BXNOgSunjv3">/pages/Ecv5hN942BXNOgSunjv3</a></td></tr></tbody></table>

## Scenario-based UI Development

Custom UI development depends on specific user requirements. We have listed common scenarios (listed below) - follow the steps outlined for each to set up DIGIT UI as per requirements.

* [Create a new UI module/package](/platform/guides/developer-guide/ui-developer-guide/create-a-new-ui-module-package.md)
* [Setup employee module](/platform/guides/developer-guide/ui-developer-guide/employee-module-setup.md)
* [Setup citizen module](/platform/guides/developer-guide/ui-developer-guide/citizen-module-setup.md)
* [Customise UI](/platform/guides/developer-guide/ui-developer-guide/customisation.md)
* [Setup monitoring tools](/platform/guides/developer-guide/ui-developer-guide/setup-monitoring-tools.md)
* [Generate APK for Employee and Citizen apps](/platform/guides/developer-guide/ui-developer-guide/android-web-view-and-how-to-generate-apk.md)

[**Run Sample Module** ](https://github.com/egovernments/DIGIT-OSS/tree/master/municipal-services/birth-death-services)- Once the setup is complete, run the sample module provided in this guide. Test run the module and deploy it using CI/CD to your development environment.

## Troubleshoot

Visit our FAQs section to troubleshoot -

* [Troubleshoot browser network tab issues](/platform/guides/developer-guide/ui-developer-guide/faqs/troubleshoot-using-browser-network-tab.md)
* [Debug Android app using Chrome browser](/platform/guides/developer-guide/ui-developer-guide/faqs/debug-android-app-using-chrome-browser.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.digit.org/platform/guides/developer-guide/ui-developer-guide.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.