The problem The Helping Hand solves

The functionalities of the features includes:

Grid System:

It is often observed that while placing the elements(or div) in a developing page, we face the problem of comparing the symmetry or gaps on both sides or even alignment of a particular element. So we have the designed a grid functionality where user can have their own defined grid margins (just like a user-defined graph sheet) Which would be the best according to his needs for aligning the objects accordingly.

Drag and drop system:

This feature is basically designed in such a way that the developer can drag his div itself from the browser over the screen and adjust its alignment as per required without changing his original code.
This is most beneficial during the UI changes where we can arrange the item to try out and observe different layers.

Sketch Board System:

We have many things that we want to point out in browser. just as an example- A teacher pointing to some lines in the documentation from the browser. So the Sketcher can be helped in pointing out over the browser itself.

Alan Voice Assisstant:

We integrated an Alan Voice assisstant using Alan AI throught the content scripts over the browser extensions(Cannot be directly loaded )

Todo List:

A todo list for reminder where we can put our thoughts or our todos.

Challenges we ran into

Grid Systems- Hard CSS for graph page
Sketch Board System- We faced a difficulty as we weren't able to provide the canvas when the user wants it to.
Alan Voice assisstant- We were not able to use The Alan directly by injecting the "aln-btn" div into the pop-up html. Rather we have inject it to JS to the original DOM(original Website page) using Content-scripts.
Todo-Accessing the local storage through extensions.
After a lot of research and hard work, we finally overcame the obstacles