# UI Developer Guide

After the backend development and deployment of DIGIT, as per the steps detailed in the [Backend Developer Guide](https://docs.digit.org/platform/guides/developer-guide/backend-developer-guide), 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="ui-developer-guide/digit-ui">digit-ui</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="ui-developer-guide/digit-ui-components0.2.0">digit-ui-components0.2.0</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="ui-developer-guide/pre-defined-screens-in-digit-ui">pre-defined-screens-in-digit-ui</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="ui-developer-guide/ui-configuration-devops">ui-configuration-devops</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="ui-developer-guide/local-development-setup">local-development-setup</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="ui-developer-guide/run-application">run-application</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="ui-developer-guide/create-a-new-ui-module-package">create-a-new-ui-module-package</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](https://docs.digit.org/platform/guides/developer-guide/ui-developer-guide/create-a-new-ui-module-package)
* [Setup employee module](https://docs.digit.org/platform/guides/developer-guide/ui-developer-guide/employee-module-setup)
* [Setup citizen module](https://docs.digit.org/platform/guides/developer-guide/ui-developer-guide/citizen-module-setup)
* [Customise UI](https://docs.digit.org/platform/guides/developer-guide/ui-developer-guide/customisation)
* [Setup monitoring tools](https://docs.digit.org/platform/guides/developer-guide/ui-developer-guide/setup-monitoring-tools)
* [Generate APK for Employee and Citizen apps](https://docs.digit.org/platform/guides/developer-guide/ui-developer-guide/android-web-view-and-how-to-generate-apk)

[**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](https://docs.digit.org/platform/guides/developer-guide/ui-developer-guide/faqs/troubleshoot-using-browser-network-tab)
* [Debug Android app using Chrome browser](https://docs.digit.org/platform/guides/developer-guide/ui-developer-guide/faqs/debug-android-app-using-chrome-browser)