Build a React web app from Figma with Twitter & WhatsApp APIs in just 45 minutes using DhiWise.

‍

How to do it with DhiWise in lesser 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.

‍

Steps to achieve this using DhiWise:

1. Designed the Figma with perfect guidelines that resulted in the perfect UI design code.
2. Imported the Postman collection of Twitter APIs and bound it with the UI elements.
3. Set up navigation and API calls using DhiWise.
4. Built the app and get the code.

‍

Building app within minutes using DhiWise:

1. A couple of minutes to import Figma and fetch resources of the screens.
2. 30 minutes to add navigation and API integrations.
3. 10 minutes to manually code the WhatsApp share, sync the code to my GitHub repository and deploy the code on Vercel.

‍

Benefits of using DhiWise-made feature of “Figma to ReactJS”:

1. Get structured code:

1. All React developers know the pain of setting up a project. Setting up a project is one of the most important yet hard things to do.
2. Creating an opinionated folder structure that would be the best fit for the project is extremely essential.
3. Using DhiWise, get a project structure considering the best practices of programming.

2. Code reusability:

1. DhiWise generates reusable ReactJS components’ code, making the project scalable.
2. No duplicate code. No unnecessary imports.

‍

3. Get code in minutes:

DhiWise converts the Figma designs into code with two clicks in under 3 minutes. Otherwise, it is a vicious loop between clients’ requirements and the actual results.

‍

4. Entry point:

DhiWise provides to choose which page should be first when running the app. If it is not defined, DhiWise will smartly create a page listing all the pages with a hyperlink.

‍

5. API Integration

Import Postman collection and integrate API either on the “OnMount” lifecycle event of the component or on click of a button component. DhiWise will generate the code.

‍

6. Navigation and Routes

Switching from one ReactJS page to another requires managing routes and writing the code for each redirection and navigation. In DhiWise, add any of the following three navigations:

1. One page to another
2. Redirect to an external URL
3. Jumping to a page section (# navigation)

‍

7. Props

ReactJS developers always send data from a parent component to its child component. DhiWise provides the functionality to do the same with a few inputs.

‍

8. Protected Routes

1. Developers often prefer a few open routes in the app as the forget-password route, sign up, sign in.
2. Other than those routes, the majority of the app routes are protected. With DhiWise, shield routes by a local storage value. It can be a token or API key.

‍

9. Constants

Rather than repeating some similar group of variables everywhere in the project, define them in DhiWise, use them in the project, and get the code.

‍

10. GitHub/GitLab

After building the app, put it in a safe place. DhiWise offers to save code by syncing to GitHub or GitLab accounts.

‍

11. Deploy on Vercel

Deploy it on Vercel and see how it feels to use that website. Provide Vercel token, and the rest is on DhiWise.

DhiWise believes developers should work more on what is creative rather than the usual coding routine. DhiWise lets developers explore beyond the mundane tasks which devour time, energy, effort, and cost.