SketchSpace banner

SketchSpace

16 devlogs
167h 14m 11s

This is a browser based whiteboard platform that lets you instantly draw, write, and create anything you imagine. You can sketch, colour and use essential whiteboard tools without needing to sign up or pay for features. All work is also saved to your browser, so you can come back at any time to view or edit your creations.

I wanted to create this project because whenever I needed a simple whiteboard to explain ideas to friends or create flowcharts, mind maps or brain dumps for school, most online tools required an account or made you pay for basic features. This whiteboard platform will solve this by creating a non sign in tool that anyone can use with tons of features.

Loading README...

asjblue28

Shipped this project!

This is SketchSpace, a whiteboard application that allows you to draw and visualise ideas directly within your browser without having to sign up or pay for features. You can draw, add text, use shapes, use layers, have multiple whiteboards and even export your whiteboards for use elsewhere. Your whiteboards are also saved directly within your browser, so you can pick up where you left off whenever you want.

I created this project because whenever I needed a quick whiteboard for explaining ideas to friends, building flowcharts, or doing brain dumps for school, most online tools required an account or locked basic features behind a paywall. SketchSpace solves that problem by being a fast, no sign up whiteboard that anyone can use instantly. This project taught me a huge amount about web development, especially working with React, canvas rendering, state management, and browser storage. I’m really proud of how it turned out, and I hope you enjoy using SketchSpace as much as I enjoyed building it!

asjblue28

Today I fully refactored SketchSpace from the traditional HTML, CSS and JS to use React through Vite. This was a big step for me as I am slowly getting more comfortable with more advanced web frameworks like React. This wasn’t as hard as I would have expected as I have already refactored another project (Classify) to React. I took most of my JS and moved it into a whiteboard.js file and then incorporated the html/css into the main component. I do admit, I need to get better at splitting up my pieces of code into multiple components as I read that you are meant to have each component only perform one action/use in React. Overall, supper happy with how the refactoring went, hopefully you guys like SketchSpace!

0
asjblue28

Finally, this is the last devlog. I wanted to fully polish off the project before submitting so I fixed the minor bugs on mobile that were popping up such as the text tool bugging and flying off the screen or the selection tool not working properly. I also added the ability to resize your selections with the selection tool which was a feature I was missed from professional whiteboard tools. Hope you guys enjoy!

Attachment
0
asjblue28

We are finally coming to the completion of my whiteboard project! Today I did some bug fixes, mainly an issue where it was very hard to use the text tool on mobile as you would have to hold down with one hand and type with the other. Now you just tap once then are free to type your text. I also added a website icon that I think looks very nice and fits the theme of my website. I then added a pan tool so that users who were on mobile or couldn’t use (space + drag) would be able to pan the canvas. I also fixed a quality of life issue where the undo/redo tool only undid/redid parts of a line, not the whole line/stroke which was annoying as you had to click undo/redo multiple times to get the desired outcome. This was difficult to recode as I had to almost completely change how lines were stored in order to achieve the desired outcome/quality. I will probably ship this in the next few days and start another project unless I get the urge/inspiration to code some more features. Honestly, I am so happy that i decided to undertake this journey of coding and I think this website is really nice and to a high level of quality. I hope you enjoy using it just like I enjoyed making it!

Attachment
0
asjblue28

Today was quite a calm day, spent most of today just adding quality of life features as well as bug fixing and adding mobile support. I added a magnifier tool on the bottom right that allows users to see how far they are zoomed in, it also means that users can now zoom in/out on mobile as they couldn’t before (no scroll). I also made my icons much better as they looked quite bad. As i mentioned before, the paint bucket tool was extremely buggy, it would not work and constantly bug out when zooming in/out so i completely fixed that. I had to almost rewrite the whole function for it but it was worth it as it is much better now. I also fixed some bugs that were occurring on mobile, such as the drawing bugging out and some tools not functioning properly. The one main bug that I still haven’t fixed is that the text tool is really finicky on mobile and often does not work (you have to hold it down with one finger and type with the other), so I need to fix that. Overall, nearing the end of my project and can’t wait to see what I do next!

Attachment
0
asjblue28

Today I added a much needed feature to my whiteboard that I think will elevate it above the rest. The selection tool. This tool will allow users to select parts of their drawings and move them around, delete them or copy/paste. This is incredibly useful as it means that you don’t have to erase or redraw if you want to change a part of your drawing. You can just select it and move it around! I was only able to add this tool today as it was quite a big one, requiring me to code all the of selection boundaries as well as implementing copying/pasting the selected portion + moving/deleting. Now, the main things left are adding a dark mode and fixing the bucket fill tool which is extremely buggy. I was also testing the website on mobile and the support is alright, as you cannot scroll out, pan, or even delete/copy/paste your selections. Which is something I will try to improve.

0
asjblue28

Spent the entirety of today working on making the UI of my whiteboard better. Specifically the sidebar as it was cutting out at the bottom of smaller screens and just didn’t match the vibe/feel of what I was going for. I ended up making the background of the sidebar white, it is now also scrollable on smaller screens where the bottom may get cut out. I also added some visual seperation between the whiteboard and sidebar for a nicer more professional feel. The next thing on my agenda is making a dark mode as well as continuing to add more features such as selecting and copy/paste. I do need to fix the functionality of some current tools, mainly the bucket fill tool which is very buggy especially when scrolling or panning, but that can be done later once all the features I have in mind are added.

Attachment
0
asjblue28

Today I added 2 major features of the whiteboard. These were the ability to make multiple layers and allowing the user to create multiple whiteboards/canvases. These were crucial as they allow users to have more than one drawing/whiteboard at the same time and use layering for easier drawing/writing. These features are also in many paid whiteboard apps/websites and it is nice that I managed to add it to mine which is free. I have been saying this for the last few devlogs but the next thing I need to do before anything else is revamp the sidebar and it’s look/support. This is because the bottom half is not appearing on smaller screens and removes so much functionality. I will either need to make it resize depending on the screen or just revamp is completely. Overall, amazing work done today and I can’t wait to fix the sidebar.

0
asjblue28

Today I added pan/zoom functionality as well as an export canvas feature. The pan/zoom was quite tedious to add as I kept running into bugs and errors where the drawings/lines would bug out and completely disappear or just duplicate over and over as you tried to pan or zoom. Eventually, I managed to figure it out and I am very happy with how the final product turned out. The user now has much more room to work with and can easily zoom out/in and see all of their drawings. The other feature I added was an export button that allows the user to download a png of the current canvas window. This was much simpler than the zoom/pan but still took a bit of time to figure out. But, the main issue now is that the info button is not visible at the bottom of small screens, which is the main issue I need to fix/improve. Overall, I am extremely happy with today’s work. The next things I want to add are multiple layers and multiple canvas pages.

0
asjblue28

Today I made a text tool and bucket fill tool. The text tool was particularly frustrating as once the user typed in the text, it had to be made into a drawing which could then be erased and selected like normal drawings. The bucket tool was easier but I struggled with defining areas that are completely enclosed by a line or drawing. It is kind of glitchy right now but is acceptable. The main issue that appeared with the addition of today’s tools was that the side bar now gets cut off on smaller screens which is why I need to make it auto resize depending on the screen size. Overall, good work done today, the main things I need to do now is to add more features but more importantly make it look better and more aesthetic.

Attachment
0
asjblue28

Today I worked on adding an undo and redo button as I felt it is an essential feature of many online whiteboards and is a great quality of life addition. I made these buttons also have their respective commands (Ctrl + Z, Ctrl + Y). I then added some basic shape tools to the whiteboard that appears in a popup when clicked on the sidebar. These include (Line - L, Rectangle - R, Circle - O and Arrow -A). These features took a long time because I have to make all actions save in sequence so they could be redone and undone. I also needed to make the shape tools update and resize as you drew them. Overall, happy with the work done today and my whiteboard is coming together. Although, once all of the features I have in mind are finished, I will need to make it look much better as it’s quite an eyesore right now.

Attachment
3

Comments

Rei
Rei 18 days ago

aiii this proj is niceee :DD
will u make it professional?

asjblue28
asjblue28 18 days ago

Ay thanks! Its pretty barebones right now but adding lots of features and making it look professional is the goal :)

Rei
Rei 17 days ago

ohh nice nice love that :DDD

asjblue28

Today I learned about how mobile touchscreens work and how to properly implement mobile support into the whiteboard. This was frustrating as I kept failing and getting errors. I finally managed to get a somewhat ok experience on mobile which I will take as a win. I also added functionality to the clear all button (you can now clear the canvas) as well as some basic keyboard shortcuts which you can find from the popup menu (P - Pen, E - Eraser, C - Clear). The next thing I need to do is make the mobile support better and start thinking of and adding more features to the whiteboard as it is pretty bare bones right now.

Attachment
0
asjblue28

Spent today just learning about how browser storage / local storage worked and how you can save variables and information to the browser in things like caches or cookies. I managed to get the storage working so now your drawings persist on reload and reopen. I still haven’t added the clear all functionality which is one of the main things I have left. Overall, good progress today, my project is nearing completion.

Attachment
0
asjblue28

Spent today just making most of my sidebar work. You can now change the colour, pen thickness, eraser thickness and select between the pen and eraser mode. I still need to add browser storage and clear all functionality but I am very happy with what I managed to accomplish today. I am starting to understand and become more familiar with Javascript, CSS and HTML which is good as it means my knowledge is increasing. Overall, good progress today can’t wait for tomorrow.

Attachment
0
asjblue28

Another long day today. Basically spent all of the day learning how javascript worked and how it ties into both css and html. I managed to get some basic drawing functionality. None of the sidebar works as of yet (changing colours, thickness, erasing), but at least the user can now draw. I will most likely spend tomorrow adding more drawing functionality. Overall, I am extremely happy with todays progress and how I am progressing with this project!

Attachment
0
asjblue28

Spent all of today learning how css worked. This is because I am doing this challenge to start coding and have basically no coding knowledge. Took a long time to understand all the concepts and how to make stuff look good in css. I am pretty happy with how my whiteboard turned out. Now I just need to add all of the javascript functionality and save it to the browser which I assume will take me longer than learning the css. Very happy with how my learning is going and I am excited to learn more!

Attachment
0
asjblue28

Added the basic structure for the html section of the website and created a canvas element that will be helpful in the future when creating the website. It does not look too good right now but as I add the css and js functionality it will look much better.

Attachment
0