How to build a web app to import user feedback from Discord to Canny and as ClickUp tasks in just a few hours using DhiWise

Stop letting ideas slip through the cracks. Collect (organize) feedback and feature requests in a dedicated customer feedback tool. Well, everything we said is now easier as Discord, Canny & ClickUp help to collect and organize feature requests to understand customer needs better and prioritize the roadmap.

Get to the point:

What about creating a single place for all customer feedback? Save time managing all the feedback while keeping customers in the loop. And to get an organized list of feedback to inform your roadmap.

I used the Canny Developers API https://developers.canny.io/api-reference, Discord channel thread list API, and ClickUp API cURL to create tasks and import all the APIs in the project from API Runner.

Figma Design:

I used the below Figma for Design.

https://www.figma.com/file/qVDbMR0bcd9f4PxmIyMiXX/CannyDiscordClickUp?node-id=0%3A1

Development With DhiWise:

I saved 100% of web designing and component writing by using DhiWise. It saved me more than 90% of the time. 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 allowed me to perform additional functionalities such as Navigation, and ‘Constants’ management.
3. I hit the “build app” button and got the code. After that, I needed to modify a few lines of code as per my requirement.

DhiWise Introduction

Next-gen programming automation platform to develop enterprise-grade applications in low-code and pro-code simultaneously. All in hours, not weeks. Eliminate the pain of mundane and repetitive tasks of your developers so your team can focus on things that matter.

For more information visit our website.

Integrate Discord, Canny & ClickUp APIs in DhiWise:

So after creating the application in DhiWise, you’ll be asked for the Figma URL. Your Figma screens will be fetched to provide the UI code with components structure and TailwindCSS.

After fetching the Figma screens, this screen will be shown.

You can configure the screen with the all-new Smart Editor. It gives the same feeling as you work with the editor you prefer in your daily development. DhiWise feels like home to the developers.

Configure the UI components by simply typing the name editor’s smart suggestions. The suggestions will pop up to assist you in writing faster code intelligently.

Please ensure you have exported the cURL from Discord, Canny & ClickUp Developers API. On the left sidebar of DhiWise, go to the API Integration option and click on the button to import cURL.

Select “API Integration” and write the function name, and you can set up your headers, requests, and responses.

Constant was used to storing APIKey, AuthorId, and BoardId which are required to send in URL encoded body for Canny, and stored default API body for ClickUp.

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

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.

No need to write even an API call function. DhiWise generates that too for you.

Developer Experience:

Code Review

The directory structure generated from DhiWise looks like this:

DhiWise generates all the common components separately like buttons, Rows, Columns, List, etc. It helps in two ways:

1. Maintain project design guidelines from one single place.
2. Reuse component codes.

Tailwind CSS

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

Easy to read

As a JavaScript developer, I find the DhiWise-generated code more reliable than depending on a large 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.

If you build 5 screens in ReactJS + TailwindCSS, that will eat your brain, peace, and time. All together.

With DhiWise, it is just a matter of a few minutes. Just import Figma, select the screen and build the code.

API Integration

Just like you do in your daily work but smarter, faster, and easier.

Smart-suggestion. No gap for errors and bugs. Dreamy, right? Well, DhiWise made it true

The code

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

Here is the generated output

Here is the working application’s GitHub link:
https://github.com/DhiWise/FeedbackWebApp

About me:

I am a Backend Developer at DhiWise. It’s a pro-code platform that generates production-ready code for React and Flutter Apps. It is so much more than just a design-to-code platform.

You can find me on LinkedIn and Twitter, and we can talk about cool dev tools like the one I am developing.