Webpack-cli: [UI]: User flow for webpack ui

[rishabh3112]

Do you want to request a feature or report a bug?

Discussion
What is the current behavior?
Currently, my approach is to implement features and then find a way to integrate that feature in the UI.

In Meeting, main focus was on deciding user flow first. For this we would see GUI tools for other CLIs already present and try to take inspiration.
If the current behavior is a bug, please provide the steps to reproduce.

N/A
What is the expected behavior?
User flow be decided
If this is a feature request, what is motivation or use case for changing the behavior?
N/A
Please paste the results of webpack-cli info here, and mention other relevant information such as programming language.
N/A

---

User flows

1. Vue CLI: https://docs.google.com/document/d/1Z78hZXeJ3fpZY26qIssoqm5TpEMfip5Soq-mOJZqIgM/edit?usp=sharing

2. Angular Console: https://vimeo.com/284057890

As per meeting, @fokusferit would be sending links to more GUI tools so that we can take inspiration.

[rishabh3112]

First Screen

Dashboard when user has a webpack configuration

cc @webpack/cli-team

[ematipico]

This is blast!!! Amazing job @rishabh3112 !!!!

Just an advice: I would avoid the blue colour in there, where there's the black background because it doesn't have enough contrast. I would use a brighter colour 😄

[rishabh3112]

Thanks, I picked up color scheme from official color branding schemes of webpack, will experiment more with dark part and share soon 👍

[rishabh3112]

@ematipico updated cyanish blue to yellow see if it's good!

[misterdev]

This is great! I really like that you put a fixed background and a "card" with all the content :)

One thing, I can see different kinds of buttons: blue buttons with background, yellow buttons without background and a green rectangular button. Being more consistent with styling would benefit the UX :)

[apoorv1997]

@misterdev sir, I would like to work on building the frontend app for the webpack-cli. Can you please guide me?

[anshumanv]

@apoorv1997 same comment - https://github.com/webpack/webpack-cli/issues/617#issuecomment-482225126 😄

[renatoagds]

@rishabh3112 pretty good job! I would just like to suggest we reduce the amount of information that we show for user at the same screen (like in the search starters screen), I think we could keep it minimal and link for the properly project doc, instead put everything in the screen for the user.

[rishabh3112]

Updates

• Add questionnaire page
• Made starter card minimal, requested by @renatoagds
• Made yellow as secondary color, requested by @misterdev

Designs v1.0.4

cc @webpack/cli-team

[misterdev]

That's nice! The "related property" seems very useful.

I would advise against yellow things on a white background because they have low contrast.
I think it would be nice to have a sense of progression using "Question 1 of 7" or some kind of breadcrumb navigation

[ematipico]

using "Question 1 of 7" or some kind of breadcrumb navigation

@misterdev I don't think we'll be able to implement that. Some questions appear/change based on the previous ones. For example, let's say we ask the user if they want typescript. At that point we could ask if they want to parse via babel or typescript themselves, and maybe what kind of type checker they want, etc.

[misterdev]

Breadcrumb navigation would work to just give an idea of the percentage of completion.
But you are right, at the moment we don't have a way to know how many questions have a custom scaffold

[keneohiaeri]

Amazing work soo far! I have gone through the Vue user flow, design iterations and feedback. Some of the design reviews I was able to collect from the previous messages include:

1. Button consistency
2. Breadcrumb navigation
3. Progress bar for scaffold generation
4. Colour scheme for user interface

I also have a few questions,

1. Is the UI a web-based app or desktop app?
2. If it's a web-based app, is there an authentication system to be able to store data of users?
3. Is there a design repo or Figma link I can join to contribute on the UI designs?

[rishabh3112]

@keneohiaeri answer to your questions:

1. A web based app running locally, not hosted.
2. No authentication required here.
3. I design on Adobe XD.

[renatoagds]

@keneohiaeri answering your questions:

1. Is the UI a web-based app or desktop app?

For now, is a web-based app, we could improve it in the future and add an electron piece. But for now isn't the main goal.

1. If it's a web-based app, is there an authentication system to be able to store data of users?

It will be a server running direct in the user computer, based in that we don't need an authentication system. To store data, we could use the user local storage

1. Is there a design repo or Figma link I can join to contribute on the UI designs?

I don't think so, @rishabh3112 could answer better.

[keneohiaeri]

Thanks for the feedback, I was able to work on the existing UI designs over the weekend. I took into consideration the previous design reviews and made some tweaks here and there. Check them out and tell me what you think!

[keneohiaeri]

DESIGN v1.0.5

[misterdev]

Nothing to say, this is beautiful! Consistent and elegant, great work!

PS: I don't think we'll be able to implement breadcrumbs navigation, but it look very nice

[evenstensberg]

wow 😍

[rishabh3112]

Looks awesome 😎.
Needs some iterations and we are good to go 🚀

[renatoagds]

@keneohiaeri wow! great job 😍

[keneohiaeri]

Thanks everyone! Glad I could contribute!
@rishabh3112 Here's the source link to the designs, you can add any missing features from there.
Link - https://clip.ng/mDVa

[ematipico]

@keneohiaeri amazing job! Thanks and WOW!!

[anshumanv]

Great work @keneohiaeri! ✨ 🚀

[dhruvdutt]

@keneohiaeri Awesome AF 🥂💙💙💙

[rishabh3112]

@keneohiaeri I have added some feedback on the figma. Sorry, but as the link as read-only, I, therefore, couldn't edit them in place.

[renatoagds]

@rishabh3112 and @keneohiaeri what you guys think is missing to go ahead with? IMO we could start working in the frontend application.

[rishabh3112]

As per meeting, UI is now an independent project under my repo.

Also designs have to be ported to suit as a local tool, rather something to be served as a website.

You can follow rest on https://github.com/rishabh3112/webpack-ui

[rishabh3112]

Will rework on designs after my exams this month @renatoagds

[renatoagds]

@rishabh3112 perfect! I'll follow the discussion under your repo.

[rishabh3112]

Closing this issue. Thanks, everyone for the feedback 😃.
Further feedback can be shared at https://github.com/rishabh3112/webpack-ui/issues/1

[evenstensberg]

Still needs to be open cause this is unresolved

[webpack-bot]

This issue had no activity for at least half a year.

It's subject to automatic issue closing if there is no activity in the next 15 days.

[webpack-bot]

Issue was closed because of inactivity.

If you think this is still a valid issue, please file a new issue with additional information.

[webpack-bot]

This issue had no activity for at least half a year.

It's subject to automatic issue closing if there is no activity in the next 15 days.

[rishabh3112]

As UI project under webpack has been officially discontinued (as discussed on slack), However I would be working on it when free as a side project, The POC project can be viewed at https://github.com/rishabh3112/webpack-ui/ for any one interested.