Building the front end of Nimbus with React and React Router

front-end-architecture

Introduction

Nimbus is an open-source web and desktop application that allows developers to monitor their serverless backend hosted on AWS. While there are many similar apps out there, our team focused on creating the best user experience to set Nimbus apart. This article explains how I architected the front end using React and React Router.

User Story

A new user can open Nimbus and navigate to the registration page. They are asked to fill out a form providing valid credentials and an ARN number that links to their serverless backend. After the information provided is validated, the user is directed to the Nimbus dashboard. Here, they can view metrics and information related to their serverless backend by navigating between the five tabs: Home, Functions, Logs, APIs, and Settings.

Architecture

Let’s begin with the App component: the root component of the application. Here, I used a ternary operator to enable conditional rendering based on the user's login status.

If the user is not logged in, the UserAuth component renders. Within the UserAuth component, another ternary operator checks if the user clicked on the “register” button. If not, the Login component renders. Otherwise, the Register component displays.

Once the user is logged in, the App component renders the UserDashboard component. It contains a navigation sidebar powered by React Router that allows the user to seamlessly navigate between five tabs:

  1. Home: Contains aggregate information on the serverless backend hosted on AWS. It displays relevant data in a clear and concise way to provide users with a quick overview of their system's performance.
  2. Functions: Displays metrics on individual functions. It allows users to view detailed information about each function's performance, such as its execution time and resource usage.
  3. Logs: Lists logs and provides easy access to the logs of their backend. It also allows users to filter logs based on different types and keywords.
  4. APIs: Visualizes relations between APIs, endpoints, and Lambda functions. It provides users with a clear overview of their API architecture, allowing them to identify and troubleshoot any issues quickly.
  5. Settings: Allows users to modify their information. It provides users with an easy-to-use interface that allows them to update their account information and other preferences.

Conclusion

To sum up, designing the front end of Nimbus required a systematic approach that considered the user experience at every step. By following the architecture outlined above, I created an intuitive and user-friendly interface that allows users to monitor their serverless backend with ease.

← Back to blog