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

• Material UI

  290 91,600 10.0 TypeScript

  Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.

  

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 sense of unity.

• dagu

  11 1,170 9.0 Go

  Yet another cron alternative with a Web UI, but with much more capabilities. It aims to solve greater problems.

  

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.

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• webpack

  331 64,178 9.8 JavaScript

  A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.

  

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

• Bulma

  157 48,603 8.6 CSS

  Modern CSS framework based on Flexbox

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

Suggest a related project