Building Weblog, a blogging Platform to manage Dev.to and Medium from a single platform in less than 3 hours using DhiWise

How DhiWise saves time:

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 lifecycle and instantly generates readable, modular, and reusable code.

‍

Total time taken to build this application

Let’s say to build this whole application seven screens from scratch, from design to API integration, all things using manual coding, then it would probably take around 40 hours.

One hour would cost roughly $30, and in our case, the complete project would cost $1200 (40 hours * $30).

But using DhiWise, It could be done within 3 hours.

Detailed time calculation using DhiWise:

1. A couple of minutes to fetch the design and prototypes from Figma
2. 1 hour to add Navigation and to bind the APIs with the UI component
3. 1.5 hours of manual coding for some parts and to deploy on Vercel

Some parts of the application, like data passing and UI changes, were done using manual coding.

While calculating the time difference between manual coding vs. DhiWise saves 40 - 3 hours = 37 hours.

DhiWise has saved 37 hours, which is equivalent to $1110 (37hours * $30).

To conclude, DhiWise saves developers time and effort by focusing more on the core features and building the application with beginner-level knowledge and less effort in coding.

‍

Steps to achieve this in DhiWise:

1. Figma designs using proper design guidelines to build accurate UI
2. Adding navigations to the Application
3. Adding the APIs of Dev.to and Medium into API management and binding it with UI
4. Building the app and deploying it to Vercel or downloading the code

‍

From Figma to fully functional ReactJS web app:

DhiWise’s much-talked-about feature of “Design to Code” converted Figma designs to developer-friendly code. This feature had detected all the components, styles as well as prototype navigations from Figma.Additionally, DhiWise had also detected the page names from Figma. So, it helped to give names to pages in DhiWise.

‍

Sync design from the Figma feature was used to re-sync the Figma when there were any design changes in Figma. The changes had re-synced with the existing application in DhiWise. This feature was also a boon because it saved the time of recreating the whole application again.

DhiWise also has a feature of Home page selection which was used to select the application’s home screen.

‍

The Screens-Config feature showed the reusable components detected by DhiWise from Figma and allowed us to change some incorrectly detected components to the desired ones.

For example, Column to Text, Text to Input, Drop-down, and so on.

The API manager helped to add a new API to the project. API manager also has a feature of uploading the Postman collection file and creating a new API functionality. So, using this feature, all the APIs were added to DhiWise.

API integration on Lifecycle action was used to integrate the API on the page’s life cycle method within just a few steps.

API Integration on lifecycle method

API integration and response binding were much easier and faster using DhiWise compared to manual coding. This is because developers don’t have to write API call functions and response binding code. It saves a reasonable amount of time for a developer.

The Navigation feature in DhiWise not only lets to navigate on another page but also gives the freedom to pass the data between two screens as a prop. The navigation feature was used to add the navigations and pass the value between two pages.

In addition to the API integration, DhiWise helps users to integrate additional APIs on these two methods as well as execute some actions on APIs on Success and Error methods, such as showing alert messages and navigation.

This handle action feature helped integrate the actions on Success and on Error methods.

API integration on the Success method and alert message on error

This was all about the GET APIs, but what about the POST APIs?

POST requests send data to the API server to create or update a resource. So, sending data in POST request API requires a reasonable amount of time to code the API call function, manage the data into the state, and send the data into API, but DhiWise gives the feature of request body bind with the view.

So, for all things like form data state management and API call function, DhiWise was able to handle all of them.This feature helped to integrate the POST APIs into the application. In addition, with the feature of a bind with view, DhiWise made request body binding much more effortless.

After doing all changes and integrating all the APIs, clicking on the Build app button generated the complete application code.

Generated code using DhiWise

After the code was generated, it was committed on GitHub and deployed on Vercel using DhiWise. This was helpful to see the output of code generated by DhiWise.

‍

Code Quality:

• The code in DhiWise was generated by following the best practices. As a result, the code was readable and easy to understand. That makes it easy for a developer to edit the code.
• The components generated by DhiWise were separated into one folder, which helps to make them reusable in the application.
• The Readme file had a proper file and folder structure with steps to follow after generating the application that helped to understand the project.
• The naming convention of the pages was as per the page’s name in Figma.