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

Saved hours
Saved money

Twitter is a micro-blogging platform offering the freedom to share ideas with the world. Twitter’s mission is “to give everyone the power to create and share ideas and information instantly without barriers.” Launched in 2006, Twitter is most popular with millennials and young professionals. However, it has experienced significant growth since its launch - attracting developers and professionals on the fly.

Sharing a tweet is supported in all mobile and web apps. It is convenient to share a tweet via DM or any external source by copying its URL.

The Twitter API gives the list of tweets to search. This API provides all the tweets that contain the query. Copy the link and share.

This API has a pull limit of 5,00,000 tweets a month. Twitter already has an advanced search facility that is pretty amazing. The one thing that Twitter lacks is the problem statement we are exploring today. Let’s check it out!

The Challenge

Twitter API is open and easy to integrate. The problem with Twitter is the lack of sharing multiple links at once.

How does one share a tweet?

The Big Deal:

  1. Open Twitter search for “DhiWise”.
  2. Find the tweets.
  3. Copy the link.
  4. Switch to WhatsApp.
  5. Find the contact.
  6. Send.
  7. Switch back to Twitter.
  8. We are on step 2 again.

Mathematics time:

What if you have to do the same every week for 30 minutes to share 15 tweets?

Google says there are 52 weeks in the year 2022.

30 minutes * 52 weeks = 1560 minutes

1560 minutes => 26 hours

More than a day for 15 tweets a week every year.

What if you have to share 100 tweets? Let’s skip the maths.

The Solution

Twitter API provides a search API to find the tweet.

DhiWise did it within 45 minutes by building a React Web app from a Figma design and Twitter API. So, let us explore it.

Where there is a will, there’s a way.


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.