Introducing ResUI: A User-Friendly Interface for ResilientDB

ResilientDB is an innovative, high-performance blockchain database built by researchers at the prestigious UC Davis ExpoLab. As a next-generation blockchain fabric, ResilientDB introduces breakthrough concepts like GeoBFT consensus and spotless ledgers to enable over 10,000 transactions per second.

However, as advanced as ResilientDB is under the hood, its potential remains untapped without an intuitive user interface for developers and enterprises. This is what motivated our team to build ResUI — a full-stack web application that provides the missing UX layer for ResilientDB.

Why ResUI is a Game-Changer

While ResilientDB offers unmatched performance and trailblazing features, navigating these capabilities can be daunting for those unfamiliar with its intricacies.

ResUI completely flips this experience with:

Simplified Navigation: Our clean UI design and thoughtful information architecture simplify navigating ResilientDB’s extensive features. The logical grouping of functionality drastically improves usability.

Enhanced Discoverability: We spotlight key capabilities on attractive landing pages so users can easily find relevant tools and documentation. ResUI makes previously obscure features more discoverable.

User-Friendly Monitoring: Our integrated Grafana dashboard enables tracking core ResilientDB metrics in real-time — a feature sorely missing. Users can now optimize instances effectively.

Unified Instance Management: ResUI consolidates instance administration by connecting ResilientDB’s CLI. Developers can efficiently create, view, and manage instances right from the interface.

By tackling these UX obstacles, ResUI unlocks ResilientDB’s true potential and sets it up for widespread adoption.

A Peek Inside ResUI’s Modern Design System

The minimally designed yet visually engaging UI of ResUI focuses on highlighting ResilientDB’s capabilities through: (Here’s a running instance of the website)

ResUI homepage

Logical Information Architecture

Far from a random assortment of pages, ResUI features a deliberately designed IA allowing logical discovery of capabilities. Our sitemap includes:

About Us

• Team
• Roadmap
• Publications

Services

• Monitoring
• Explorer
• Documentation

Instances

• Dashboard
• CLI

Such intuitive grouping reduces clutter and makes desired information easily accessible.

Compelling & Responsive Visual Design

Built using ReactJS, ResUI implements a sleek black-and-teal design system extending across desktop and mobile. Key pages like About Us utilize videos and animations to engage users and promote interactivity.

Seamless User Authentication

We built custom authentication components for secure user sign-up, login, and access control. Client and server-side validation ensures the integrity of user credentials and data.

Once logged in, users can access personalized pages like “My Instances” for exclusive monitoring dashboards.

Tech Stack Behind ResUI

MERN Stack ❌ RERN Stack ✅

Frontend:

ReactJS: ResUI’s front end is built using ReactJS, a popular JavaScript library for building user interfaces. ReactJS facilitates the development of interactive and dynamic user interfaces, enabling a seamless and responsive user experience across desktop and mobile devices.

Modern Design System: The UI design system of ResUI follows a sleek black-and-teal theme, creating a visually engaging and modern look. The design system is carefully crafted to highlight ResilientDB’s capabilities, utilizing animations and videos on key pages like “About Us” to enhance user engagement.

Responsive Design: The front end ensures a responsive design, allowing users to access ResUI’s features on various devices. Whether on a desktop or a mobile device, the interface adapts to different screen sizes, providing a consistent and user-friendly experience.

Authentication:

Custom Authentication Components: ResUI employs custom authentication components for secure user sign-up, login, and access control. These components ensure the integrity of user credentials and data. Client and server-side validation mechanisms are implemented to enhance security.

Monitoring:

Grafana and Prometheus Integration: The integrated Grafana dashboard in ResUI leverages the versatility of Prometheus and Grafana for streaming instance analytics. Users can monitor key metrics such as CPU usage, memory, network IO, and consensus latency in real-time. This monitoring capability enhances users’ ability to optimize ResilientDB instances effectively.

Backend:

Node.js with Express: The backend of ResUI is implemented using Node.js, a runtime built on Chrome’s V8 JavaScript engine. Express, a web application framework for Node.js, is used to handle server-side operations, manage API requests, and interact with the ResilientDB backend.

Flask Integration: ResUI communicates with the ResilientDB backend, which is powered by Flask, a lightweight Python web framework. The integration between ResUI and Flask allows seamless communication for user registration, login, and instance management.

Database:

ResilientDB Backend: ResUI interacts with the ResilientDB backend, which is based on the ResilientDB blockchain database. This backend stores and retrieves data manages instances, and ensures the seamless operation of ResilientDB through ResUI.

By utilizing this modern and robust tech stack, ResUI not only provides an aesthetically pleasing and user-friendly interface but also ensures the security, responsiveness, and efficient operation of the entire system. This tech stack is carefully chosen to align with ResilientDB’s cutting-edge technology and contribute to a holistic user experience.

Integrated Grafana Instance Monitoring

ResUI taps into the versatility of Prometheus and Grafana to enable streaming instance analytics. Users can easily track metrics like CPU usage, memory, network IO and consensus latency to optimize performance.

To achieve this seamless integration of the dashboards, we created a new docker image called resdb-monitoring that comes pre-installed with our monitoring stack — Prometheus, Grafana and Node_exporter.

My Instances page — Dynamic dashboards

ResDB-CLI: Command-Line Management for ResilientDB Instances

While ResUI revolutionizes the user interface for ResilientDB, we understand that some users prefer the flexibility and power of the command line. Introducing resdb-cli – a command-line interface designed to provide efficient management of ResilientDB instances and Python SDK instances. This tool complements ResUI, offering users a choice in how they interact with ResilientDB.

Key Features of resdb-cli

Simplified Instance Management

resdb-cli streamlines the process of managing ResilientDB and Python SDK instances from the command line. Developers can create new instances, view existing ones, and efficiently manage their lifecycle without leaving the terminal.

Commands supported by resdb-cli v1.0

To create a new ResilientDB or Python SDK instance, users can execute:

./resdb-cli create_instance <type>

Streamlined Authentication

Security is paramount, even in command-line tools. resdb-cli ensures a secure authentication process for users. By logging in through the command line, developers can securely access ResilientDB functionalities, maintaining the integrity of user credentials.bashCopy code

./resdb-cli login # Enter email and password when prompted

Convenient Instance Deletion

Deleting a running ResilientDB or Python SDK instance is a breeze with the delete_instance command. This allows for quick and effective cleanup when instances are no longer needed.

./resdb-cli delete_instance <instance_id>

How to Use resdb-cli

To get started with resdb-cli, follow these simple steps:

1. Download the Binary: Visit the Releases page on GitHub and download the latest release for your operating system.
2. Make It Executable: In your terminal, navigate to the directory where resdb-cli is downloaded and run:

chmod +x resdb-cli

3. Run the CLI: Execute the following command to start using resdb-cli:

./resdb-cli login

For a comprehensive list of available commands, run ./resdb-cli --help or ./resdb-cli <command> --help.

By seamlessly integrating resdb-cli with ResUI, we provide users with a flexible and comprehensive toolkit to interact with ResilientDB, catering to diverse preferences and workflows.

Note: resdb-cli uses a configuration file (config.ini) to store settings such as the flaskBaseUrl. Make sure to configure the CLI before use by creating a config.ini file as described in the resdb-cli documentation.

How to Run ResUI

Running ResUI locally involves setting up both the frontend and backend components. Below are step-by-step instructions to ensure a smooth setup:

Prerequisites:

1. Node.js and npm: Ensure that you have Node.js installed on your machine. You can download it from https://nodejs.org/.
2. ResilientDB Backend: Make sure the ResilientDB backend is running and accessible. Refer to the ResilientDB documentation for instructions on setting up the backend.

Frontend Setup:

1. Clone the Repository:

• Open your terminal and clone the ResUI repository:

git clone https://github.com/gopuman/ResUI
cd ResUI

2. Install Dependencies:

• Navigate to the frontend directory:

cd frontend

• Install the required dependencies

npm install

3. Run the Frontend:

• Start the frontend application:

npm start

This will launch ResUI on your local machine. Open your web browser and go to http://localhost:3000 to access ResUI.

Backend Setup:

1. Navigate to the Server Directory:

cd ../server

2. Configure Flask Server API Link:

• Open the server.js file in a text editor.
• Locate the following line in the file:

const flaskBaseUrl = ""; // Replace with your Flask server IP

• Set flaskBaseUrl with the actual link to your Flask server API.

3. Install Backend Dependencies:

• Install the required Node.js packages:

npm install

4. Run the Backend:

• Start the backend server:

node server.js

The backend server should now be running on http://localhost:5500.

Access ResUI:

With both the frontend and backend components running, you can now access ResUI through your web browser. Open http://localhost:3000 to interact with ResUI’s user-friendly interface.

ResUI — Just the Beginning

By crafting a polished web interface catered to both end users and developers, ResUI unlocks seamless access to ResilientDB for the masses.

As ResilientDB continues its trajectory to revolutionize blockchain databases, ResUI will scale in lockstep — introducing even more tools to harness its true capability.