Web UI design improvement using Material UI, the Before and After (React + TypeScript + Material UI)

• React Project structure
• Separation of Web UI code
• Migration to TypeScript
• Migration to MUI dashboard templates
• Before and After
  • Before
  • After
• Conclusion
• Join in the development!

We are developing a No-Code/Low-Code Workflow Platform, DAGU.

It is built on the following simple stack.

• Frontend: React + TypeScript
• Backend & Command: Golang

DAGU's built-in screens were initially designed simply using a popular CSS framework, bulma. I have improved the look and feel of the web UI and the development experience using Material UI in the following steps:

1. Separation of Web UI code from go's HTML template files
2. Migration to TypeScript
3. Migration to MUI dashboard templates

React Project structure ⚙️

The finished project structure is as follows:

admin/
├── api/
├── assets/
├── components/
├── contexts/
├── hooks/
├── models/
├── pages/
└── styles/

Take a look at The location in the repository if you like to know in detail.

Separation of Web UI code

I have separated the React code that was written directly in go's HTML templates into separate files for each component. This allows React components to be reused across multiple screens. Now it has now 36 components in total.

I also introduced webpack, which allows us to develop more efficiently using hot reloads while optimizing builds for production.

Migration to TypeScript

Migrating from JavaScript to TypeScript enabled it to define the structure of JSON objects as models and gain safety through type checking and great development experience with auto-completion.

Migration to MUI dashboard templates

I migrated web UI, which was easily created with bulma css framework, to Material UI.
Material UI is a collection of components designed according to Material Design developed by Google. By structuring the screen according to Material Design, you can build a UI with a consistent looking.

What I have done is just cloned the Material-UI repository and copy the dashboard templates components as the starting skeleton.

Before and After

Before

Workflow Status View (OLD)

Workflow List View (OLD)

Workflow Execution History View (OLD)

After

Workflow Status View (NEW)

Workflow List View (NEW)

Workflow Execution History View (NEW)

Workflow Execution Log View (NEW)

Conclusion

I hope it looks somewhat nicer and fancier. What do you think?
Moving to React + TypeScript + webpack has made it easier to extend new functionality. This allowed me to add the dashboard view very quickly 🚀

Workflow Dashboard View (NEW)

Join in the development!

DAGU is in the early stage and aimed to be a good alternative workflow engine for smaller use-cases or existing codebases that need to be organized without hassle or high learning curve.

Feel free to contribute in any way you want. Share ideas, questions, submit issues, and create pull requests. Thanks!