Home page improvement

[Sky-De]

Current UI

if a user loads the application, he/she immediately sees the login form which is not aligned with design principles and UI / UX best practices

Expected UI

The user should see an h1 title that explains what the app is about. This should be followed by a description and a visual that gives users a general idea about the application. Finally, there needs to be a call-to-action button, in this case, a login button, that leads to the authentication page.

Notice : Currently, the login is implemented on the home page, but it should be moved to a new route named auth or log-in.

GIFs ( wait for load )

[x] I will fix this

[Sky-De]

@gbowne1 @jarmentor hi, I need your help to completely fix this issue. Provide an appropriate TITLE and DESCRIPTION for the new home page design. Also, you can describe what is this application for Chat-Gpt does and ask for a title and description. The description should be at least 20 words long. Inform me about it, thanks

[gbowne1]

@Sky-De

First of all, I would like to mention that this application like the others I have in various repositories, are open and community driven design, meaning that anyone can improve the look, feel and design of the UI and functionality and features with only my ideas and approval.. it was never meant to be based solely upon my ideas or even code.

If you feel like that there are improvements that can be done, feel free to open a task, bug report, issue, feature request, etc. I'm not a designer either.. so also feel free to make design improvements.

Feel free to also submit new features etc. If myself and other core contributors like if, more than likely it will be merged especially if the CI tests pass when the workflow runs on Github, just remember to run the npm preflight before pushing your contributions.

Also our other core contributor @jarmentor should be mentioned most of the time.

If there is no issue for your contribution, feel free to open one and then attach your PR to the issue in the righthand sidebar on the issue and or PR pages.

As for the home page I wasn't entirely sure that it needs a splash page, cover page or a home page loading before login and or register page appears. Most of the time the application will never appear on anyone's stream on Twitch, although we can design a customizeable place where the streamer can put their OBS overlay page's.

The only people outside of the streamer in the public that would ever see the app would be trusted moderators, VIP's and stream producers.

The home page need not be too fancy.or have a huge description.

[Sky-De]

@gbowne1 Thanks for your response. I understand, but for now, please clarify if these improvements are not beneficial. If they are, please provide a title and description for the home page. Even though there may not be a lot of users seeing the home page, there are always people joining from search engines, and it's necessary to know what they are facing to decrease the bounce rate (most users leave the app after 2 seconds). Let me know if we should close this issue. I will tag @jarmentor to see this discussion

[gbowne1]

@Sky-De

Well, what would be more beneficial and useful for is an in built or even separate marketing site/app where people can learn about the bot, download the bot, get help (coupled up to the bots help page?). In this case the people using the marketing site would not see the Bot's UI till they have downloaded and installed the bot locally.

Any pre login/pre register page should be pretty basic and only a basic description and perhaps just saying something like "You're about to enter TwitchBot." With some sort of confirmation button that allows the user to. Maybe a short tagline / one-liner too just to catch the users attention to what they are seeing + about to enter/do. If nothing else just a "Welcome to TwitchBot" screen.

This may not be optimal.

Ideas thoughts comments concerns suggestions welcome

@jarmentor @Sky-De

[gbowne1]

Some other things to conside

1. More than likely I will be hosting the bots marketing site which would be on the internet and publicly available for everyone and contain links to this GitHub.

2. the streamer might want to be able tailor the bot to their stream branding once its been installed.

3. Trusted VIP's, stream moderators and stream producers might want only access to certain things based on their stream role.

[Babuprasanth27]

@gbowne1 Hey I am interested in fixing this issue.

[gbowne1]

@Babuprasanth27 please feel free to work on this issue. Thanks