How to integrate Twitter & WhatsApp APIs with DhiWise in just 45 minutes?

You all must have heard that Jack Dorsey, founder of Twitter, sold the first tweet as NFT for $2.9 Million. $2.9 million! Seriously? Yes, we certainly didn’t misplace a zero there!

Twitter is a rage among techies. Twitter started as a micro-blogging website, and it is a hub for the IT industries, Web3 enthusiasts, etc. Also, to keep the netizens active on the platform, they have introduced Twitter spaces, Twitter Communities [which are for invited users only], threads, media, and GIFs…

Get to the point:

Despite every flexibility around, What about sharing tweets? I am deeply dissatisfied with the sharing feature. It is good. However, I can’t share multiple tweets at the same time.

1. I used the Twitter API Postman collection officially provided by them.
2. Link to Twitter Postman Collection
3. I used the below Figma for Design.
4. Figma Design: https://www.figma.com/file/mpYoiSwrXz8pJS9dJmfF3F/My-Twitter
5. I got a Twitter token by signing up for Developer access from Twitter Portal.
6. For more information, visit Twitter API Docs.

Development With DhiWise:

I saved 100% web designing and component writing time by using DhiWise. It saved me more than 50% of my time and effort. Here is how.

1. I created my application on DhiWise asking for Figma, and I imported it.
2. It automatically fetched all my screens and provided me to perform additional functionalities such as API Integration [which we are discussing in this article shortly], Navigation, and Constants management.
3. I imported the Postman collection by uploading the JSON file with a single click.
4. I hit the “build app” button and got the code. That’s it.

Take a look at Twitter APIs technically:

I implemented the v2 APIs to build the feature. Here, I have implemented the following APIs

Getting the Tweets:

https://api.twitter.com/2/tweets/search/recent?query=DhiWise
- Provides an Array of Object, including tweet id and content

Getting the list of my following:

https://api.twitter.com/2/users/my_twitter_user_id/following

• Provides an array of objects containing the list of the user you follow

Viewing the recent tweets count:

https://api.twitter.com/2/tweets/counts/recent?query=DhiWise
— Provides an array of objects containing the list of tweets counts with the date having queried text

Getting the list of my followers:

https://api.twitter.com/2/users/my_twitter_user_id/followers
— Provides an array of objects containing the list of the user you follow

Fetching my profile:

https://api.twitter.com/2/users/my_twitter_user_id?user.fields=created_at,description,entities,id,location,name,pinned_tweet_id,profile_image_url,protected,public_metrics,url,username,verified,withheld

• Brings all the details which are passed in the URL parameter

Here is how to Integrate Twitter APIs in DhiWise:

1. After creating the application in DhiWise, It will ask for the Figma URL. It will fetch all your Figma screens to provide the UI code with components structure and TailwindCSS.
2. After fetching the screens, it will show each screen like this.

3. You can configure the screen in DhiWise. DhiWise feels like home to the developers.

4. Configure the UI components by simply clicking right on the element in the UI, and you will get the UI as above.

5. To import your Postman collection, please ensure you have exported the JSON file from Postman. On the left sidebar of DhiWise, go to the API Integration option. On the screen go to “Add new API” button on the top right corner and click on the button to import your collection.

6. We will see the first API. The rest are the same for implementation in DhiWise.

7. Once you import the Postman collection, go to the screen and select the Create Action from the context menu.

8. So I have the list of elements in this Figma where I have to implement this API.

9. Put all your data inside the headers. Define your token.

10. For the response part, you can directly integrate the list data. DhiWise platform will write a JavaScript map loop to print all data. It will handle all the elements and design as well.

11. No need to write even an API call function. DhiWise is generating that too for you.

12. That’s it.

Developer Experience:

> Code Review

1. The directory structure generated from DhiWise looks like this:

1. DhiWise generates all the common components separately like buttons, Dropdowns, Datepicker, Input, etc. It helps in two ways:

• Maintain project design guidelines from one single place.
• Reusable component codes.

2. TailwindCSS

• DhiWise generates TailwindCSS codes for the component, making code easy to read and edit or scale.

3. Easy to read

• As a ReactJS developer, I find DhiWise-generated code more reliable than depending on a larger team.

> Figma to React is real quick. No iterations. No delays. No worries. Just import Figma and get the ReactJS project with the structured code.

1. Building 5 screens in ReactJS + TailwindCSS will eat your brain, peace, and time. All together.
2. With DhiWise, it is just a matter of a few minutes. Just import Figma, select the screen, and build the code.

> API Integration:

1. Just like you do daily work but smarter, faster, and more accessible.
2. Easy to Integrate and update

3. The code:

• DhiWise generates a common function with the axios package to manage API calls with the least errors.

Continue Learning

Here, is the Link to DhiWise University to learn more about ReactJS and application development on DhiWise platform.

Video Tutorial

Want to see how to build Twitter using DhiWise?

GitHub Source Code

About Me

My name is Rakesh Purohit, ReactJS Developer Advocate at DhiWise.