Is your feature request related to a problem? Please describe.
the webpage seems to have no navbar

Describe the solution you'd like
create a responsive navbar

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Problem

The current canvas size is too small, not allowing the application canvas to be used to its full potential.

Solution

Increase the canvas size to fill in the entire screen. The buttons and color picker can be overlaid on top of it.

Alternate solution

Increase the canvas size to fill in just enough of the screen, push the UI elements aside and allow the canvas to be scaled as per user requirement. Adding scrollbars

Describe the bug

The current ui lacks responsiveness and is not mobile friendly

Video

Additional context

please assign this issue to me under gssoc and also add necessary labels

Issue templates are very helpful for a collaboration repo. When users identify a bug or want to add a new feature, you can provide templates so you can collect all the pertinent information you need to fix a bug or add a new feature.

We recommend creating a “Report Bug” and “Feature Request” issue template.

Some suggested prompts/questions you can add to a “Report Bug” template are:

Briefly describe the bug
What is the expected behavior?
Please provide step by step instructions on how to reproduce the bug
Some suggested prompts/questions you can add to a “Feature Request” issue template are:

Briefly describe your feature request
What problem is this feature trying to solve?
How do we know when the feature is complete?

Reference: https://github.com/Recode-Hive/Stackoverflow-Analysis/issues/new/choose
Click on Get Started button and copy the template to yours.

Currently the Draw it out website lacks important meta elements so will affect seo problem

• by adding the meta tag like description, keywords, author using the meta tags to improve the seo problem

Problem:
Not able to retrieve the old page as soon as the color of the page is changed.
Solution:
Adding a new button for the user to open multiple sheets so that the board can be used flawlessly with out encountering the above problem.

Describe the bug
There is an issue with the stability of the UI on mobile devices when drawing on the whiteboard. The UI seems to move up and down, possibly due to scrolling making it difficult to use.

To Reproduce
Steps to reproduce the behavior:

1. Go to the whiteboard feature on a mobile device.
2. Start drawing on the whiteboard.
3. Notice how the UI moves up and down, during drawing.
4. This instability persists throughout the drawing process.

Expected behavior
The UI should remain stable and not move up and down while drawing on the whiteboard.

Smartphone (please complete the following information):

• Device: [iqneo6]
• OS: [Android 12]
• Browser [Chrome]

Is your feature request related to a problem? Please describe.
Users often need to draw geometric shapes like rectangles, circles, and lines, which can be time-consuming using freehand drawing tools.

Describe the solution you'd like
Add dedicated shape drawing tools to the toolbar, allowing users to easily create precise geometric shapes.

Describe alternatives you've considered
An alternative could be integrating a shape recognition algorithm, but manual shape drawing tools would offer more control.

Additional context
This feature would streamline the drawing process for users who frequently incorporate geometric shapes into their work.

Describe the changes that you want to make in the documentation
Draft a comprehensive guide that outlines the step-by-step process for installing and setting up Draw-it-out locally on different operating systems (Windows, macOS, Linux).

Significance of the changes made
By providing clear installation instructions, we can lower the barrier for new users to get started with Draw-it-out, encouraging wider adoption of the application.

There should be an option to hide the background color choices and also the other buttons so that the user can focus more on drawing.

As the maintainer of a Collaborate repo, keeping Issues up-to-date will help the student community understand what they can do to contribute. Issues should vary by the easy (update documentation) to the difficult (add a new feature). The more involved you are, the more opportunities there are to collaborate.

Recommendations:

Add issues of varying difficulty to the repo often. you can add the tag GSSoC'24, good first issue etc.
Generate issues even if you plan on solving them, so the repository appears as active.
Contribute/commit often to the repo so it does not go stale.

Reference https://github.com/Recode-Hive/Stackoverflow-Analysis/issues

Clearing the canvas with a single click is a useful feature, but the issue is that the user cannot remove specific parts of the canvas. Therefore, I suggest adding a button that allows the user to adjust the area to be cleared.

Learn repos should have a LEARN.md file to teachstudent how to build your project step by step. You can explain how to build your project with text, code snippets, images, or even short (5 minute) long video lessons. As the maintainer of a Learn repo, the LEARN.md file requires you to think critically about how to explain the building of your project and how to also make it engaging. We don't expect you to be an expert teacher, but we would like you to reflect on how difficult it was to get to your level of knowledge, and then provide friendly guidance to help other students to learn.

Reference: https://github.com/Recode-Hive/Stackoverflow-Analysis/blob/main/Learn.md

Problem

The current program does not allow artists to draw on multiple layers. That'd allow for more easier management of the artwork

Solution

Add a separate menu button for layers, opening a layer panel for managing them.

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
A logo is the visual cornerstone of a website, embodying its identity and fostering immediate recognition and trust among users. It serves as a powerful symbol, encapsulating the essence of a brand and guiding the overall design and user experience.
Describe the solution you'd like
A clear and concise description of what you want to happen.
An eye catching logo must be present for this website
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
Also Some effects can be considered on hovering logo
Additional context
Add any other context or screenshots about the feature request here.

👋 Hi @singodiyashubham87 ,

I am Sanjay, program Manager https://github.com/girlscript Summer of Code. I'll be collaborating with you on preparing your repo for GSSoC'24 Program

Why are these changes required?
After Analysing last year's contributions and feedback it would be great for students to have a couple of standard readme files on the repo to understand what the project is all about and some issues detailing what they can contribute. This will help you to see increased engagement in your repository as well.

As mentioned students get a chance to learn step by step, how to build this project as well as invite mentors to collaborate and add features to this repo. I will generate issues, which will provide guidance on how to prepare your repo for Girlscript summer of code 2024 on 10th May.

This issue will serve as a tracking issue to track all issues related to GSSoC'24. I recommend creating a new branch for every issue and opening a pull request to track changes so we can effectively collaborate with each other and merge changes when you and I feel like those changes are ready to be merged on your primary branch.

If you have any questions or concerns, please feel free to leave a comment on this issue or any of the other issues that are generated.

I look forward to working with you

• #20
• #21
• #22
• #23
• #24

Problem

The current software only allows for one pen to draw

Solution

Adding more brush strokes, pens, textures to be used in the canvas

As a user I should be able to draw larger things and the board should resize accordingly.

Is your feature request related to a problem? Please describe.

Users who interact with the drawing feature on the website may encounter challenges in finding assistance or guidance related specifically to drawing tasks. Additionally, there is a lack of functionality for easily exporting drawn images and a missing undo/redo option, which can hinder the user experience and workflow.

Describe the solution you'd like

To address these issues, I propose the following solutions:

1. Pop-up Chatbot for Drawing Assistance:

   • Implement a small pop-up chatbot that provides assistance and answers questions related specifically to drawing tasks.
   • The chatbot should offer guidance on using drawing tools, selecting colors, and executing various drawing techniques to help users enhance their drawing skills.

2. Export Button with Toggle Feature:

   • Add a button on the landing page with a toggle feature that allows users to navigate and export their drawings.
   • Upon toggling the export feature, users should be able to take a screenshot of their drawing, and a pop-up window should prompt them to save the image locally on their computer.

3. Undo/Redo Functionality with Partial Undo:

   • Introduce undo and redo options that enable users to revert or replay their drawing actions.
   • Implement a partial undo feature where, instead of wiping out the entire drawing with each undo action, the drawing should revert to its previous state in stages. For example, if a user drew a mountain in steps (outline, coloring, shading), undoing an action should revert the drawing to the previous stage rather than erasing everything at once.

Describe alternatives you've considered

An alternative solution could involve integrating a comprehensive drawing tutorial or guide within the website to assist users in mastering drawing techniques. Additionally, instead of a pop-up chatbot, providing a dedicated help section with FAQs and tutorials could address user queries related to drawing tasks.

Additional context

Implementing these features will enhance the drawing experience on the website by providing users with on-demand assistance, streamlined export functionality, and improved control over their drawing process with undo/redo options. These enhancements aim to make the drawing feature more intuitive, user-friendly, and conducive to creative expression.

Is your feature request related to a problem? Please describe.
no footer !

Describe the solution you'd like
make a footer with social icons

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Problem:
Users currently lack the ability to save or export their drawings from the website. This limitation prevents them from preserving their work and sharing it with others, resulting in frustration and inconvenience.

Solution:
Implement a feature that allows users to save their drawings directly from the website. Additionally, provide options for exporting drawings in various file formats (such as PNG, JPEG, or SVG) to facilitate sharing and compatibility with different devices and software.

Alternative Solutions:

1. Integration with cloud storage services (e.g., Google Drive, Dropbox) to enable automatic saving and backup of drawings.
2. Implementing a "Download" button that allows users to export their drawings directly to their device.
3. Providing a "Share" button that generates a shareable link or allows users to share their drawings directly to social media platforms.

Additional Context:
Adding this feature would greatly enhance the user experience, empowering users to preserve their creative work and share it with others effortlessly. It would also contribute to the overall usability and competitiveness of the website by addressing a common user need.

Describe the bug
Canvas board is overlapping with the color palette after the screen size is reduced to less than 1270px.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Draw it out! website'
2. Right-click on mouse.
3. click inspect and reduce screen size
4. See error

Expected behavior
The canvas board overlaps with the color palette.

Screenshots

Desktop (please complete the following information):

• OS: [Window 11]
• Browser [Edge]

I want to work on this issue can you please assign it to me?

Is your feature request related to a problem? Please describe.
better ui and appealing

Describe the solution you'd like
make the pallete in a grid of two columns and giving more colour option by adding built in colour pallete (just like pen colour pallette)

@singodiyashubham87 assign it to me

Is your feature request related to a problem? Please describe.
Users may experience discomfort or eye strain when using the application in bright environments or during nighttime.

Describe the solution you'd like
Introduce a toggle button that allows users to switch between dark mode and light mode to accommodate different lighting conditions and personal preferences. In dark mode, the interface would feature darker colors and reduced brightness, while in light mode, it would revert to a traditional brighter color scheme.

Describe alternatives you've considered
Introducing a toggle button is the preferred solution. It provides users with direct control over the interface's appearance, allowing them to switch between dark mode and light mode based on their preferences and needs.

Additional context
Consider providing customization options for each mode, such as allowing users to adjust brightness levels or choose different color palettes. Additionally, ensure that the toggle button is easily accessible and intuitive to use, contributing to a seamless user experience.

@singodiyashubham87 please assign me(@ChaithanyaKrishna28 )this issue, I would love to contribute to it.

Is your feature request related to a problem? Please describe.
Users often need to export their drawings in scalable vector graphics (SVG) or portable document format (PDF) for printing or further editing, but currently, Draw-it-out only supports image exports.

Describe the solution you'd like
Extend the export functionality to include options for exporting drawings as SVG or PDF files, preserving scalability and editability.

Describe alternatives you've considered
An alternative could be allowing users to export to other common formats like JPEG or PNG, but SVG and PDF offer better support for vector graphics.

Additional context
This feature would enhance Draw-it-out's usefulness for professional users who need high-quality output for printing or integration into other design software.

Describe the bug
Currently the svg elements are acting as button elements, it's not accessible. We want to use actual button elements.

To Reproduce
Steps to reproduce the behavior:

1. Go to Draw it out website
2. Click on button elements to inspect them using Browser dev tools.
3. Scroll down and see the svg elements acting as button
4. See error

Expected behavior

• The svg elements are need to be wrapped with button elements to improve accessability.

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu
• Browser : chrome

Smartphone (please complete the following information):

• Device: Realme 8
• OS: Android 13
• Browser: chrome

Describe the bug
After drawing something in the canvas, and if we try to change the brush size then all of the drawing are lost.

To Reproduce
Steps to reproduce the behavior:

1. Draw something on the canvas
2. Try increasing or decreasing the size of the brush.
3. See the canvas drawings getting cleared.

Expected behavior
A clear and concise description of what you expected to happen.
The drawings should still be there and just the brush size should be changed.

Is your feature request related to a problem? Please describe.
Users currently do not have easy access to information about the creator of the app, which limits their ability to engage or connect with them beyond the app itself.

Describe the solution you'd like
Add social media icons at the end of the webpage for easy access to the creator's social media profiles. This will enable users to learn more about the person behind the app, fostering a stronger connection and potentially encouraging further engagement.

Describe alternatives you've considered
An alternative could be adding a "About the Creator" section within the app, but this may not be as readily accessible as social media icons placed at the end of the webpage.

Additional context
The social media icons could include links to platforms such as LinkedIn, Facebook, or Twitter, allowing users to explore the creator's professional background, interests, and updates. By implementing this feature, users can establish a more personal connection with the creator of the Draw it out app.

In GSSoC'24, GitHub Topics will help the discoverability of your project.

I see that you already have great topics on your repository!
I would recommend adding the name of the company like the software you use to build like "vs-code, ghdesktop" to improve your discoverability.

If you are happy with the topics you have, feel free to close this issue. 👍

Problem

Can't export images with transparent background

Solution

Ignore the background color and allow user to save what he has drawn as PNG file

Is your feature request related to a problem? Please describe.
the side panel could be openable

Describe the solution you'd like
make it open and close using button

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Describe the bug

The current UI is taking more width than the screen making it overflow horizontally

Screenshots

Additional context

please assign this issue to me under GSSOC and also add the necessary labels

Is your feature request related to a problem? Please describe.
there are few colors

Describe the solution you'd like
make more colors or use pick color from brush or custom

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Is your feature request related to a problem? Please describe.
there is no button for such action

Describe the solution you'd like
add button for sponsor

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

To select a functionality using a button click
example: click 8 to draw

we can add a feature in which we can choose custom background color

Describe the solution you'd like
A hovering effect over the icons to make the UI look better. Also, add a border to the color while clicking.

As a user, I Should be able to erase the drawing that I made so that I can remove the unwanted parts of the drawing.

Home page here can be created to give user more information about how draw it out works.
kindly assign this issue to me under GSSOC 24

Describe the bug
whwn different is picked from the pallette.all the contents get erased.

To Reproduce
Steps to reproduce the behavior:

1. draw on canvas
2. go to color pallete
3. Click on different colour
4. See error

Expected behavior
all the content should remain

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]

@singodiyashubham87 assign it to me

it makes it easy while making mistake

Problem:
It is difficult to use an online drawing board that lacks the option to add text. Nowadays, people frequently write text on the drawing board, while drawing can convey ideas visually, sometimes adding text annotations or labels is essential for clarity and communication. Without this feature, users may struggle to convey specific information or context within their drawings, leading to misunderstandings or confusion.

Solution:
I would like the online drawing board to include the option to add text to the canvas. This feature would allow users to insert text boxes, type in annotations, or label different parts of their drawings directly.

We recommend that every repo has a code of conduct. If you don’t feel comfortable creating your own Code of Conduct from scratch we highly recommend using one of the templates provided by GitHub. If you do use a template, please read through the template and ensure that you can and will abide by the Code of Conduct.

Please follow these instructions on how to add a Code of Conduct.

Sample: https://github.com/Recode-Hive/Stackoverflow-Analysis/blob/main/CODE_OF_CONDUCT.md

If I try to draw something and hit the boundaries, the brush gets deselected.

Is your feature request related to a problem? Please describe.
Users often make mistakes while drawing and need a way to undo or redo their actions easily.

Describe the solution you'd like
Implement undo and redo buttons or keyboard shortcuts that allow users to revert or replay their drawing actions.

Describe alternatives you've considered
An alternative could be a step-by-step history panel that users can navigate to undo or redo specific actions.

Additional context
This feature would greatly enhance the user experience by providing a safety net for correcting mistakes during drawing sessions.

Is your feature request related to a problem? Please describe.

Export Options: Allow users to export their creations in various formats (PNG, JPEG, SVG, PDF) and resolutions.

Describe the solution you'd like

We can add options to the save image with different options like save as PNG, JPEG, SVG, PDF,JPG etc.

Describe the changes that you want to make in the documentation
Create a new section in the documentation that explains how to use the basic drawing tools available in Draw-it-out, including the pencil, eraser, and color picker.

Significance of the changes made
This will provide new users with clear instructions on how to utilize the essential drawing features of Draw-it-out, improving their overall experience with the application.