[Frontend] Add GUI with input fields for range + CTAs for scanning network

[vinitshahdeo]

Currently this is a CLI based application, convert this into a GUI application to make the UX better!

• Must have:

  • A window with menus (IP Scanning/Port Scanning)
  • Input box to enter host
  • Input fields to enter low & high range of ports
  • CTA(Button) to start scanning
  • List of Ports/IPs (once the scanning is done)

• Good to have:

  • A live timer to show the total scanning time
  • Some kind of indication (animation) in UI while scanning is happening in the background
  • Resume/Pause/Restart scanning options

• Extended feature

  • UI option to convert a host into its IP address
  • Display history: Last five scans in the following tabular form

Date & Time	Host	IP Address	Total Scanning time
9:00 PM June 8, 2020	localhost	127.0.0.1	24 seconds

Recommended to use PyQt5 | Learn more here.

PS: Still open for discussions - feel free to suggest GUI frameworks(preferably from Python).

[vinitshahdeo]

@Kashish121, @ishika1727 - Any thoughts here?

[Kashish121]

Looks great, will ping a few ideas while working on it.

[ishika1727]

Amazing, excited to work on it.

[vinitshahdeo]

@Kashish121 Changed the directory structure and updated the steps in README.md. Please have a look and verify that nothing is breaking and one can easily run the project following the steps mentioned in README.md.

@ishika1727 Please rebase your master branch and raise the PRs again. Sorry for your inconvenience. 😞

[Kashish121]

On it.

[ishika1727]

On it.

[Kashish121]

No issues. PortScanner can be run easily following the steps mentioned in README.md. Error due to director structure #19 also resolved.

[vinitshahdeo]

TODO^{as discussed in meeting}

@ishika1727 - Explore materialize @Kashish121 - Explore flask.

Post your thoughts here for the wireframe.

[vinitshahdeo]

From now onwards, we'll track our progress here.

@Kashish121 , @ishika1727 - Check out the Project board.

[ishika1727]

@vinitshahdeo Please review this UI

[vinitshahdeo]

@ishika1727 Few suggestions from my end:

• The CTA (Scan Now) should be at the end.
• The input text fields shouldn't cover the whole width.
• The sidebar should be fixed a bit - it looks like an admin portal now. Remove email, just have logo!
• Add helper texts for all the inputs.

PS: Tagging @NainikaB here, she's the best person for UI/UX. Nainika, please post your thoughts here. For your context, it's a SPA for scanning available ports in the given network^{to be scaled to go-to networking tool with multiple features}, learn more here.

[ishika1727]

@vinitshahdeo I have made the required changes. Please review it.

[nainikaB]

@vinitshahdeo thank you for tagging me! :) Yes, I'd love to! And you have already made some key observations regarding the functionality of it.

@ishika1727 Okay so a couple of things, I think the page lacks design. I do understand that this is just a utility tool but, maybe give the user an experience and interphase they'll always remember.

So instead of having it route to contact and about, there's actually ample space to accommodate all of your content in the same page, of course with a smart use of drop downs in the mobile UI. So maybe consider that as well :)

For the current design:

• Logo placement issues with regards to size and position.
• Consider making it a box so you won't feel like you have to use the whole desktop width
• Darken the colour for the headings host to scan, low and high. It currently looks like it's disabled.
• Consider using bold for the font and changing the font-family
• What's the current font size? it look its 16-18px. Maybe increase it?
• Is that email id for users to contact you incase of an issue?
• I think there should be social media links on this page itself, if you are considering having social media presence for this.
• Increase border radius for your scan now button. 20px? and padding as well maybe of 5px on every side?

And lastly, I would suggest using a wireframing tool or software like figma when you guys are going back and forth with designs since there are bound to be many versions before you actually settle with one and it puts way too much work on the person building it. I don't know if you guys have already done that but this is just a suggestion it would make working as a team and collaborating a lot more smoother.

Hope this helps :)

[vinitshahdeo]

@nainikaB Wow, this is an intensive review! ❤️ Thanks for your valuable thoughts. We'll definitely look into these. ✌️

PS: We're not using Figma or any wireframing tools due to time limitation and less UI work. Ideally we should have done it. Please keep an eye here, we'll keep you posted.

[vinitshahdeo]

@vinitshahdeo I have made the required changes. Please review it.

@ishika1727, Center align the GitHub logo in sidebar and let's change the color of icon to the theme color. Rest we can discuss over the call.

[nainikaB]

@vinitshahdeo ayeee please don't thank me, happy to be of any kind of help with your project. :) Although, I think I might have increased the work load, sorry! If you guys are on a strict time constraint ignore the complete rearranging of elements that I suggested and instead, maybe improvise with the current design itself along with the comments I have attached above and anything else that I might have missed. And yes, I'll definitely keep an eye here and help you guys with anything else you might need :) Yes that's true, Figma does take time definitely not advisable when you have a deadline approaching.

[vinitshahdeo]

@nainikaB 😊 Will ensure that the UI bit includes all of your suggestions. Thanks for being kind, as always!

Keep guiding! ✌️

[vinitshahdeo]

[ Frontend / TODO ]

@ishika1727 Here's sharing a few utilities which you can use to finalize the fonts. Use a combo of three font-families - heading, sub-heading and paragraph.

• typespiration.com (Recommended)
• fontjoy.com
• fontpair.co

Check colorhunt.co to get inspiration for color palletes.

@Kashish121 Join her and finalize the font and theme color for the website.

[vinitshahdeo]

[ Deliverables by Sunday EOD ]

• Updated UI with all the changes (including font-family and final theme color) - @ishika1727

  • Create a feature/frontend branch from master and push your changes. (Follow CONTRIBUTING.md)
  • Create a PR for the same

• Frontend to be rendered using Flask (We can look for adding actions on button-click later) - @Kashish121

  • Create a feature/backend-flask branch from master and push your changes (Follow CONTRIBUTING.md)
  • Create a PR for the same

PS: Lemme know if there're any blockers around this.

[Kashish121]

@vinitshahdeo, Working on it already. 👍 Will share the updates.

[ishika1727]

[ Deliverables by Sunday EOD ]

• Updated UI with all the changes (including font-family and final theme color) - @ishika1727

  • Create a feature/frontend branch from master and push your changes. (Follow CONTRIBUTING.md)
  • Create a PR for the same

• Frontend to be rendered using Flask (We can look for adding actions on button-click later) - @Kashish121

  • Create a feature/backend-flask branch from master and push your changes (Follow CONTRIBUTING.md)
  • Create a PR for the same

PS: Lemme know if there're any blockers around this.

Doing the required changes. Will create a PR soon

[vinitshahdeo]

@ishika1727 & @Kashish121 - Any updates? Let's sync up and finish the pending tasks.

[Kashish121]

Hey @vinitshahdeo , got the required changes in the UI today. Will push the the code for connectivity tomorrow.

[ishika1727]

@vinitshahdeo already created a PR yesterday with the changes you suggested.

[vinitshahdeo]

@ishika1727 Added few comments on #39

[vinitshahdeo]

@Kashish121 / @ishika1727 - Please try running this locally and confirm me.

Please follow the steps mentioned on README.md

[Kashish121]

Works for me @vinitshahdeo . @ishika1727 can you confirm once?

[ishika1727]

works for me too

[Sohaib03]

Is this open ? I would like to make an GUI interface using PyQt5.

[vinitshahdeo]

Hey @Sohaib03, thanks for showing your interest. Please go ahead.

PS: The website is done but let's have Desktop GUI too.