React

Build your own Web application to monitor downtime of your system with notifications in a day using DhiWise

64
Saved hours
$640
Saved money
iconiconicon

In organizations there are possibilities that their service is having dependencies on other third-party services, when third-party service downtime occurs it also affects their services, so to monitor downtime, there is a need to create this type of system, so it can notify when the system downtime occurs.

A few hours of downtime might not seem like a big deal at the time, but if it happens during a time when people are most likely to use your services and they can't get in, you could lose the client’s interest and maybe much more. Downtime can have a devastating impact on businesses of all sizes.

The Challenge

For all different types of services have different status pages, so instead of visiting and checking each service status, it can be solved by providing all service statuses on a single page. and send notifications of the dependency services which are having downtime can be automated.

The Solution

With the help of DhiWise, users can save the cost of time for development which is the best part because the developer can focus on the creative part instead of putting all efforts into coding recursive tasks.

If this application was created with all manual efforts then for beginner developers it may take up to

it may take up to 10 days but a big thanks to DhiWise which helps to complete this project in just 2 days. if the developer's cost is 10$ an hour and works 8 hours a day then,

Image

Steps:

  1. Converted Figma to React web code
  2. Created constants of URL like logo, status page view, and status API endpoints
  3. Passed multiple selected services in the state and navigation
  4. Send a notification in Slack Using Incoming Webhooks

1. Converted Figma to React web code

It generates each component with accurate and responsive React UI, which is generating Html, Tailwind CSS, and React state management code in a very structured way.

The panel is having screens that can be imported easily from Figma URL and it also has a sync option to sync all changes at any time and can be re-sync without interrupting your existing functionalities.

Image

2. Created constants of URL like logo, status page view, and status API endpoints

Here, required values used in projects globally were stored.  Just to store links to the API endpoint, logo images, and redirect page URLs. This can be also achieved if having API which can return all these things. but, if there are few services then using it in constant is preferred.

Image

3. Passed multiple selected services in the state and navigation

the “on mount” method of the home screen, there was some manual part that needed to do like binding dynamic constant values into a list and binding logo image links and service name with a view of the row in the list, adding a checkbox to select multiple services.

After that actions like the click of the button, it was redirected to another screen using the Navigation feature of DhiWise, which also supports passing arguments in the state with Navigation, so it is managed and saves more time and solves difficulties for passing, which was managed by DhiWise as it has a feature to bind response of API with the state.

Life cycle actions, like API integration at the “on mount” when the screen is being loaded, DhiWise web project supports calling more than one API at the “on mount” method.

here, DhiWise generated code provides the state passed from the previous screen using the Navigation arguments feature.

Here the list is the selected service list from the home screen. This screen needs to get the status of each service by calling get API dynamically which is a logical part of coding, and showing the status as per response on the screen, also has a button "view detail" where navigation is set to open the original status page of the service in a new tab which was saved in constant named "redirect URL" at the start of the project.

Image

4. Send a notification in Slack Using Incoming Webhooks

here to implement Slack Incoming Webhooks needed to create a new app name and pick a workspace from the drop-down and click on Create App

Image

After creating a new app needed to "Activate Incoming Web-hooks" first to allow post messages through Slack Webhook APIs.

Image

After there was a requirement to allow access to our app and select the channel which was required to post messages through API.

Image

When access is allowed to the channel need to generate a token to authorize Webhooks API.

Image

cURL to implement Web-hook In Project, imported cURL in API Runner, and done Api Integration at the “on mount” method of the life cycle.

Image

After importing cUrl, it was easily integrated into a project with manual logical parts also as there may be different types of responses from each API as endpoints and domains are different, but mostly up to 65% of services have some standard responses.

Image
Image
Image

React Project which was generated through DhiWise, after a few manual business logic and after making it work application is available on GitHub, you can clone and modify the coding as per your requirements.