This looks good from a high level. Would love to see some wireframes!! Does not need to be hi-res at this stage.
1 Like
Designing is not my thing, but here’s some wireframes. They can be changed later if the bounty is assigned.
2 Likes
Yeap, it’s a vscode-like sidebar. When clicked, the project explorer is hidden/shown. Other options could be added later, when more dfx commands are supported.
DFX Dashboard GUI - A Native App
Introduction
The DFX Dashboard GUI is a native app that provides a graphical user interface for the DFX command-line tool. It is a desktop application that runs on Windows, macOS, and Linux. It is built using the Electron framework.
Features
The DFX Dashboard GUI provides the following features:
-
Login with Internet Identity
-
Ability to compose canister arguments through the UI; call canisters with arguments
-
Ability to edit JSON configurations used by dfx (e.g. dfx.json, networks.json, ic-assets.json)
-
Native application for Windows, macOS, and Linux
-
Ability to view logs generated by dfx
-
Ability to define multiple identities and switch between them
-
Local or procuction mode
Design & UI
Home Page
-
A welcome message and brief instructions on how to use the tool.
-
Quick Start buttons to run common commands (e.g.
dfx start,dfx deploy,dfx canister call).
Canisters Page
-
Canister List Page: A list of all canisters in the project.
-
Canister Detail Page: A page for each canister that displays the canister’s details (e.g. canister id, canister type, canister status, etc.)
-
Function (Method) Detail Page: A page for each function (method) that displays the function’s details (e.g. function name, function type, function parameters, etc.)
-
Create Canister Page: A page to create a new canister.
Identity Page
-
A form for users to input and save their identity.
-
A button to apply the chosen identity to subsequent commands.
Log Page
-
A log viewer to display the log files generated by dfx.
-
Options to filter or search the logs.
Settings Page
-
Options to set logging mode (stdout, or file), log file location, etc.
-
An “Apply” button to save the settings.
Tech Stack & Structure
-
Electron Js
-
Next Js
-
Node Js
-
Tailwind CSS
-
Typescript
Deliverables (~5 Weeks)
Project can be delivered in 5 weeks after the bounty is approved.
Team
Mert Köklü
Acted as an ambassador of many organizations including ACM, Microsoft and NVIDIA as Certified Instructor. In the Web3 space, he co-manage the AAVE Turkey Community and advocate for The Graph. Was working with AI video pipelines at an NVIDIA distributor company in Turkey before getting involved with blockchain.
Develops ecosystem tools and applications with various tech stacks. AAVE, W3F, Flow and Filecoin grantee with an accepted multiple projects and now developing open-source, user-friendly applications that add value to the Web3 ecosystem.
LinkedIn: https://www.linkedin.com/in/mertkoklu/
GitHub: https://github.com/justmert
Tolga Yaycı
As a full-stack developer with 2+ years of experience, I have honed my skills in software development, with a focus on dApp development in the past year. I have a deep interest in the Web3 and NFT space and have put my skills to the test by creating a number of relevant applications. In addition to my experience, I have developed detailed React and Next.js projects, further enhancing my ability to build robust and scalable web applications.
In addition to my technical skills, I have also been actively involved in the wider tech community. I have served as a Chainlink Community Advocate, Aave Turkey Community Manager, and Founding Chair of Gazi University ACM Student Chapter. My previous role as a Microsoft Learn Student Ambassador has also given me the opportunity to share my knowledge and experience with others. I have set of experiences and skills and particularly in the areas of full stack software development and community management.
AAVE, W3F, Lens Protocol & Filecoin grantee with an accepted multiple projects and now developing open-source, user-friendly applications that add value to the Web3 ecosystem.
LinkedIn: https://www.linkedin.com/in/tolgayayci/
GitHub: https://github.com/tolgayayci
Additional Information
If you have any questions, please feel free to contact us, we can set a call to discuss the project in detail and open to any feedback.
1 Like
Hi @justmert. Thanks for adding the wireframes! They look great, and I think the design covers most of the aspects we’ve called out.
One question - I didn’t find a way to switch between projects. For example, the settings screen shows a button to configure dfx.json, but which project is it being configured for? Is there some indication somewhere of what project is “active” or currently being edited?
1 Like
Thank you for your feedback, @dfx-json
We agree that it would be beneficial to display the active project and probably display on the left-bottom sidebar, just above the local-mainnet button.
Users will be able to change or activate projects directly from the homepage. We just forgot to include this section initially, and we appreciate your reminder.
If you have any suggestions regarding this feature, we would be happy to discuss and make the necessary modifications.
1 Like
Electron that weighs more than 52MB would weigh much less, around 3MB, when built with Tauri.
1 Like
Yes, electron applications are larger in size than tauri.
Tauri has nice features, but it has not yet reached such a wide developer base as electron. In the long run, we think that progress with electron will be more beneficial thanks to the community it provides.
If the application size is very critical for this application, we can also develop with tauri, but as a team, we think that electron creates a better experience in terms of development experience and sustainability.
We are curious about your comments on this subject.
1 Like
It also needs to be secure and Tauri seems to be more secure than Electron. It is not a large application. It has all the functionality to be developed on. I don’t see the problem. In the end it is reading .pem keys. I think developers/users using the application want to feel secure.
2 Likes
Depends on what you expect from this security, the tauri document claims it’s safer, but there are also countless “secure apps” built with electron.
Electron Showcase: VsCode, Discord, GitHub Desktop, Figma, Notion
I think, we can say these are secure applications and users feel safe enough while using these electron based apps.
1 Like
I don’t feel safe using those. It is out of necessity and no other option really. Chromium is a Google blackbox. At the end of the day why wouldn’t you use something that has shown promise technically vs something that consumes more energy and storage. This is specially true for people that don’t have the latest Mac.
2 Likes
Well, I understand your concerns about security and resource consumption when it comes to Electron. However, we still believe that Electron still has several advantages over Tauri.
While Tauri may claim to be more secure, as I said above, many secure applications are built with Electron, such as VSCode, Discord, GitHub Desktop, Figma, and Notion. These widely used applications have demonstrated that Electron can provide a secure experience for users.
Electron has a much larger developer community compared to Tauri, which means that it benefits from community-driven support, resources, and plugins. This developer base ensures that Electron receives ongoing updates, bug fixes, and feature enhancements, making it a more sustainable choice for long-term development especially for tooling.
In terms of technical aspect, Electron has proven itself as a reliable framework. It allows developers to create cross-platform applications with ease, providing a consistent user experience across different operating systems.
While it is true that Electron may consume more energy and storage compared to Tauri, it is essential to consider the overall benefits and trade-offs. Electron’s extensive feature set and robust development experience outweigh the minor drawbacks in terms of resource consumption, especially considering the widespread availability of modern hardware.
It’s important to note that frameworks alone do not guarantee safety. Ultimately, it is the responsibility of the developers to ensure the safety and security in their applications.
We are not just creating an application that only we can understand; on the contrary, we want to develop an application that other developers can also contribute and maintain. That’s why we believe Electron is suitable for this purpose because of its wide-spread community. Thank you.
I would also consider using Tauri over Electron just because of RUST when building on the IC. So the understanding and contribution to it would make more sense.
This is false. I know several developers that don’t have the kind of hardware we have.
Communities come and go. ICP is a small community right now does that mean everyone should use AWS or Ethereum?
Many people don’t use Signal and Zuck swears Whatsapp is “secure”, we don’t spy he says.
Foundations matter, which is why we build on ICP.
Sometimes we aren’t given a choice. Sometimes we are.
2 Likes
Thanks for comments guys,
If foundation and community wants to build this application with Tauri, then we will build it with Tauri, no problem 
Hey everybody,
we’ll have a Developer Tooling Working Group session today at 7 pm CEST (UTC+2).
We don’t have an agenda for today, hence this would be an ideal opportunity to talk about the DFX GUI with @dfx-json.
Hope to see you there!
1 Like
Not sure if it fits the description but i already started something like this once,
I stopped the development because somebody from Dfinity announched to develop this kind of tooling.
1 Like
As we talked at the meeting, we made a mock-up update on how projects can be displayed. You can quickly switch between projects with the purple sidebar on the left, and create new projects with the + button at the bottom.
You will also be able to see all projects on the projects page, search through them, and quickly view core data about projects. We have placed it as a table for mock up, but maybe it can be implemented as a card view as well. Funcionality can be enhanced for this page.
I would encourage you to apply for the bounty if you’re still interested in the project!
1 Like