UI Developer Guide

DIGIT UI development guide

After the backend development and deployment of DIGIT, as per the steps detailed in the 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.

Key UI Fundamentals

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

DIGIT UI Architecture

Learn all about the architecture and key features of the DIGIT UI

DIGIT Design System

Explore and apply the DIGIT design system - the foundation layers of the UI design, atoms, molecules and organisms.

DIGIT UI Predefined Screens

Find the details of the DIGIT predefined screens.

Find the technical resources and knowledge required to develop a user interface on DIGIT

UI Development Steps

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

UI Configuration

DIGIT UI configuration required to enable it in any environment

Local Development Setup

Set up the UI development environment locally

Run Front End App

Run the front end application locally

Build & Deploy

Deploy the DIGIT-UI module

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

• Setup employee module

• Setup citizen module

• Customise UI

• Setup monitoring tools

• Generate APK for Employee and Citizen apps

Run Sample Module - 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

• Debug Android app using Chrome browser