WebWhiteBoard

💡Inspiration

For me necessity was the biggest inspiration. Despite there being a dozen whiteboard apps, every one of them lacked the simplicity of a traditional chalkboard. They have logos, menus, tools that take away a big part of the screen, and too many complicated tools that are distacting and reduce their ease of use. Some of them offer limited functionality in their free plan and don’t run offline. I tried to fix all these issues with WebWhiteBoard.

🖍What it does

It gives you a simple no-nonsense whiteboard, the entire size of your browser/screen, without any branding, menus or other space consuming/over complicated features whatsoever. Just launch the app on our qoom link and you are good to use it. After you fill up the screen, take a screenshot to your computer, and refresh the page to generate another blank screen. Anyone can start using it instantly, with no sign up required. It only has a single red colored pen right now, just like how my teachers would use a white chalk back in the physical (pre-Covid) classroom, to keep things even more simple.

💻 How we built it

I used Qoom.io, an all-in-one web development platform based in the cloud. I had to learn JavaScript to actually make the drawing part. Also, I used HTML’s canvas element to convert the screen into a giant whiteboard. I used CSS for resizing the border, and even more JavaScript to make WebWhiteBoard responsive to different screen layouts so that you still get maximum real estate for drawing, no matter the dimensions of your window.

🛑 Challenges we ran into

One of the major challenges was learning JavaScript (this is my first project where I used JavaScript), so I naturally made many errors, but the qoom tool helped me by explaining the error/warnings and telling me how to get rid of it. It also gave me instant previews while I was writing my code, so I could immediately fix it if something went wrong.

Another challenge I faced was having to compromise between simplicity and features, for instance, I tried using the cool login and database APIs from qoom, but I saw that they complicated stuff, so had to remove them with a heavy heart, in order to stick with the simplistic theme of my project.

🏅Accomplishments that we're proud of

• Making a simple, yet effective tool for online teaching during the covid time.
• Replicating the convienience and simplicity of the physical chalkboard in a browser.

📖 What we learned

So, what I learnt was not just limited to CS or WebDevelopment. I learnt a lot about how different colors affect learning. I went through scientific research that shows that the color red is exciting and captivating, and enhances cognitive skill and memory. So, your students are more likely to focus if your notes are in red color, which is why WebWhiteBoard uses just the red color for ink.

📈 What's next for WebWhiteBoard

I am going to add a couple of features that will make it more usable, but wont affect the simplicity it offers currently. I will also be making it more of a chalkboard in the future with that kind of ink, and also provide different ruled/graph sheets as backgrounds in order to make notes neater. I will also add more inks and a stroke eraser soon, and an option to save your whiteboard annotation directly to your computer, instead of having to manually screenshot it.

Built With

• canva
• css
• html
• javascript
• qoom