React

Build React web app to export system logs CSV, using DhiWise and APIs of Sentry and ClickUp in 2 hours

18
Saved hours
$324
Saved money
iconiconicon

Sentry is a tool for reporting crashes. It gives “real-time insight into production deployments with information to reproduce and fix errors.” It collects them on a web dashboard and warns of any exceptions or errors users encounter while using the app. It is performance monitoring software. This platform helps every developer diagnose, fix, and optimize the performance of their code.

The Challenge
What does Sentry lack?

Sentry projects events, issues, and other data cannot be exported. Therefore, everyone needs to share their Sentry credentials to share a list of logs, issues, and information about bugs with the team or set a task for a team member. Therefore exporting an excel to share with the team becomes a good choice.

The Solution
The easiest way out of the problem was to build the app using DhiWise and APIs of Sentry and ClickUp

DhiWise is a programming platform where developers can convert their designs into developer-friendly code for Mobile and web apps. DhiWise automates the application development life-cycle and instantly generates readable, modular, and reusable code.

Making API calls takes more effort and time for a beginner-level developer to establish API clients and services. However, developers may generate it in a matter of hours using DhiWise React Builder.

DhiWise handles every minor adjustment from the platform, from home screen setup to routing and authentication via social media and email to significant alterations like API connection.

Image
Image
Image

Export CSV and create a ClickUp task with DhiWise

Exporting all the logs is implemented as an MS Excel file. This allows exporting all the Sentry logs or exporting selected ones with a click of a button.

Not only exporting but also creating a ClickUp task is easy to implement using DhiWise. Moreover, integrating ClickUp API and handling request-response is convenient.

How was it achieved with DhiWise?

“Perfect UI design is not just what it looks like, but perfect UI design is how it works.”
  • It developed the best UI design code using Figma to adhere to the ideal UI design guidelines.
  • Sentry APIs were used to construct a postman collection, which was then imported for API integration.
  • Design elements were integrated with APIs, and navigation was developed.
  • The app was created and hosted on Vercel.

Image

Time Saviour - DhiWise

Using DhiWise, the application was built in 2 hours.

  • Importing Figma into DhiWise and retrieving screens from its resources takes 5 minutes.
  • Setting up the navigation, making a Postman collection, and importing a postman collection took 15 minutes. And API integration setup takes 15 minutes.
  • Five minutes to build the app and deploy it on vercel.
  • One hour and 15 minutes for manual coding.

Benefits of using DhiWise

Figma import

The simple import of a Figma design and creating proper page names allowed pages to be built in DhiWise, which improved code clarity.

Image

Detection and modification of components

Having specific erroneously identified components can be easy with DhiWise with a feature to then change the components

Image

Navigation and back navigation

DhiWise instantly fetched the navigation that had already been introduced to the Figma prototype, so navigations were handled quickly. Additionally, DhiWise panel offered back navigation to return to the previous screen. Moreover, passing arguments from one screen to another was possible using navigation arguments.

Image

API integration

Using this DhiWise, Sentry APIs were integrated into the application. In addition, DhiWise assisted with setting up the API request’s parameters and the response’s binding to the view and handled the success or failure of API calls.

Image

Preview the App

DhiWise provides a user interface of the app to see the final application on different resolutions

Standard coding practices

DhiWise generates the code based on standard coding practices. It consists of Tailwind CSS and component-based architecture. So, the code was easily customizable.

Source Code

After building the application, it no longer needs to rely on DhiWise for the source code. Instead, inside the ReactJS Web application, DhiWise prefers to use community-accepted libraries and packages.

Conclusion:

DhiWise contributes to improved agility, lower costs, and increased productivity. Operating at digital speed entails developing the app features that users demand to perform efficiently. And DhiWise gives complete control over the code. So the developer can run this directly in IDE.