Flutter

Build a Web feedback app with Discord threads to import feedback to Canny and as ClickUp tasks in a few hours using DhiWise.

14

Saved hours

$280

Saved money

Stop letting ideas slip through the cracks. Instead, collect, and organize feedback and feature requests in a dedicated customer feedback tool. Discord, Canny & ClickUp help to collect and organize feature requests to better understand customer needs and prioritize the roadmap.

The Challenge

Collect, and organize feedback and feature requests in a dedicated customer feedback tool. collect and organize feature requests to understand customer needs better and prioritize the roadmap.

The Solution

To create 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 plan the roadmap.

Figma

View design

‍

Steps

Convert Figma to Web Code
Constants
API Integration
Actions & Navigation

‍

1. Convert Figma to Web Code

It generates each component with accurate and responsive React UI, generating HTML, TailwindCSS, and React state management code in a very structured way.

The panel has screens that can be imported easily from Figma URL. It also has a sync option to sync all changes at any time and can be re-synced without interrupting existing functionalities.

‍

2. Constants

It stores required values that were used in projects globally. Constants are needed to keep APIkey, BoardID, and AuthorID and to store default values required for the ClickUp API header body.

‍

3. API Integration

There were requirements of API cURL to perform all the operations, whose documentation is available on https://developers.canny.io/api-reference.

Visit and use an existing account or create it if it does not exist, and here it was used as per requirements.

Run Discord channel thread list API and import ClickUp cURL to create tasks and import all the APIs in the project from API Runner.

After importing the required cURLs, they can be integrated into the project. They are integrated through the “on the mount” page life cycle method. Life cycle actions, like API integration at the “on the mount” function when the screen is loaded

‍

4. Actions & Navigation

After that, actions like the click of the button can be redirected to another screen using the Navigation feature Of DhiWise, which also supports passing arguments in the state with Navigation, which saves more time and solves difficulties for passing, which DhiWise allows to operate as it has a feature to bind response of API with the state.

Here DhiWise generated code provides the state passed from the previous screen using the Navigation arguments feature.

GitHub

View Source Code

Medium

Check the step-by-step guide