Abstract
User Interface (UI) design comprises the basic design elements that need to be present in a web application to navigate through the website and make decisions. UI design is all about structure, user manipulation, and communication. It is the building blocks of how a website is set up and functions when visited by the targeted users. React is a modern UI framework widely used in web applications, which was used in this project. The “energy-water nexus” is a growing aspect in environmental management. Studying interdependence between water and energy requires an integrated tool, which can show the integrated data visually. The EWED project at Sac State collected data from various data sources and presents integrated data through web-based interfaces. The current deployed version of EWED implemented the UI part using the Angular framework. For this project, the same functionalities were implemented using React UI design and implementation, which had completely different architectural flow and code compared to the Angular version. For mobile application, React Native was implemented to provide scoring functionality to different facilities on cross platform mobile operating systems including Android and iOS. To implement the web application UI, this project decoupled the system into 30 different components to provide efficient state management and to improve performance. In order to manage state effectively and efficiently, latest features of React and JavaScript were integrated such as ES6, HOCs (Higher Order Components), Webpack, Context APIs. Styling was implemented using bootstrap and materialUI for React. Because React doesn’t provide inbuilt URL functionality, the URL part of this project was integrated with React Router third party library and JavaScript windows object. In this project, mobile application was based on the expo-client tool, as it provides great flexibility to work on different mobile OS platforms (iOS and Android). Expo works greatly when it comes to develop, build and deploy React Native mobile applications. For navigation to multiple screens, stack navigator and drawer navigator was used with React Hooks. For the styling of UI in mobile application, React Native’s inbuilt components and expo were used (i.e. Button, FlatList etc.). This project is not a part of the EWED project. Instead, it utilized the UI requirements provided by EWED to fulfil the scope of work. In addition, this project is retrieving the integrated data from EWED web services in order to present data in UI for web application.